ホームページ制作で心得たい見た目・レイアウトの統一感の重要性

印象と使いやすさの重要性

ネットユーザーはなんらかの情報を得る目的や商品やサービスを探して、検索などを通じてホームページへとやってきます。

その時、見た目がちぐはぐな色やデザインのホームページである場合や検索したい情報や商品、サービスとはかけ離れた見た目のホームページであったらどうでしょうか。
信頼できないと感じる場合や自分が興味を持ったものとはイメージが違うようだと、その場ですぐに離脱してしまうかもしれません。

せっかく訪れたのだから、ちょっと情報を見てみようと思いとどまったとしても、レイアウトがバラバラで使いにくく、ほしい情報へとうまくたどり着けなければ、やはり途中で離脱してしまいます。企業が求めているホームページによる集客からアクションへとつなげる目的は達成されません。
せっかくコンテンツ情報を充実させたとしても、これでは意味がありません。
それゆえ、見た目やレイアウトの統一感も大切になってきます。
では、どのようにして統一を図っていけば良いのでしょうか。

見た目の統一感

見た目の統一を図るためには、カラーや文字のフォント、画像、デザインに一定のルールを設けるなど統一を図ることが大切です。

カラーの数を絞る

目立たせるためにカラフルにしたい、強調したいところの色を強めたい、コンテンツごとのイメージに合わせて色を変えたいというのは、統一感を乱す原因になります。
基本はメインカラー、ベースカラー、アクセントカラーの3色を決め、明度や彩度も統一しましょう。
メインカラーはコーポレートカラーにすることやブランドイメージに合うカラーにするなど、ホームページの内容も統一感あるとユーザーが安心します。

フォントを決める

ホームページでは主に見出し用のフォント、本文のフォント、英文のフォントの3つを決めておくことがポイントです。これ以上多くのフォントを用いると統一感がなくなり、見た目が悪く、読みにくくなるので注意しましょう。

画像の明度や彩度

ホームページ内には社長やスタッフの顔写真や商品の画像をはじめ、製造工程の写真、施工実績などの写真などさまざまな画像を掲載します。
ですが、その明度や彩度がバラバラでは見た目が悪くなります。
社長の写真は色鮮やかなのに、せっかくの商品写真が暗い、施工実績の写真が薄暗いといったことがないよう、キレイに見える明度や彩度で統一を図りましょう。

コンテンツデザインの統一

各コンテンツのデザインも統一しましょう。
見出しやボタンのデザインをはじめ、テキストの文字間や行間、コンテンツ間のマージンなどのルールを設け、コンテンツごとにバラバラにならないようにします。
特にコンテンツを後から追加するような時は気を付けましょう。

レイアウトの統一感

ユーザーは一定の規則性があることがわかると、情報を把握しやすくなります。
そのため、同じカテゴリのコンテンツにバラつきがあり、統一性がないと情報を理解するのに時間がかかってしまいます。
短時間でスムーズに理解し、さまざまなコンテンツに目を通してもらうことや到達させたいアクションまで結びつくよう、レイアウトにも統一感を持たせましょう。
統一感を持たせるには、以下の点がポイントです。

近接性

関連性の高いコンテンツは近接させ、逆には関連性の低くなるほど遠くに配置し、情報の関連性が高いグループをまとめましょう

整列

位置を揃えて情報を見やすくしましょう。

メリハリ

最初に目にしてほしい情報や注目してほしい情報は強調したり目立つようにして、それ以外は抑えめにするのもポイントです。
ユーザーは、見た目にインパクトがある情報、印象が派手である場合や大きな情報から、印象が弱い、地味な情報へと順次見ていく習性があります。
この習性に沿ったレイアウトやデザインにすることで、内容が見やすく、頭に入りやすくなるのです。
そのため、各コンテンツでは、タイトル→本文→備考といった流れで、目に入るようにレイアウトしましょう。

反復

同一グループの要素はデザインを統一し、繰り返し反復させて配置することで、統一感が生まれます。
繰り返しのルールをユーザーが一度理解すると、情報の理解を効率化することにつながり、求めているアクションにも到達しやすくなります。