はじめに
デザインを見るとき、人はどこから見て、どんな順番で情報を受け取っていると思いますか？
実は、デザインを見る順番＝人の視線の動きには、ある程度の共通パターンがあります。
これを意識せずに作ると、
<aside>
- 伝えたい情報が見られない
- 情報は全部載っているのに、重要な部分がスルーされる
- なんとなくごちゃっとした印象になる </aside>
といったことが起こりがちです。
逆に、視線誘導を意識すると、
<aside>
・情報量が同じでも、すっきり見える
・読む順番に迷わない
・「なんとなく見やすい」デザインになります。
</aside>
この講座では、
人の目線の流れを理解し、効果的に情報を見せるための考え方＝「視線誘導」について学んでいきます。
視線誘導とは？
人はデザインを見るとき、毎回決まった順番で見ているわけではありません。
目立つ色・大きさ、自分に興味・関心がある言葉に無意識に目を奪われます。
一方で、人の目の動きには共通する「傾向」があります。
左上から右へ、上から下へ、目立つものから次に目立つものへと目線が動いていきます。
視線誘導とは、
この「ランダムに見えるけれど、実は傾向がある」目の動きを理解した上で、情報を伝わりやすい順番で配置することです。
文字の大きさ、配置、余白、色のコントラストなどを使って、「まずここを見てほしい」「次にこれを伝えたい」という順番を作っていきます。
視線誘導の代表的な考え方
ここでは、よく使われる代表的な視線の流れを紹介します。
Z型
Z型とは、アルファベットの「Z」を描くように目線が動く視線の流れのことです。
人は、横書きに慣れているため、デザインを見たときに次のような順番で視線を動かしやすい傾向があります。
- 左上から右上へ
- 右上から左下へ（斜めに移動）
- 左下から右下へ
この動きが、アルファベットの「Z」の形に似ていることから、
Z型の視線誘導と呼ばれています。
Z型はチラシやバナー広告など、すべての情報が一面に表示されているレイアウトや多くの要素が混合するレイアウトに適しています。
特に、
- タイトル
- メインビジュアル
- 説明文
- ボタンや問い合わせ先
といった、見てほしい情報を順番に配置しやすいため、
初心者の方でも取り入れやすい視線誘導です。
Z型を意識するときのポイント
Z型を使うときは、Zの始点と終点に何を置くかを意識することが大切です。
<aside>
- 左上：一番伝えたい情報（タイトル・キャッチコピー）
- 右上：注目させたい要素（写真・キービジュアル）
- 左下：補足説明・詳細情報
- 右下：行動につなげたい要素（ボタン・連絡先） </aside>
この配置を意識するだけで、「なんとなく配置したデザイン」から意図のあるデザインに変わります。
N型
N型とは、アルファベットの「N」を描くように視線が動く流れのことです。
上から下へ、次の列へ移動する動きが特徴です。
縦書きレイアウトや左開きの本や雑誌などによく使われています。
右上の要素を強調し視線をキャッチしておけば脳がスムーズにNパターンに移行できます。
F型
F型とは、アルファベットの「F」を描くように視線が動く流れのことです。
見出し → 冒頭文 → 流し読み
というように、Fの形で情報を拾っていきます。
流し読みに適したスタイルで、見出しやタイトルだけを見て気になった箇所でだけ右側に視線が移動します。
Web記事や説明文が多いデザインでよく見られます。
F型を意識する場合は、
最初の数行・左側に重要な情報を置くことが大切です。
<aside>
- 見出しを左寄せにする
- 重要なキーワードを文頭に置く
- 行間や余白をしっかり取る </aside>
こうすることで、流し読みされても内容が伝わりやすくなります。
視線誘導はレイアウトだけではない
これまで、Z型・N型・F型といった「配置（レイアウト）」による視線誘導を見てきましたが、視線を動かす方法はそれだけではありません。
実際のデザインでは、
大きさ・色・余白・形・動き など、さまざまな要素が組み合わさって視線が誘導されています。
<aside>
- **大きさによる視線誘導：**人の目は、大きいものから小さいものへ向かいます。
- **色による視線誘導：**周囲と違う色、コントラストの強い色、アクセントカラーは自然と目に入りやすくなります。
- **余白による視線誘導：**周りに余白があると、その要素は自然と目立って見えます。
- **矢印・線による視線誘導：**矢印や線は、視線を強制的に動かす力を持っています。
- 人や動物の目線による視線誘導：写真やイラストの人物が見ている方向を無意識に追います。
- 数字による視線誘導：「① → ② → ③」など、数字があると人は順番に追いたくなります。 </aside>
すべてのデザインが型に当てはまるわけではない
ここで、とても大切な話をします。
すべてのデザインが、必ず型に当てはまるわけではありません。
視線誘導は「型に当てはめること」が目的ではなく、見る人に伝わるかどうかが目的です。
・あえて視線を散らすデザイン
・一点だけに強く注目させるデザイン
・順番を決めず、自由に見せるデザイン
こうした表現が効果的な場面もたくさんあります。
それでも視線誘導を知っておくべき理由
「正解がないなら、覚えなくていいのでは？」
そう感じた方もいるかもしれません。
ですが、ここがとても重要なポイントです。
知らずに配置するのと、知ったうえで外すのとでは、意味がまったく違います。
視線誘導の知識があると、
<aside>
・なぜこの配置にしたのか説明できる
・他の人のデザインを分析できる
・修正依頼に対応しやすくなる
</aside>
つまり、感覚だけのデザインから「考えて作るデザイン」に変わるのです。
じゃあ実際、どう考えればいい？
ここで、実践的な判断基準をお伝えします。
視線誘導を考えるときは、次の3つを自分に問いかけてください。
<aside>
- 一番伝えたい情報は何か？
- 次に見てほしい情報は何か？
- 見る人に最終的にしてほしい行動は何か？ </aside>
この3つが整理できれば、
自然と「どこを目立たせるべきか」「どこは控えめでいいか」が見えてきます。
その結果として、Z型に近くなることもあれば、どの型にも当てはまらない配置になることもあります。それで問題ありません。
視線誘導は「使える引き出し」を増やすための知識
この講座で学んでほしいのは、
・必ずこの型を使う
・この並びが正解
という答えではなく、状況に応じて使い分けられる引き出しを持つことです。
視線誘導は、デザインで必ず使わなければならないルールではありません。
迷ったときは、視線誘導をヒントにしながら自分なりのベストな配置を探していきましょう。