視線誘導とは？

この記事を読むための時間：5分

視線誘導という言葉を聞いたことがありますか？
人が視線を動かすときには、無意識的に行われるパターンがいくつか存在しています。そのパターンを意識したWEBデザインにすることで、ユーザーに知ってほしい情報を確実に届けることができるようになります。
その際に使われる視線誘導という手法について、詳しく説明していきます。ぜひ参考にしてみてください。

視線誘導とは

画面を眺めるユーザーの視線の流れをスムーズに誘導するために使われる手法です。

WEBサイトのデザインはもちろん、イラスト·絵画·写真·映像·漫画など、様々な分野で広く利用されています。

視線誘導のメリット

この手法を正しく利用してデザインすることで、ユーザーに見てほしい情報の順序を意図的にコントロールすることができるようになります。それにより、ユーザーはストレスを感じず画面を閲覧·巡回·操作することが可能になります。

その結果、WEBサイトの情報に対して以下のようなメリットが生まれます。

• サイトの滞在時間が長くなる
• アクセス頻度が上がる
• 記事を最後まで読んでもらえるようになる
• 情報が正しく伝えられるようになる

視線誘導の目的

視線誘導には、大きく分けて以下の2つの目的があります。

①ユーザーの視線の動きをサポートする

ユーザーに対して、次にどこを見たらいいのか·どんなアクションを起こせばいいのかを知らせ、その動きがスムーズに進むように誘導します。

②ユーザーに情報を伝達する

ユーザーが注目している情報から意図的に注意を逸らし、より注目してほしい場所に視線を誘導することができます。

視線誘導の種類

視線誘導のパターンについて解説します。WEBサイトのデザインなどの参考にしてみてください。

上から下への視線の動き

人の視線の動きの中で、最も自然なものは上から下へと降りていく動きです。縦書き·横書き·紙媒体·ネット媒体に限らず、基本的にはユーザーの視線は上から下に移動します。

その中でも、さらに4種類の動きのパターンがあります。

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

同じ種類の情報が、均等に配置されているときの視線の動きです。

①～④には、それぞれ同じような情報が書かれているとします。

その場合、ユーザーは情報を見るときに、無意識に「左から右へ」「上から下へ」、①→②→③→④の順番で視線を移動させます。つまり、最初に自然と左上の①に目線を持っていき、右上の③や左下の④の情報をチラチラと見ながら、最後に②に目線を持っていくように移動させます。

なお、ユーザーは一番最後に見たものを最も鮮明に覚えているという特徴があります。そのため、②の部分には最もアピールしたいことを記載するのがオススメです。

この手法はパンフレットやチラシなどでもよく使われています。

ポイント

• 重要な情報は左上·中央·右下に配置すると、ユーザーに見てもらいやすくなります。特に左下には最も重要な情報を配置するようにしましょう。
• 反対に、右上や左下の部分はあまり見てもらえないため、重要なコンテンツを配置するのは避けましょう。

Zの法則

この法則では、ユーザーの視線は左上→右上→左下→右下の順番に、アルファベットのZのように移動します。グーテンベルク·ダイヤグラムと同じく、均等に配置された同じ種類の情報を見るときに効果が表れます。

グーテンベルク·ダイヤグラムと少し似ていますが、チラシやパンフレットといった印刷物だけでなく、画像が多く使われている場合や、WEBサイトの場合に特に適した手法となっています。実際に、WEBサイトではこのZ型のレイアウトで構成されることが多いです。

この法則は、ユーザーが初めて訪れるWEBページで、要素の配置を知るために全体を見渡す際の視線の動きと考えられています。

ポイント

• 特に重要な情報は、最初に目に入る左上に配置しましょう。
• 画像や表といった目立たせたい情報は、右上·左下·右下などの四方に配置しましょう。
• 反対に中央には視線が集まらないため、重要な情報を載せるのは避けたほうが無難です。

Fの法則

この法則は、ユーザーの視線は左上から始まる点では他の法則と同じですが、その後は右上→左下→右下の順番に、アルファベットのFのように移動します。

これはニュースアプリやTwitterなど、文字が多い情報を読み取る際によく利用されます。ユーザーはまず見出しに視線を走らせ、その後下に降りていくような仕組みです。

この法則は、ユーザーが具体的な情報を得て内容を把握するための視線の動きだと考えられています。

ポイント

• 重要な情報は左上から右上の見出し部分に配置するようにしましょう。
• 右下に進みにつれて読まれなくなるため、ユーザーに最後の情報まで見てもらえないことがあります。そのため、重要な情報は右下を避けて配置してください。

Nの法則

この法則は、ユーザーの視線が右上→右下→左上→左下と、アルファベットのNのように移動します。

他の法則と違い、横書きではなく縦書きで書かれた文章を読む際に多い動きです。

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

ユーザーの視線は、まず大きいものへ動き、その後小さいものへ移っていきます。

これは画像でも文字でも言えることです。例えば画像であれば、最初に大きな画像に視線が動き、その後順番に小さなものへ移ります。文字も同様で、見出しのように他より大きい文字が最初に目に入り、その後文字の小さな本文へと移っていきます。

ポイント

すべての画像や文字が同じ大きさであれば、ユーザーは視線に引っかかりを感じずに読み飛ばしてしまいます。

• ユーザーに何を伝えたいかを明確にし、ユーザーの目を引くように画像や文字の大きさを変更してメリハリをつけることで、視線を誘導することが可能です。

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

ユーザーは、まず目に留まったものの近くにあるものに視線が移動させています。

例えば、以下の例を見てみてください。

等間隔に並んでいるものより、近くに配置された情報の方が目に入ってきやすいと思います。これは、近くに配置されている情報はすでに視野に入っているため、視線を移動させやすいことが理由です。

ポイント

• ユーザーに同時に読んでほしいコンテンツや関連のあるコンテンツは、近くに配置しましょう。

数字の順番に視線が動く

以下の例を見てみましょう。

たとえ不自然な並び順でも、数字の順番に視線を動かすと思います。数字は世代や国籍を超えて認識されるもので、無意識の視線誘導になります。

同形·同色への視線の動き

情報が均一に配置されている場合、無意識的に形が同じ画像や、同じ色の文字に視線を動かします。

WEBサイトの中で、同形·同色のものを繰り返し使うことで、テンポよくサイトを読めるようになるほか、全体的な統一感やデザインの美しさを演出することもできます。

まとめ

WEBサイトのデザインをする場合などに重要となる視線誘導について解説しました。意識したことはなくても、ユーザー目線で考えてみると、至るところに視線誘導の法則が働いているのがお分かりいただけたと思います。

しかし、反対に視線誘導がうまくできていないWEBページはユーザーにストレスを与えてしまいます。その結果、せっかくコンテンツを作っても読んでもらえなかったり、あまりアクセスしてもらえないサイトになってしまいます。

これからWEBサイトを作ろうと考えている方や、既存のサイトでの売り上げに伸び並んでいるという方は、ぜひ視線誘導にも気を遣ってWEBサイトを運営してみてください。