ユーザーをうまく誘導しよう！Webデザインで意識したい視線の動き方3パターン

更新日: 2018年01月31日

ホームページを制作する際に考慮しなければならないことが「ページの中でもユーザーに見てほしい要素を正しく配置できているか」という点です。
重要な要素が埋もれてしまったり、読み飛ばされてしまったりしてはホームページを制作した意図が伝わらず、思うような成果をあげることは難しいでしょう。

今回は、ユーザーの視線の動きのパターン3つをご紹介します。
パターンをデザインに取り入れて、見やすくかつ成果のでるホームページ制作を行いましょう。

このニュースを読んだあなたにオススメ

HTMLとは〜初心者でも分かるホームページの基礎技術〜
Webデザインに役立つ無料のツール・デザイン集まとめ
 ネットショップのデザインで意識するべき10個のポイント

1.上から下への視線の動き

人の視線の動きで最も自然な視線の動きが「上から下」への移動です。
ホームページにかぎらず本や雑誌なども、縦書きの場合でも横書きの場合でも基本的には上から下に向けて読み進めています。
上から下への視線の動きには、大きく3つのパターンがあります。

グーテンベルク・ダイヤグラム

これは「同じ種類の情報が、均等に配置されている場合」の視線の動きです。
この場合、人は見る対象物を無意識に以下の4つの領域に分割します。

①最初の視覚領域
②終着領域
③強い休閑領域
④弱い休閑領域

この4つの領域を、上図の①→②→③→④と「左上から右下」に向かいつつ左から右へ視線を移動させます。
ユーザーは読み飛ばしてしまうことも多々ありますので、注目してほしい重要な要素やコンバージョンポイントなどはこの斜めのラインに入れておくようにしましょう。
なお、この考え方は「均一に配置された情報を見る時」に限定されます。
コンテンツが均一に配置されてない場合は、以下の2つの法則を参考にしてください。

Z型

これは、ユーザーの視線の動きがアルファベットの「Z」の形をなぞる、という法則です。
特に画像が多いギャラリーページなどを閲覧する場合には、この視線の動きをなぞる傾向が高くなります。

左上から上図の①→②→③→④の順に視線が移動しますので、注目してほしい重要な要素はこのライン上に配置するようにしましょう。

F型

これは、ユーザーの視線の動きがアルファベットの「F」の形をなぞる、という法則です。
特にテキストが多いホームページでは、この視線の動きをなぞる傾向が高くなります。
2006年にヤコブ・ニールセンが研究結果として発表しました。

参考：F-Shaped Pattern For Reading Web Content｜Nielsen Norman Group
（海外サイトですので英語表記されています。翻訳記事はこちら：Webコンテンツを読む視線の軌跡は“F”を描く｜U-Site）

この法則の特徴は、左上から始まりメニューや見出しを見るために右に移動した後少し下に移動してまた左から右へ進み、その後は下に向かって移動していく点です。
上図の①→②→③→④の順に視線が移動しますので、注目してほしい重要な要素はこのライン上に配置するようにしましょう。

2.大きなものから小さなものへの視線の動き

人は、大きなものと小さなものが並んでいる場合はまず最初に「大きなもの」に目がいきます。

上図①は、タイトルと本文が同じ大きさのテキストで書かれています。
一方、②はタイトルが本文よりも大きなテキストで書かれています。
この2つの図を見てもわかるように、まず最初に大きく書かれたテキストに目がいきます。

ユーザーは多くの情報を処理する際は目に止まるポイントがなければ読み飛ばしてしまいがちです。
ホームページからどのような情報を取得してほしいのかひと目でわかるように、配置している要素の大きさにメリハリをつけるようにしましょう。

近くにあるものへの視線の動き

人は、目に止まった要素の近くにある要素に視線を移動させます。
これは、あるひとつの要素を見ている時に、近くに配置されている要素はすでに視野に入っているため、視線を移動させやすいからです。

上図①は、すべての要素を等間隔に配置しています。
一方、②は関連のある要素を近づけて配置しています。
この2つの図を見てもわかるように、関連のある要素は近くに配置した方が情報を把握しやすくなります。

ユーザーに同時に読んで欲しい要素や、関連のある要素は近くに配置するようにしましょう。

3.同じ形・色を追う視線の動き

人は、同じ形・色をたどって視線を移動させる傾向にあります。
特徴的な形や色を使用することで、デザインで視線の流れを作ることができます。
また、同じ色・形を使用することで、ページ全体に統一感を持たせることもできます。

ユーザーに注目してほしい要素に色や形でポイントをつけて、まとまりがありつつ視線に無理のないホームページを作成しましょう。

まとめ

視線の動きは、無意識のものです。
この動きを理解してページを制作すると、ユーザーの視線を誘導してページが「ゴール」とする場所へスムーズに導くことができます。
これらの手法は、ユーザーにとっても読みやすいページを構成することができるため、ユーザビリティ向上にも役立ちます。
ぜひホームページを制作する際の参考にしてみてはいかがでしょうか。