株式会社FREE WEB HOPEは最大コンバージョン率32.36%を達成したランディングページ制作戦術でランディングページの改善提案・制作いたします。

03-3525-8971

 
baner-design-5technique2

[テンプレ付き]高反応バナーデザインの作り方、4つの具体例

あなたは、昨日見た広告を覚えているだろうか?
バナーに限らずだが、広告を見ない日は無いだろう。
しかし昨日見た広告を覚えている人は少ない。
ユーザーは広告に飽きている・・・を通り越して、もはや見てすらいない。
バナー広告とはそんな中でもクリックを促がさなければならない非常に高度なテクニックを要するものなのだ。 だが、多くのデザイナーやマケターは、サイトの改善や構築に専念しすぎで、バナーデザインはというと、WEBサイトの素材をそれっぽく配置して、なんとなくキャッチコピーを付けているのが現状だ。

あなたがバナー広告を一番活用されているシーンは、リターゲティング広告ではないだろうか?
他にも、ディスプレイネットワーク広告、アドセンス、Youtube、アフィリエイト、純広告等、ありとあらゆるシーンでバナーデザインの機会があるはずだが、もちろん興味が魅かれるバナーデザインとそうではないバナーデザインが存在する。バナーは戦略的にデザインされていて始めて、その効果を最大限に発揮する。あの小さなデザインの中に、様々なWEBマーケティング要素が詰め込まれているのだ。

今回は、効果実証済の反応率の高いバナーデザインの具体的な作り方をお伝えしよう。

バナーデザインの役割

バナーデザインの役割は大きく分けて3つ存在する。

  • ・多くのクリックをしてもらう
  • ・無駄クリックを防ぎターゲットユーザーにのみクリックしてもう
  • ・サービスの認知を取る

作る意味は当然、高い反応を得る事以外には有り得ない。
もし、なんとなくランディングページ等の素材を流用してバナーデザインを行っているのであれば、それは大きな間違いなのだが、それを改善することでバナーデザインからの反応率を大きく高めるチャンスでもある。

主要バナー広告のサイズ

まず、主要な媒体のバナー広告のサイズについておさらいしておこう。

  • ・Googleアドワーズ広告のバナーサイズ
  • ・Yahoo!プロモーション広告のバナーサイズ
  • ・microadBLADEのバナーサイズ
  • ・FaceBook広告のバナーサイズ

下図にまとめたが、ソートができる便利なエクセル版も用意したので、ぜひダウンロードして活用していただきたい。

バナー広告のサイズ一覧表

ad_seize バナーサイズ一覧表(エクセル)をダウンロード

クリックでダウンロード可能。

上記の表にある「970×250 ビルボード」「300×1050 ポートレイト」等は新しく追加されたサイズだ。
新しいサイズが追加されたり、また、無くなったりすることもあるので、全てのバナーデザインを作る場合は下記を参照して頂きたい。

Googleアドワーズバナー広告ガイドライン
Yahoo!プロモーション広告ガイドライン
Yahooのバナーサイズについてはページ下部のYahoo!プロモーション広告 入稿規定 (PDF)の16ページに記載されている。

そしてこちらは、バナーデザインを作るときに便利な全てのサイズを網羅したPSD/AIデータだ。

バナーサイズテンプレートダウンロード(PSD/AI)

バナーデザインを作る時には非常に便利だと思うので、是非ダウンロードして頂きたい。こちらも、クリックでダウンロード可能だ。

バナーデザインを作るうえでの5つの注意点

さて、ここまでで主要な媒体のバナーサイズとそれに伴う制作データを手に入れた。 作るには準備万端なわけだが、後述する5つのヒントは具体的な作り方を伝えていて、「作り方」にフォーカスしているので、まずはこちらの項目を読んで頂き、反応率を上げるための根本的な作り方を理解して頂きたい。

1.どこに配信するのかを強く意識する。

あなたはデザイナーかもしれないし、マーケッターかもしれない。 どちらにせよ、バナー広告をどこに出すのかという事は最重要だ。たとえばディスプレイネットワークでは、バナー広告の配信先を絞り込める。リターゲティング広告は一度あなたのサイトに訪れたユーザーを追跡する広告だ。この2つのバナーデザインが、果たして同じで良いだろうか?反応率を最大限に高めるには、まず”どこの” “だれに” “どんな” バナー広告を表示させるかを考えよう。

2.派手で目立てばいいというわけではない

バナーデザインに嫌悪感を抱いたことは無いだろうか?確かに目立つ事は重要だが、単純に派手にしたりする事はサービスやブランドが嫌われかねない。 適切なターゲットに、適切なバナーデザインとメッセージを添えればそれだけで十分なのだ。 経験上、動く広告はクリック率は高いが成約率が低い傾向にある。単純に目立てばいいというわけではない。

3.売込みのみのコピーでは誰にも響かない

あなたのサービスの売り込みについて、バナーデザインの中に詰め込んだりはしていないだろうか?
多機能なハサミも、高速で印刷が出来るコピー機もバナーを見ているユーザーには興味が無い。
そう、興味の問題なのだ。
ベネフィットという言葉をご存知だろうか?メリット(機能)の先にあるユーザーが得られる未来の話だ。
例えば、肌がきれいになるクリームにプラセンタがどれだけ配合されているかを謳う通販ページは多いが、ユーザーは肌がきれいになって、すっぴんでも外を歩けるようになりたいのだ。 売り込みよりも、ベネフィット重視のコピーで、ユーザーの興味を引こう。

4.ストックフォト素材は極力使わない

よくありがちな笑顔のオペレーターふうな女性の写真を使うのはもうやめにしよう。
ストックフォトは素材っぽさがにじみ出ていてリアリティに欠ける。
それよりは、自社の社員であったり、またはあなた自身をバナーデザインに組み込もう。
ごく個人的な、ブラウザの向こうの、ユーザーひとりに訴えかけるような意識でバナーデザインを作ることが大事だ。 社長自らをバナーデザインに組み込む、実際の対応窓口の人の写真を出すなど、リアリティを追求しよう。

5.クリックしたバナー広告を思い出す

あなた自身が興味を持ってクリックしたバナーを思い出して欲しい。
あなたの商品ページは、あなた自信が買いたいと思う出来になっているだろうか?
バナーデザインも同じだ。
あなたがクリックしないのであれば、誰もクリックしない。
この5つの項目を大事にし、いかに興味を引いて、少ないスペースでベネフィットを伝え、クリックしないといけない!と思わせる事が出来るかで勝負は決まる。
もちろん誇張は良くない。 注意を引くためにやりすぎた表現では、バナーの先にあるWEBサイトと関連性が無かったり、またはユーザーをがっかりさせてしまうことになりかねない。 クリック率は高まってもユーザーに恨まれては損になってしまう。

バナーデザインの作り方、5つのルール

それでは、実際のバナーデザインの作り方、5つのルールだ。
ルールであり、テクニックでもある。早速見ていこう。

1.オグルヴィの法則

バナーデザインサンプル

これは広告の父とも言われているデイヴィッドオグルヴィが編み出した、広告デザインのテンプレートだ。元々、バナーが無い時代のものだが、応用は効く。

デイヴィッド・マッケンジー・オグルヴィ(David Mackenzie Oglivy、1911年6月23日 – 1999年7月21日)は、イギリスの広告会社、WPPの幹部にして、社長だった人物である。一般的には「広告の父」と呼ばれる。 1962年の「タイム」より、「広告産業において、最も信頼される人物の一人」と称された。(出展:wikipedia

バナーデザインの上部2/3を画像にする。
その下にヘッドライン・セールスコピーという順で配置をする。セールスコピーの部分は、ドロップキャップという最初の文字を大きくする技法を使うと、セールスコピーを読む割合が格段に増える。 Facebook広告等はバナーデザインの中にテキストは20%以内というルールがあるので、この法則を適用させやすい。
WEB上のバナー広告はデザインできるスペースが少ないので、見出しが写真にかぶってしまっても構わない。
大事なことは、写真で惹きつけコピーを見せる!ということだ。
バナーデザインを作る第一歩で特にアイデアが無い場合、まずはこの形を使用して、徐々に別パターンのテストをしていこう。

2.写真を使うときのルール

写真には反応率の高いものと低いものとで、非常にわかり易いデータが取得できる。
この7つの写真は鉄板でクリック率の高い写真だ。
また、A/Bテストをする場合も、写真を変えるだけで効果が変わってくるので、最適な写真を見つけて頂きたい。

利用シーンを想定させる写真

バナーデザインサンプル

一番身近なケースが「利用シーンを想定させる事」だ。
ただしここにも高反応を得るためのバナーデザインテクニックがある。
例えば婚活サイトへの誘導バナーで普通に手を繋いでデートをしているバナーでは、あまりにも興味が沸かない。
利用シーンを想定させるうえで効果的な手法として、一人称視点を取り入れるといいだろう。

ちなみにこれは「理想のデート」で検索し、1位だったドライブデートを一人称で捕らえてみた。
しかし、都心であれば車の普及率が低かったり、草食系男子にアプローチするのであれば、女性が運転をしているイメージもアリだろう。
利用シーンはそのユーザーに突き刺さる、リアルなものでなければならない。
そして利用シーンも、あくまでもベネフィットでなければならない。
この場合婚活サイトの利用シーンや便利な機能を想定させても意味が無い。
その先に、出会いがあって、結婚がある。さらに先に子供が出来て幸せになったり等、婚活サイトの利用の先のベネフィットはいくらでもある。 このバナーでは想像のし易い、デートにスポットを当ててみた。
結婚→子供のベネフィットでは少し遠すぎるので。

人々の欲求に直接訴えかける写真

バナーデザインサンプル

人は根源的な欲求には逆らえない。
食欲や性欲、睡眠欲、そして幸せに暮らしたい、苦痛から逃れたい等の本能的な欲求だ。これらを満たすような写真をバナーデザインに採用すると、反応率が高くなる。

  • ・食事の写真
  • ・子供の写真
  • ・警告を促すようなイメージ

等があげられる。

意味深な写真

バナーデザインサンプル 意味深な写真はクリック率は高いが注意が必要だ。
広くリーチが出来てしまい、ターゲット層を絞ることが出来なくなってしまう。
ディスプレイネットワーク広告等で多くの人にリーチを取りたいときに向いている手法だ。
  • ・ターゲット層がやたらと広い業種等のキャンペーンでの人集め。
  • ・アンケート等、不特定多数にリーチしたい時。

などが挙げられる。

感心を促す写真

バナーデザインサンプル

一番身近なところだと、ビフォーアフターの写真がそれにあたる。
他にも、テクノロジーをアピールし、工業製品の受注につなげるホームページへ誘導する場合
「世界で始めて人が乗れるロボットを開発しました。」
美容整形の広告で
「じっと見てください。整形ってわかりますか?」等、バナーデザインで感心をさせてクリックを促す。
ただし、ビフォーアフター等は広告掲載ガイドライン、もしくはその業種に適した法律のチェックが必要だ。

3.色はこれで

カラーエモーションガイドthe impact of color on marketing.

このカラーチャートは、世界のロゴを集めたものだが、色から受ける印象と企業のイメージがピッタリとマッチしている。
つまり、それだけ配色というのは、心理的影響を与えるものなのだ。 そして基本的に使用する色の数は3色+補色以内におさえよう。 また、ターゲットユーザーのベネフィットを良く考え、与えるイメージや印象を考慮した配色が必要だ。
バナーデザインやランディングページは商品を売ることが目的なので、そこに最適な配色をすることが必要だ。
しかし、バナーデザインの場合は、とび先のWEBサイトと配色を揃える事を忘れてはいけない。

4.クーポン・白囲み

chiketto2-1

クーポンも反応率が高い。
富裕層程クーポンを使う率が高くなるという研究データもあるので、クーポン=質の悪い顧客とは限らない。
バナーのデザインを点線で囲み、クーポンふうなバナーデザインをしてみよう。
また、「白で囲って目立たせる」という言葉をご存知だろうか?
デザイン業界、特に雑誌等の紙媒体では古くから言われている事だ。 これは、広告枠の外側をあえて白で囲い、実際の表示枠よりも小さく表示させることであえてアンバランスを生み、目立たせる手法だ。

最後に

ここでは基本的に長い間効果を出し続けているバナー広告の作り方をお伝えした。
もちろん一定の効果が出ている方法ではあるが、ターゲットや配信先を間違えると、そもそもテクニックが生かされないので注意が必要だ。
また、バナー広告は早いサイクルで効果の改善が可能だ。 WEBサイトよりもずっと効果測定が軽いので、常にA/Bテストをまわしつつ、効果の高いもののみを使用するようにしよう。

 -ランディングページ 

メールでのお問い合わせ・ご相談は無料で行っております

  • お電話でのご相談・お問い合わせはTEL:03-3525-8971
  • お問い合わせはこちら メールでのお問い合わせは1時間以内にご返信致します

PAGE TOP