反応が弱いバナーの見直し方：文言・視線・ボタン・サイズの4点診断

まず確認：バナー自体の問題とは限らない

診断の前に、次の3点を確認してください。どれかに当てはまるなら、先にそこを直すほうが効く場合があります。

• 表示されている場所：スマホで画面の下のほうに隠れていないか、他の要素に埋もれていないか。
• クリック後の行き先：押した先のページが、バナーの約束と違っていないか。
• 見せている相手：そもそも興味のない人に出していないか。

ここまで確認してもバナーに怪しい点がありそうなら、次の診断シートに進みます。

4観点の診断シート

バナーを実際に表示される大きさ（スマホなら実機か、ほぼ実寸の表示）で見ながら、各行の問いに「はい／いいえ／迷う」で答えます。「いいえ」「迷う」が付いた観点が、仮説の候補です。

• 文言、診断の問い：3秒で「誰向けに・何がもらえるか」が言えるか、「いいえ」のときの仮説の例：何のバナーか伝わらず、スルーされている
• 文言、診断の問い：日付・価格・締切など、行動の理由が1つ入っているか、「いいえ」のときの仮説の例：今押す理由がない
• 視線、診断の問い：最初に目に入る場所が、伝えたい1点になっているか、「いいえ」のときの仮説の例：装飾や写真に視線を取られている
• 視線、診断の問い：文字や要素が多すぎて、読む順番が迷子にならないか、「いいえ」のときの仮説の例：情報過多で読まれない
• ボタン、診断の問い：ボタンがボタンに見えるか（背景との差、形、余白）、「いいえ」のときの仮説の例：押せる場所だと認識されない
• ボタン、診断の問い：ボタンの言葉が行動を具体的に示しているか、「いいえ」のときの仮説の例：「詳しくはこちら」で押す動機が弱い
• サイズ、診断の問い：実際の表示サイズで、小さい文字が読めるか、「いいえ」のときの仮説の例：縮小表示で文字がつぶれている
• サイズ、診断の問い：掲載先で切り取られても、重要な要素が残るか、「いいえ」のときの仮説の例：端に置いた文字やボタンが欠けている

観点ごとの見方と、変更案の出し方

文言：1つの約束に絞る

見出しに「誰に」「何を」「どうなる」を詰め込みすぎると、結局どれも伝わりません。説明用の例として、ハンドメイド雑貨のマーケットを告知するバナーを考えます。

• 変更前：「秋の手しごとマーケット 開催！ 個性あふれる作家が集合」
• 変更案：「11/23(日) 手しごとマーケット 入場無料」

この例は説明用で、実際に効果を測ったものではありません。変更案は、日付と条件という「行動の理由」を前に出す案という位置づけです。

視線：最初に見る場所を1つ決める

主役を決め、それ以外の要素の強さを下げます。写真、見出し、ロゴ、ボタンが同じ強さで主張していないか確認してください。簡単な確認方法は、画面を少し離して見るか、縮小して目を細めて見ることです。最初に残って見えるものが、伝えたいものと一致していれば合格です。

ボタン：押せると分かり、押した後が想像できる

バナー画像の中のボタン風の図形は、実際のボタン部品ではなく画像の一部です。それでも、押せる場所に見えるかどうかは反応に関わると考えられます。

目安として、W3Cのウェブアクセシビリティ指針（WCAG 2.2）には参考になる基準があります。ただし、これはウェブページの要素向けの基準で、バナー画像の合否を決めるものではありません。

• 文字のコントラスト：通常の文字は背景との比4.5:1以上、大きな文字は3:1以上とされています（WCAG 達成基準 1.4.3の解説）。これはウェブページ上のテキストに関する基準で、バナー画像の合否を決めるものではありません。ボタン風の画像内テキストを読みやすくする際の参考にはできます。
• 操作対象の大きさ：ポインタ操作の対象は24×24 CSSピクセル以上が基本で、間隔が十分にある場合などの例外もあります（達成基準 2.5.8の解説）。これはウェブページ上で操作する対象の基準です。バナー画像内の小さな補助リンク自体は操作できないため、バナー画像の寸法には適用できません。
• 画面上の部品の見分けやすさ：ウェブページ上の操作部品を識別するために必要な視覚的な手がかりは、隣接する色と3:1のコントラストが必要です。ただし、テキストなど別の手がかりで部品を識別できる場合、部品の境界線は必須ではありません（達成基準 1.4.11の解説）。バナー画像内のボタン風図形の合否を決める基準ではありません。

文言の変更案は「詳しくはこちら」→「出店者一覧を見る」のように、押した先で何が見られるかを入れる形です。

サイズ：実際の表示に合わせて確認する

掲載先によって、表示サイズ、トリミング、スマホでの縮小が異なります。確認事項は次の3つです。

1. 掲載先ごとに必要な寸法・比率・ファイル形式が決まっているか。ここは媒体の最新の入稿規定で確認します。この記事では数値を載せません。
2. 縮小表示で、最小の文字が読めるか。
3. 周囲が切り取られても、日付とボタンが残るか。

AIに任せること、人が確認すること

AIは、4観点で「迷う」箇所の洗い出しと、変更案の候補出しに向いています。一方、実際の見え方、ブランドらしさ、掲載先の規定、景品表示などの表現上の問題は、人が確認します。

渡す情報は、バナー内の文言をテキストで書き起こしたもの、レイアウトの説明、掲載場所、見せたい相手、押した先のページの内容です。画像をAIに渡せる場合でも、未公開の企画、個人情報、取引先名などの機密情報は、渡す前に説明用の仮データへ置き換えてください。

そのまま使える依頼文の例です。

あなたはバナー改善の相談役です。次の情報をもとに、
文言・視線・ボタン・サイズの4観点で、原因の仮説を出してください。

# 条件
- 効果や数値は断定しない。「〜の可能性がある」という書き方にする
- 4観点それぞれで、仮説を最大2つ。根拠は私が書いた情報の範囲だけにする
- 最後に「最初に1つだけ変えるなら何か」を理由つきで提案する
- 情報が足りない点は、推測せずに質問として挙げる

# バナーの情報
・文言：[見出し／補足／ボタン文言]
・レイアウト：[左に写真、右に見出し、右下にボタン、など]
・掲載場所：[サイトのトップ、SNS広告 など]
・見せたい相手：[例：地域の雑貨好き]
・クリック先：[ページの内容]
・困りごと：[表示はされるが、クリックが少なく感じる]

返ってきた仮説は、診断シートの「いいえ」と一致するかで取捨選択します。AIの案を全部採用せず、1つだけ選ぶのがこの方法の要点です。

一度に変えない比較メモの書き方

文言とボタンの色とサイズを同時に変えると、反応が変わっても理由が分かりません。メモは1回の比較につき1つの変更だけを書きます。

【比較メモ No.__】
日付：
変更する観点：文言／視線／ボタン／サイズ（1つだけ）
仮説：「〇〇だから反応が弱いのではないか」
A（現行）：
B（変更案）：
変えないもの：（上記以外の全要素。掲載場所・期間・クリック先など）
見る指標：（例：表示回数に対するクリック数）
比べる期間：A・Bとも同じ長さ、同じ曜日構成にする
判断のルール：（事前に書く。例：期間終了後にBのほうが多ければ採用）
結果：
次に変えるもの：

説明用の例です。

【比較メモ No.1】
変更する観点：文言
仮説：日付と条件が見出しにないため、行動の理由が伝わっていない
A（現行）：秋の手しごとマーケット 開催！
B（変更案）：11/23(日) 手しごとマーケット 入場無料
変えないもの：写真、ボタン文言と色、サイズ、掲載場所
判断のルール：同じ期間の表示回数あたりのクリック数で比べる

押さえるのは3点です。判断のルールを結果を見る前に書くこと。A・Bを同じ期間で比べること。そして、表示回数が少ない場合は差が偶然の範囲かもしれないため、結論を急がず、期間を延ばすか「判断保留」と書くことです。差が小さい場合も、同様に保留にしてかまいません。

見直しを続けるときの順番

反応が弱い理由の見当がつかないときは、まず文言から始めるのが取り組みやすい順番です。変更のコストが小さく、他の観点に影響しにくいためです。その次に視線、ボタン、サイズと進めます。ただしサイズだけは、切り取られて文字が読めないといった明らかな不具合が見つかったら、順番を待たずに直してください。

1回の比較が終わったら、メモの「次に変えるもの」を埋めて終了です。診断シートは毎回やり直さず、前回「いいえ」だった行だけを見直せば十分です。