チラシやポスター、看板、ホームページなどを見たとき、人はどこから見始めるのでしょうか。
実は、人の視線にはある程度決まった動きのパターンがあり、多くの視覚メディアはその特性を考慮してデザインされています。デザインの良し悪しは、見た目の美しさだけで決まるものではありません。「伝えたい情報を、伝えたい順番で見てもらえるか」が重要です。
今回は、人の視線移動の基本的な考え方と、レイアウト設計に活かせるポイントをご紹介します。
視線の動きには法則がある
私たちは無意識のうちに、画面や紙面全体を一度に見渡しているわけではありません。
情報を探すときには、一定の順序で視線を動かし、必要な情報だけを効率よく取り入れようとする傾向があります。
これは、人間の脳が限られた時間の中で大量の情報を処理するため、優先順位を付けながら視覚情報を認識しているためです。まず全体の印象を把握し、その後、重要だと感じた部分へ視線を移していきます。
日本では横書きの文章を読む機会が増えたこともあり、多くの場合は左上から右へ、そして下へと視線が移動します。これは書籍や新聞、Webサイトなどを日常的に読む習慣によって身についた動きであり、多くの人に共通する視線パターンとされています。
一方で、縦書きの書籍や日本画、海外の右から左へ読む言語などでは視線の流れが異なることもあります。つまり、視線移動は生まれつき決まっているものではなく、文化や読み書きの習慣によって形成される側面も大きいのです。
そのため、チラシやポスター、ホームページなどのデザインでは、最初に伝えたいキャッチコピーやブランドロゴ、キャンペーン情報などを左上付近に配置することが多くあります。最初に目へ入りやすい場所へ重要な情報を置くことで、その後の内容も自然な流れで読んでもらいやすくなります。
もちろん、人の視線は写真や色、大きな文字、人物の顔などにも引き寄せられます。
しかし、「最初にどこを見るか」という基本的な傾向を理解しておくことは、効果的なデザインやレイアウトを制作するうえで欠かせない考え方といえるでしょう。
つまり、看板やチラシは、ただ目立てば良いわけではなく、「どの順番で見てもらうか？」まで設計することが大切なのです。
F字型・Z字型の視線パターンとは
視線の動きを考えるうえで、代表的なのがF字型パターンとZ字型パターンです。
F字型パターン
F字型パターンは、情報量が多いページでよく見られる視線の動きです。
まず上部を横に読み、その後、左側を縦に追いながら、気になる箇所だけを横方向へ確認していきます。アルファベットの「F」のような動きになることから、この名前で呼ばれています。主に下記のようなケースで、F字型の視線パターンが見られます。
- ニュースサイト
- ブログ記事
- コラムページ
- 商品一覧ページ
そのため、見出しや重要なキーワードを左寄せで配置したり、文章を適度に区切ったり、箇条書きを取り入れたりすることで、読者は必要な情報を見つけやすくなります。
また、見出しだけを追って内容を把握する読者も少なくありません。
そのため、見出しには内容が一目で伝わる言葉を使うことも重要です。
Z字型パターン
一方、情報量が比較的少ない視覚メディアでは、Z字型に視線が移動するとされています。
視線は「左上 → 右上 → 左下 → 右下」という順番で動きやすく、この流れに沿って情報を配置することで、自然に内容を理解してもらえます。
- チラシ
- ポスター
- ランディングページ
- バナー広告
- 店舗看板
これらは、Z字型パターンを意識したレイアウトがよく採用されています。
例えば、左上に企業ロゴやキャッチコピーを配置し、右上でサービスの特徴を伝え、中央に写真やイメージビジュアルを大きく配置します。そして最後に、右下へお問い合わせボタンやQRコード、電話番号などの行動を促す情報を配置することで、視線の流れに沿った自然なレイアウトになります。
ウェブコンテンツにおいて、CTA（お問い合わせ・資料請求・購入ボタンなど）をページの右下や視線の終点付近に配置するケースが多いのも、この視線移動を考慮した設計の一例です。
もちろん、すべてのデザインがF字型・Z字型だけで説明できるわけではありません。
しかし、人の視線がどのように動く傾向にあるのかを理解しておくことで、「何を」「どこへ」「どの順番で配置するか」というレイアウト設計の精度を高めることができます。
伝えたい情報を届ける配置テクニック
視線の流れを理解すると「どこに何を配置すればよいか」が見えてきます。
例えば、チラシを制作する場合で見てみましょう。
- 左上：キャッチコピーやキャンペーン情報
- 中央：商品写真やサービス内容
- 下部：詳細情報
- 右下：お問い合わせ・QRコード・申し込みボタン
このような順番で配置することで、見る人は無理なく情報を読み進めることができます。
これは単に「見やすい」というだけではありません。
人間の脳は、一度に大量の情報を処理することが得意ではなく、情報量が多すぎると「何から見ればいいのか」を判断するだけで負担が大きくなってしまいます。
その結果、伝えたい内容が頭に入りにくくなったり、読むこと自体を途中でやめてしまったりするケースも少なくないのです。
一方で、情報に優先順位を付け、視線の流れに沿って配置すると、脳は情報を整理しながら自然に理解できます。このように、読む人の負担を減らすことも、レイアウト設計では重要なポイントです。
そのため、下記のような工夫が効果的です。
- 重要な情報は文字を大きくしたり太字にしたりする
- 適度に余白を設けて情報を整理する
- 写真や人物の視線を利用して注目してほしい場所へ誘導する
- 色の強弱やコントラストで情報の優先順位を付ける
- 関連する情報同士を近くに配置してまとまりとして認識しやすくする
また、人は大きな文字や強い色だけでなく、人物の顔や目線にも自然と注意を向ける傾向があります。例えば、広告で人物が商品を見つめている写真を使うと、見る人の視線もその商品へ向かいやすくなることが知られています。
デザインは「飾ること」が目的ではなく「伝えること」が目的です。
視線の流れを意識するだけでも、情報は伝わりやすくなり、見る側も心地よく内容を理解できます。その結果、商品の魅力やサービス内容が記憶に残りやすくなり、問い合わせや購入といった次の行動にもつながりやすくなるのです。
