中釜 啓太
「GDNで配信するバナー広告はどういうデザインが正解なのか分からない」
「ディスプレイ広告のデザインの参考になる情報を探している」
この記事はそのような方向けに書いています。
こんにちは、社長兼マーケターの中釜です。
運用型広告に携わり12年になりますが、バナー広告のデザインついての情報を探している方が多かったので記事にしました。
バナー広告は主にウェブサイトやアプリに掲載される画像広告のことです。
バナー画像の制作にあたり下記の4つの要素が重要になります。
- 会社のロゴ
- メインイメージ
- メインコピー
- 誘導ボタン
本記事では、1,000件以上のバナー効果測定の経験から得られたノウハウを公開し、バナー広告をより効果的に運用するためのポイントをご紹介します。
ピンポイントで知りたい方は、以下の目次から見たい項目をクリックすると便利です。
【目次】
それでは解説していきます。
バナーデザインに必要な要素は4つ
結論から言うと、効果的なバナーを制作する上で必要なデザイン要素は下記の4点です。
- 会社のロゴ：会社名もしくはロゴを記載
- メインイメージ：写真もしくはイラストで分かりやすいもの
- メインコピー：なるべく目立つ位置に大きな文字で
- 誘導ボタン：『詳しくはこちら』などのボタン
私の経験上、どれかひとつでも欠けると効果は下がるため、知っているか知らないかでパフォーマンスに雲泥の差が出ます。
事例：デザインのポイントを検証
クライアントの数値は出せないので、自社のABテストの結果を公開します。
さまざまな要素・条件で、どのバナーデザインがよりクリックされるのかテストして分かったことを解説します。
1. デザイン要素を比較
「サイズ」「メインイメージ」「メインコピー」「検索窓」のデザイン要素において以下のクリエイティブでテストを実施しました。
▼自社バナーのABデザイン比較
【デザインの仮説や思考】
- サイズ：300×250と336×280はどちらがクリックされやすいのか（上記2つは両方とも300×250のサイズだが、336×280も同時配信している）
- イメージ：白シャツ（ラフ）とジャケット（少しフォーマル）で違いはあるか
- コピー：『運用一筋』と『運用代行専門』ならどちらが効果的か
- 検索窓：『ユニアド』で検索！のように訴求すれば指名検索が増えるか
自分の会社のバナーなので自分をモデルにして、そしていろいろ仮説を立ててテストしてみた結果が以下になります。
| サイズ | 表示回数 | セッション数 | クリック率 | コスト |
|---|---|---|---|---|
| 300×250 | 415,696 | 560 | 0.135% | 51,572 |
| 336×280 | 402,068 | 494 | 0.123% | 48,242 |
| イメージ | 表示回数 | セッション数 | クリック率 | コスト |
|---|---|---|---|---|
| ジャケット | 257,994 | 325 | 0.126% | 32,099 |
| 白シャツ | 559,770 | 729 | 0.130% | 67,715 |
| コピー | 表示回数 | セッション数 | クリック率 | コスト |
|---|---|---|---|---|
| 運用一筋 | 614,244 | 849 | 0.138% | 78,760 |
| 運用代行専門 | 203,520 | 205 | 0.101% | 21,054 |
| 検索窓 | 表示回数 | セッション数 | クリック率 | コスト |
|---|---|---|---|---|
| あり | 361,631 | 563 | 0.156% | 47,685 |
| なし | 456,133 | 491 | 0.108% | 52,129 |
- ポイント
-
- サイズ：300×250がクリック率が少し高い（両サイズあったほうがよい）
- イメージ：クリック率に変化なし
- コピー：『運用一筋』のほうがクリック率が高い
- 検索窓：検索窓を入れたほうがクリック率に良い影響が出る
バナーデザインでは、いかに見やすいかという点とコピーに注力して作成することが重要と分かりました。
2. 検索窓あり/なしをデバイス別で深堀する
検索窓を入れたほうがクリック率が0.5%も高いという興味深い結果となったので、次は検索窓あり/なしをデバイス別で分析しました。
| 表示回数 | 視認可能率 | セッション数 | クリック率 | コスト | |
|---|---|---|---|---|---|
| PC | 20,557 | 34.8% | 28 | 0.136% | 1,914 |
| スマホ | 220,765 | 41.5% | 357 | 0.162% | 31,560 |
| 表示回数 | 視認可能率 | セッション数 | クリック率 | コスト | |
|---|---|---|---|---|---|
| PC | 60,935 | 38.6% | 31 | 0.051% | 3,869 |
| スマホ | 189,289 | 40.8% | 250 | 0.132% | 26,891 |
※視認可能率：広告表示した回数に対してユーザーに実際はどれだけの回数見られたか（広告の面積の50%以上が画面に1秒以上表示された場合に視認可能と見なされる）
- ポイント
-
- 検索窓を入れるとPC・スマホともクリック率が上がる
- 特にPCのクリック率が0.051%（検索窓なし）→0.136%（検索窓あり）へとと上昇した
3. 広告の種類を比較
今度は「バナー広告（①）」「レスポンシブディスプレイ広告（②）」「テキスト広告（③）」のどれが効果的か、という別の軸でテストしました。
- バナー広告：今回解説している通常のバナー広告のこと
- レスポンシブ広告：画像、広告見出し、ロゴ、説明文などを複数登録し、自動的に組み合わせ最適化してくれる
- テキスト広告：一般的なテキスト広告のこと
| 表示回数 | 視認可能率 | セッション数 | クリック率 | コスト | |
|---|---|---|---|---|---|
| ① | 369,193 | 40.8% | 580 | 0.157% | 49,088 |
| ② | 657,422 | 51.4% | 2,925 | 0.445% | 109,901 |
| ③ | 80,921 | 62.4% | 242 | 0.299% | 11,336 |
| 合計 | 1,107,536 | 48.7% | 3,747 | 0.338% | 170,325 |
- ポイント
-
- バナー広告：クリック率・視認可能率とも一番低い
- テキスト広告：視認可能率が一番高い
- レスポンシブ広告：クリック率が一番高い
バナー広告はウェブサイトにありふれてしまっているため、クリック率・視認可能率とも一番低いという結果になりました。
上記の結果から、工夫して作成する必要があるということが分かりました。
4. その他のバナーデザイン案
バナー広告のクリック率を改善するという点で、実際のクライアントに使用したデザイン案は以下のとおりです。
【イラストと写真】
- イラスト：クリック率が高い
- 写真：クリック率が低い（ウェブサイトに馴染んでしまうため）
【ロゴのみ（BtoB）】
- ロゴのみをバナーのデザインにして広告を配信
- 何度も自社ロゴに接触することで徐々に好感度が上がる（ザイオンス効果）
【モデル：日本人と外国人（美容）】
- 日本人モデル：親近感
- 外国人モデル：憧れ
制作工程：テストを繰り返し効果的なバナーを制作
上記で効果的なデザイン要素や、テストして分かった効果的なデザイン要素事例を解説しました。
実際に弊社のバナーデザインの制作工程を公開します。
【バナー制作のポイント】
- バナーは一度作って終わりではない
- ABテストを何度も重ねてより効果的なバナーに仕上げていく
一度のバナー制作ですべての効果的なデザイン要素を盛り込むことは不可能に近いので、過去の実績などを参考にバナーを制作し、テストと改善を繰り返すことでより効果的になります。
工程①：簡単なラフで要素を整理
本格的な制作に入る前に、一度要素の整理をします。
最初に大事なポイントで挙げた「会社のロゴ」「メインイメージ」「メインコピー」「誘導ボタン」をどこにどのように配置するかをまず決めます。
重要なポイントが2点あります。
【ポイント】
- ターゲットユーザーを明確に決める
- 過去の実績やノウハウなどを参考にする
ターゲットユーザーを明確に決めることを疎かにすると、最終的にターゲットに響かないバナーや伝わりにくいバナーになってしまいます。
また、バナーはABテストを重ねて仕上げていくとは言え、最初からある程度効果的なバナーを制作するために、過去のデータを活かすことが重要です。
工程②：文字と写真を簡単に配置していく
キャッチコピーやロゴ、テキストやロゴなど必要な要素を画面の中に置いていきます。
この時に大体の場所を決めてしまい、全体の構成を完成させます。
工程③：文字の大きさ、写真の大きさ等を調整する
次に文字と写真を調整していきます。
文字はフォントや大きさ、色など全体を見ながら決定していきます。
【ポイント】
- 目立たせたい情報は大きく、補足的な情報は小さく
- さらに目立たさせたい情報は色や文字の太さを工夫
工程④：全体のデザインを整える
背景色の調整をおこないました。
キャッチコピーの色も黒から白に変えたり、ロゴの背景に白を敷いたりと部分的に調整をしています。
工程⑤：バナーデザインの完成
実績部分の緑背景にグラデーションをかけたり、黒背景の後ろには写真を敷くことでデザインの精度をあげました。
また、こちらのバナーをクリックしてもらいやすくするために、「詳しくはこちら」の右に矢印「→」を置きました。
バナーのデザインはこちらで完成です。
バナー広告の作成において気をつけるべき5つのポイント
さらに、バナーを制作する際には以下の点に注意するとよいです。
ポイント①：伝えたい内容はシンプルに
商品をたくさん知ってほしいというお気持ちはよく分かりますが、ぐっと我慢したほうが効果的です。
いくつも訴求を加えると何が言いたいのか分からなくなってしまうからです。
訴求ポイントが多くなる場合は、いくつかの広告に分けてABテストすることをおすすめします。
【訴求内容】
- いくつも訴求を加えると何が言いたいか不明瞭になる
- 訴求ポイントが多い場合はいくつかの広告に分けてABテストする
ポイント②：過去のデータに基づいて作成する
バナー広告を作成する際に仮説や経験に基づいて作成することは可能です。
しかし、過去のデータを参考にすることでより効果の出やすい広告を作ることができるため、データがある場合は参照することをおすすめします。
【バナー制作の参考】
- 仮説や経験に基づいて作成しても良い
- 過去のデータがあるならば参考にしたほうが効果が出やすい
ポイント③：ターゲットを明確にする
どのような人に商品を知ってほしいか具体的にイメージして、クリエイティブごとにストーリーを作るとより魅力的です。
目に見えないインターネットユーザーをペルソナ化することによって、ターゲットがより明確になります。
【ペルソナとは】
例えば、20代～40代女性がメインターゲットの化粧品（価格は中～高）の場合は下記のようなペルソナを想定します。
- ペルソナ分析の例
-
- 28歳OL
- 年収450万円
- 実家暮らし
- 父親は現役で裕福な家庭で育つ
- ハイブランドを好み、周りからの評価が重要
- 身に付けるものは本物志向で質重視
ポイント④：ランディングページとの整合性を心がける
バナー広告は、飛び先と対になるので、クリックする前からランディングページの情報を正しく想起させる必要があります。
バナーデザインとランディングページのデザインが乖離している場合、ユーザーは違うサイトに来てしまったと誤解して離脱してしまいます。
そのため、整合性がとれていないとコンバージョン率が大きく下がります。
【ランディングページとの整合性】
- バナー広告はランディングページと対になる
- デザインが乖離しているとコンバージョン率が大きく下がる
ポイント⑤：ABテストをする
バナー広告を同時に2～3本配信することをおすすめします。
ABテストによって、どちらのバナーの効果がよいか検証することができます。
【ABテストするポイント】
- 文言（コピー）
- 色
- デザイン
- 人物
- 画像
クリック率を高めるための心理学
バナー制作をする際に参考になる心理学をひとつご紹介します。
カリギュラ効果と言い、人間は物事を禁止されるとかえってやりたくなってしまうという心理現象のことです。
下記が広告文に活用した例になります。
【カリギュラ効果禁止型】
『これは反則でしょ！特許取得サプリメントでこんなに早く痩せるなんて！』
デザインが思いつかない方は取り入れてみると良いかもしれません。
バナーデザインの参考になるサイト
バナーデザインの参考になるサービスやギャラリーサイトをご紹介します。
どういうターゲットにどういう訴求をしているのかという観点で眺めてみると参考になるかと思います。
1. Pinterest
気になるバナーデザインを見つけたら、類似するデザインを続いて表示してくれるので便利です。
2. BANNER LIBRARY
バナーデザイン専門のギャラリーサイトで、サイズや色、業種別でデザインを探すことができます。
3. Bannnner.com
一定のクオリティを満たした5,000点以上のバナーが掲載されているサイトです。
GDN・YDAには審査あり：審査落ちの理由と対策
GDNとYDAで多少審査の基準は異なりますが、審査に落ちる場合は以下のケースが多いです。
- サイズや容量を守れていない
- ポリシー、ガイドラインに違反した表現を用いている
- 画像内にリンク先の企業名、ロゴ、ブランド名などが表示されていない
レギュレーション（バナー広告の作成ルール）は頻繁に変わるためご注意ください。
【ポリシーやガイドラインについての参照リンク】
- 広告の審査プロセスについて – Google 広告 ヘルプ
- 不実表示 – Google 広告ポリシー ヘルプ
- ＜ディスプレイ広告＞ガイドラインに抵触しない広告表現とは – LINEヤフー for business
まとめ
本記事で解説したバナー広告の効果的なデザインについては以下のとおりです。
【まとめ】
本記事をまとめると下記のとおりです。
- 本記事のまとめ
-
- バナー広告は主要な広告手段のひとつで、主にウェブサイトやアプリに掲載される画像広告のこと
- 会社のロゴ・メインイメージ・メインコピー・誘導ボタンの4つの構成要素が1つでも欠けると効果が下がるため必ず設定
- バナー広告はクリック率・視認可能率が低くなる傾向があるため、分かりやすいイメージやコピー・誘導ボタンの設置などで工夫をおこなう
- 一度作って終わりではなく、ABテストを何度も重ねてより効果的なバナーに仕上げていく
バナー広告の視認可能率は40%と他のフォーマットより低かったり、ユーザーにとって邪魔な存在になってしまいがちなので、デザインの工夫が重要です。
というわけで今回は以上となります。
