困った時は視線の流れを意識したレイアウトをしよう

ホームページはコンテンツ内容が重要なのはもちろんのこと、見た目やレイアウトも大事です。コンテンツ内容が素晴らしい物でも、中身が読みにくければ読んでくれる人が減ってしまうかもしれません。
例えば、文章が多くても文字が小さいと読みたくなくなりますし、赤色の文字や黄色の文字などたくさんの色が使われているコンテンツは、そこが重要で読んで欲しい部分なのかわからなくなってしまう人も少なくありません。
ですからレイアウトはとても大事です。

今回は、ホームページに掲載するコンテンツのレイアウト方法について、ご紹介していきます。

レイアウト、どう決めていますか？

皆さんはコンテンツのレイアウトを考えるとき、どのようなことを意識していますか。
見た目スッキリな印象を持たせるように、フォントは小さ目、単色で派手な装飾も一切なしといったパターンや、販売したい商品を目立たせるため、画像を大きくする、コピーライティングを多用した構成にするなど、いろいろあると思います。
レイアウトをどのようにしていくかは、そのホームページの目的、特性によって考え方は様々あります。
しかし、一つレイアウトの決め方で、重要なポイントがあるのをご存知でしょうか。それは目線です。画面を見るユーザーの目線は、ほとんどの人が一定の動き、つまり、上から見て行って、下に移動していくという「自然な視線の動き」が見られます。
この視線の動きに基づいて、コンテンツを順番に配置していくと好ましいでしょう。

視線は上から下へ移動する

人の視線の動きで最も自然な視線の動きが「上から下」への移動です。これはホームページに限りません。本や雑誌、マンガなどを読んでいる時、縦書きの場合でも横書きの場合でも基本的には上から下に向けて読み進めていきますよね。
そしてこの上から下への視線の動きには、大きく3つのパターンがあることがわかっています。

「グーテンベルグ・ダイアグラム」

「グーテンベルグ・ダイアグラム」とは、左上から右下へ、視線が流れていく傾向を利用したレイアウト、考え方です。

利用例
・テキストが多いコンテンツが多くある場合（グリッドデザイン）

ポイント
・重要な情報は左上、中央、右下とナナメ下と視線の動きに沿って配置し、その逆である右上、左下には重要の情報は置かない

「Ｚ型」

チラシに多く見られるレイアウトです。視線の開始地点は左上、そこから右上→左下→右下に流れる動きを意識しています。

利用例
・商品販売ページ（じっくり最後まで読んでもらい、購入ボタンを最後に設置）

ポイント
・テキストと画像が交互に並ぶような、わかりやすい構成を意識すること。

「Ｆ型」

左にメインとなるコピーを配し、右側に詳細なテキストと言った形でレイアウトし、左から右、下に移動し、左から右といったように、下に行くにつれて視線はＦの文字を描く感じになります。

利用例
・見出しの短いコピーと説明文、この2つのブロックがたくさんあるニュースコンテンツのようなデザイン。

ポイント
・全体を俯瞰できるようなレイアウトにする。もっとも重要な情報は一番上に。最後まで読まれない可能性が高いので、優先度順に上から並べていく。

視線の動きを誘導するレイアウトはほかにも

「大きなものから小さい物へ」

視線大きいものから小さいものへ移動する傾向があります。細部に注目するのは大きい物を見た後なので、ウェブサイトの場合は、大きい画像から小さい画像へ、大きなフォントのテキストから小さいフォントのテキストへ、と言った形で視線が移動します。

「近い所から見る」

視線はより近くにあるものへと移動する傾向があります。たとえば一つの要素を見ている時でも、近くにあるものは既に視野に入っており、自然と近くにあるものが目に入ります。
車窓から遠くの景色を見ているときでも、視線が外を隔てるドアガラスに無意識に移動する経験があると思います。

「同じ形や同じ色を追う」

同じ形・色をたどって視線を移動させる傾向があります。レイアウトの中に、特徴的な形や色を使用することで、コンテンツ要素ではなく、デザイン要素で視線の流れを作ることができます。
また同時に、同じ形や色の使用でページ全体に統一感も生まれるでしょう。

まとめ

このように、レイアウト要素にユーザーの視線の流れを意識すると非常に効果的です。
逆に視線の流れを意識していないと、良いコンテンツなのに見てもらえない、離脱率が高くなる、なんてことも起こってしまいます。
そういったマイナスを防ぐためにも、ユーザーの視線が止まる部分、読んでほしい重要なテキストやリンクボタンなどを設置し、流れのあるレイアウトしてみてはいかがでしょうか。