知っておきたい人の視線の動き方。視線の動きを意識してユーザーを導く。無意識のうちに動いている人の視線。動きの法則をデザインに活かす。

ページを見る時にどこから見ていますか？

皆さんはWEBサイトや雑誌、チラシなどを見る時にどこ（どの位置）から見ていますか？

そう言われて考えてみても、おそらく多くの方が上から見たり、左から右に見ているなど特に「どの位置から」というのは意識していないと思います。

しかし人は無意識のうちに、視線の動き方のパターンが決まっています。
そのパターンが今回ご紹介する「視線の法則」です。

視線の法則の動き方によって視線は流れ
WEBサイトやチラシのデザインを考える時なども実は視線の法則が活きています。

以前お話したユーザービリティについての話に少し近いところもありますが
視線の法則を改めて理解してから様々なページ（紙媒体もWEBページも）を見ると結構面白いんです。

サイトを作った時にコンテンツなどの配置をとりあえず決めて何となく配置してしまうことに比べ、
人の視線の動きを意識することで重要な内容や伝えたい内容が読み飛ばされる可能性が低くなったりもします。

また、この視線の法則はサイトのデザインだけでなく、ページや資料などを作る時に画像や図などの配置で悩んでしまった時にも参考になると思います。

SEO・コンテンツ作成・WEB集客などの
お悩みを解決するお役立ち資料を公開中

無料ダウンロード

代表的な視線の動きの法則

無意識のうちに決まった動き方をしている人の視線ですが
大きく分けて3つのパターンがあります。

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

まず最初にご紹介する1つ目は「グーテンベルク・ダイヤグラム」と呼ばれている動きのパターンです。
これは「同じ種類の情報が均等に配置されている時の視線の流れ」のパターンのことを言います。

均等に配置されている情報を4分割した時に左上から右下に流れるように視線が移動していきます。

このようにまず最初に左上⇒右上を少し見て⇒左下を少し見て⇒右下を最後に見るように視線が動きます。

この4ブロックはこのような領域として分割します。

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

これはWEB上のページよりも、均等にコンテンツが並ぶことが多い印刷物によく当てはまるパターンです。

また、横書きの文書が主流である欧米文書で主に使われており
グーテンベルク・ダイヤグラムという呼ばれている通り、ドイツの活版印刷技術の発明者ヨハネス・グーテンベルグの名前を持っています。

このパターンの場合、左上から右下に斜めに視線が動いているので、
「左上・真ん中・右下」と斜めのライン上に重要な部分（タイトルやバナーなど）を置くと良いです。

Zの法則

先程のグーテンベルク・ダイヤグラムは情報が均等に配置されている時の視線の動きでしたが
今度は「情報が均等に配置されていない場合」の視線の動きについてです。

まず一つ目に「Zの法則」というものがあります。
名前通りですが、アルファベットの「Z」の形に沿って視線が動くことからZの法則と呼ばれています。

視線は、左上⇒右上⇒左下⇒右下と動きます。

「画像が多く並ぶとき」「全体の内容を把握したい時」にZの法則を取り入れます。
雑誌やチラシ、ポスターなどでよく取り入れられる法則です。

チラシなどの他にもWEBページでも取り入れられますが、
企業ホームページなどでも左上には企業ロゴ（サイトロゴ）が配置されているのをよく目にしませんか？

様々な媒体で取り入れられていますが、
左上には一番見てほしい情報・重要な情報などを配置することで一番目に留まりやすいのです。

なんとなく重要な情報は中央に置いた方が良さそうな気がしてしまいますが
Zのライン上、四方に配置することで、人の視線の動き方の傾向に則って目立たせたいポイントを明確することができます。

他にも、スーパーやコンビニの陳列棚、普段利用している自動販売機もこの法則が使われているので、
私たちの生活の最も身近なところで使われているのがこの法則かもしれませんね。

Fの法則

こちらも「情報が均等に配置されていない場合」の視線の動きの法則です。

「Fの法則」と呼ばれる法則ですが、Zの法則と同様にアルファベットの「F」の形に沿って視線が動くことを言います。

この場合視線は、左上⇒右上⇒少し下がり左から右⇒また左端に動きます。
「文字量が多い時」「内容をしっかり把握したい時（よく読みたい時）」の視線の動き方です。

WEBページによく当てはまるのがFの法則です。
ニュースサイトやブログなど文章が多い場合にはこの法則が良いでしょう。

情報はFのライン上に、そして右側よりも左側に配置されている情報の方が見られる傾向があります。

視線は左から右に動くので、興味を持った情報（コンテンツ）が多くあった場合、
「F」の横線が増えていき、「F」が下に連なるような形に視線が動いていきます。

ただ、WEBページが全てFの視線の動き方で見られているかというとそうではなく
最初は「Z」、そのあと「F」という動き方が多いそうです。
「Z」でサイト全体を把握してから細かくサイトを見ていく時に「F」の動き方になると言われています。

視線の動き方の特徴

視線の動き方にはいくつかの特徴があります。
意識していなくても自然に見ているので、
「言われてみるとそうかも・・・」と感じることが多いと思います。

大きいものから小さいものを見る

人は、大きいものと小さいものが並んでいる時に、
まず大きいものに目がいき、そして小さいものを見ます。

例えば上記のように文章が全て同じ文字の大きさで書かれている時と、
大きい文字のあとに小さい文字で文章が書かれている場合、まず最初に大きく書かれた文字に目がいくと思います。

この特徴があるということは、目立つ部分は必要なことがわかりますよね。
大きさも全て一緒ではメリハリがなく読み飛ばされてしまう原因になってしまいます。

同じ形や色を追いかける

視線は同じ形や色のものを目で追いかける傾向があります。
ポイントとなる部分には同じ色や形のものを使用したりすることで
その色や形を追って視線が流れていきます。

ちなみに、ホームページなどの場合、サイトに使用する色は3色程度が良いとされています。
何色も使用されていると統一感がなくなり、ごちゃごちゃした印象になってしまいます。
ポイントで使う色や全体的に使用する色もある程度決めておくことで統一感を出すことにもなります。

近接するものから認識する

人の視線は、一つの要素の近くにあるもう一つの要素に視線がいきます。
これは、一つの要素を見ている時にもう一つの近くにある要素は既に視野に入っているので、少し視線を移動させるだけで認識できるからと言われています。

なので同時に読んで認識してほしいことや関連する情報は近くに配置することで読みやすくなり、ユーザーは情報を取り入れやすくなります。

最後にもう一つ

特徴を3つご紹介しましたが、もう一つ意識すると文章などが見やすくなるのでご紹介します。
それは「余白と文字の使い方」です。

文章の文字が全て同じ大きさ、ずっと同じ余白ではメリハリがなくて読むことにつかれてしまいます。
先程の「大きいものから小さいものを見る」の特徴に少し似ていますが
文字の大きさと余白も上手く使うことで見やすさが増します。

また、文字の書体は複数の種類があるので
書体によって伝わる雰囲気や見せ方も変わります。

「余白と文字」も読み手を飽きさせないようにするための工夫の一つです。

視線の流れを意識して構成を見直す

人の視線の動き方には特徴がありますが、これらは無意識のうちに動いているものです。

これらの動きの法則・特徴を理解しておくことでWEBサイトだけでなくチラシや資料などのデザインを決める時にも役に立ちそうですね。
必ずしもこの法則に当てはめる必要があるわけではないですが、
視線の動き方も理解しておくことでユーザーを誘導すること・読み手が情報を受け取りやすくなることに近づきます。

一度作るとなかなか変更することがないWEBページも
視線の特徴を意識した配置や色合い、文字の大きさや余白の使い方などを見直してみるとより読みやすいものになると思います。

そしてその時にポイントとなるのは、自分たちがターゲットとしているユーザーにとって最適なものは何かを意識すると良いでしょう。

その結果ユーザービリティの向上にもつながるので参考にしてみてください。

SEO・コンテンツ作成・WEB集客などの
お悩みを解決するお役立ち資料を公開中

無料ダウンロード