バナーのクリック率(CTR)を上げるには、デザインを作り直す前に「キャッチコピーを15〜20文字前後まで削ってフォントを大きくする」「訴求を機能からベネフィットに変える」「CTAボタンを背景とはっきり区別できる色にする」の3点を順に見直すのが近道です。参考までに、Googleディスプレイネットワーク(GDN)の平均CTRは2025年の集計で0.46%です。
BtoB向けSaaSのクライアントから「バナー広告を数ヶ月回しているのに、CTRがまったく動かない」という相談を受けたことがあります。
管理画面を見せてもらうと、GDNで配信している300×250のバナーが並んでいました。どれもきれいにデザインされていて、写真は高解像度、ロゴもきちんと入っています。それなのにクリックされない。
原因はすぐにわかりました。300×250の小さな枠に50文字を超えるテキストが詰め込まれていて、フォントサイズが12px前後まで小さくなっていたのです。スマホでは何が書いてあるか判読できません。しかも、キャッチコピーとサブコピーと会社名とCTAボタンが全部同じウェイトで並んでいて、どこを見ればいいかわからない状態でした。
これは珍しい話ではありません。「情報を全部入れたい」「ロゴは大きく」「電話番号も入れてほしい」といった要望が積み重なり、結局すべてが中途半端になるパターンはよくあります。この記事では、CTRを改善するためのバナーデザインの具体的な手順を解説します。
手を入れる順番
バナーのCTRが伸びないとき、直す順番はおおむね決まっています。
- キャッチコピーの文字数を削り、フォントサイズを上げる
- 訴求を機能の羅列からベネフィットに変える
- CTAボタンを背景の補色にして、押した先で何が得られるかを明示する
- 載せる要素を3〜5個に絞る
- 配信面ごとにサイズとコピーを出し分ける
上にあるものほど効果が出やすく、しかも制作コストが小さい項目です。デザインを一から作り直す前に、この5つを順に点検するだけで数字が動くことは珍しくありません。以下、それぞれの判断基準を具体的な数値とあわせて解説します。
バナー広告の平均クリック率はどれくらいか
自社の数字が高いのか低いのか、まずここが気になるところですよね。
Googleは業界平均のCTRを公表していないため、参考になるのは広告代理店などが集計したベンチマークです。米国の代理店Focus Digitalが2025年1〜9月のGoogle広告16,000件超のキャンペーンをもとにまとめた集計では、次のような数字が出ています。
| 区分 | 平均CTR(2025年1〜9月) |
|---|---|
| ディスプレイキャンペーン全体 | 0.46% |
| BtoB | 0.46% |
| テクノロジー | 0.39%(集計内で最も低い業種) |
| アート・エンターテインメント | 1.55%(集計内で最も高い業種) |
米国中心のデータで、リマーケティング配信も含んだ数字です。日本の自社アカウントにそのまま当てはめるより、「0.4〜0.5%前後がひとつの基準線」と捉えておくのが現実的です。
この数字を見て「低すぎる」と感じるかもしれませんが、逆に言えばCTRが0.2%から0.4%に上がるだけで、同じ表示回数でクリック数は2倍になります。バナーデザインの改善は、予算を増やさずに成果を上げられる施策のひとつです。
なお、リマーケティング配信のCTRを新規配信と同じ土俵で比べるのは避けたほうが安全です。すでに自社サイトを訪れた人に見せる広告はクリックされやすく、混ぜて平均すると自社の実力を読み違えます。
CTRを左右するのはデザインの「きれいさ」ではない
ここが肝心な点ですが、CTRが高いバナーが「きれいなバナー」とは限りません。
クライアント案件のA/Bテストでも、デザイナーが丁寧に作り込んだビジュアル重視のバナーより、コピーの文字を大きくしてビジュアルを簡素にしたバナーのほうがCTRで上回ることがありました。バナーはコンテンツを読む途中に視界の端で一瞬見られるだけなので、その間に「自分に関係ある」と思わせるには、読める文字サイズと明確なメッセージが必要になります。
Nielsen Norman Groupの視線計測調査でも、ユーザーは広告らしい配置や見た目の要素を、中身を確かめる前に読み飛ばす傾向(バナーブラインドネス)が確認されています。凝った装飾で目を引こうとするほど「広告だ」と判断されやすい、という点は押さえておきたいところです。
デザインの品質は大切です。ただ、品質の定義を「見た目の洗練さ」から「伝わるかどうか」に置き換えるだけで、バナーの成果は変わります。
サイズ別のデザイン最適化
バナーデザインの厄介なところは、配信面によって最適な設計がまったく違う点です。同じデザインをリサイズして使い回す運用をよく見かけますが、これはほぼCTRを落とします。
GDN(Googleディスプレイネットワーク)
GDNで特に重要なサイズは300×250(ミディアムレクタングル)と728×90(リーダーボード)です。
300×250は上下2分割が安定します。上半分にキャッチコピー(18px以上)、下半分にCTAボタン。背景はソリッドカラーのほうが文字の視認性が上がります。728×90は横長なので左から右への視線誘導が基本になります。左にアイキャッチ、中央にコピー、右端にCTAの横一列レイアウトが定番です。
GDNでは、画像とテキストを入稿して配信面に合わせて自動で組み合わせる「レスポンシブ ディスプレイ広告」も主流です。Google広告ヘルプでは、画像は横長(1.91:1)が1,200×628、スクエアが1,200×1,200、短い広告見出しは全角15文字以内、長い広告見出しは全角45文字以内と案内されています。固定サイズのバナーとレスポンシブ広告を併用する場合も、短い見出し15文字という上限は、キャッチコピーを絞る目安としてそのまま使えます。
YDA(Yahoo!ディスプレイ広告)
YDAで押さえておきたいのは600×500(Yahoo! JAPANトップ向け)、300×250、インフィード広告(1200×628)です。Yahoo!のページは情報密度が高いため、バナーが埋もれやすい。背景色のコントラストを意識的に強くする必要があります。
クライアント案件で600×500を検証したときも、要素を「キャッチコピー・数字1つ・CTAボタン」の3点に絞ったバナーが、詳細を盛り込んだバナーをCTRで上回りました。
SNS広告(Meta広告・X広告)
SNS広告のバナーは、GDN/YDAとは根本的に異なるルールで動きます。
Meta広告(Instagram/Facebook)の推奨アスペクト比は以下のとおりです。
- フィード広告:1:1(正方形)または4:5
- ストーリーズ/リール:9:16(縦型フルスクリーン)
SNS広告で最も重要なのは「広告っぽく見えない」ことです。ユーザーはフィードをスクロールしながらコンテンツを消費しているので、明らかに広告だとわかるバナーは、先ほどのバナーブラインドネスで読み飛ばされてしまいます。
画像内のテキスト量については、かつてMeta広告に「テキストが画像の20%を超えると配信が制限される」というルールがありました。このルールは2020年9月に撤廃され、現在は配信を制限する条件ではありません。ただ、フィードを流し見される中で読める文字数は多くないため、画像内のテキストは最小限にとどめ、詳細は広告テキストやリンク先で伝えるほうが無難です。
Meta広告で反応が良かったバナーの共通点は、フィードに馴染む色味、自然なシチュエーションの人物写真、画像内テキストは短く、CTAはMeta側のボタン機能を活用、の4点でした。X(旧Twitter)では逆に、ビジュアルのインパクトで目を止めて、投稿テキスト側で詳細を伝える構成が有効になります。
プラットフォームごとの推奨サイズや入稿規定は変更が入りやすい部分なので、SNS広告を主戦場にする場合はSNS広告バナーの制作ガイドで配信面別の仕様を確認してから制作に入ることをおすすめします。そもそもどの広告媒体に予算を配分すべきかを整理したい場合は、Web広告の種類と選び方もあわせてご覧ください。
コピーの文字数とフォントサイズ
冒頭の事例に戻ります。58文字のコピーが詰め込まれたバナー。あれの何が問題だったのか。
バナー広告のコピーに適切な文字数は、サイズによって上限が決まります。以下は実務で使っている目安です。
| バナーサイズ | キャッチコピーの目安 | 最低フォントサイズ |
|---|---|---|
| 300×250 | 15〜20文字 | 16px |
| 728×90 | 10〜15文字 | 14px |
| 160×600 | 各セクション10文字以内 | 14px |
| 1200×628(インフィード) | 20〜30文字 | 20px |
| 1080×1080(SNS) | 15〜25文字 | 24px |
この文字数を超えたら、載せる情報を削るか、バナーではなくLP側で伝える判断をします。バナーの仕事は「すべてを説明すること」ではなく「クリックさせること」です。
フォントの選び方も地味に効きます。バナーでは可読性の高いゴシック体が基本です。明朝体は高級感を出すのには向いていますが、小さいサイズで潰れやすい。BtoBのバナーならNoto Sans JP、游ゴシック、ヒラギノ角ゴあたりが安定します。
もうひとつ重要なのが、フォントのウェイト(太さ)の使い分けです。キャッチコピーはBold以上、サブコピーはRegular、注釈はLight。この3段階の情報階層を視覚的に作ることで、ユーザーの視線が自然と重要な情報に向かいます。
逆に避けたいのが、すべてのテキストを同じウェイトで書くことです。全部が同じ太さだと、全部が等しく目立たなくなる。コントラストがなければ、視線は定まりません。
A/Bテストで検証したい5つのデザイン要素
バナーデザインの改善でもっとも確実な方法はA/Bテストです。感覚で「こちらのほうがいい」と判断するのではなく、数字で決着をつけます。
ただし、一度に複数の要素を変えると、どの変更が効いたのかわからなくなります。1回のテストで変えるのは1要素にとどめるのが望ましいです。テストの設計方法や、どれくらいの配信量があれば結果を信用してよいかについてはA/Bテストとはで解説しています。
以下、テストの優先順位が高い順に5つ挙げます。
1. キャッチコピーの訴求軸
同じ商品でも「課題提起型」と「ベネフィット訴求型」でCTRは大きく変わります。
- 課題提起型:「その採用コスト、まだ削れます」
- ベネフィット訴求型:「採用コスト40%削減を実現」
実績としては、BtoB商材の場合は具体的な数字を入れたベネフィット訴求型のほうがCTRが高い傾向がありますが、業界やターゲットによって逆転するケースもあるので、テストは欠かせません。
2. CTAボタンの色とテキスト
CTAボタンの色は「目立つかどうか」だけで決めるものではありません。バナー全体の配色とのコントラスト比が重要です。
背景が青系ならCTAはオレンジや白。背景が白ならCTAは青や緑。補色関係にある色を選ぶと視認性が上がります。
文字と背景のコントラストは、感覚ではなく数値で確認できます。Webアクセシビリティの国際基準WCAG 2.2では、通常の文字で4.5:1以上、大きな文字(18ポイント以上、または14ポイント以上の太字)で3:1以上のコントラスト比が求められています。バナーは広告でありWebページの本文とは扱いが異なりますが、小さな面積で読ませる以上、この基準を満たしておくと読みやすさの面で安心です。コントラスト比はデザインツールのプラグインや無料のチェッカーで簡単に測れます。
CTAのテキストも検証対象です。「詳しくはこちら」より「無料で相談する」「資料をダウンロード」のように、クリック後に何が得られるかを明示したほうがCTRは上がる傾向があります。この考え方はバナーに限らずLP上のボタンでも同じなので、CTAの最適化もあわせて確認しておくと、バナーから遷移した先で取りこぼしにくくなります。
3. メインビジュアル(写真・イラスト・テキストのみ)
意外かもしれませんが、写真を使わないテキスト中心のバナーのほうがCTRが高い場合があります。特にBtoBでは、ストックフォトの「いかにも」な笑顔のビジネスパーソン写真は見慣れすぎていて、ユーザーの目に留まりにくいからです。
テストの第一歩として「写真あり」と「テキストのみ」を比較してみてください。テキストのみの場合は背景色と文字のコントラストを強くして、コピーの力で勝負します。
4. 色のトーン
暖色系と寒色系でCTRが変わることは、多くの事例で確認されています。ただし「赤が最強」のような単純な法則はありません。テストする場合は、同じレイアウト・同じコピーで配色だけを変えた2案を比較してください。
5. 情報量(要素の数)
要素が3つのバナーと5つのバナーを比較すると、たいてい3つが勝ちます。Google広告ではレスポンシブディスプレイ広告の自動最適化もありますが、入稿するアセットの品質をA/Bテストで磨いておくことが前提になります。
AI画像生成ツールのバナー制作への活用
2026年の時点で、MidjourneyやAdobe Firefly、Canva AI、Microsoft DesignerなどのAI画像生成ツールをバナー制作に活用するケースは増えています。
クライアント案件では、以下のような場面でAIツールを使っています。
- ラフ案の大量生成:背景画像の候補を複数パターン出し、デザイナーが選定・調整する。アイデア出しの時間が大幅に短縮できます
- 背景素材の生成:ストックフォトで見つからない細かい条件の画像はAI生成のほうが早い。Adobe Fireflyは商用利用可能なデータで学習しており、著作権リスクも抑えやすい
- レイアウトバリエーション:CanvaのAI機能でテンプレートベースの複数案を自動生成し、そこからブラッシュアップする
ただし、AIで生成したバナーをそのまま配信するのはおすすめしません。ブランドの色味やトーンが微妙にずれることが多く、BtoB企業では信頼感に直結します。また、日本語テキストの扱いはAI画像生成の弱点で、文字崩れが頻発します。テキスト要素は手動配置が現状のベストプラクティスです。
AI活用のポイントは「最終成果物をAIに任せる」ではなく「工程の一部をAIで加速する」という使い方にあります。ツールごとの得意分野や商用利用の条件は差があるので、選定の段階では画像生成AIの比較を参考にしてください。
配信設定とデザインの整合性を見直す
バナーのCTRが低いとき、デザインだけに原因を求めるのは片手落ちです。ターゲティング設定とバナーデザインの整合性も、CTRに大きく影響します。
たとえば、リマーケティング配信では「続きを読む」「期間限定」のような行動喚起型のコピーが効きます。一方、新規ユーザー向けでは「○○でお困りではありませんか?」のような気づき型のコピーが必要です。同じバナーを全配信面で使い回すのではなく、配信面ごとにコピーを変えるだけでもCTRが動くことは珍しくありません。
デバイス別の出し分けも重要です。モバイルでCTRが極端に低い場合は、フォントサイズが小さすぎる可能性が高い。モバイル向けには、コピーの文字数を削ってフォントサイズを上げた別バージョンを用意するのが望ましいです。
なお、バナーのCTRが改善しても最終的な獲得件数が伸びないときは、原因が遷移先にあります。クリックは増えているのにCVが増えていないなら、リスティング広告のCVR改善で触れている広告文とLPの一貫性の観点で、遷移先のファーストビューを点検してみてください。
バナー制作の改善の進め方(例)
ここでは、BtoB向けサービスのディスプレイバナーを作り直す場合を例に、改善の進め方を紹介します。
まず最初に行うのは、既存バナーの問題点の洗い出しです。よく見つかるのは次のような状態です。
- コピーが長すぎる(35文字のキャッチ+20文字のサブコピー)
- CTAボタンが背景と同系色で目立たない
- フォントサイズが小さく、モバイルで判読不能
- サービスのベネフィットではなく機能を羅列していた
改善案は、次の3つを組み合わせます。
コピーの再設計では、キャッチコピーを15文字前後に圧縮します。たとえば「業務効率化で月20時間を削減」のように、自社で根拠を示せる数字を入れたベネフィットに置き換え、サブコピーは削除して、その分キャッチのフォントサイズを20px以上に拡大します。
CTAの強調では、ボタンの色をブランドカラー(たとえば紺)に対して補色に近いオレンジなどに変え、テキストも「詳しく見る」から「無料で資料請求」のように、押した先で得られるものがわかる表現にします。
レイアウトの簡素化では、要素をキャッチコピー、数字の根拠(導入実績など)、CTAボタンの3つに絞り、余白を大きく確保します。
作り直したバナーは、既存バナーとのA/Bテストで比較します。制作コストはほとんど変わらず、変わるのは「何を、どう伝えるか」の設計だけです。
Meta広告のフィード配信で「管理画面のスクリーンショット」と「シンプルなイラスト+コピー」を比べたクライアント案件では、後者のCTRが上回りました。管理画面の情報量は、フィードを流し見する速度に対して多すぎて伝わりません。短い時間で「自分に関係がある」と感じさせるコピーのほうが、フィード上では強いという結果でした。
入稿前チェックリスト
ここまでの内容を、バナー入稿前に確認したいポイントとしてまとめます。
- キャッチコピーは20文字以内か。フォントサイズは最低14px以上か
- ベネフィット訴求になっているか(機能羅列になっていないか)
- フォントウェイトで情報の階層が明確か
- 背景とテキストのコントラスト比は4.5:1以上(大きな文字は3:1以上)か
- CTAボタンの色が背景と明確に区別でき、クリック後に何が起きるか明示しているか
- 要素は5つ以下に絞れているか
- サイズ別に最適化されたバージョンがあるか
- リマーケティングと新規でコピーを出し分けているか
よくある質問
バナーのクリック率について、相談の場で繰り返し聞かれる質問をまとめます。
クリック率が平均より低いとき、最初に見るべきはどこですか。
デザインより先に配信面と配信設定を確認してください。ターゲティングが広すぎる、配信面が想定と違う、同じ相手に何度も表示されている、といった原因はデザインを直しても解決しません。前述の「手を入れる順番」のとおり、順序を守るほうが早く直ります。
クリック率が高ければ広告として成功と言えますか。
言えません。クリック率はあくまで入口の指標です。クリックされても遷移先で離脱していれば成果にはつながらないため、CVRとセットで見る必要があります。CTRだけを追うと、内容と合っていない煽り気味のコピーに寄っていき、結果として費用対効果が下がります。遷移先の改善はLPのCVRを上げるUI改善を参照してください。
バナーは何パターン用意すればいいですか。
同時に比べるのは2パターンから始めるのが現実的です。パターンを増やすほど1本あたりの表示回数が分散し、差が出たかどうかを判断できるまでに時間がかかります。検証の考え方はABテストとはで整理しています。
どのくらいの期間で判断すればいいですか。
表示回数が十分に貯まるまでは判断できません。CTRが0.5%を下回ることも多い世界なので、数百表示では偶然の差と区別がつきません。期間ではなく表示回数を基準にして、差が安定するまで待つほうが確実です。
制作を外注する場合、何を渡せば精度が上がりますか。
配信面とサイズ、訴求したい要素の優先順位、そして現在配信中のバナーとその実績です。特に「今のバナーのCTRがいくつで、何を改善したいのか」を伝えられると、デザイナー側が判断できる情報量が変わります。
おわりに
バナーデザインの本質は、一瞬で「自分に関係ある」と思わせることにあります。
きれいなデザインを作ることは前提として、それ以上に「何を伝えるか」「何を捨てるか」の判断がCTRを決めます。情報を全部載せたいという気持ちはわかりますが、全部載せた瞬間に何も伝わらなくなる。この矛盾を理解できるかどうかが、バナーデザインの分かれ目です。
この記事で書いたテクニックは、どれも特別なツールや高度なスキルがなくても実行できるものです。まずは今配信中のバナーを見直して、コピーの文字数を数えるところから始めてみてください。それだけでも、改善のヒントが見えてくるはずです。
株式会社ティーラでは、バナー広告のCTR改善やデザイン制作を支援しています。現状のバナーの分析から改善提案、A/Bテストの設計まで対応可能です。「配信しているバナーが伸び悩んでいる」という段階からのご相談も歓迎しています。まずは現状の課題整理から、お問い合わせフォームよりお気軽にご相談ください。
参考文献
- Focus Digital「Average Google Ads Click Through Rate (CTR): 2025 Report」 https://focus-digital.co/average-google-ads-click-through-rate/
- Google広告ヘルプ「レスポンシブ ディスプレイ広告について」 https://support.google.com/google-ads/answer/7005917
- Google広告ヘルプ「イメージ広告のサイズ」 https://support.google.com/google-ads/answer/7031480
- W3C「Web Content Accessibility Guidelines (WCAG) 2.2」1.4.3 Contrast (Minimum) https://www.w3.org/TR/WCAG22/#contrast-minimum
- Nielsen Norman Group「Banner Blindness Revisited」(2018年) https://www.nngroup.com/articles/banner-blindness-old-and-new-findings/
- Search Engine Journal「Facebook Removes the 20% Text Limit on Ad Images」(2020年9月) https://www.searchenginejournal.com/facebook-removes-the-20-text-limit-on-ad-images/
- Adobe Firefly https://www.adobe.com/products/firefly.html
- Canva https://www.canva.com/