広告運用してわかった！良いバナーのデザインと探し方のコツ

消費者に商品やサービスなどの魅力を伝えて、行動をとってもらうための広告バナー。

商品・サービスを購入・利用する人が増えれば良いバナーといえますが、駆け出しだと良いバナーの作り方や、参考の見つけ方さえわからない方もいると思います。

そこで、今回は

私もWEB広告を始めた頃は、反応してもらえるバナーが何かわからず、手当たり次第にバナーのまとめサイトを見たり、YouTubeなどで学んだりしました。

実際に様々なサイトを見て、WEB広告を運用してみた経験を踏まえて、より効率的にバナーの参考探しやバナー作りに活かせるようにまとめたので、参考にしてみてください。

▼ ▼ 期間限定で無料プレゼント ▼ ▼

WEBデザインを勉強したいけど、やり方がイマイチわからない、、、。そんな方のためにプロがおすすめする7つの最強勉強法をまとめました。ぜひ手に取って勉強をするときの参考にしてくださいね。

無料のうちに受け取る

【広告種類別】広告バナーデザインの参考サイト

まず、広告バナーデザインの参考サイトをご紹介します。

広告バナーと一口に言っても、配信先は次のようにさまざまです。

配信先が違えば、サイズやレイアウトも異なります。

たとえば、Facebookであれば正方形、Instagramであれば縦長のようにそれぞれの媒体に合わせてレイアウトなど考えて制作しなければなりません。

まずは、各媒体ごとのデザインの特徴をおさえるためにも、参考サイトを見てみましょう。

今回は、主要な媒体ごとの広告バナーの参考サイトを中心にご紹介します。

Facebook広告：Meta広告ライブラリ

Facebook広告なら、「Meta広告ライブラリ」がオススメです。

このサイトの特徴は、実際に出稿されている広告バナーが広告アカウントごとに配信している広告や出稿日がわかること。

競合のバナーが確認できるのはもちろん、配信期間の長いバナー、つまり反応が良いと思われるバナーの傾向までも見られます。

そのまま使うとパクリになりますが、反応の良いバナーを見れば見るほど、自分の中でバナーに関する知識やノウハウを貯められるため、初心者にはうってつけのサイトです。

検索窓にキーワードを入力すれば、企業ごとだけではなく関連する広告が見られます。

たとえば、デザインスクールの競合だけではなく、スクールや習い事全般の広告を参考にしたければ、「スクール」や「学習」と入れれば、幅広く参考に見られるため、まずはさまざまなキーワードを入れて見てみましょう。

Meta広告ライブラリ

Instagram広告：インスタ広告集めました。

Instagram広告なら、「インスタ広告集めました。」がオススメ。

Meta広告ライブラリと違い、Instagramのアカウントなので、カテゴリーごとの検索はできません。

ですが、定期的に更新されるためフォローしてストックを貯めておくと、バナー制作のときに役立つはずです。

そして、「インスタ広告集めました。」はInstagramのアカウントなので、実際に流れる広告をイメージしながら参考を見られるのがポイントです。

広告を作るときに大事なのが、ユーザーにどのように表示されるのかを常に考えること。

制作段階ではうまくできていても、いざ配信してみると文字が読みづらかったり仕様の関係で文字が隠れたりすることがあります。

参考探しの時点で、プラットフォーム上での見え方がわかれば、作ってから見え方の観点での修正がなくなるため参考として見ておきましょう。

インスタ広告集めました。

Twitter広告：Twitter広告透明性センター

Twitter広告で参考を探すなら、Twitter広告透明性センターを使いましょう。

Meta広告ライブラリのように、検索窓からTwitterのハンドルネームを入力すると、そのアカウントが出稿している広告を確認できます。

ここまでご紹介した、「Meta広告ライブラリ」と「インスタ広告集めました。」だけでも、初心者であればバナー広告の参考サイトは十分なくらいです。

ですが、FacebookやInstagramと異なり、Twitterは文字が多いプラットフォームなので、バナーのレイアウトなども他の媒体とは異なります。

より反応の良い広告バナーを作るためには、やはりそのプラットフォームの参考を取り入れるのが近道なので、Twitter広告を運用する、そのバナーを作る場合は必ずチェックしましょう。

Twitter広告透明性センター

YouTube広告：動画広告研究所

動画広告研究所は、YouTube広告を集めたサイトです。

さまざまなジャンルの広告を見られますが、特に美容系の動画広告に特化しています。

男性向けではダイエットや脱毛、女性向けでもダイエットやヘア毛など細かいカテゴリで見ることが可能。

広告バナーにそのまま活かすことはできなくても、テイストや訴求など参考にできる部分は多いです。

また、動画広告に関係なく、YouTubeのサムネイルを広告バナーの参考に取り入れたものも反応が良いケースもあります。

それぞれの媒体ごとのまとめサイトだけでなく、さまざまなプラットフォームなども参考に、広告バナーを作ってみましょう。

動画広告研究所

ディスプレイ広告：バナーデザインアーカイブ

ディスプレイ広告は、WEBページの端やアプリの隅に表示される広告です。

ディスプレイ広告専用のまとめサイトはありませんが、「バナーデザインアーカイブ」はネット上のさまざまなバナーが掲載されているため、参考になるでしょう。

業界、業種、サイズ問わずにさまざまなバナーが揃っており、サイズと業種、色からバナーを検索できます。

ディスプレイ広告は、今までご紹介したプラットフォームに比べて、配信箇所のサイズのバリエーションや配信箇所が多いのが特徴。

ページやアプリによってサイズや横と縦の比率も異なるため、さまざまなタイプの画像を見る必要があります。

もちろん、今まで紹介したまとめサイトも参考になりますが、バリエーションがあるサイトを見ると視野が広がりますよ。

バナーデザインアーカイブ

迷ったらこの2つ！幅広く広告バナーが見られる参考サイト

今まで広告の配信先別に、オススメの参考サイトをご紹介しましたが、サイトによっては思っていたほど参考を見つけられなかったかもしれません。

また、まとめサイトは調べればいくらでも出てきて、勉強熱心な方ほどさまざまなサイトを見すぎて、逆にどれを見たらいいかわからなくなりますよね。

そこで、初心者にオススメの参考サイトを2つご紹介します。

Pinterest

「とにかく色々なバナーを見たい！」という方は、Pinterestがオススメです。

Pinterestは広告バナー以外にも、アイキャッチやWebサイト、ロゴ、名刺などさまざまなデザインが見られます。

そのまま参考にするのは難しくても、他のデザインから広告バナーに活かすことは可能です。

たとえば、Facebook広告のバナーの参考でレイアウトは良さそうなものが見つかったけど、テイストは自社のものに合わない、なんてことはよくあります。

その場合は、ピンタレストを眺めていると、これは合いそう！というデザインが見つかるときがあります。

ジャンル問わずさまざまなデザインが見られるので、参考探しに迷った時は一度訪れてみてください。

Pinterest

retrobanner

retrobannerは12000以上のバナーを閲覧可能です。

平日に毎日4つずつ新しいバナーが掲載されるため、常に最新トレンドを収集できるのがポイント。

他のサイトと大きく違うのは、バナー広告に使われている主要16色のカラーコードを見られることです。

参考を見て「この色が使いたい」と思っても厳密に同じ色にするのは難しいのですが、カラーコードがわかればすぐに使用できるため、利便性が高いです。

また、レイアウトがシンプルで見やすいので、初心者でも使いやすいですよ。

retrobanner

反応がグッと上がる！広告バナー作成のチェックリスト16選

ここからは、反応がグッと上がるバナー広告に欠かせない、16個のチェック項目をご紹介します。

制作する前の事前準備、どのバナーでも最低限押さえておきたい基本編、クリック率を高めるときに使えるワンポイントの3つに分けてご紹介します。

WEB広告でさまざまなバナーをテストしてきて分かった内容なので、これから広告バナーのデザインをするときの参考になるはずです。

事前準備編

まずは、広告バナーのデザインを始める事前準備です。

どれだけ参考を見て作ろうとしても、この内容が抜けているとせっかく作るバナーの効果が薄くなってしまうので、最初に目を通しておきましょう。

ゴールを明確にする

1つ目が、これから作るバナーのゴールを明確にすること。

広告バナーの目的はユーザーの行動を促すことですが、そのゴールはバラバラですよね。

たとえば、

などがあります。

それぞれ目的に応じた訴求やバナーの参考があるので、まずはバナーの目的を明確にしましょう。

ターゲットを明確にする

ゴール設定と同じくらい大切なのが、ターゲットを明確にすることです。

同じ女性でも、20代なのか60代なのかでテイストは変わりますし、同じ20代でも男女で色の好みは変わりますよね。

つまり、あなたがこれから作るバナーが誰向けのものなのかが明確になっていないと、本当にユーザーに刺さるバナーは作れません。

ターゲットが明確になっても、使う色やテイストに迷うこともあるでしょう。

その場合は、あなたが作るバナーと似たターゲットに向けて配信されているバナーのテイストを参考にしてみてください。

たとえば、20〜30代の女性向けであればピラティスやヨガの広告は参考になるはずです。

先ほどご紹介した参考サイトもうまく活用して、ターゲットに合わせたバナーを制作してみましょう。

与えたい印象にあった参考を見つける

デザインテクニックも大切ですが、それだけではユーザーの心に刺さるバナーはできません。

もう一つ大切なのは、与えたい印象にあった参考を見つけることです。

たとえば、

など与えたいイメージや訴求によって、参考にすべきバナーのテイストは大きく異なるのです。

全く同じ業種やジャンルのバナーをそのまま取り入れる必要はありません。

たとえば、転職系のバナーであれば、副業やクラウドソーシング、就活系など似たジャンルも参考としてみると視野が広がるということです。

配信する媒体にあった参考を見つける

先ほどもお伝えしましたが、

など配信媒体はさまざまです。

それぞれの媒体ごとに推奨サイズや入稿規定、表示のされ方が異なります。

Facebookでは問題なく表示されていても、LINEではバナー内のボタンなど大事な部分が切れているなどはよく見かけます。

せっかくデザインは綺麗なのに、バナー全体が表示されないのはもったいないと思いませんか。

また、反応してもらいやすい型も媒体ごとに異なる場合があります。

そのため、これから配信する媒体の参考にそってバナーのデザインをしましょう。

クライアントと事前にすり合わせをする

バナーの目的を明確にする段階では、クライアントとの事前のすり合わせも大切です。

社外案件や業務委託としてバナー制作を請け負う場合は、必須と言っても過言ではありません。

その目的によって訴求はもちろん、色やテイストが異なるからです。

また、事前にすり合わせをすることで、その後のやりとりもスムーズになるため、制作前にクライアントにゴール設定のヒアリングを入念にしましょう。

与えたい情報の優先順位を決める

初めてバナーのデザインをするときは特に、商品・サービスのことをたくさん伝えたいあまり、文字量が多くなりがち。

ですが、バナーの目的はあくまで、ユーザーに「興味を持ってもらう」ことです。

バナーをタップしてもう少し詳細をみてみたいと思ってもらうことがゴールなので、まずは最低限この3つが入っているかを確認しましょう。

むしろ、これ以上入れると、本当に伝えたいことさえ伝わらなくなり、逆効果なのでバナーの段階では抑えましょう。

シンプルでわかりやすいコピーを書く

情報の優先順位をつけるのと同じくらい、コピーの簡潔さは重要なポイントです。

厳しく聞こえるかもしれませんが、広告バナーは見てもらえない前提で作らなければなりません。

あなたがスマホを使う場面を想像してみてください。

同じ画面をずっと表示することはないですよね。

ましてや、広告が表示されたら秒でスクロールするか、消しませんか。

つまり、表示された瞬間に、商品・サービスが何か、どんなメリットがあるのかが伝わらなければバナーの意味はないのです。

そのためには、シンプルでわかりやすく、小学生でもすぐにわかるレベルで書く必要があるのです。

デザイン基本編

次に、デザイン面で最低限押さえてほしい内容を6つご紹介します。

バナー作成で必ず守ってほしい内容で、この6つを押さえるだけでクオリティの高いバナーを作れます。

作る前と作った後に、これらを守れているかチェックしましょう。

余白で強調する

余白の使い方はバナー制作でとても重要です。

余白の有無で文字の読みづらさが大きく変わり、一番伝えたい内容が伝わるか伝わらないかが決まるからです。

中には原稿用紙のように上下左右が埋め尽くされたバナーもあります。

そこまでとはいかなくても、文字が詰まって読みづらいバナーは参考サイトを見てもよく見かけます。

文字ばかりだと、どこがポイントなのかがぱっと見で伝わりにくいですよね。

作り終わったら、再度見直して文字が詰まっていないか、メインコピーが目立つか見直してみましょう。

情報をグルーピングする（近接）

レイアウトで大事な考え方の1つが、近接です。

近接とは、見出しと本文、画像と文章など関連性の高いもの同士を、違和感のない距離感で配置することを指します。

下の写真を見比べてみましょう。

日付や季節など似た要素は１箇所にまとまっていた方が、情報がわかりやすいと思いませんか。

情報の内容だけでなく、図形は図形どうしでまとめるなど、似た要素を近づけるとバナー全体がしまって、パッと見で伝わるバナーを作れますよ。

このように近接をうまく活用すると、少ない色やデザインで情報が伝わりやすくなるのです。

あわせて読みたい

もう迷わない！伝わるレイアウトデザインのコツ大全 デザインを作っているとき、レイアウトにずっと悩んでしまう。なんかレイアウトがパッとしないんだよなあ…… 今回は、こんな「レイアウトのお悩み」を解決すべく、レ…

要素を見えない線で揃える（整列）

上下、左右をそれぞれ揃えて、バナー全体の統一感を出しましょう。

具体例を見てみます。

左のNG例は「SALE」や「80」などが妙に目立って、イマイチ情報が頭に入りにくいですよね。

一方で、右のOK例を見ると、文字を整列させて、左右の余白が揃っていることで、グッとまとまった印象になり読みやすくなりました。

このように、高さや上下あるいは左右で余白の揃え方で、一気に伝わりやすさが変わります。

「なんか読みづらいな」と感じたら、文字の高さや左右の余白を揃えられないか、チェックしてみましょう。

背景と文字のコントラストをあげる

コントラストとは、WEBサイトやバナー内の要素同士の違いを強調することを指します。

たとえば、黒背景にグレーの文字は読みづらいですよね。

もし黒背景にするなら、文字は白にすることで読みやすくなります。

このように、異なる色相同士を配置する以外にも、

などで、コントラストを調整できます。

文字だけではなく、画像や写真にも応用できる考え方なので、取り入れてみましょう。

文字の可読性をあげる

文字の可読性はユーザーの行動に直結します。

優れたコピーが書かれていても、読めなければ行動してもらえません。

文字の可読性を上げるには、

などがあります。

配信媒体や掲載サイトによって、適切なフォントは異なりますが、全般的にオススメなフォントはこちらのサイトを参考にしてみてください。

特に、メインコピーのサイズを変えるのは可読性を上げるうえで効果的です。

他の文字とのバランスなどは、参考を取り入れるとミスが減ります。

また、コントラストについては先ほどご紹介した通りです。

あわせて読みたい

Canvaで使えるおすすめフォント30選｜無料＆商用利用OK Canvaには無料で使えるフォントがたくさんあります。 その数なんと300種類以上。無料のフォントだけでも250種類はあるそうです。 今回は、たくさんのフォントの中から特…

使用する色は3種類までに抑える

使用する色はできるだけ少なく、多くても3種類に止めましょう。

強調したい内容があるとき、複数の色を使って目立たせたい気持ちはわかりますが、色の種類が多くなるほど本当に目立たせたいものが伝わりづらくなってしまいます。

一方で、相性の良い組み合わせでデザインされたバナーは、美しくユーザーの目に止まりやすいです。

そのようなバナーが作れればベストですが、駆け出しの頃はどの色の組み合わせがいいのかわからないですよね。

そこでオススメなのが、色の相性を自動で選んでくれるツールです。

Scheme colorやColor Huntなどさまざまなツールがあるので、いろいろ試しながら使いやすいものを見つけてみてください。

クリック率アップ編

バナーの目的は、興味を持ってもらい商品やサービスの紹介ページに飛んでもらうことでしたよね。

そのためには、クリックしてもらわなければなりません。

ここでは、クリックしてもらうテクニックを3つご紹介します。

この内容を取り入れただけで、クリック率が2倍以上になった事例もあるため、ぜひ取り入れてみてください。

ボタンを目立たせる

1つ目はボタンを目立たせること。

ボタンの有無でクリック率は大きく変わります。

ボタンを設置して多くの人は満足してしまうのですが、設置したボタンは目立っていますか。

せっかくボタンを設置しても目立っていなければ、反応してもらえません。

すでにボタンを置いている場合は、目立っているか確認し、周りの文字や色と調整しながらより目立たせられないかテストしてみましょう。

視線の動きを意識する

バナー広告は、基本的に左から読むことが多いですが、その視線の動きも反応に大きく影響します。

バナー作りで意識してほしいのが、「Z」。

人は、大きな文字や余白に視線がいき、興味を持っているときは左上→右上→左下→右下の順に視線が動くのです。

この順番にしなければいけないわけではありませんが、反応してもらいやすい型の1つではあるので、初めてバナー作りをする場合はこの型で一度作ってみましょう。

キャッチコピーを工夫する

キャッチコピーは広告の反応に大きな影響を与えます。

デザイナーの管轄でないことが多いため、用意されているケースが大半ですがキャッチコピーの知識があればより良い提案も可能です。

しかも、キャッチコピーの基本的な考え方は、

の3つで、ビジュアルかテキストかの違いはありますが、デザインとほとんど同じですよね。

コピーを用意されていても、この3つを押さえているか確認し、なければ追加で提案するだけでより重宝されるようになります。

広告バナー初心者からよくある質問3選

最後に、広告バナーデザイン初心者からよくある質問にお答えします。

WEB広告を始めた頃に私も抱いていた質問なので、ぜひ参考にしてみてください。

バナーデザインの費用の相場は？

基本的には、広告バナーは外部に委託するケースがほとんどです。

その際の料金についてはサイズによっても異なり、大体4,000〜1万円ほどです。

リーズナブルな会社や、クラウドソーシング、ココナラなどのサービスだと1つのバナーで1,000円以下で作れるケースもあります。

写真を使わない、あるいはテキストのみの広告バナーであれば安く制作してもらえますが、写真やテクスチャを使用するほど、あるいは凝ったデザインにするにつれて高くなります。

反応の良いバナーの参考の見つけ方は？

反応の良いバナーの参考を見つけるには、最初にご紹介したバナーまとめサイトを見るのが一番です。

ですが、外から見ただけでは、どのバナーが反応がいいのかイマイチわかりませんよね。

そこで、実際に私もやっている方法でオススメのものをご紹介します。

それが、広告をキャプチャしておき、一定期間ごとに配信状況を確認する手法です。

Meta広告ライブラリではそのバナーが出稿された期日を確認でき、配信停止になったバナーは閲覧できなくなります。

つまり、そのバナーをキャプチャするなどで保存し1週間後に確認して閲覧できなければ1週間程度で止まったことになり、それよりも長く配信されていたバナーはある程度反応が良かったと推測できるのです。

もちろん、広告アカウントによって配信のルールは異なるので一概に反応が良かった、悪かったとは言えませんが参考にはできます。

このように、サイトの使い方1つで外からでも反応の良いバナーを見つけることは可能なのです。

商用無料で使えるオススメサイトは？

先ほど広告バナーは外部に委託するのがほとんどとお伝えしましたが、簡単なバナーであれば自分や自社で制作することが可能です。

ここでオススメしたいのが、無料で使えてかつ商用利用可能な「canva」です。

無料で使えるテンプレがたくさんあり、素材写真や画像を用意すればさまざまなサイズのバナーを作れます。

また、バナー制作で素材を探すとき、できるだけ無料のもので作りたいですが、商用利用可能かまで確認が必要です。

そこでオススメの素材サイトが、photoACとillustAC。

どちらも商用無料で利用でき、綺麗系のもの、可愛い系のもの、かっこいい系のものなどバリエーションが豊富なので、どのジャンルのバナー制作に対応可能です。

自社で準備できる場合は問題ありませんが、そこまでリソースを割けない場合には、ぜひこれらのサイトからダウンロードして使ってみましょう。

まとめ

今回は広告バナーデザインや、その参考サイトについてご紹介しました。

改めて、広告バナー作成のポイントをまとめると次のようになります。

改めて振り返ってみると、駆け出しの頃は特に良いバナーをできるだけたくさん見ることと、それを踏まえて、とにかく作ってみることが大切です。

良いバナーを作るのに必要な項目を紹介しましたが、すぐに反応の良いバナーを作れるわけではありません。

たくさんテストをしてその中からやっと、良いバナーが見つかるのが広告バナーです。

今回ご紹介した、広告バナーのまとめサイトやチェックリスト、商用無料のサイトを利用して早速バナーを作ってみましょう。