コンバージョンにつながるディスプレイ広告バナーサイズ5選
知り合いに、出張型のカーディテイリング（洗車・車内クリーニング）業を営んでいる人がいる。彼は広告を1点だけ、きれいに作り込んでいた。1080×1080の正方形、商品写真、コピーが3行、ボタンがひとつ。それをディスプレイ広告のクリエイティブとしてGoogle Adsにアップロードした。Googleはそれを受け付け、1週間で400回ほど配信し、それで終わりだった。
問題は広告の出来ではない。ディスプレイ広告のバナーサイズはまったく別の世界の話で、正方形のSNS用グラフィック1枚では在庫のごく一部にしか収まらない、というだけのことだ。ウェブの広告枠の大半は正方形ではない。ニュース記事の上部を横切る細長い帯だったり、レシピブログの脇を縦に走るレールだったり、段落と段落のあいだに挟まった小さなボックスだったりする。その枠の形に合ったクリエイティブを持っていなければ、その枠は取れない。
実際に効いてくるのは次の2点だ。どのサイズを作るのか。そして、なぜサイズごとに「同じレイアウトを押し潰したもの」ではなく、別のレイアウトが要るのか。
作る価値のあるディスプレイ広告バナーサイズ5つ
Googleディスプレイネットワークは、仕様上は何十種類ものサイズを受け付ける。だが何十種類も作る必要はない。次の5つで、配信できる枠の圧倒的大多数をカバーできる。
| サイズ | 名称 | 表示される場所 |
|---|---|---|
| 300×250 | ミディアムレクタングル | 記事中、サイドバー。主力サイズ。 |
| 336×280 | ラージレクタングル | 同じ枠のひと回り大きい版。CTRが上回ることも多い。 |
| 728×90 | リーダーボード | PCページの上部。 |
| 300×600 | ハーフページ | PCのサイドバー。面積が広く、エンゲージメントも高い。 |
| 320×100 | ラージモバイルバナー | スマホページの下部。 |
この5つを作れば、守備範囲は埋まる。160×600（ワイドスカイスクレイパー）や970×250（ビルボード）は、余裕ができてから足せばいい。ロングテールの部類だ。
ここでつまずきやすい制約が2つある。ファイルは 150KB 未満に収めること。そして、このサイズできれいに読ませたいなら、文字が占める面積はフレームのおよそ20%以内に抑えること。後者はもう強制ルールではないが、いまでも有効な助言だ。バナーになるか、ただの壁になるかの分かれ目がここにある。
メッセージはひとつだけ
効くバナーとそうでないバナーを分けているのは、結局これだ。ディスプレイバナーに載せられるメッセージはひとつ。3つではない。ひとつ。
SNSの投稿には呼吸する余地がある。キャプションが付き、スワイプしてもらえ、目にした時点で相手はすでに半分こちらを向いている。ディスプレイバナーは違う。読者が別のことを読んでいる最中の、視界の隅にいる。もらえる注意はせいぜい1秒。その1秒で受け取ってもらえるのは、アイデアひとつとボタンひとつだけだ。
だからデザインツールを開く前に、その1行を書く。知り合いのディテイリング業の場合、勝ったコピーは「プロの出張カーディテイリング——内装・外装・ガラスコーティング——ご予約はオンラインで今すぐ」ではなかった。こうだ。
ご自宅の駐車場までうかがいます。$89。
これだけ。価格と、他社との違い。ひと息で読み切れる長さ。それ以外——コーティングのアップセルも、対応エリアも、5つ星レビューも——はランディングページの仕事であって、300×250のボックスの仕事ではない。
リサイズではなく、サイズごとに作り直す理由
ここが、誰もが——長いあいだ私自身も——間違えるところだ。ひとつのレイアウトを5つの形に伸び縮みさせることはできない。300×250と728×90は面積こそほぼ同じだが、縦横の比率は正反対で、片方で成立するレイアウトはもう片方ではまるで読めない。
300×250（ミディアムレクタングル） は縦に積む。上に写真の帯、その下に見出し、いちばん下にボタン。ざっくり写真40%、テキスト35%、ボタンと余白で25%。見出しは22〜26pxあたり。5つのなかでは、いちばんミニポスターに近い。
728×90（リーダーボード） は横一列にして、ほとんどの要素を捨てる。左端にロゴ、中央に見出し、右端にボタン。テキストは1行、せいぜい20px。補足の1行を入れる余地はない。入れようとすれば、2行とも離れた位置から読めない小ささになる。切ること。
300×600（ハーフページ） は、唯一まともに余裕のあるサイズだ。ちゃんとした写真、見出し、補足の1行、そしてゆったり間を取ったボタン——ここまで載せられる。ただし、載るからといって端から端まで埋めないこと。この余白こそが、2011年頃のバナー広告ではなく「金のかかった広告」に見せてくれる。
320×100（モバイルバナー） は、リーダーボードを押し縮めたものだ。ロゴ、短い見出し、ボタン。ここでの見出しは思い切り短く、単語4つ分を上限と考えたい。スマホの画面で高さ100pxしかない以上、それより長い文字列は灰色のにじみにしかならない。
336×280 は、300×250に少し空気を足したもの。レイアウトは同じで、文字がわずかに大きく、余白がわずかに広い。5つのなかで、これだけは本当に単なるリサイズで済む。
5つを並べて変わっているのは、テキスト要素の数だ。リーダーボードでは6語、ハーフページでは12語。メッセージは同じで、その分量だけが違う。
混沌の隣に並ぶ前提で、コントラストを
あなたのバナーは、あなたが管理していないページの上に、あなたが選んでいない写真の隣に、白かもしれないし濃いグレーかもしれない背景の上に置かれる。ここから2つのことが導かれる。
輪郭をはっきりさせる。 1pxの枠線か、境目のはっきりした塗りの背景ブロックを付ける。ページの背景に溶けるバナーはサイトの一部にしか見えず、ページの調度品として無視される。
ボタンをひと目でボタンとわかる形に。 塗りはベタ、周囲に対して高コントラスト、そして本物のボタンの形。控えめなゴーストボタンを使う場所ではない。バナーのなかで写真の上に文字を載せるなら、ルールはほかの場所と同じだ——写真の上の文字を読ませる方法に書いたことは、300×250では二重に効いてくる。
Ridvay Studioでセットを作る
実際の手順はこうだ。まずミディアムレクタングルから始める。いちばん多く配信されるサイズであり、300×250でメッセージを成立させることが、残り4つを楽にしてくれる規律になる。
Studioに次のように入力する。
出張カーディテイリングサービス向けの300x250ディスプレイバナー広告を作って。背景は濃いネイビー、上部に洗車済みの車の写真を帯状に1本、太い見出しで「ご自宅の駐車場までうかがいます」、価格の「$89」を大きなアクセント数字として配置、下部には明るいベタ塗りの「今すぐ予約」ボタン。太いサンセリフ、高コントラスト、要素は詰め込まない。
返ってくるのは、直すたびに生成し直さなければならない一枚絵ではない。編集できるデザインだ。見出しはテキストレイヤー、価格はそれ自体が独立したレイヤー、ボタンは自前の塗りを持つシェイプ、写真の帯は差し替え可能な画像要素になっている。これから4つのバリエーションを作ろうというこの場面では、その差がふだん以上に効く。
続いて、次の編集を加える。
- 見出しをクリックしてサイズを上げる。 幅いっぱいに近づくまで大きくする。300×250でいちばんよくある失敗は、文字が遠慮がちすぎることだ。空間を埋めよう。
- ボタンの色を変える。 背景の親戚のような色ではなく、ブランドカラーのなかでいちばん明るい色に。前のコントラストの節のとおり——掲載先のページに属していないように見えるのが正解だ。
- 補足の1行があれば削除する。 メッセージはひとつ。対応エリアを説明するサブ見出しをAIが付けてきたなら、切る。それを残すと、リーダーボード版が成立しなくなる。
- Brand Kitを適用する。 複製する前に、ロゴ・フォント・パレットを固定しておく。ここを一度整えておくかどうかが、残り4サイズを1時間ではなく5分で終わらせる分かれ目になる。Brand Kitの作り方で手順を解説している。
残り4サイズは、デザインを複製し、キャンバスの寸法を変え、そのうえで組み直す。リーダーボードなら写真の帯を左に寄せ、補足テキストを落とし、ボタンの位置を取り直す。拡大縮小はしない。キャンバスの変更はRidvayのリサイズが引き受けてくれる。実際に読めるものにする20秒の並べ替えは、あなたの仕事だ。各SNSプラットフォーム向けにデザインをリサイズするのと同じ筋肉を使う作業で、制約がより厳しいだけの違いしかない。
それぞれPNGで書き出し、全ファイルが150KB未満に収まっているか確認して、セットでアップロードする。
その後どうなったか
知り合いは、1サイズではなく5サイズをアップロードした。インプレッションは週に数百回から数千回に増えた。クリエイティブが良くなったからではない。これまで締め出されていた枠に、いきなり出せるようになったからだ。仕掛けはそれだけ。ディスプレイ広告はカバー範囲に報いるし、カバー範囲は入札の問題である前にデザインの問題なのだ。
同じキャンペーンをネイティブのフィード投稿としても回しているなら、そちらは本当に別の技術になる——コンバージョンにつながるSNS広告のデザインに、その側のルールをまとめてある。
そうでなければ、やることはシンプルだ。1行を書き、300×250を作り、それを4回作り直す。ひと晩の作業で、ウェブに出ているのか、ウェブの片隅にだけ出ているのかが変わる。