バナーの視線誘導とは？　初心者でも「見る順番」を作れる7つのコツ

バナーを作り終えたのに、なぜかまとまって見えないことがあります。写真も文字も必要な情報も入っているのに、少し離れて眺めると視線の置き場所が定まらず、「悪くはないはずなのに何か違う」と修正の手が止まってしまうのです。

そんなとき、すぐに色や装飾を足す必要はありません。最初に確認したいのは、見る人へ何をどの順番で伝えるのかという視線誘導です。

バナー初心者が最初に覚えるべきなのは、Z型やF型といった視線パターンの暗記ではありません。「1番に何を見せるか」「2番目に何を理解してほしいか」「3番目にどこへ進んでほしいか」を決め、その優先順位を文字や写真、余白へ置き換えることが重要です。

この記事では、視線誘導の基本から7つの具体的な方法、Z型とF型の扱い方、若手採用バナーを使った改善前から改善後までの変化、5分でできる確認方法まで順番に解説します。読み終えたとき、自分のバナーを見ながら「ここが1番、次が2番、最後が3番」と説明し、実際に修正できる状態を目指します。

バナーの視線誘導とは

バナーにおける視線誘導とは、見る人が重要な情報を認識しやすいように、文字サイズ、色、写真、余白、配置などへ視覚的な強弱を与え、情報を受け取る順番を設計することです。

この考え方は、デザイン分野で使われるVisual Hierarchyと深く関係しています。Nielsen Norman GroupではVisual Hierarchyを、重要度の順序に沿って目をデザイン要素へ導く原則として整理しており、相対的な大きさや色、コントラストなどによって情報の重要度を表現できると説明しています。

ただし、ここで「デザイナーが人間の視線を自由に操れる」と考えてはいけません。実際の視線は、見る人の目的や知識、写真の内容、文字の大きさ、色の強さなどによって変化するため、制作者が決めた軌跡を全員が同じようにたどるわけではありません。

それでも、重要な情報と補足情報が同じ強さで並んでいる状態より、優先順位が画面へ反映されているほうが、見る人は内容を理解しやすくなります。

たとえば若手採用バナーへ、社員写真、メインコピー、未経験歓迎という条件、会社名、募集年度、説明会情報、CTAを入れるとします。制作している側としてはどれも必要なので、「全部しっかり見せなければ」と考えたくなるでしょう。

ここに初心者が迷いやすい理由があります。会社名を小さくすると企業名を覚えてもらえない気がしますし、説明会の日付を弱くすれば見落とされそうです。CTAを控えめにするとクリックされないようにも感じるため、一つずつ要素を強くしていきます。

その結果、すべての要素が同じくらい大切そうに見えるバナーが出来上がります。

作り手は内容をすでに知っているため、その状態でも読めます。一方で初めて見る人には背景知識がないため、「まず何を見ればよいのか」を自分で探さなければなりません。

視線誘導とは、こうした迷いを減らすための情報設計です。見栄えを整えるだけではなく、最初に興味を持ってもらい、次に意味を理解してもらい、必要であれば最後に行動へ進んでもらう。その順番を視覚表現へ落とし込むことが基本になります。

最初に1番2番3番に見せる情報を決める

視線誘導を改善するとき、いきなりFigmaやPhotoshopで文字サイズを変更する必要はありません。最初に行いたいのは、掲載する情報を「1番」「2番」「3番」に分けることです。

若手採用バナーなら、1番目を「未経験からエンジニアへ」という採用メッセージに設定し、2番目に「定着率95％」や研修制度などの根拠を置き、3番目に採用情報を見るCTAへ進んでもらう構成が考えられます。

重要なのは、3番目だから大切ではないという意味ではないことです。必要な情報を軽視するために順位をつけるのではなく、受け取る順番を整理するために階層を作ります。

情報階層を三段階で整理する

実務では、情報をプライマリ、セカンダリ、ターシャリといった階層へ分けることがあります。名称そのものを覚える必要はありませんが、それぞれの役割を分けると、デザイン上の判断がしやすくなります。

この表で見ると単純ですが、実際に自分のバナーへ当てはめると迷うことがあります。「会社名も1番ではないか」「実績の数字も目立たせたい」と考え始めるからです。

そんなときは、「このバナーをほんの短い時間しか見てもらえないとしたら、何だけは覚えてほしいだろう」と問い直します。

一つに決めるのは少し怖いかもしれません。それでも、すべてを最優先にすると、結果として最優先がなくなります。情報を捨てるのではなく、順番を与えると考えるほうが整理しやすいでしょう。

1番目の情報はターゲットによって変わる

バナーで最初に見せるものは、必ずキャッチコピーと決まっているわけではありません。

商品や会社の認知度が低い場合は、見る人自身の悩みや得られる価値を1番目へ置く方法があります。「未経験から設計職へ」「毎月の作業時間を半分に」のような情報で、自分との関係を感じてもらう考え方です。

一方で、すでに広く知られているブランドなら、ロゴそのものが強い入口になる可能性があります。期間限定の販売施策であれば、「本日限定」「50％OFF」といったオファーを最優先にする判断も考えられるでしょう。

つまり、デザインの優先順位は作り手の好みだけでは決まりません。誰が見るのか、その人がすでに何を知っているのか、何を見れば続きを知りたくなるのかによって変わります。

情報が多いときは削る前にまとめる

情報量が多いバナーを前にすると、「もっと文章を削らなければ」と焦ることがあります。もちろん不要な情報を減らすことは重要ですが、削除する前に関連情報をまとめるだけで整理される場合があります。

たとえば「説明会開催中」と開催日は同じグループとして近づけ、「未経験歓迎」と研修制度が関係しているなら同じ領域へ置きます。人は近くに配置された要素を一つのまとまりとして捉えやすく、この性質はゲシュタルト原則の近接と関係しています。

情報が多いからといって、注記を極端に小さくするのも避けたいところです。優先度を下げることと、読めなくすることは違います。サイズを少し小さくするほか、色やウェイトを抑えたり、主役との距離を取ったりすることで、必要な可読性を残したまま階層を作れます。

写真と文字のどちらを1番にするか

写真とキャッチコピーのどちらを目立たせるべきかについても、一つの正解はありません。

採用、旅行、食品のように、人物の表情や景色、料理そのものが感情を動かす訴求では、写真を視線の入口にする方法があります。最初に「楽しそう」「おいしそう」「この会社の雰囲気が気になる」と感じてもらい、その後で文章を読んでもらう構成です。

反対にBtoBサービスなどでは、「工数40％削減」「導入費0円」のような数字やベネフィットのほうが、写真より強い判断材料になる場合があります。その場合は文字を1番へ置き、写真やイラストは意味を補う役割にします。

迷ったときは、「写真と文字のどちらを大きくするか」ではなく、「最初の一瞬で何を感じたり理解したりしてほしいか」を考えます。この問いに答えられると、次のデザイン作業がかなり楽になります。

視線誘導を作る7つの方法

1番から3番までを決めたら、その優先順位を実際の画面へ反映します。

初心者がまず確認したいのは、文字サイズ、太さとコントラスト、余白、写真のトリミング、人物の顔と視線、配置と整列、CTAの七つです。

七つすべてを強く使う必要はありません。むしろ一つの情報を巨大な文字、高彩度の色、太字、囲み、矢印で同時に強調すると、今度は誘導そのものが騒がしくなります。

複数の方法が同じ優先順位を静かに支える状態を目指します。

文字サイズで1番目の情報を明確にする

最もわかりやすい方法が文字サイズです。

同じ画面の中で明確に大きな文字があれば、相対的に重要な情報として認識されやすくなります。Nielsen Norman GroupのVisual Design Principlesでも、相対的な大きさを使って重要度や順位を示すScaleが視覚デザインの原則として説明されています。

日本のデザイン実務では、見出しと本文などのサイズ差を「ジャンプ率」と表現することがあります。

ジャンプ率が大きいと力強くダイナミックな印象になりやすく、差が小さければ静かで均整の取れた印象になりやすいでしょう。ただし、差を大きくすれば自動的に優れたデザインになるわけではありません。

若手採用バナーなら、「未経験からエンジニアへ」を最も大きくし、募集年度や説明会情報を一段小さくする方法があります。

初心者がここで感じやすいのが、「小さくしたら読まれなくなるのではないか」という不安です。そこで補足を大きくすると、メインとの差がなくなります。今度はメインをさらに大きくしたくなり、最終的には画面全体が大きな文字で埋まってしまうことがあります。

大切なのは、1番だけを際限なく大きくすることではありません。2番や3番を必要な範囲で少し静かにすることで、相対的な差を作ります。

太さとコントラストで重要度の差を作る

文字サイズだけで階層を作ると、サイズ差が極端になる場合があります。そこで、フォントの太さや背景とのコントラストも利用します。

同じサイズでもBoldとRegularでは視覚的な重みが違います。メインコピーを太くし、補足を少し軽いウェイトにするだけでも、どちらが先に読む情報なのか伝えやすくなります。

色についても同じです。

赤やオレンジそのものが自動的に強いのではなく、周囲との差があるから強調として機能します。複数の高彩度色を同時に使えば、一つひとつは派手でも、画面全体では優先順位がわかりにくくなる可能性があります。

ここで、可読性とアクセシビリティも確認します。

WCAG 2.2では、通常テキストと背景のコントラスト比は原則4.5:1以上、大きなテキストでは3:1以上が求められています。ここでいう大きなテキストは原則として18pt以上、または14pt以上の太字で、CJKではそれらに相当するサイズとして定義されています。

ポイントとCSSピクセルを換算すると、18ptは約24CSS px、14ptは約18.7CSS pxです。ただし、画像編集ソフトのpt表示と実際のWeb表示は設定によって単純に一致しないことがあるため、公開環境で確認する必要があります。

写真の上へ白文字を重ねたとき、窓や空のような明るい背景に文字が溶けることがあります。この場合は文字へ強い影を足すだけでなく、背景画像の明度を少し落としたり、半透明のオーバーレイを使ったりして、まず読める状態を作ります。

「もっと強くするには何を足せばよいか」と考えるだけでなく、「周囲を少し弱くすれば主役が見えないだろうか」と考えることも大切です。

余白で主役を目立たせる

初心者にとって余白は、少し怖い存在かもしれません。

画面に何も置かれていない場所があると、「まだ使えるスペースなのに空けたままでいいのだろうか」と感じるからです。そこへアイコンや短いコピーを入れると、一時的には完成度が上がったようにも見えます。

ところが、追加を繰り返すほど画面が落ち着かなくなる場合があります。

余白は、何もしていない場所ではありません。

大切なコピーの周囲へ空間を取れば、その情報をほかの要素から分離できます。関連する情報を近づけ、関係の薄い情報との間を広げれば、情報のグループも判断しやすくなります。

たとえば「未経験歓迎」と研修制度の説明は近づけ、CTAとの間には少し広い余白を設けることで、説明と行動を別のまとまりとして見せる方法があります。

空いている場所を見つけても、すぐ埋めないことです。「この余白をなくしたら、何が弱く見えるだろう」と考えてみると、空間にも役割があることが見えてきます。

写真のトリミングで見る場所を絞る

採用バナーでは、人物写真そのものが大きな訴求になります。

ところが、せっかく撮影した写真だからと全体を残そうとすると、写真の中で本当に見てほしかった部分が弱くなることがあります。

社員の顔も入れたいし、服装も見せたい。職場の雰囲気を伝えるために机やパソコンも残したいと考えると、自然に画角は広がります。

すると、人物の表情が小さくなり、背景の情報量が増えます。

そこで、写真を使う前に「この写真で一番伝えたいものは何か」を決めます。

若手社員の明るい表情から親しみやすさを感じてもらいたいのか、作業へ集中する横顔から仕事への真剣さを伝えたいのか、同僚と会話している様子から職場の距離感を想像してもらいたいのかによって、残す範囲は変わります。

目的が表情なら、背景を切って顔を大きくします。工場設備や仕事環境そのものが魅力なら、人物だけに寄る必要はありません。

写真のトリミングは、単純に周囲を切り落とす作業ではなく、一枚の写真に含まれる複数の情報から「今回は何を語るのか」を決める作業です。

人物の顔と視線をレイアウトに活用する

人物写真では、顔や目線も配置を考える材料になります。

心理学では、他者の視線方向へ観察者の注意が向きやすくなるgaze cueingという現象が研究されています。Frischenらの2007年の論文は、この分野の研究を整理したレビューであり、McKayらの2021年のメタ分析では423件のgaze-cueing effectを統合した結果、視線方向による注意誘導効果が一貫して観察されたと報告されています。

ただし、効果の大きさは課題や刺激条件などによって変化します。そのため、バナー内の人物をコピー側へ向ければ、すべての人が必ずコピーを見ると考えるのは適切ではありません。

実務では、人物の視線を補助的な方向の手掛かりとして利用します。

人物が右を向いている写真なら、右側へキャッチコピーを置いた案と、反対側へ配置した案を比較してみます。写真とコピーが同じ方向を支えているほうが自然に感じられるなら、採用する理由になります。

また、人物写真を水平反転するときは注意が必要です。制服や背景に文字がある場合、ロゴや製品が左右非対称の場合、反転によって現実と異なる画像になることがあります。

単純に「内側を向かせれば正解」とは考えず、写真としての自然さも確認します。

配置と整列で視線の引っかかりを減らす

バナーが「何となく素人っぽい」と感じるとき、色やフォントではなく整列が原因になっている場合があります。

見出しの左端と本文の左端が少し違い、実績値はさらに別の位置から始まり、CTAだけ別の軸に乗っている状態です。一つひとつのズレは小さくても、画面全体では落ち着かない印象になります。

制作中は、それぞれを個別に見ているので気づきにくいものです。「ここは少し右のほうがよさそう」と調整した結果、全体へ戻ったときに基準線が失われていることがあります。

そこでグリッドやガイドを表示します。

見出しと説明文の開始位置を揃え、写真の端とテキストブロックにも意図した関係を持たせます。すべてを同じ位置へ機械的に揃える必要はありませんが、ずらすなら理由を持ってずらします。

整列は目立つテクニックではありません。それでも、「色を変えてもフォントを変えても何か収まらない」と感じたとき、数ピクセルのズレや不統一な間隔を直すだけで、画面が急に落ち着いて見えることがあります。

CTAを視線のゴールとして設計する

CTAはCall To Actionの略で、見る人へ次の行動を示す要素です。

採用バナーなら、「採用情報を見る」「募集要項を確認する」「エントリーする」などが考えられます。

CTAは成果と関係するため、どうしても強く目立たせたくなります。しかし、会社も仕事内容も理解していない人へ、最初から巨大な「応募する」だけを見せても、「なぜ応募するのだろう」と感じる可能性があります。

そのため、CTAを視線の終着点として設計する考え方があります。

1番目で興味を作り、2番目で理由や根拠を理解してもらい、その結果として次の行動を選べる場所にCTAを置きます。

ここで「右下に置けばクリックされる」と考えないことも重要です。

右下が自然なゴールになるレイアウトはありますが、写真やコピーの方向、掲載場所、バナーサイズなどによって適切な位置は変わります。

また、Webページ上で実際にクリックするボタンと、画像の中へ描かれたボタン風の図形は同じではありません。

WCAG 2.2では、実際のUIコンポーネントを認識するために必要な視覚情報について、隣接色との3:1以上の非テキストコントラストが求められています。

バナー内のCTAでも読みやすさは重要ですが、「基準値を満たしたからクリックされる」という意味ではありません。視線誘導におけるCTAの役割は、見る人へ「次はここへ進めばよい」と理解してもらうことです。

Z型とF型はどう使い分ける？

視線誘導を調べると、Z型やF型という言葉が頻繁に出てきます。

すると、「バナーはZ型で作るべきなのか」「WebだからF型を使うのか」と迷うかもしれません。

しかし、先に選ぶべきなのはZ型でもF型でもありません。

まず「1番→2番→3番」を決めます。その順番を実現するために役立つなら、視線パターンを補助的に利用します。

Z型はシンプルな画面の補助線として考える

Z型は、左上から右上へ進み、そこから左下へ移ったあと、右下へ向かうZ字状の流れを想定したレイアウトの考え方です。

情報量が比較的少なく、大きな写真やコピーを順番に見せる広告やファーストビューでは、構成を考える補助線として使える場合があります。

たとえば左上付近にキャッチコピーを置き、人物写真を経由し、下部の実績やCTAへつなぐ構成です。

ただし、人間が必ず左上から見始めるわけではありません。

中央に非常に大きな人物の顔があれば、そこから見る可能性があります。右下にだけ鮮やかな数字があれば、最初に数字へ注意が向くこともあるでしょう。

したがって、Z型を「人間の視線を決定する法則」と考えるのではなく、情報の配置を考えるための一つの構成モデルとして利用します。

F型は理想的な読み方ではない

F型は、Nielsen Norman Groupのアイトラッキング研究によって広く知られるようになった視線パターンです。

F型では、上部を横方向へスキャンしたあと、その少し下でも短い横方向のスキャンが生まれ、その後はコンテンツ左側を中心に下方向へ見ていく傾向があります。

ここで誤解したくないのは、F型が「Webページの理想的な読み方」ではないという点です。

NN/gは、F型が唯一のスキャンパターンではないことを明確にしています。また、文章にWeb向けの整形が乏しく、ユーザーが効率的に情報を探そうとしており、全文を読むほど強く関与していない場合などにF型が生じやすいと説明しています。

F型のスキャンでは、右側に置かれた情報や文章後半が読まれにくくなる可能性があります。そのため、デザイナー側では「F型に合わせる」ことを目的にするより、見出し、強調、余白、情報のグループ化によって重要な内容を見つけやすくすることが大切です。

NN/gの研究では、F型に近いスキャンはモバイルでも確認されています。

なお、文章量の多いWebページでは、見出しや小見出しを拾いながら必要な場所だけ詳しく読むLayer Cake Patternのような別の走査も確認されています。通常のバナーではここまで意識する必要はありませんが、「F型だけが人間の視線パターンではない」と理解する材料として覚えておけば十分です。

視線誘導が失敗しているバナーを見抜く

ここまで7つの方法を見てきましたが、自分のバナーを修正するときは「何が足りないか」を一から探すより、典型的な崩れ方を確認したほうが早い場合があります。

最初に見たいのは、メインコピー、実績、日付、CTAなどが似たサイズと太さになっていないかです。どれも必要だからと同じ強さへ近づけると、情報量そのものより「どれが入口なのかわからない」ことが問題になります。

次に、写真の情報量と文字の可読性を確認します。表情を見せたいのに背景まで大きく残っていたり、明るい写真の上で白文字が消えていたりすれば、見る順番を考える前に焦点と読みやすさを整える必要があります。

さらに、人物の向き、テキストの配置、CTAの位置がそれぞれ違う方向を作っていないかも確認します。人物を必ず内側へ向ける必要はありませんが、画面全体に複数の方向性があるなら、なぜその配置なのかを説明できる状態にしたいところです。

この診断で見つけた問題を、次のBefore／Afterで実際の修正へつなげます。

若手採用バナーを改善するBefore／After

ここでは「未経験向け若手エンジニア採用」をテーマに、同じバナーを改善前、改善途中、改善後の三段階で見直します。

完成形だけを見ると、「センスがある人だからできるのでは」と感じてしまうことがあります。そこで、何が問題で、どの判断を変え、その結果どのような見え方を目指したのかを順番に追います。

改善前 Stage 1

改善前のバナーには、若手社員の写真と「未経験からエンジニアへ」というメインコピーがあります。

さらに「未経験歓迎」「定着率95％」「2027年度新卒採用」「会社説明会受付中」「株式会社〇〇」「応募する」という情報も入っています。

一つずつ見れば、どれも必要です。

定着率95％は強みなので目立たせたくなりますし、応募ボタンは押してほしいので大きくしたくなります。会社名も小さく扱いたくありません。

そうして調整した結果、メインコピー、数値、CTAの強さがかなり近くなっています。

写真もオフィス全体を見せるため広めに使っており、人物の顔は思ったより小さくなっています。さらに窓の明るい部分へ白文字が重なり、一部の可読性も落ちています。

この状態を見ると、作り手は「もう少し装飾したほうがいいのかもしれない」と考えがちです。背景に模様を足したり、コピーへ影を入れたり、CTAをさらに鮮やかな色へ変えたりすれば完成度が上がるように感じます。

しかし、ここでは追加しません。

問題を一言で整理すると、情報不足ではなく優先順位不足だからです。

改善前から改善途中へ

ここで初めて、情報を三段階へ分けます。

今回の例では、1番を「未経験からエンジニアへ」というメインコピー、2番を「定着率95％」という根拠、3番を「応募する」というCTAに設定します。

この順番が決まると、変更の理由も決まります。

メインコピーを大きくするのは、単に格好よく見せたいからではありません。1番に設定した情報だからです。

定着率95％を一段小さくするのも、重要ではないからではありません。メインメッセージを受け取ったあとで、「本当に働きやすいのだろうか」と考える人へ根拠として見せたいからです。

人物写真は、オフィス全体を広く残した状態から、社員の表情や仕事中の雰囲気が読み取れる範囲までトリミングします。

この変更によって、写真の焦点が絞られるだけでなく、反対側へコピーを置く余白も作りやすくなります。

白文字が明るい背景へ溶けている箇所には、暗いオーバーレイを加える方法を検討します。

仮に説明用の例として、改善前の文字と背景のコントラスト比が2.1:1だったものが、背景処理によって4.8:1まで改善したとします。この数値は作例上の仮定であり、実際の制作物では使用する色と背景で測定する必要があります。

ここまでの変更は、均一だった文字サイズから1番目を明確に強くし、広すぎた写真を焦点のある構図へ変え、読みにくかった文字を可読性のある状態へ戻したものです。

改善途中 Stage 2

改善途中では、メインコピーと実績値の差ができたため、最初に何を見せたいのかはかなりわかりやすくなりました。

写真上の文字も読みやすくなっています。

それでも、全体を眺めると少し流れが止まるように感じます。

人物は画面外側を向いており、メインコピーとCTAは反対側です。

ここで「人物を水平反転すれば完成だ」と決めてしまわず、元画像と反転案を比較します。

gaze cueingの研究では、他者の視線方向が観察者の注意へ影響する効果が確認されていますが、実際の広告では文字サイズ、色、写真の存在感、見る人の目的なども同時に作用します。

そのため、人物の方向は絶対条件ではありません。

反転した案のほうが人物とコピーの方向が揃い、全体として自然に見えるなら採用できます。一方で、人物が外側を見ている構図に「未来を見る」といった意味があり、コピーとの関係も破綻していないなら、そのまま使う判断も考えられます。

初心者のうちは「正解の配置を知りたい」と思いますが、実務では二案を並べて違いを見るほうが、判断の理由を理解しやすくなります。

改善途中から改善後へ

最後に、整列と余白、CTAの見え方を細かく調整します。

メインコピー、実績、補足情報の左端を共通する基準線へ揃え、関連する情報は近づけます。その一方でCTA周辺には十分な余白を取り、説明情報とは異なる行動領域であることをわかりやすくします。

CTAの色についても、「背景が青だから補色のオレンジ」と機械的に決めません。

オレンジが周囲との差を作りやすい可能性はありますが、ブランドカラーとの関係や写真との相性、文字の可読性まで確認する必要があります。

最終的には、最初にメインコピーへ注意が向き、その内容を社員写真や実績値が補強し、興味が続いた人がCTAを見つけられる構成を目指します。

ここで狙っているのは、幾何学的に完璧なZ型を作ることではありません。

1番、2番、3番に設定した情報の役割と、実際の画面上の強さが矛盾していないことが重要です。

改善後 Stage 3

改善後では、メインコピー、実績、CTAの役割がそれぞれ見た目にも分かれる状態になります。

三段階の違いを整理すると、次のようになります。

改善によって大きく変わったのは、派手さではありません。

一つひとつの判断に理由が生まれたことです。

以前なら「ここが空いているからCTAを置こう」「この文字はもう少し大きいほうが格好いい」と決めていたものが、「2番のあとに進んでほしいから、この位置にCTAを置く」「1番に設定したので、ほかより明確に大きくする」という判断へ変わります。

この変化が、初心者にとって重要です。

感覚を捨てる必要はありません。「こちらのほうがしっくりくる」と感じたとき、その理由をサイズ、余白、焦点、整列などの言葉へ置き換えられるようになると、次のデザインでも同じ考え方を使えるようになります。

5分でできる視線誘導チェック

バナーを完成させたら、自分の目だけで最終判断しないほうがよいでしょう。

長い時間同じ画面を見ていると、文章もレイアウトも覚えてしまいます。本来なら読みづらい部分でも、制作した本人は無意識に内容を補完できるためです。

そこで、短い時間で視線誘導を確認します。

ブラーテストで視覚的な強さを見る

まず、バナーへ一時的にぼかしをかけるか、文字が読めない程度まで縮小して見ます。

これは正式なアクセシビリティ評価ではなく、視覚的階層を確認するための実務上のチェックです。

文字内容が読めなくなった状態で、どこが最も強い塊として見えるかを確認します。1番に設定したコピーより、背景の装飾や別の数字のほうが強く見えるなら、サイズやコントラストを再調整する材料になります。

グレースケールで明度差を見る

次に、デザインを一時的にモノクロ化します。

鮮やかな色同士はカラー表示では大きく違って見えても、明度が近ければグレースケールでは似た強さになる場合があります。

モノクロでも情報の階層がある程度残っているか確認することで、色相だけに頼った強調へ気づきやすくなります。

ただし、グレースケールで差が小さいから自動的に失敗という意味ではありません。色以外の手掛かりを確認するための補助方法として使います。

コントラスト比を数値で確認する

Web上の文字として使う場合は、アクセシビリティチェックツールでコントラスト比を確認します。

WCAG 2.2では通常テキスト4.5:1以上、大きなテキスト3:1以上が基準です。大きなテキストは原則18pt以上、または14pt以上の太字で、CJKでは同等のサイズとして定義されています。

ここで基準を満たしていても、バナーの魅力や成果まで保証されるわけではありません。コントラスト比は主に情報が読み取れる状態を確認するための基準であり、視線の順番は文字サイズや写真、余白などと合わせて判断します。

整列と近接を確認する

次にグリッドを表示し、見出し、実績、補足、CTAの開始位置を確認します。

数ピクセルだけ意図せずずれている部分がないか、関連する情報が離れすぎていないか、逆に関係の薄い情報が近づきすぎていないかを見ます。

すべてを同じ間隔にする必要はありません。「同じグループだから近い」「役割が変わるから少し離れている」という距離の理由が見えることが重要です。

1番から3番まで実際に追う

最後に、自分で決めた1番から3番までを指で追います。

写真の人物がどこを向いているかだけではなく、文字サイズ、余白、写真の形、CTAの位置まで含めて確認します。

途中で「次にどこを見ればよいのだろう」と感じる場所があれば、そこに競合する要素がある可能性があります。

可能であれば、内容を知らない人にも短い時間だけバナーを見てもらいます。

自分ではメインコピーを1番にしたつもりなのに、相手が「95％」という数字を最初に見たとしても、失敗だと考える必要はありません。

数字の視覚的な強さが想定以上だったという情報が得られたからです。その結果を見て、数字を弱めるのか、逆に数字を1番として再設計するのかを決めます。

視線誘導の確認とは、正解を当てる試験ではありません。仮説と実際の見え方との差を見つけ、次の修正へつなげる作業です。

バナーの視線誘導でよくある質問

Z型とF型はどちらを使えばよい？

最初からどちらか一つを選ぶ必要はありません。

情報量が少なく、大きな要素を順番に配置する構成では、Z型が補助線として役立つ場合があります。一方でF型は、文章中心のWebコンテンツなどをユーザーがスキャンするときに観察されるパターンの一つです。

特にF型は、理想的なレイアウトを示す法則ではありません。先に「1番→2番→3番」を決め、その流れを作るために使える場合だけ視線パターンを参考にします。

バナーで最初に見せるべき情報は？

ターゲットが続きを見たくなる情報が候補になります。

知名度の低いサービスなら、ブランド名より悩みやベネフィットのほうが入口として機能する可能性があります。一方で認知度の高いブランドや強い期間限定オファーでは、ブランド名や割引率自体を1番にする判断もあります。

「自分が何を伝えたいか」だけではなく、「相手は何を見れば自分に関係があると思うのか」を考えます。

情報が多い場合はどう整理する？

まず削る前に、役割と関連性でまとめます。

最初に必要な情報、興味を持ったあとに必要な情報、詳細ページで説明できる情報へ分けます。そのうえで関連情報を近づけ、一つの視覚的なまとまりとして扱います。

バナーの目的が詳細ページへの興味喚起なら、一枚ですべてを説明する必要はない可能性があります。ただし、応募条件など判断に必要な情報を意図的に隠すという意味ではありません。

写真と文字はどちらを目立たせる？

最初に何を感じてほしいかによって変わります。

社員の表情そのものが採用上の魅力なら、写真を主役にできます。反対に「未経験から3か月の研修で基礎を学べる」という具体的な価値が強ければ、文字を主役にする方法もあります。

写真と文字が同じ強さで競っているなら、どちらの役割を一段下げられるか考えてみると整理しやすくなります。

視線誘導ができているか確認する方法は？

最初に決めた1番から3番までと、実際に見たときの順番を比較します。

いったん画面から離れ、もう一度見た瞬間にどこへ目が向くか確認します。その後、縮小表示やブラーテスト、グレースケール、コントラスト測定、整列確認などを使って原因を分解します。

可能であれば初見の人にも確認してもらいます。想定とは違う場所を見られたときこそ、改善材料が見つかったと考えることができます。

まとめ

バナーの視線誘導で最初に覚えるべきなのは、Z型やF型ではありません。

まず「1番に何を見せるか」「2番目に何を理解してほしいか」「3番目にどこへ進んでほしいか」を決めます。その情報構造を、文字サイズ、太さとコントラスト、余白、写真のトリミング、人物の顔と視線、配置と整列、CTAという七つの方法で画面へ反映します。

バナーがまとまらないと、「もっと何かを足さなければ」と焦ることがあります。

しかし、問題が情報不足ではなく優先順位にあるなら、追加するほど迷いは大きくなります。まず1番に設定した情報が本当に1番に見えるかを確認し、次に2番との関係を見ます。そのうえで、CTAまでの流れが途切れていないかを確かめます。

最初は「なんとなく変」としか言えなかった違和感でも、何度か確認しているうちに「1番と2番のサイズ差が弱い」「写真の背景情報が多い」「CTAの前で流れが切れている」と具体的な言葉へ変わっていきます。

そこまで来れば、修正は以前より難しくありません。

一度に完璧な視線誘導を作ろうとせず、まず自分のバナーへ1番から3番までを書き込み、一か所だけ変えて見え方を確認します。その小さな判断と検証の積み重ねが、初心者が「なんとなく配置する」状態から抜け出し、自分でバナーを改善できるようになるための土台になります。

参考資料

視覚的階層やScale、Contrast、Gestalt Principlesの基本については、Nielsen Norman Group Visual Design Principles が参考になります。

F型の特徴や発生条件、モバイルでも観察されること、F型以外のスキャンパターンが存在することについては、Nielsen Norman Group F-Shaped Pattern of Reading on the Web で確認できます。

通常テキスト4.5:1以上、大きなテキスト3:1以上というコントラスト基準と大きなテキストの定義については、W3C Web Content Accessibility Guidelines WCAG 2.2 が基準になります。

日本語環境でのカラー設計やコントラストについて確認したい場合は、デジタル庁デザインシステム カラーのアクセシビリティ が参考になります。

gaze cueingの基礎的な研究整理については、Frischenらによるレビュー論文 Gaze cueing of attention: visual attention social cognition and individual differences が参考になります。

gaze cueingの効果を定量的に検討した研究としては、McKayらによるメタ分析 Visual attentional orienting by eye gaze: A meta-analytic review of the gaze-cueing effect があり、423件のgaze-cueing effectを統合した分析が報告されています。