◇　読みやすいWebサイトって？　◇

 

 

 

現在は、ほとんどの建設業の会社がWebサイトをもっています。

そのWebサイトはお客様に読んでいただいていますか？

 

Webサイトはたくさんの情報を掲載できます。

しかし、たくさん情報を掲載していても、読みにくいためにせっかく訪問してくれたお客様が、そのWebサイトを読むことなく離脱してはもったいないですよね。

 

読みやすいWebサイトのポイントは「余白」です。

見やすく、わかりやすい、読みやすいサイトは、しっかりデザインされた余白が活用されています。

 

今回は、お客様に読んでいただくためのWebサイトの「余白の活用方法」についてご紹介します。

 

 

 

余白は、文字や画像等何も配置されていない空白の部分を表します。

何も書かなければ余白は勝手にできるものですが、意識して余白を活用することによりとっても読みやすいWebサイトになります。

 

余白の効果

・読みたくなる

余白自体は何も情報はありませんが、他の情報に効果をもたらします。

その効果とは、お客様が「読みたくなる」ことです。

文字や画像が詰まっていると、窮屈で見づらく「読むのが面倒くさい」という印象を与えがちですが、余白を入れることで情報が整理され読みやすくなるので、お客様が読みたくなるのです。

 

・高級感がでる

余白を使うと、Webサイトのデザインレイアウトの自由度が高まり、表現がしやすくなります。そして余白の量により印象が変わり、余白を多く使うとシンプルで高級感があるという印象になります。

余白はスペースに余裕やゆとりをもたせて持たせてくれるので、余白の中の情報の価値を高めることができます。

 

・情報を強調できる

余白を使い情報と情報の間隔を広くすると、情報の区切りがわかりやすくなります。

そして余白の真ん中に置かれたものに目が行くので、強調させるためには、余白を使うのがポイントです。

 

 

効果的に余白を使うにはどうしたらよいのでしょうか。

余白はあれば良いというものではありません。

しっかりデザインされた余白だからこそ、意味があります。

より読みやすいWebサイトのデザインにするためにデザインの基本原則をご紹介します。

 

1.  グループ分けをする

近接 (Proximity)

近くに配置されたものは、無意識のうちにグループとして認識します。

それは近くのものは関係性が高く、遠くのものは関係性が低いと感じるからです。

この認識を利用して余白を設定しまします。

情報の関連性を考慮し、同じ種類、同じ系統の情報は近くに配します。

 

2.  揃える

整列 (Alignment)

先ほどの「近接」と同様に無意識に情報の関連性を理解できるのが「整列」です。

ワードやエクセルで使う「文字揃え」

文字揃えには、左揃え、右揃え、中央揃え、両端揃え等がありますよね。

読みやすいデザインには「揃える」ことがポイントになります。

目的に応じて余白を使って、文字や画像を揃えることにより情報が整理されます。

 

3.  強弱をつける

コントラスト（Contrast）

「この文字を強調したい」と思ったとき、その文字を大きくしたり色を変えたりすれば強調できますが、余白を使えば同じフォントスタイルでも強調できます。

しかもフォントを変えたり、色を変えたりするよりシンプルでおしゃれです。

情報の優先順位を考え、重要な項目はより強調するなど差別化をしましょう。

 

4.  デザインを繰り返す

反復 (Repetition)

たとえば、「近接」のときに使った余白の設定テクニックを１つの規則として、その規則を繰り返し使うと、Webサイト全体にリズムが生まれ統一感がでます。

 

この４つは「デザインの4つの基本原則」です。

写真や図を使って資料を作成する時も同じです。

デザインの４つの基本原則を使うことで、情報を整理することができるのでぜひ使ってみてください。

 

 

お客様は視線をどのように動かし、どのような順番でサイトをみているのでしょうか？

人には無意識に視線を動かす法則があります。

その法則を意識することによって、お客様が読みやすいWebサイトとなります。

 

視線の誘導

視線を動かす法則で視線の誘導を行い、お客様が注目している場所から、読んでもらいたい場所に視線を誘導させます。

視線の誘導には代表的な法則があります。

 

・Z型の法則

Z型は、お客様の視線は左上、右上、左下、右下の順番に、アルファベットの「Z」の文字を書くように視線が動くと考えられている法則です。

Zのラインに沿って情報を配置すると、無意識に視線が移動するのでお客様が読みやすいサイトとなります。

実際に、WebサイトのトップページではZ型のレイアウトが多くなっています。

 

・F型の法則

F型は、お客様の視線は左上から右上に視線を移動させ、左に視線を戻し、下に向かって視線を移動してから、再度右方向に視線を移すことを繰り返し、アルファベットの「F」の文字を書くような順番で視線が動くと考えられている法則です。

F型はリピーターによくみられる視線の動きであり、お客様は左揃えになっている見出しや冒頭の主題文に自分の興味のある情報があるか探しながら、ページの下へ読み流し、興味のある情報を見つけたら右方向にすすみます。

商品説明や、文字の多いニュースサイトはF型のレイアウトが多くなっています。

 

 

いかがでしたでしょうか？

余白はただ余った白いスペースではありません。

余白を意識して、「お問合せボタン」など強調したいところには余白をとったり、連続したテキストでも適度な余白をとることによって、リズムが生まれより見やすくなります。

また余白をとることにより、シンプルで美しいWebサイトのデザインになります。

グループ分けをする、揃える、強弱をつける、デザインを繰り返すという法則を意識することで、伝えたい情報を整理してお客様に伝えることができるのでぜひ活用してみてください。

これらの法則は、Webサイトだけでなく、資料作成などにも応用できますので、お客様へのプレゼン資料作成のときなど、ぜひ実践してみてください。

 

弊社は建設業特化型のホームページ制作会社です。

ホームページ運営のお困りごとや、リニューアルの相談などありましたら、ぜひ弊社までご相談ください！！