こんにちは、ディレクターのSです。
突然ですが、資料作成時など、「視覚を通して大切なことを伝える」ためにどうしているでしょうか？
先日WebサイトのFVを考えていたとき、「入れたい要素がありすぎてごちゃっとしてしまう問題」で悩みました、、
そこで、今回は効果的に伝えるための視線誘導についてお話します！
目次
視線誘導とは
視線誘導とは、ユーザーの視線の流れを意図的にコントロールする技術です。見るべき順番や優先度を自然に伝えるために使われます。ユーザーが「求める情報」をストレスなく提供することにも、ユーザーに「伝えたい情報」を認知させるためにも、使えるテクニックです。
日常生活で、「ぱっと見で情報が入ってくる」「意図せず視線が特定の部分に引き寄せられる」というときは、視線誘導が活用されている場合があります。
種類と効果的な使用方法
代表的な4種類
上から下、左から右、の流れが基本です（右から左に読む訓練がされている文化圏では、当てはまらないこともあります）。まずは、この基本をもとに代表的な4種類とそれぞれの効果的な使用方法をご紹介します。
基本の流れ！【グーテンベルク・ダイヤグラム】
- 視線の動き：左上→斜め下
- 当てはまるパターン：均等・均質に分布した情報
- 効果的な方法：左上に最も重要な情報を置く。長く続く場合、途中で見出しなどを挟むと視線がリセットされて◎
- ポイント：休閑領域への注意が弱くなるので、情報の分布に注意。すべてに目を通してほしい場合、デザインで補ったり、③の部分には「目立たせなくてもよいが、必要な情報」などを設置するとよい。
迷ったらこれがおすすめ！【Z型】
- 視線の動き：左上→右上→左下→右下
- 当てはまるパターン：すべての情報が一面表示される・多くの要素が混合で表示される（バナー・ポスターなど）
- 効果的な方法：視線が左上と右下に、重要事項やアクションボタンを配置。
- ポイント：初見のUIやレイアウトではZ型が働きやすい。俯瞰・細部、ともに、Z型で視線が働きやすい。
検索結果ページでよくしている動きはこれ！【F型】
- 視線の動き：左上→左下のあと、それを軸とし、見出しを見て、気になった箇所でのみ右側に視線が移動
- 当てはまるパターン：縦に長いwebページ（web検索結果やブログ記事など）
- 効果的な使用方法：流し読みに適している。また、必要な情報のみを取捨選択し、読み進めてもらいたい場面でも効果的。
- ポイント：離脱が高い型のため、Webサイト等で使用する場合、CTAは常時表示が◎
日本語の縦書きに！【N型】
- 視線の動き：右上→右下→左上→左下
- 当てはまるパターン：縦書きレイアウト・右開きの冊子
- 効果的な使用方法：新聞や雑誌、教科書など、日本語に適している。「和」の印象を与えたいときにも◎
- ポイント：上記までの型のように、自然と人の目が行くのは左上エリア。N型を使用する際は右上の要素を強めにするとよい。
その他の視線誘導
その他にも、調べてみると様々な誘導方法がありました。「Webサイトの構成案を作るときに役立ちそう！」と思ったものをいくつかご紹介しますね！
▼大→小
デザインの基本原則「対比」によって強調する方法です。見出しを大きく、本文を小さく、など、視線を集めるためのオーソドックスな手段ともいえるのではないでしょうか。より大きな要素の方に視線は誘導されます。
デザイン基本原則についての記事はこちら！：Webディレクターも理解しておくデザインの4つの基本原則
▼同じ色・形
同じ色・形のものはグループとしてみなされます。そのため、人間の視線は、同じ色・形のものへ誘導されます。
▼近接
視線は、近くにあるものに流れていくのが一般的です。また、同じ距離に2つの要素があった場合、最初に見たものに似た形のものに誘導される傾向があります。
▼余白
密度の高い領域よりも、密度が低く、周囲に余白がある要素に視線は誘導されます。
▼第三者の視線の向き
写真やイラストなどに存在する、第三者の視線の方向を向く習性があります。
▼数字
ナンバリングすることで、一般的な視線の流れではなかったとしても、視線誘導をすることができます。
まとめ
視線誘導のパターンにプラスして、「どのようなときに効果的か」「最大限効果を発揮させるにはどうしたらいいか」を知ることで、情報の伝わり方が変わってくるのではないでしょうか？
今回の記事が、少しでも参考になりましたら幸いです！
