この記事の要点
- 視線誘導は、見る順番を設計して伝えたい情報へ導くデザイン手法です。
- 人の視線には「Zの形」「Fの形」といった動きの傾向があります。
- 大きさ・色・余白・方向・配置の5つで視線の流れをコントロールできます。
視線誘導とは
視線誘導とは、デザインの中で見る人の視線を意図した順序で動かし、最も伝えたい情報へ無理なく導く設計手法です。要素をただ配置するのではなく、「まずここを見てほしい、次にここ」という流れをあらかじめ設計します。
情報を同じ大きさ・同じ強さで並べると、見る人はどこから読めばよいか分からず、結局どこも読まれないまま離れてしまいます。視線誘導は、情報に優先順位をつけて視覚的な強弱で表現し、読み手が迷わず内容を受け取れるようにする役割を持ちます。
人の視線が動く2つの型｜Zの法則とFの法則
人の視線は無秩序に動くのではなく、一定の傾向にそって動きます。レイアウト設計で特によく使われるのが、Zの法則とFの法則です。
Zの法則とは、視線が左上から右上、左下、右下へとアルファベットのZを描くように動くとされる傾向です。情報量が少なく全体を一目で見渡せるチラシやポスター、Webサイトのファーストビューなどに当てはまりやすい型です。
Fの法則とは、視線が左上から横に動き、少し下がってまた横へ、最後に左側を縦に見るようにFの形を描く傾向です。テキスト量が多いWebページやブログ記事、一覧ページなど、読む要素が多い画面で見られます。ニールセン・ノーマン・グループのアイトラッキング調査でも、Webページの閲覧でF字型の読み方が観察されると報告されています。
型 | 視線の動き | 向いている場面 |
|---|---|---|
Zの法則 | 左上→右上→左下→右下（Z字） | 情報量が少ない紙面・ファーストビュー |
Fの法則 | 横→横→左の縦（F字） | テキストが多いWebページ・一覧 |
どちらの型にも共通するのは、左上が最初に見られやすく、右下が最後になりやすいという点です。伝えたい結論やロゴは左上や上部に、次の行動を促すボタンは視線の流れの終点に置くと、自然に目に入ります。
視線誘導をつくる5つの手法
視線の流れは、次の5つの要素でコントロールできます。1つだけで使うより、組み合わせることで効果が高まります。
- 大きさ：大きい要素ほど先に目に入ります。見出しと本文の大きさの差（ジャンプ率）を広げると、どこから読むかが伝わりやすくなります。
- 色・コントラスト：周囲との色の差が大きい要素は目立ちます。最も見てほしいボタンや数字に一点だけ強い色を使うと、視線が集まります。
- 余白：要素のまわりの余白を広げると、その要素が際立ちます。詰め込むより、余白で「ここを見て」と示すほうが伝わります。
- 方向：矢印や線、人物の視線やポーズは、指し示す先へ視線を運びます。写真の人物が見ている方向に重要な情報を置くと、自然につながります。
- 配置：近くに置いた要素は関連があると認識され、そろえた整列のラインは視線の通り道になります。関連する情報をまとめ、端をそろえると流れが整います。
大きさや余白の考え方はデザインの4原則とも深く関わり、色の選び方はWebサイトの配色の決め方で詳しく解説しています。
Webサイトのレイアウトへの活かし方
視線誘導は、画面の役割ごとに設計すると効果的です。最初に見られるファーストビューでは、Zの流れを前提に、左上にロゴ、上部から中央にキャッチコピーと主役のビジュアル、流れの終点に問い合わせや申し込みのボタンを置きます。ファーストビューの設計はファーストビューとはも参考にしてください。
記事やサービス紹介など読ませるページでは、Fの流れを前提に、見出しを拾い読みできるよう左寄せで強調し、各段落の冒頭に要点を置きます。拾い読みでも内容が伝わる構成にすると、最後まで読まれやすくなります。
結論やボタンは「視線の流れの終点」に置くと、読んだ後の行動につながりやすくなります。
よくある失敗と注意点
視線誘導でつまずきやすいのは、目立たせたい要素を増やしすぎることです。強調が多すぎると、どれも目立たなくなり、かえって視線が迷います。1画面で最も見てほしいものを1つに絞ることが基本です。
視線が流れるデザイン
- 見てほしい要素が1つに絞られている
- 見出しと本文に大きさの差がある
- 余白で情報が整理されている
視線が迷うデザイン
- 強い色や大きな文字が多すぎる
- 要素が隙間なく詰まっている
- 関連しない情報が隣り合っている
また、流行や好みで装飾を優先すると、視線の流れが崩れることがあります。装飾の前に「どの順番で読んでほしいか」を決めることが、伝わるデザインの出発点です。
まとめ
視線誘導は、見る人の視線を設計し、伝えたい情報へ導く考え方です。要点を整理します。
- 人の視線にはZの法則・Fの法則といった動きの傾向がある
- 大きさ・色・余白・方向・配置の5つで流れをコントロールできる
- 目立たせる要素は1画面に1つへ絞る
視線の流れを意識するだけで、同じ情報でも伝わりやすさは変わってきます。Webサイトやデザインで情報の優先順位を整理したい場合は、Cataly DesignのWebサイト制作・デザインのサービスもご覧ください。
