視線の流れを意識するデザインのコツ

視線の流れが悪いとどうなる？

• どこを読めばいいかわからない

• 大事なことが伝わらない

• 見る気がなくなる

つまり…

“いいデザイン”も、視線誘導が悪いと効果が半減！

デザインの「視線誘導」って？

人の目は、無意識にあるルールに従って動いています。

▼よくあるパターン：

• 左→右、上→下（日本語の読み順）

• 目立つところから順に見る（色・サイズ・写真など）

この“目の動き”を意識してデザインすれば、伝えたい情報を自然に読ませることができます！

よく使われる視線の流れパターン

Z型レイアウト

• 左上 → 右上 → 左下 → 右下

• サイト・バナー・LPなど幅広く使われる基本パターン

• 主に画像・コピー・CTAボタンの配置で活用

F型レイアウト

• 左上 → 横移動 → 下に少し → 横移動…の繰り返し

• テキスト中心のページやブログ記事に最適

• 最初の数行が特に注目されやすい！

センターフォーカス（中央集中）

• ヒーロービジュアル（FV）などで使われる配置

• 中央に大きなビジュアル＋短いキャッチコピーで訴求力UP

 視線誘導を助けるデザインテクニック

要素の配置順

• 伝えたい順番に左上→右下の順で配置

• 重要度が高いものは左上 or 中央上部に置くと◎

見せたいところだけ「目立たせる」

• サイズを大きく

• 色で差をつける（アクセントカラー）

• 写真・図形・矢印などで誘導

セクションごとに“流れ”をつくる

• 見出し → 説明文 → CTA…の繰り返しでテンポよく

• スクロールに合わせて「次を読みたくなる」配置を意識

よくあるNGパターンと改善例

おすすめ参考サイト・テンプレート

• STUDIOテンプレート集：FVやZ型の参考にぴったり

• Pinterest「LP layout」「web flow」検索：視線誘導がうまい海外事例が多数

• Googleマテリアルデザインガイド：視線誘導と階層構造の原則がしっかり

まとめ：「どこを見るか」をデザインでコントロールしよう！

• 人の目は「左上→右下」に動く

• Z型・F型・中央集中などを活用すれば自然と伝わる

• 目立たせたい要素は配置＋色＋余白で導く！