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

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

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

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

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

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

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

• ONOMICHI U2（オノミチ ユーツー）

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

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

出典：F-Shaped Pattern For Reading Web Content

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

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

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

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

• 来年50周年を迎える臨済宗建仁寺派 神勝禅寺（広島県福山市）の公式サイトを公開。Webサイト全面リニューアルを支援【パンセの制作事例】｜株式会社パンセのニュースリリース

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

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

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

参考書籍・記事

• Web Designing 2014年6月号
• Webコンテンツを読む視線の軌跡は“F”を描く

関連記事

• 基本は押さえておきたい！マーケティングに役立つ色彩心理学