レイアウト〜視線誘導について〜

学校でも会社でも、資料を作ったりするときに、レイアウトって大切ですよね！今回は、レイアウトを考える時のヒントになる視線誘導について書いていきたいと思います。

下記のようなチラシがあります。このチラシをユーザーが読みやすいようにするには、どのように工夫をしていけば良いのでしょうか。

目次

1.視線誘導とは
　目的➀
　目的②
２.４つの視線誘導
３.文字の大小
4.色で視線誘導
５.数字の視線誘導

１.視線誘導とは

視線誘導とはなんだと思いますか。
人間の視線を動きを意図的にコントロールする手法です。

視線誘導の目的
目的➀相手に情報を伝達する。
大切な部分、見てもらいたい部分を誘導させる。

目的②人の視線の動きをサポートする。
相手に次どこを見たらいいのか、誘導する、促す。

２.４つの視線誘導

グーテンベルグ・ダイアグラム

グーテンベルグ・ダイアグラムという言葉を知っていますか？
同じ種類の情報が均等に配置されいるときの視線の動きの事を言います。
ユーザーは、無意識に「左から右」「上から下へ」という流れで見ています。重要な内容や見て欲しいものは、視線誘導の最初と最後にもってくると効果的です。

Z型

この法則は、「Z」のような視線の動きになります。左上→右上→左下→右下という流れです。

N型

「N」のような視線の動きになります。右上→右下→左上→左下という流れになります。こちらは、小説のような縦書きの場合になります。

F型

「F」のような視線の動きになります。こちらは、左上から視線が始まり右上に移動し、また左に視線を戻し下に向かっていくという流れになります。ニュースやECサイト、Twitterなど文字が多いものに向いています。

３.文字の大小

２の4つの法則とは別に、図形や文字などの大きさを変えるだけでも視線誘導が出来ます。

４.色で視線誘導

情報の優先度が全て同じだった場合、同色で分けてレイアウトすると見やすく出来ます。

５.数字で視線誘導

情報に数字を付けるだけで無意識に数字を追わせて読ませます。老若男女問わず行われる行為だと思います。

6.まとめ

視線誘導について知ってどう思いましたか。
日常の中で私たちは無意識にこの視線誘導に触れています。Twitterやメルカリ、サイトなど色々な所で使われています。ユーザーがストレスなく読みやすいように視線誘導は大切です。レイアウトする際は、是非、視線誘導の法則を活用してみて下さい。知っておくだけでも大分違うと思います。