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

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

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

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

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

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

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

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

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

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

Z型

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

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

F型

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

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

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