「バナー広告を出しているのに、クリックが伸びない」。そんな悩みの多くは、デザインの構成に原因があります。この記事では、クリックされるバナーの構成パターン、配色・視線誘導のルール、制作手順、外注費用の目安までを解説します。結論として、バナーの成果は「訴求・視認性・遷移先との一貫性」の3要素で大きく決まります。
バナー広告デザインとは｜成果を左右する3要素
バナー広告の成果は、見た目の美しさではなく「訴求メッセージ」「視認性」「遷移先との一貫性」の3要素でほぼ決まります。この3つが揃っていないバナーは、どれだけ装飾を凝らしてもクリックにつながりません。
- 訴求メッセージ: 誰の、どんな悩みを、どう解決するかが一瞬で伝わるか
- 視認性: 小さいサイズやスマホ画面でも文字が読めるか
- 遷移先との一貫性: バナーの内容とリンク先LPの内容が一致しているか
バナーが表示されてから読者が判断するまでの時間は、一般に1秒前後といわれます。「読ませる」のではなく「見た瞬間に伝わる」ことを設計の前提にしてください。
クリックされるバナーの構成パターン比較
バナーの構成は大きく4パターンに分かれ、商材と目的によって最適解が変わります。まずは自社の商材がどのパターンに向くかを見極めましょう。
| 構成パターン | 特徴 | 向いている商材 | 注意点 |
|---|---|---|---|
| コピー主体型 | 大きな文字で訴求を伝える | 無形サービス、BtoB | 情報を詰め込むと逆効果 |
| 人物写真型 | 使用シーンや感情を想起させる | 研修、採用、美容 | 写真とコピーの整合が必要 |
| 商品ビジュアル型 | 商品画像を主役に据える | EC、食品、アプリ | 背景と商品の色被りに注意 |
| 実績・権威型 | 受賞歴や導入社数を押し出す | 比較検討層向け商材 | 根拠のない表現は媒体審査で不承認 |
「情報を減らすとCTRは上がるがCVRは下がる」トレードオフ
EMPLAYのクリエイティブ制作の現場では、同一商材でテキスト量や人物写真の有無だけを変えたABテストをよく実施します。その経験則として、情報量を減らしたシンプルなバナーほどCTR(クリック率)は上がる傾向があります。一方で、遷移後のCVR(成約率)は下がりやすいのです。
理由は単純で、情報が少ないバナーは「気になって押す人」を広く集めるためです。価格や条件を知らずにクリックした人は、LPで離脱しやすくなります。逆に、価格帯や対象者をバナーに明記すると、クリック数は減っても質の高い訪問者が残ります。
判断基準は広告の目的です。認知拡大やリスト獲得が目的ならシンプル路線、商談や購入が目的なら条件明記型を試すのが定石です。CTRだけを見て「勝ちバナー」を決めないよう注意してください。
配色・フォント・視線誘導の基本ルール
配色は3色以内、フォントは2種類以内、視線はZ型に流す。この3つを守るだけで、バナーの見やすさは大きく改善します。
配色は「70:25:5」を目安に3色以内
ベースカラー70%、メインカラー25%、アクセントカラー5%の配分が目安です。アクセントカラーはCTAボタンだけに使い、他の要素と競合させないようにします。ブランドカラーとCTA色が近い場合は、補色系のボタン色を検討しましょう。
フォントは2種類まで・最小でも13px相当
フォントを3種類以上混ぜると、素人っぽさが一気に出ます。見出し用と本文用の2種類に絞り、太さの違いで強弱をつけるのが基本です。スマホ表示を考えると、最小文字も13px相当より小さくしないのが無難です。
視線誘導は「Z型」+人物の目線を活用
横長バナーでは、視線は左上から右下へZ字に動くのが一般的です。左上にキャッチコピー、右下にCTAボタンを置くと自然に読めます。人物写真を使う場合、人物の目線の先に読者の視線も引かれます。人物がコピーやボタンの方向を見る配置にすると効果的です。
バナー制作の手順｜ラフから入稿まで
バナー制作は「デザインの前工程」で品質の8割が決まります。いきなりツールを開かず、次の6ステップで進めてください。
- 目的とKPIを決める: 認知(CTR重視)か獲得(CVR重視)かを先に確定する
- 訴求軸を3つ以上書き出す: 価格・実績・悩み解決など、切り口を複数用意する
- ラフを手書きで作る: コピー・画像・CTAの配置を紙やスライドで固める
- デザインを制作する: ラフに沿って配色・フォントのルールを適用する
- 入稿規定を確認する: サイズ・容量・ファイル形式・テキスト量を媒体ごとに確認する
- ABテスト用に2〜3案作る: 訴求軸か画像だけを変えた比較用バリエーションを用意する
特に見落とされがちなのが手順5です。媒体ごとに容量上限や禁止表現が異なり、審査落ちで配信開始が数日遅れることもあります。
媒体別・サイズ別の作り分けポイント
同じデザインの使い回しは避け、媒体ごとの閲覧環境に合わせて作り分けるのが原則です。主要媒体の特徴を押さえておきましょう。
| 媒体 | 主なサイズ | 作り分けのポイント |
|---|---|---|
| Google(GDN) | 300×250、728×90ほか | レスポンシブ広告用に画像とテキストを分けて用意 |
| Yahoo!広告 | 300×250、468×60ほか | 年齢層が広く、文字の可読性を優先 |
| Meta(Instagram/Facebook) | 1080×1080、1080×1920 | 画像内テキストが多いと配信が抑制される傾向 |
| LINE広告 | 1200×628、1080×1080 | 小さなサムネイル表示でも読める文字サイズに |
とくにスマホ縦型(9:16)と正方形(1:1)は、横長バナーの流用では要素が窮屈になります。主要3サイズは個別にレイアウトを組み直すことを推奨します。
制作ツールと外注費用の比較
内製ならCanva、量産や戦略設計まで求めるなら外注が現実的な選択肢です。費用と品質のバランスで選びましょう。
| 手段 | 費用の目安(2026年時点) | 向いているケース |
|---|---|---|
| Canvaで内製 | 無料〜月2,000円程度 | まず自分たちで試したい、修正を高速に回したい |
| デザインソフトで内製 | 月3,000円程度〜+人件費 | 社内にデザイナーがいる |
| クラウドソーシング | 1枚3,000〜1万円程度 | 単発で安く枚数を確保したい |
| 制作会社・代理店 | 1枚1万〜5万円程度 | 訴求設計やABテスト運用まで任せたい |
内製の第一候補はCanvaです。広告サイズのテンプレートが揃っており、非デザイナーでも一定品質のバナーを短時間で作れます。一方、外注の価格差は「デザイン作業だけか、訴求設計から入るか」の差です。安さだけで選ぶと、ABテストの仮説設計がない「1枚きりの納品」になりがちです。
よくある質問
バナー広告のCTRはどれくらいが目安ですか？
ディスプレイ広告全体では0.1〜0.5%程度が一般的な目安です。媒体・業種・ターゲティングで大きく変わるため、絶対値より自社の過去実績との比較で判断してください。リターゲティング配信は新規向け配信よりCTRが高く出る傾向があります。
バナーは何パターン用意すればよいですか？
最低2パターン、できれば3パターンの用意をおすすめします。訴求軸だけを変えた比較から始めると、勝因の分析がしやすくなります。色やレイアウトの検証は、訴求軸が固まった後で十分です。
デザイン未経験でもバナーを内製できますか？
Canvaなどのテンプレート型ツールを使えば内製できます。テンプレートを選び、コピーと画像を差し替えるだけでも実用レベルになります。ただし配色3色以内・フォント2種類以内のルールは崩さないでください。
バナーとLPのデザインは合わせるべきですか？
合わせるべきです。バナーとLPのキャッチコピーやキービジュアルが違うと、訪問者は「別のページに来た」と感じて離脱します。バナーで使った訴求文言をLPのファーストビューにも置くのが基本です。
まとめ｜ABテストで勝ちバナーを育てる
バナー広告のデザインは、一度作って終わりではなく、検証して育てるものです。要点を整理します。
- 成果は「訴求・視認性・遷移先との一貫性」の3要素で決まる
- 構成は4パターンから商材と目的に合わせて選ぶ
- 情報を減らすとCTRは上がるが、CVRは下がりやすい
- 配色3色以内・フォント2種類以内・Z型の視線誘導が基本
- 主要3サイズは流用せず個別にレイアウトを組む
次のアクションとしては、現行バナーの訴求軸を書き出し、訴求だけを変えた比較案を1枚作ることから始めてください。小さな検証の積み重ねが、広告費の無駄を確実に減らします。
なお、訴求設計からABテスト運用までを一貫して任せたい場合は、EMPLAYのクリエイティブ制作サービスでもバナー広告の企画・制作を支援しています。内製と外注の使い分けを含め、現状の運用に合わせた進め方を提案できますので、迷ったときの相談先の一つとしてご検討ください。
関連記事
- Web広告の種類と選び方｜リスティング・SNS・アフィリエイトの違いを徹底比較 - ディスプレイ広告を含むWeb広告全体の基礎を整理できます
- Instagram広告の始め方完全ガイド｜費用・種類・ターゲティング設定を徹底解説 - SNS向けクリエイティブの入稿先として押さえたい設定手順
- LP改善チェックリスト50項目｜CVRを上げるランディングページ最適化の完全ガイド - バナーとLPの一貫性を高める改善視点をまとめています
- Canva（キャンバ）の使い方完全ガイド｜ビジネスで使えるデザイン作成術 - バナー内製の第一候補となるツールの実践的な使い方
