バナー制作は「見た目を整えること」ではなく、「クリックさせ、コンバージョンにつなげる設計をすること」です。この記事では、バナーの基本定義から配色・タイポグラフィ・CTA設計・モバイル対応・A/Bテストの運用まで、実務で即使える知識を体系的に解説します。外注か内製かの判断基準、業界・商材別の訴求の違いも扱うので、EC事業者からBtoB企業まで幅広く活用できます。

バナー制作の基本：定義・種類・使い分け

バナーには大きく分けて「自社サイト内誘導バナー」と「他社サイト・広告ネットワーク上のバナー広告」の2種類があります。目的と掲載場所によって設計の優先事項が変わるため、最初に整理しておくことが重要です。

自社サイト内バナーと広告バナーの違い

自社サイト内バナーは、すでに訪問しているユーザーを別ページや購入導線に誘導するために使います。クリックよりも「回遊率」と「コンバージョン率」が評価指標になります。一方、広告バナーはGoogle Display NetworkやYahoo!ディスプレイ広告のように、外部サイトに表示して新規ユーザーを獲得するものです。こちらはクリック率（CTR）と獲得単価（CPA）が主要指標になります。

静止画・アニメーション・動画バナーの特性

静止画バナーは制作コストが低く、入稿規制が少ないため量産しやすいのが強みです。一方、アニメーション（GIF・HTML5）バナーは動きで視線を引きつける効果があり、訴求要素を時系列で見せられます。動画バナーはSNS広告で特に効果を発揮しますが、最初の2〜3秒で興味を引けないと離脱されます。ECの商品訴求では、静止画とアニメーションを組み合わせてA/Bテストするアプローチが実務的です。

バナーサイズ規格の基本

Google Display Networkでパフォーマンスが高いとされる代表的なサイズは、レクタングル（300×250px）、リーダーボード（728×90px）、ハーフページ（300×600px）などです。ただし掲載媒体によって規格が異なるため、出稿先の入稿規定を必ず確認してください。EC系ではスマートフォン表示を意識した縦長フォーマット（例：1080×1920px）の需要も高まっています。

バナー設計前に決める3つの準備事項

制作を始める前に「目的」「ターゲット」「掲載要素の優先順位」を言語化しておかないと、デザイン工程で迷走します。この3点は制作ブリーフの核となる情報です。

目的の明確化：認知・クリック・コンバージョンのどれを優先するか

目的が「認知向上」なら、ブランドカラーとロゴを大きく見せる構成が有効です。「クリック誘導」が目的なら、CTAボタンと一言コピーに絞ります。「コンバージョン直結」を狙うなら、価格・特典・社会的証明（レビュー数・受賞歴）を凝縮した構成にします。1枚のバナーに3つの目的を詰め込むことが「効かないバナー」の最多パターンです。

ターゲット設定：属性だけでなく「購買文脈」で定義する

ペルソナを「30代女性・主婦」と設定するだけでは不十分です。「子どもの敏感肌が心配で成分にこだわるが、価格も気になっている」という購買文脈まで具体化することで、コピーの言葉選びとビジュアルの方向性が決まります。EC商品の場合、購入シーンを想像してバナーを見ている状況（スマホ・移動中・SNSのタイムライン）も考慮します。

掲載要素の優先順位づけ：情報の取捨選択

バナーに載せられる情報量には物理的な限界があります。「メインコピー」「ビジュアル（商品画像・人物）」「CTA」「補足情報（価格・送料無料など）」の4要素を並べ、どれが最優先かをクライアントまたはチーム内で合意しておきます。優先順位が決まれば、レイアウトとフォントサイズの配分が自然と決まります。

レイアウト・配色・タイポグラフィの実践設計

デザインの3要素（レイアウト・配色・文字）は、それぞれ独立して語られがちですが、実際には相互に影響し合います。「読める・伝わる・クリックしたくなる」を同時に実現する設計法を解説します。

レイアウトの4パターンと使い分け

バナーのレイアウトには代表的な4つの型があります。

• F型レイアウト：左上から右、次の行へと視線が流れるパターン。テキスト量が多い情報系バナーや横長バナーに向いています。
• Z型レイアウト：左上→右上→左下→右下と対角線上に視線が動く型。キャッチコピー・画像・CTA を対角に配置するとリズムが生まれます。スクエア・横型バナーに適しています。
• 縦割り型：左側にビジュアル、右側にテキストとCTAを置く（またはその逆）構成。商品とコピーを並べて比較させたいECバナーに適しています。
• フッター型（ライン型）：横長（728×90px）バナーで使われる、左にロゴ・中央にコピー・右にCTAの一列配置。ブランド認知向けに向きます。

配色と色彩心理学：色選びの実践的指針

色は感情と行動を誘導します。ECバナーで押さえるべき色の特性を以下に整理します。

• 赤・オレンジ：緊急性・セール感を演出。「SALE」「期間限定」など背景色として有効ですが、多用するとブランド価値が下がります。
• 青・紺：信頼感・清潔感を与えます。化粧品・健康食品・BtoB企業に多用されます。
• 緑：自然・安全・エコを連想させます。オーガニック系商品との相性が高いです。
• 黒・ゴールド：高級感・プレミアムを表現します。単価の高い商材に向いています。

配色で最も多い失敗は「背景・テキスト・CTAボタンの3色が全て異なる系統になり、視線が分散する」パターンです。基本色（ブランドカラー）＋アクセント色1色の2色構成を起点にすると、まとまりが出ます。コントラスト比はWCAGガイドラインで本文テキストに4.5:1以上が推奨されており、可読性の最低ラインとして参考にしてください。

タイポグラフィ：フォント選定・文字階層・可読性

フォント選定の第一原則は「画面上で読める」ことです。明朝体は紙では美しいですが、小サイズのバナーでは線が細くなり読みにくくなります。バナーには太めのゴシック体（例：Noto Sans JP Boldなど）が安定しています。文字の階層は3段階で設計します。

1. メインコピー：最大フォントサイズ。バナー全体の1/3程度の視覚領域を占めるのが目安。
2. サブコピー：メインの50〜60%のサイズ。メインの根拠や補足を添えます。
3. CTAテキスト：ボタン内のテキスト。メインより小さいが、ボタン色とのコントラストで存在感を出します。

テキスト量は「3秒以内で読み切れるか」で判断します。バナーサイズと視聴距離にもよりますが、メインコピーは20〜30文字以内を意識すると伝わりやすくなります。

CTAの設計とユーザー行動心理を踏まえた最適化

CTA（Call-to-Action）はバナーのゴールです。「クリックしてほしい」だけでなく「なぜクリックするのか」をユーザー心理から設計することで、クリック率が変わります。

CTAボタンの設計原則

ボタンの色は「背景色と最も対比の強い色」を選びます。テキストは「詳しくはこちら」より「今すぐ無料で試す」「送料無料で注文する」のように、行動後のベネフィットが見える言葉にします。ボタンの形状は角丸（border-radius 6〜12px程度）が「押せる」印象を与えやすいとされています。バナー内でのボタン配置は、視線の流れの終点（Z型なら右下、縦割り型なら右カラムの下部）に置くのが基本です。

損失回避・希少性・社会的証明の活用

行動経済学の知見をバナーに組み込むと、クリック率の向上につながります。「残り3点」という希少性の表示、「3,000人が選んだ」という社会的証明の数字、「今だけ20%OFF」という損失回避（買わないと損する感覚）は、いずれもコピーとして短く表現できます。ただし虚偽の数値や誇張は景品表示法に抵触するリスクがあるため、必ず実績に基づいた数字を使ってください。

業界・商材別のCTA設計の違い

業界・商材	主な目的	有効なCTA例	訴求の重点
EC（化粧品・雑貨）	購買・初回獲得	「初回限定で試す」「送料無料で注文」	価格・成分・レビュー数
EC（ペット用品）	購買・リピート	「愛犬に試してみる」「定期便で15%OFF」	安全性・利便性・価格
SaaS・デジタルサービス	無料登録・トライアル	「14日間無料で始める」	導入容易性・費用対効果
BtoB（認知向け）	リード獲得・資料請求	「事例資料をダウンロード」「無料相談を予約」	信頼性・実績・課題解決
サプリ・健康食品	初回購入・定期移行	「初回980円で試す」	効果の根拠・安心感（薬機法遵守）

モバイル対応バナーの設計原則と実装上の注意点

スマートフォンからのEC購買が主流になった現在、バナーはモバイル表示を起点に設計することが基本姿勢になっています。PC表示はその後に最適化するモバイルファーストの順序が実務的です。

モバイルバナーの設計原則

モバイル画面でのバナーは、タップ操作に耐えられる十分なCTAボタンサイズ（最小44×44px）が必要です。テキストは最小でも14px以上（デバイスのピクセル密度によって実寸が変わるため、デザインツール上では2倍解像度で確認）。視線が上から下に流れる1カラム縦スクロール型のレイアウトが基本で、2カラム構成は文字が小さくなりすぎるリスクがあります。

PC表示との差異への対応策

同じバナーをPC・スマホ両方に使い回すと、どちらかで崩れます。対応策は3つあります。

1. サイズ別に別素材を用意する：300×250px（モバイル）と728×90px（PC横長）で別デザインを作成します。
2. レスポンシブHTML5バナーを使う：Google Web Designerなどで制作したHTML5バナーは画面幅に応じてレイアウトが変化します。入稿媒体がHTML5に対応しているか事前に確認が必要です。
3. SVGフォーマットで制作する：自社サイト内バナーであれば、SVG形式にするとどのサイズでも画質が劣化しません。

A/Bテスト・効果測定・改善サイクルの実践運用

バナーは「作って終わり」ではなく、データを見ながら改善を繰り返すことで成果が積み上がります。改善サイクルを回す仕組みを最初から設計しておくことが、継続的な成果の鍵です。

A/Bテストの正しい設計と変数の絞り方

A/Bテストで最も多い失敗は「複数の要素を同時に変えてしまい、何が効いたかわからなくなる」ことです。1回のテストで変える変数は1つに絞ります。テスト優先順位は「CTAのテキスト」→「メインビジュアル（人物あり/なし）」→「配色（背景色）」→「コピーの訴求軸」の順が実務的です。テスト期間は、統計的有意性を得るために一定のクリック数が集まるまで継続します（媒体によって異なるため、各広告管理画面の推奨を参照してください）。

効果測定の指標と「クリックされない」バナーの診断フロー

作ったバナーがクリックされない場合、以下の順で診断します。

1. インプレッションは出ているか：インプレッションが少ない場合、入札額・ターゲティングの絞りすぎが原因の可能性が高いです。
2. CTRは業界平均と比べて極端に低いか：ディスプレイ広告のCTRは媒体・業界によって差があるため一概に言えませんが、自社の過去実績と比較して著しく低い場合はクリエイティブに問題があります。
3. ランディングページとバナーのトーンが一致しているか：バナーでセール訴求しているのにLPがブランド訴求だと、ユーザーが「違う」と感じて離脱します。
4. CTAボタンが視認できているか：スマートフォンの小画面でボタンが埋もれていないかを実機で確認します。

外注vs内製の判断基準と発注時の品質チェックリスト

バナー制作を内製にするか外注するかは、制作頻度・品質要件・社内リソースの3点で判断します。

判断軸	内製が向いているケース	外注が向いているケース
制作頻度	週1本以上の高頻度制作	月数本・キャンペーン単位
品質要件	スピード重視・ABテスト量産	ブランドの一貫性・高品質ビジュアル
社内スキル	デザイナーが在籍している	デザインリソースが不足している
コスト	固定費（人件費）で管理したい	変動費（制作費）で管理したい

外注する場合の品質チェックリストとして、以下を確認します。

• 入稿規定（サイズ・ファイル形式・容量）を満たしているか
• フォントの商用利用ライセンスが取得されているか
• 画像素材の著作権・使用権が明確か
• テキストの誤字・表記ゆれがないか
• CTAボタンがモバイルで視認・タップできるサイズか
• ブランドガイドライン（ロゴの最小使用サイズ・クリアスペース）が守られているか

バナー制作を含むWEBマーケティング全体を支援するサービスとして、株式会社FUNARIのWEBマーケティング支援があります。広告の配信やLP制作などWEBマーケティング全般を一気通貫でサポートし、化粧品・雑貨・ペット関連商品などの実績を持つチームが対応します。バナー制作単体ではなく、広告運用・LP改善・クリエイティブ改善までまとめて依頼できる点が強みです。

よくある質問