今回お話しする視線誘導のお話は覚えておくと簡単な資料制作などで役立ちます。

デザインは人体工学などのサイエンスを駆使して『伝わる』効果を増進することがほとんどなのですが、視線誘導の法則は皆さんの日常生活に溶け込みすぎて意識しないと気が付かないかもしれません。

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

大体において視線は左上から右下に移っていきます。
なので
重要な情報は左上→中央→右下の順で配置するのが無難かと思います。

逆に重要な情報を右上、左下に配置すると、読み飛ばされてしまう可能性があるので注意しましょう。

Z型

視線が左上→右上→左下→右下の順に移動するパターンのことです。
アルファベットの「Z」のような形に沿って視線が移動します。

グーテンベルグ・ダイアグラムと似ていますが、Z型は視線が止まるポイントがあります。

それは情報が完結する右下の部分です。Webサイトでもよくボタンが右下に置かれていますよね。

これは視線が止まる部分にボタンを置くことによってユーザーの行動を促しやすいからです。

F型

視線が上から下にかけ左→右を繰り返し移動するパターンのことです。
アルファベットの「F」に沿って視線が移動します。

情報量が多いブログ・ECサイト・SNSなどで多く使われています。
横書きの文章が主体となるものに多く使われている手法で、長い文章でも比較的読みやすいのが特徴になります。
「カクヨム」や「Twitter（現X）」などがよい例でしょう。

この視線誘導では下の方にいくにつれ、内容が読み飛ばされる可能性は高くなっていきます。上のほうの情報や文章だけでお腹いっぱいになって最後まで読まれないことがあるからです。

N型

視線が【右上→右下→左上→左下】の順に移動するパターンのことです。
アルファベットの「N」に沿って視線が移動します。

日本語特有のコンテンツに多く使われており雑誌や新聞、または漫画などを読む時に多い視線の動きです。
作文、読書感想文を書くときなんかもこの手法ですよね。
主に紙媒体に見られ、Webやアプリではほとんど見られません。
電子書籍の文庫本だとたまに見かけますが、少し読みづらさを感じます。

また縦読みを促すデザインにすることで、日本っぽさを演出するという高度なテクニックもあります。
パソコンでも鉛筆でも、横書きより縦書きのほうが、「文字」ではなく「日本語」を書いている感覚が強いと思います。

大→小 / 太→細

読み方以外に視線誘導をする上で需要なテクニックとして
『大きいものから目がいく』というのが人間の性質です。

情報の優先度を大きさや太さで強調し、Z,F,Nなどの方に沿った位置にうまく配置すると、ユーザーの視線の動きを阻害することなく伝えたいことをストレートに伝えることができます。

『全部大きく太くして全部目立たせたい』という方がいますが、情報の強弱がないと本当に伝えたい部分が埋もれてしまいます。
「本当に強調したいところはどこか」を念頭に置いたほうが、読み手に伝わるものを作れるはずです。

グループを作る

色や形でグループの統一性をもたすことで、『この情報は同じグループだよ』と視線を誘導できます。

情報量がどうしても多くなってゴチャついてしまう時は、ページや紙の中で何個かグループを作るための法則を色や形で作るのが良いかもしれません。

例：コメントには吹き出しの形を使う。重要な部分には赤文字を使うなど。

数字や矢印

直接的な方法ではありますが、
絵や文章に数字がふってあれば、その順番に視線は誘導されますし
矢印の方向に目線は動きます。
数字をふっていたとしても、ユーザーが予測した先に予測した数字が無いと、混乱を招きストレスを与えてしまうので注意しましょう。

流れなどの視線誘導を促すには良い方法なのですが、直接的すぎるので使いすぎると画面や紙の中に数字や矢印がいっぱいになり読む方が疲れてしまうことがあるのでお気をつけください。

できれば矢印は最終手段と思っておくのがいいかもしれません。

まとめ

何か相手に伝える上で、今やデザインの基礎知識は職種を問わず必須なのではないでしょうか？

今回の情報はみなさんの頭の片隅の手帳に書き留めていただけると役に立つと思いますよ！

サハンジデザインへのお問い合わせはこちら

サハンジデザインでは『伝わるデザイン』をモットーに、フィジカル・デジタルどちらの領域のデザインも制作することが可能です。

リアル・デジタルどちらの世界でも『伝わるデザイン』をサポートします。

媒体を作った後の『継続的に伝える』ための伴走サポートもご用意していますので、伝え方にお困りの方はお気軽にご連絡くださいませ。