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

集客や訴求の面で、大事な要素の一つであるバナー。
作るのが大変・難しいイメージがあるかもしれません。
今回はバナーを作成するにあたってのコツや気を付けるべきことをご紹介致します。
効果的なバナーを展開して、集客を成功させましょう。

1. WEBに携わるなら知っておきたい「バナー」の意味と役割とは
2. バナーを使う場所とサイズ規定について
3. バナー作成の前に押さえておきたいポイント
4. 売れるバナーはキャッチコピーで心を掴む！
5. 実際にバナーを作るための手順
6. まとめ

WEBに携わるなら知っておきたい「バナー」の意味と役割とは

バナーを日本語に直訳すると「旗」という意味があり、実店舗でいう「のぼり」の役割があります。
実店舗が「のぼり」を使って、現在おこなわれているセールの情報や新着商品の宣伝をするように、ウェブサイトにおいてのバナーも宣伝を目的として設置されることが多いです。
商品やサービスはユーザーの悩みを解決したり、願望を叶えたりするために存在していますので、バナーの役割は主に次のふたつに言い換えることができます。

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

「英語がまったくわからない」という悩みに対し「ここにオンラインスクールがありますよ」と伝える。
「商品を安く手に入れたい」という願望に対し「ここでセールしていますよ」と伝える。
つまりバナーの役割はWeb上で商品やサービスの告知をし、リンク先に移動してもらうことです。

バナーを使う場所とサイズ規定について

バナーを設置する場所は、大きく分けて2つあります。

自分のサイト
他社のサイト

自分のサイトにバナーを貼る場合は、バナーの大きさや設置場所に制限はありません。
しかし他社のサイトにバナーを貼らせてもらうには、基本的には広告枠として購入する必要があり、掲載されるサイトや広告のルールにあったバナーを作成しなければいけません。
ここでは代表的な3つの広告について説明します。

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

売れるバナーはキャッチコピーで心を掴む！

あなたは今日いくつのバナーを見かけましたか？
私たちは日頃からたくさんのバナーを目にしているため、自分に関係がないバナーは無視することが当たり前になっています。
バナーをクリックしてもらうためには「私に関係がある」と思わせるキャッチコピーが必要です。
キャッチコピー作成のコツを3つご紹介します。

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

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

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

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

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

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

実際にバナーを作るための手順

ここからは実際にバナーを作成する手順を紹介します。
バナー作成は、限られたスペースに必要なことをすべて書かなければいけないため、最初のうちは1から作り直すことも多いですよね。
バナー作成を10段階に分けることで、途中確認しながら失敗しないバナー制作を実現しましょう。

【バナー制作の手順】

まずは必要な要素をすべて並べてみる
要素の中の優先順位を決める
メインビジュアルになる写真を決める
手書きでラフを描いてみる
モノクロでレイアウトを組んでみる
文字の可読性を高める
カラーを決める
装飾など遊び心をプラスしてみる
全体を整える
実際のサイズで最終確認をする

それぞれの手順を解説します。

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

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

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

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

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

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

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

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

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

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

⑥文字の可読性を高める

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

⑦カラーを決める

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

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

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

⑨全体を整える

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

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

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

まとめ

ここまでお読みいただきありがとうございました。
バナーは他社のサイトからお客様を連れてきてくれる大事な要素です。
お客様はオシャレなデザインにはなく、自分に関係がありそうな情報にのみ興味を示し、バナーをクリックしてくれます。自社サイトへの掲載や、外部サイトなら広告枠の規定に合わせて効果のあるバナーを作成し、ECサイトへの集客を成功させましょう。

この記事を書いた人