視線誘導を活用しよう

ホームページや雑誌の記事、漫画などを読む時に、細かく区切られたレイアウトであっても、なんとなく読む順番が分かると思います。
これは偶然ではなく、読ませる順番を意図的にコントロールするレイアウトが組まれているからです。
今回はこの「視線誘導」を使ったレイアウトの組み方についてご紹介します。

「視線誘導」を活用するメリット

視線誘導を活用することで、ユーザーにストレスを与えることなく情報を提供することができます。

・ユーザーに情報を認知させること
・ユーザーの視線移動をサポートすること

が視線誘導を取り入れる目的と言えるでしょう。

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

同じような種類の要素が並んでいた場合、
人は左から右に細かく視線を動かしつつ、大きな流れとして左上から右下へと視線が移動します。

4つのエリアに分割した際に
①左上を「最初の視覚エリア」
②右下を「終着エリア」
③右上を「強い休閑エリア」
④右下を「弱い休閑エリア」
とし、
左上、真ん中、右下のいずれかに重要な要素を配置するとよいとされています。

この考え方は、活版印刷の発明をしたグーテンベルクにちなんで、「グーテンベルク・ダイヤグラム」と呼ばれています。

Z型

ユーザーの視線が左上→右上→左下→右下と、Zの形のように視線が動くレイアウトのことを「Z型」と呼びます。
広告や、画像の多いホームページのトップなどではZ型を意識したレイアウトが組まれていることが多いです。

ロゴ→ナビゲーション→メインビジュアル（テキスト）→NEWS

F型

ユーザーの視点が左上から右方向に動き、その後左に戻って少し下に降り、また右方向に動くレイアウトのことを「F型」と呼びます。
Webサイトと親和性の高いレイアウトで、ブログの記事一覧を思い浮かべると分かりやすいと思います。

ページタイトルの後、一覧の記事を順に追うことができます。

N型

英語圏などは横書きが多いためZ型やF型が主流ですが、日本は縦書きも多いです。
縦書き・右開きの書籍などでは、右上から左下へと視線がながれる「N型」も存在します。
とはいえ、ウェブサイトでは横書きが主流なこともあり、N型を見かけることはあまり無いでしょう。

要素の大きさ

配置だけでなく、要素の大きさも視線の動きに関係することがあります。
大きい円と小さい円では、まず大きい円に目が行き、小さい円に視線が移動します。

同形・同色

情報がほぼ均一だった場合、同形・同色のものを探し出して視線が移動します。
同じようなコンテンツが並ぶときには、同形・同色を使って視線誘導しましょう。

数字

数字は誰でも無意識に数えます。そのため、情報に数字を付けることで、数字の順に視線を誘導させることができます。
ただ、あまりバラバラにしすぎるとユーザーのストレスになるため、ある程度は揃えるようにしましょう。

まとめ

ユーザーが「分かりにくい」「読みにくい」とストレスを感じると、そのままページの離脱に繋がります。
視線誘導うまくを利用して、ストレスなく読ませることのできるレイアウトを作成しましょう。