「言われてみれば分かるけれど、自分で作ると同じ失敗を繰り返してしまう」。バナーの改善では、こうした経験を持つ運用者が少なくありません。
デザインの原則は、頭で理解することと、自分の手を動かして再現できることの間に距離があります。その距離を縮める近道が、失敗例と改善例を並べて見比べることです。
この記事は、SIGNALZのバナーデザインシリーズで扱ってきた配色・タイポグラフィ・レイアウト・情報設計の知識を、架空バナーの「よくある失敗→改善」5事例で総復習する保存版です。各事例で図解のBefore/Afterを見比べ、末尾のチェックリストを配信前の確認に使ってください。
Before/Afterで学ぶ意味
デザインの原則は、単体で読んでも記憶に残りにくいものです。「コントラストを確保する」と言われても、どの程度が不足でどの程度が十分かは、実物を見比べないと判断しにくいためです。
Before/Afterで学ぶ利点は、次の3つに整理できます。
| 利点 | 内容 |
|---|---|
| 基準が分かる | 「悪い」と「良い」の境界線を具体的な見た目で把握できる |
| 自分のバナーと照合できる | 手元の制作物がどちらに近いか判定しやすくなる |
| 直し方が分かる | 「何を変えたか」まで示すことで、次の制作に再現できる |
以降の5事例は、いずれも架空の商材で作成した模式図です。実際のバナーは商材やターゲットによって最適解が変わりますが、失敗のパターン自体は多くの案件で共通しています。自分が担当するバナーに近い事例があれば、そこから読み進めてください。
事例1：文字が読めない（コントラスト不足）
もっとも多い失敗が、背景と文字の明度差が不足し、読めないバナーになってしまうケースです。作り手は画面上で見慣れているため気づきにくく、初見のユーザーには致命的な失敗になります。
改善前は、見出し・本文・CTAのすべてが背景と近い明るさの色で作られています。単体では上品に見えても、実際の配信面では文字が背景に沈み、内容がまったく伝わりません。
改善後は、見出し部分に濃い紺の帯を敷いて白抜き文字にし、CTAには独立したアクセントカラーを使っています。変更点は次の2つです。
- 文字色と背景色の明度差を確保した（通常テキストはコントラスト比4.5:1以上が目安）
- CTAの背景色を、周囲と混じらない独立したアクセントカラーに変更した
コントラストの考え方は 広告バナーの配色の基礎ガイド で詳しく解説しています。
事例2：情報を詰め込みすぎ
伝えたいことが多いほど、すべてを盛り込みたくなります。しかし要素が増えるほど1つあたりの面積は小さくなり、結果としてどれも伝わらないバナーになります。
改善前は、バッジ3種・商品画像2点・見出し・説明文3行・CTAボタン2種と、要素が12個も並んでいます。1画面に情報を詰め込むほど、視線はどこにも定まりません。
改善後は、伝えたいメッセージを「秋の新作30%OFF」の1点に絞り、要素を4個まで削っています。変更点は次のとおりです。
- 一番伝えたい情報（オファー内容）以外を削り、主役を1つに決めた
- CTAを1種類に統一し、行動の選択肢を絞った
何を残し何を削るかの判断基準は 広告バナーの情報設計ガイド で解説しています。
事例3：CTAが埋もれている
CTA（行動喚起ボタン）は、バナーの中でもっとも重要な要素です。しかし他の要素に埋もれ、存在に気づかれないまま配信されているケースが多く見られます。
改善前のCTAは、背景の紺と近い色で作られ、サイズも小さく、右上の隅に置かれています。存在自体に気づかれない配置です。
改善後は、背景から独立したアクセントカラーを使い、サイズを大きくし、視線が最後に到達しやすい下部中央に配置しています。変更点は次の3つです。
- CTAの背景色を、バナー内で唯一のアクセントカラーに変更した
- ボタンのサイズを、指で押しやすい大きさまで拡大した
- 配置を、視線が流れ着きやすい下部中央に変更した
アクセントカラーの使い方は 広告バナーの配色の基礎ガイド 、視線の流れを踏まえた配置は 広告バナーのレイアウトと視線誘導ガイド で解説しています。
事例4：フォントがバラバラ・サイズが均一
文字まわりの失敗は2つが同時に起きがちです。1つは書体の混在、もう1つはサイズの差（ジャンプ率）がなく、すべての文字が同じ重みに見えてしまうことです。
改善前は、見出しに欧文フォント風の斜体、本文にゴシック体、日付に等幅フォントと、3つの書体が混在しています。しかもすべて同じくらいの大きさで並んでいるため、どこが見出しなのか判断できません。
改善後は、書体を1系統に統一したうえで、見出しだけを大きく強調しています。本文や補足情報は小さいままにし、メリハリ（ジャンプ率）をつけています。変更点は次の2つです。
- 使用する書体（フォントファミリー）を1〜2種類に統一した
- 見出しと本文のサイズ差を広げ、優先順位を視覚化した
書体選びとジャンプ率の考え方は 広告バナーのタイポグラフィガイド で詳しく解説しています。
事例5：要素がバラバラで視線が迷う
個々のテキストや画像は問題なくても、配置がそろっていないと、全体として雑然とした印象になります。ユーザーの視線はどこから読み始めればよいか分からず、離脱の原因になります。
改善前は、見出しやバッジがわずかに傾き、画像の左端もそろっていません。1つ1つは小さなズレでも、積み重なるとバナー全体が雑然として見えます。
改善後は、テキストと画像の左端をすべて同じ位置にそろえ、見出しと説明文の間隔を近く、画像との間隔をやや広く取って、関連する要素をグループとして認識しやすくしています。変更点は次の2つです。
- すべての要素の左端をそろえ、傾きをなくした
- 関連する要素同士の余白を狭く、そうでない要素同士の余白を広く調整した（近接の原則）
整列とグルーピングの詳しい考え方は 広告バナーのレイアウトと視線誘導ガイド で解説しています。
運用メモ 5つの失敗は、単独ではなく複数が同時に起きていることがよくあります。1つのバナーを見直すときは、この記事の事例1から5まで順番に照らし合わせると、見落としを防ぎやすくなります。
まとめと配信前チェックリスト
5つの事例に共通するのは、いずれも「足す」ではなく「削る・そろえる・差をつける」という引き算の発想で改善している点です。要点を整理します。
| 事例 | 症状 | 改善の要点 |
|---|---|---|
| コントラスト不足 | 文字が背景に沈み読めない | 背景と文字の明度差を確保する |
| 情報の詰め込み | 主役が定まらない | 伝えることを1つに絞り、要素を減らす |
| CTAの埋没 | 行動を促せない | アクセントカラー・十分なサイズ・視線の到達点に配置する |
| 書体・サイズの不統一 | 優先順位が伝わらない | 書体を統一し、サイズでメリハリをつける |
| 要素の不整列 | 視線が迷う | 端をそろえ、関連する要素をグループ化する |
配信前には、次のチェックリストで自分のバナーを確認してください。1つでも当てはまれば、この記事の該当事例に戻って見直せます。
配信前のBefore/Afterチェックリスト
- 文字と背景のコントラストは十分か（グレースケールでも読めるか）
- 伝えたいメッセージは1つに絞れているか
- CTAは一目で見つけられる色・大きさ・位置にあるか
- 書体は1〜2種類に統一され、見出しと本文でサイズ差がついているか
- 要素の端はそろい、関連する要素同士が近接しているか
デザインの原則は、知っているだけでは成果に結びつきません。今回の5事例を手元のバナーと照らし合わせ、当てはまるものから直していくことが、もっとも確実な改善の進め方です。