コーポレートサイトのデザインセンスが上がる7つのコツ

コーポレートサイトのデザインセンスが上がる7つのコツ
Pocket
LINEで送る

「デザイナーじゃないのにコーポレートサイト(企業のWebサイト)担当になってしまった」
「プロに頼む前に一度自分でやってみたい」
「お金がなくて発注できない!」

コーポレートサイトを作成・更新する立場になる人、なってしまう人は意外と少なくないようです。

センスないからなぁ……とお嘆きの方もいらっしゃるかと思いますが、Webサイト制作、管理に必要なのはセンスではありません。おさえるべきコツさえきちんとしていれば、素人感のあるダサいサイトにはならないのでご安心を。

※本記事中では具体的なhtmlのタグの扱いやWordPressの操作方法ではなく、その大元のどんなサイトを作ればいいのかという「コツ」をお伝えします。

1 センスがよくなるサイト作りのための準備と情報デザインのコツ

「よっしゃー! サイト作るぞー!」といきなりWordPressの管理画面に向かったり、ホームページ作成ソフトを立ち上げようとしたあなた。すみません……それ、既に失敗してます。

サイト作りはセンスだ! と思っている方に特に多い失敗パターンがこれなのですが、よくよく考えれば当たり前の工程が抜けていませんか?

そう。運動する前には準備体操。料理する前には下ごしらえ。Webサイトを作るのも同じです。まずは何を載せて、どんなサイトにするのかを決めないといけません。

ちょっとかっこよく言うなら「情報デザイン」から始めましょう。

手順は簡単です。まずは材料を集めます。
以下に代表的なものの例を挙げてみます。
・会社概要
・製品、サービス情報
・キャンペーン
・取り組み
・技術情報
・サポート情報
・お知らせ
・お問い合わせ情報

全部必要というわけではありませんし、企業ごとに取り組みもサービス(製品)も違うはずですから、「自分の会社はどんな会社なのか」という情報を集めてみます。自分がわかっていないとそれを見る第三者はよりわからない情報になってしまうので、わかりやすさを心がけましょう。

ここまで出来たら、どこでページを切り分けるか、まとめるか、どういう順番で見せたらわかりやすいのかを考えて切り分け、並べ替えをしてみましょう。

写真などの素材まで準備出来れば完璧ですね。

2 コツをつかむためのトレンドのリサーチ

「よっしゃー! サイト作るぞー!」という方……もうちょっとだけ我慢です。

Webの世界は日々変化しています。昨日まで当たり前だったことが急に非常識なんてこともあるのがWebの世界です。

デザインのテイスト、表現方法ではそこまで極端なことはすぐには起こりませんが、流行り廃り、トレンドがあるのは否めません。

画像の使い方や配置、文章自体の文字量、使いやすさはひとつのポイントになりますので、そのあたりに気をつけて同業他社、競合サイトもしくは誰もが知っている企業サイトなどを眺めてみてください。

眺めるだけでなく、是非いいと思ったサイトはブックマークをするか、いいと思ったポイントのメモやスクリーンショットなどを残すようにしましょう。

でも、ひとつだけ注意もあります。流行っているものや、トレンドがそのまま自社サイトにマッチするかどうかは別なこともあるので、取り入れたほうがいいもの、敢えて外した方がいいものなど一度検討の余地があります。

例えばですが、縦長のページが流行っているとします。それ、たくさんの情報が一度に出ることでわかりにくくなることはないですか? 先程準備した情報の材料と照らし合わせてみてください。

3 デザインを決める上で、デザインしない……というコツ

「よっしゃー! サイト作るぞー!」「……? 大丈夫ですか?」と思われた方。正解です。

ここまで来るとおわかりかと思いますが、「センス」って勢いだとか感覚に頼って「考えない」ことにつながっていることが多いんです。しっかり準備して、考えてから作っていく。これさえわかってもらえれば良し悪しを判断する「センス」はおおいに発揮していただいていいと思います。

若干話が逸れましたが、次はいよいよ自社サイトのデザインを決めていきます。

が、デザインはしません。1から作りません。

センス発揮していいって言っておきながらのなかなかの仕打ちです。……ですが、まだ匙はなげないでください。もうちょっとだけ我慢して読んでみてください。

これも冷静に考えればわかることなのですが、コーポレートサイトはデザイナーやデザイン会社に発注して作られることが多いです。何十万も何百万ももしかしたら何千万もかけて作られています。作っているのはプロです。専門家がそれなりの時間をかけて作っているのです。
このサイトと並んだ時に勝てますか? 勝てないまでも並んで違和感ないものが作れますか?
おそらく難しい、厳しいと思われたからこそ、このサイト、このページを開いてもらったのだと思います。

でも、だからこそ言います。コツは自分でデザインしない、作らないことです。

「じゃあ、じょうすればいいんだ!」…ということで先程のトレンドのリサーチで見たサイトや他に知っているかっこいいサイトがあればそちらを参考にします。それらのサイトを見比べてみるとわかるかと思いますが、共通点ないですか? 少し具体的に言うとメニューが並んでいるところ、大きい画像、小さい画像、記事の並び方などなど。「Webサイト」であるという制約、「コーポレートサイト」という制約があるとそもそも100%のオリジナリティはないことがわかるのではないでしょうか。

もちろん使っている画像、写真やキャッチコピー、情報の中身はオリジナルであることは大前提ですが、並べ方、レイアウト段階のデザインは1から考える必要はなく並べ方のセオリーがあるので、セオリーから逸脱しないことは大事なコツと言えます。一般のユーザーもこのセオリーに則ったデザイン、レイアウトに見慣れているので情報を受け取ってもらいやすいという利点もあります。

4 内容が読みやすい文章、文字のデザインのコツ

まずは大きいレイアウト部分のデザインを見たので今度は中身レベルのデザインのお話です。

「よっしゃー! サイト作るぞー!」と今回はワンテンポ遅れてきたこの勢いですが、この勢いでやると文字にシャドウをつけたり、大きくしてみたり、中央にばーん! ともってきたり、時には右揃えにしてみたり、背景色や文字色をどんどん変更したり……してませんか?

同じことをパワーポイントの資料で作って見にくいって怒られたことないですか?

デザイン上で一番重視いないといけないのは、見やすいこと、きちんと情報が伝わることです。かっこよくても読みにくかったらダメです。(そもそも読みにくいデザインはかっこよくないですが……)

リサーチしたコーポレートサイトをもう一度見てください。上に挙げたシャドウだったり、色だったりやってましたか?
伝えるべき情報は奇をてらわない、正直なデザインが重要です。
個性が……と思われる方。企業としての「信頼性」、「安心感」という個性は必要ないでしょうか?
王道の配慮がきちんとできるということも立派な個性です。

文字はバラバラな印象を与えないように左に揃えるならきちんと全部揃えましょう。行間の空け方をなんとなくせずにきちんと統一感のある改行、余白を心がけましょう。これは実際にhtmlなどを触る時にも配慮したいポイントです。

この当たり前が当たり前にできるとグッとコーポレートサイトらしくなってきます。

5 配色のコツ

コーポレートサイトに限らずですが、失敗しているサイトの典型例が色を使いすぎているというものです。

ここは目立たせたい、ここは別の要素だから、キャンペーンだから……などなどたくさん色を使っていくと統一感がなくなるばかりか、逆に目立たせたいものがどんどん埋没していったりします。

これも他のサイトを参考に……と言いたいところですが、企業には企業が持っている色があると思うのでここは別のコツをお伝えすることにします。

企業の色というとロゴに使っている色、看板に使っている色、名刺に使っている色などがあるかと思います。これらは企業イメージに直結するものなので、Webサイトでも共通性をもたせましょう。当たり前と思われうかもしれませんが、ここがポイントのひとつめです。

で、実際に配色を考えていく段階ですが、失敗しないために敢えて、2つのやり方に絞ってお伝えします。

5.1 配色のバランス

ひとつめ。
企業の色が複数ある場合。例えば黄色と紺のような2色の場合ですね。この場合や他に3色以上の色をお持ちの場合でもWebサイト上でメインで使う色は3色までにしましょう。
バランスも決まっています。
70:25:5の割合にしましょう。70はベースの色多くは背景の白や薄いグレーです。25が企業のメインとなるキーカラー。5が差し色と言うべく目立たせたり、ポイントになる色に使います。
これだけで統一感が出ます。

5.2 同系色

ふたつめ。
企業の色が単色の場合。例えばブルーが企業の色の場合。この時は同系色だけでまとめてみましょう。ブルーと水色と白、あとは間の濃さでの構成です。元の色が薄めの色の場合濃い色を持ってくるのもいいでしょう。もともと同系色のみで構成するので、自然と統一感は出ます。割合で迷ったらひとつめと同じ70:25:5を意識してみましょう。濃い方、薄い方どちらがメインになっても割合がコントロールされていれば色の役割はきちんと立つはずです。

6 魅力的な写真を使うコツ

写真の使い方のコツも自分で考えない方が無難です。かっこいいサイトを参考にしてみましょう。

写真のコツとしてのポイントは大きく2つです。

6.1 素材

いい写真、いい素材を持ってくる。これがひとつめのポイント。写真がうまい自信があるのなら納得のいく写真を撮影して使いましょう。そうでない方、そもそもカメラ持ってないよ~という方もご安心をWebには有料、無料問わず素材を扱うサイトもありますのでこれらを使いましょう。著作権もクリアされた状態で安心して使えます。間違っても検索して出てきた画像をそのまま使うことがないようにしましょう。ヒントとしては「CC0」で検索すると幸せになれるかもしれません。
……あ、自社のオリジナル商品だけはWeb上にないはずなので、頑張って撮影するしかないですね。

6.2 切り取り

もうひとつのポイントが切り取り方、トリミングです。
写真の比率はほとんどのカメラ、スマートフォンの場合4:3か16:9などになっているかと思います。これをそのまま使うと正直いい写真でもダサくなったりします。というのもWebサイトは基本的に横に長い情報が縦に積み重なっているという構造なので、閲覧する端末の都合もあってかっこよくなりにくいんですね。上下を切るなどして横長の画像にしたりすると収まりが良かったり、かっこいいサイトに近くなっていったりします。
もちろん、レイアウト次第なところがあるので、個別の判断は必要です。

7 絶対失敗するコツ

 

敢えてですが、これをやれば必ず失敗するコツをまとめておきます。逆に言うとこれをやらなければいいということです。

・画像処理が甘い
解像度が足りてなかったり、透過がきちんとできていなかったりです。

・関係ない画像が掲載されている
なぜか突然海外のユーモア溢れるおじさんが登場したりです。唐突な富士山画像などもちぐはぐな印象を与えます。好きなものを載せるという考え方は危険です。

・色がケンカしている
これは配色のコツの真逆の状態です。

・コンテンツどうしの感覚が狭すぎる、広すぎる
言わずもがな、読みやすさを心がけるべきです。

・ページを移動するとバラバラな印象
意味があってレイアウトを変更したり、構成を変えるページはあってもいいのですが、同じ構成のはずなのになんかずれてる……はユーザーに違和感を与えます。例えばロゴの位置が大きくなったり小さくなったり、ページによって左にあったり、右にあったり……。

・グラデーションつかいまくり
「グラデーション」って知ってると、または覚えると使いたくなってますか? 意味のないところで使ったり、グラデーションを使うためのグラデーションになっているとすごいダサいです。

・エフェクトつかいまくり
グラデーションと同じくやりたい気持ちはわかります! 特にIllustratorやPhotoshopなんかが使えると機能がたくさんあるので盛り込みたい気持ちはわかりますが、ダサい原因はそれです。

8 まとめ

ありそうでない「デザインのコツ」をまとめてみました。
実際に作業を始めると細かく写真のコツ、文字デザインのコツ……とありますが、いきなり細部を伝えられてもできるわけがありません。

まずはしっかりと失敗しないポイントをおさえてデザインセンスを向上させていきましょう。

センスじゃダメって言ってたじゃん……と思ってるあなた。試しにこのコツやってみましょう。そいするとあら不思議ダメって言ってたセンスが…!?

ただ、ツールが進化したとはいえ万能ではないので、どうしてもという時はプロに頼むという選択肢も考えるといいかもしれません。

Pocket
LINEで送る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です