初心者でも簡単！クリックしたくなるバナーを作成するコツと気をつけるべき注意点

Google広告（GDN）

GDNとはGoogle ディスプレイネットワークの略称で、Googleからバナー広告を出稿する際に利用するサービスの一つです。
Googleが提携しているサービスに広告が掲載されます。
またGmailやGoogleが提供するサービスにも広告が掲載されることも魅力です。

【Google広告の画像サイズ】

• 300×250
• 336×280
• 728×90
• 160×600
• 468×60
• 320×50（スマホ）
• 320×100（スマホ）

2021年現在「336×280」のサイズで用意された広告が表示されやすい傾向にあるようです。
まずは「336×280」のサイズから用意し、制作の予算にあわせて別のサイズも用意することで、バナーが表示される機会が増えます。

Yahoo!広告（YDN）

YDNとはYahoo!ディスプレイアドネットワークの略称で、GDNと同様にバナー広告を出稿する際に利用します。
Yahoo!のパートナーサイトに広告が表示されるほか、Yahoo!TOPぺージやYahoo!ニュース、Yahoo!知恵袋などに広告が表示されるという特徴があります。

【画像サイズ】

• 300×250
• 600×500
• 728×90
• 160×600
• 640×200
• 320×50（スマホ）
• 640×100（スマホ）

Google広告とYahoo!広告の大きな違いは配信先が異なる点。つまり、広告を見るユーザー層が変わります。
とくにYahoo!広告はYahoo!TOPページや関連サイトにも掲載されるため、商材のジャンルやターゲット層によってはGoogle広告よりも費用対効果が高いケースもあります。
予算などの都合があえばGoogle広告とYahoo!広告は同時に出稿したいことろです。

A8net（アフィリエイト広告）

A8netはアフィリエイト広告の代表的な広告代理店です。
アフィリエイト広告とは成果報酬型広告と呼ばれ、成果が発生したときのみ広告料が発生します。

【画像サイズ】

• 728×90
• 120×600
• 300×250（スマホ）
• 320×50（スマホ）

アフィリエイト広告では、アフィリエイターとよばれる方々がブログやSNSで商品を紹介してくれます。
そのためアフィリエイターにとって紹介しやすい状況を整えてあげることで、積極的に紹介してもらえる可能性が高まります。
バナー広告以外にもテキスト広告やメールマガジン用の広告がありますが、基本的にアフィリエイターにとってサイトに掲載しやすく、紹介に利用しやすいのはバナー広告です。
そのため、アフィリエイターが宣伝しやすい素材作りの一環として最低限、上記4パターンのサイズは用意しておきたいところです。

バナーに掲載する情報の整理をする

バナー作成は限られたスペースで情報を伝える作業です。
情報が足りなければユーザーに興味を持ってもらえませんし、逆に不要な情報まで掲載すると本当に伝えたいことが伝わりません。
バナー作成を始める前に、掲載する情報を整理しましょう。

【バナーに掲載する情報】

• 一番知ってほしいこと
• キャッチコピー
• メインビジュアル
• オファー内容

一番知ってほしいこと

バナー作成時は一番知ってほしいことをひとつに絞るほうが好ましいです。
新着商品の入荷・セール・限定品の販売など、いくつかのキャンペーンが同時におこなわれている場合でも、ひとつのバナーにつきひとつのメッセージに絞ります。
よくあるパターンは知ってほしいことが多すぎて、いくつもバナーの中に入れ込んでしまうこと。
たとえばひとつのバナーに「セール開催中」「新作も販売中」「再入荷も続々」「会員登録してね」など、多数のメッセージを入れる形です。

基本的にユーザーがバナーを見るのはほんの一瞬です。
その一瞬でも伝えたいことが伝わるようにするには、一番知ってほしいこと以外はすべて一旦削り、たったひとつに絞り込むことがとても重要なことになります。

キャッチコピー

キャッチコピーの役割は、ユーザー自身に「私に関係がある事だ！」と感じてもらうための要素です。
たとえばダイエットサプリのバナーのキャッチコピーなら「食事制限は、あきらめました」というキャッチコピー。
食事制限のダイエットに失敗した経験がある人は共感し、バナーの別の要素も見てくれます。
また、運動が苦手で時間に余裕もない30代のキャリアウーマンに対して、「1日1時間のジョギングを毎日続けてダイエット」などの訴求をしても、なかなか共感を得ることは難しいですよね。

メインビジュアル

次にメインビジュアルも重要です。
バナーの画像にセンスのいい画像が必要と思っている人も多いですがそれは正解ではありません。
バナーのメインビジュアルでは、悩みが解決したり願望が叶ったりしたあとのユーザーの姿が想像できる画像が好ましいです。
たとえば学習教材なら、ビジネスで新しいスキルを活かしているシーンの画像などがよいです。
もともとユーザーの中にある願望を刺激すると興味を引けます。

オファー内容

最後のオファーはユーザーに行動を促す言葉です。
たとえば「50%OFFクーポン配布中」という情報に「LINE登録で」と付け加えることがオファーです。
「LINE登録で50％OFFクーポン配布中」となれば、ユーザーはなにをしたらいいのかが明確になり「リンク先の商品が気に入ればLINE登録くらいしようかな」と判断できます。
次になにをするべきかを読者に伝えることもバナーの役割です。

一番知ってほしいこと・キャッチコピー・メイン画像・オファー内容の4つが揃えば、バナー制作もスムーズになるでしょう。

何を伝えたいのか、誰に向けて発信するのかを明確にする

バナーの役割をおさらいしましょう。

• ・あなたの悩みを解決するものがここにありますよ
• ・あなたの願望を叶えるものがここにありますよ

上記の1もしくは2を伝え、リンク先のページに移動してもらう事がバナーの役割です。
バナーが役割を果たすには、誰の悩みを解決するのか、どんな悩みなのかを知っていなければいけません。
願望も同様に、誰がなにを望んでいるのかを知らなければ、「ここにありますよ」と伝えようがないですよね。
あなたの商品やサービスが、誰のためのものなのかバナー作成前に今一度確認しておきましょう。

テキストは最小限に抑え、簡潔にする

長いテキストは読まれません。
今やウェブ上にはバナーが無数にあり、ユーザーは一瞬で自分に関係があるかどうかを判断しています。
長いテキストはリンク先のページに任せて、バナーではひとことで心を掴みましょう。

パッと見ただけでクリックした先の情報がわかる

バナーの作成初心者が意外と忘れてしまうことが、クリックしたリンク先がどんなページなのかという情報を入れることです。
セールの情報なら「セール」と書き、新商品の入荷なら「新商品の入荷」と書く。
単純なことに見えますが、オシャレなバナー作成ばかり意識しているとリンク先の情報がわからないバナーが完成します。
キャッチコピー作成時に、リンク先の情報がわかるような文言があるか確認するようにしましょう。

ユーザー行動や興味関心を刺激する内容になっている

バナーがユーザーに一瞬で伝えなければいけないことは、「わたしに関係がある」と思わせるひと言です。
そのためにはユーザーの興味関心を刺激しなければいけません。
どんな人に見てほしい商品なのかをしっかり想定し、想定されたユーザーが共感するひとことや、ハッとするフレーズを添えましょう。

①まずは必要な要素を全て並べてみる

まずはバナー制作前に準備した必要な要素をすべて書き出します。
一番知ってもらいたいこと、キャッチコピー、メイン画像、オファーのすべてを最初で書き出しておくことで、書き漏れも防止できます。

②要素の中の優先順位を決める

必要な要素がすべてそろったら、ユーザーに伝えたい優先順位をつけます。
優先順位を決めなければゴチャゴチャした印象になってしまうからです。
ユーザーがリンク先で得られるメリットを感じられる設計を考え、一番伝えたいことが伝わるように配置しましょう。

③メインビジュアルになる写真を決める

メインビジュアルは悩みが解決した、もしくは願望が叶ったあとのユーザーの姿が想像できるものが好ましいです。
もしくはユーザーの現状をあらわしたビジュアルも強い共感をえられます。
美容のサービスであれば、鏡の前で悩む女性のビジュアル。メンズ美容サービスなら男性が女性にフラれるシーンのビジュアルなど、ユーザーの現状とビジュアルが重なる事で共感が得られます。

④手書きでラフを描いてみる

手書きのラフ作成はプロでもおこなう作業です。
頭の中のイメージを絵にしてみると、文字数が多すぎる、改行が不揃いになるといった不都合に気付きやすくなります。
しかも手書きのラフであればPCで作業するよりも短時間で書けてしまうため、手間がかかるようで実は時短になることがほとんどです。
すぐに画像にするにはかなりの経験が必要なので、まずは手書きのラフ作成を徹底しましょう。

⑤モノクロでレイアウトを組んでみる

はじめからカラーで作るとカラーの調整に気を使ってしまい、なかなかレイアウトが決まりません。
おもいきってモノクロで作り始めることで、レイアウトの構成に集中できます。

⑥文字の可読性を高める

レイアウトが決まったら、文字の大きさやフォントの調整して文字の可読性を高めましょう。
吹き出しや背景を使う、文字を一部大きくするなどして訴求効果を高めていきます。

⑦カラーを決める

モノクロで決めたレイアウトをカラーに戻し、文字色などを再調整します。

⑧装飾など遊び心をプラスしてみる

装飾などの細かい作業は完成間近の段階でおこないます。
このとき初心者は空白を装飾で埋めてしまいがちですが、空白のあるデザインの方が整った仕上がりになります。
空白をむやみに装飾で埋めないようにしましょう。

⑨全体を整える

フォントのカーニングや画像の配置を微調整します。

⑩実際のサイズで最終確認をする

バナーが完成したら、実際の画像サイズで表示して最終確認をおこないましょう。
バナー作成は画面の拡大や縮小を繰り返しておこなうため、実際のサイズを見ないまま作業を進めることも多いです。
最終確認は実際のサイズで見ると、作業時に気付かなかったズレや粗さを発見できます。