広報・マーケティング担当者のための
ネット上の情報発信・情報流通を支援するネットPR.JP

Webコンテンツのレイアウトに迷ったら視線の流れを意識しよう

公開日:2014年10月9日

こんにちは、デザイナーのやのっちです。

新しいWebコンテンツを作成する際「この要素はどこに配置するのが最適なんだろう?」とレイアウトに迷ったことありませんか?
そんなレイアウトを考える際や迷ったときの参考になればと思い、今回は人の視線の流れについて書きたいと思います。

視線の流れは無意識に左上から右下へ

人は無意識に左上から右下へ向かって視線を動かすくせを持っているそうです。
これは本を読む習慣からきているそうですが、このくせを分析してパターン化したものに以下の3つがあります。

グーテンベルグ ダイアグラム

img

均等に配置された同質の情報を見る際の一般的な視線の流れを表したパターン。
視線の流れは、左上から右下へ、青い矢印のようにちらちらしながら移動していきます。
テキストが多いレイアウトに向いているパターンで、左上と右下に重要なコンテンツを配置するとよいとされています。

Z型パターン

img02

視線の流れは、左上から右上、右上から左下、左下から右下の順で移動し「Z」の形になるパターン。横書きの紙媒体を意識したもので、読み物コンテンツにおすすめのパターンです。

株式会社パンセ(News2uグループ)で制作したONOMICHI U2のWebサイトはこの「Z型パターン」を意識したレイアウトになっています。視線の流れに沿って下層ページへの導線がレイアウトされていて効果的です。

img05

F型パターン

img03

ユーザビリティ研究の第一人者ヤコブ・ニールセン博士の研究で明らかになったのがこのF型パターンです。
比較的新しいパターンでWebに一番親和性が高いと言われています。

視線の流れは、左上からはじまり水平方向に右へ。その後左に戻り、ページを少し下に移動してからまた水平方向に右へ。最後にゆっくりと上から下に視線を動かす。これを繰り返した動きになります。

F型ヒートマップ出典:F-Shaped Pattern For Reading Web Content

上のヒートマップは、3種類のウェブページをユーザーがどのように読んだかを示している。

  • ある企業のウェブサイトにある“自社情報”ページ内の記事(図左端)
  • あるeコマースサイトの商品紹介ページ(図中央)
  • ある検索エンジンの検索結果ページ(図右端)

内容もデザインも違うページなのに3種類すべて「F型」とは驚きです。
Fの横棒の2本の間隔がページによって異なるものの、概ね「F」に近い形になることが多いとされています。

ニュースリリース配信サービス「News2uリリース」はこの「F型パターン」を意識したレイアウトになっています。
Fの上の線はリリースタイトル、下の線はシェアボタンが視線の流れに沿うようにレイアウトされていて効果的です。

img06

Webに一番親和性が高いので、迷ったときはこのパターンがおすすめです。

まとめ

レイアウトを考える際にユーザーの視線の流れを意識することは大切なことです。
ユーザーの視線が止まるところに読んでほしい重要なテキスト、写真などのアイキャッチやリンクボタンなどの導線をレイアウトするとよいと思います。

また「基本は押さえておきたい!マーケティングに役立つ色彩心理学」にもあるように色やデザインで視線を誘導することも可能ですから、これだけを意識すればOK!とはいきませんが……。デザインって奥が深い〜。まだまだ精進します!

参考書籍・記事

関連記事

Follow us!

ネットPR.JP 記事カテゴリー

ネットPR.JP 記事年別アーカイブ

ネットPR.JP 最新記事

ネットPR.JP 記事カテゴリー

ネットPR.JP 記事年別アーカイブ