バナーデザインの参考サイト6選とバナーの基礎知識や作成のコツ

Canvaはテンプレートから成果の出るバナーをデザインできます!
今すぐCanvaでバナーをデザイン!
バナーデザイン 参考 アイキャッチ

「バナー作りの参考にできるバナーをたくさん見たい」

「バナーデザイン作成のポイントとかコツとか知りたい」

「短時間で効果のあるバナーを知識ゼロから作ってみたい」

バナーと言えば、店頭に設置するのぼり旗を指すこともありますが、現在の主流はウェブ広告です。バナーは「ディスプレイ広告」とも呼ばれ、ネット上のウェブサイトが提供している広告枠に表示するものです。

サイズも小さく簡単に作れそうに見えるバナー広告ですが、クリックをさせて商品やサービス購入のために用意されたメインサイトに誘導するという機能を持った広告なので、適当に作ったのではコンバージョンに繋げることができません。ユーザーに訪問してもらうため、実は色々なことを考え抜かれてバナーは作られているんですね。

そこで、この記事では、

1. バナーデザインの参考にできるまとめサイト6選

2. バナー広告の3つの目的

3. バナーデザインの基本

4. バナーデザインで重要な3つのポイント

5.バナーデザインの腕を上げるために|参考にするときの3つのコツ

6. バナーデザインに使えるアプリ、サービスまとめ

をご紹介します。

これを読めば、今まで漠然と眺めていたバナーを見る目が変わり、どうデザインすればクリックしてもらえる効果の高いバナーが作れるのかがわかるようになります。

記事の終わりには、バナー作成が簡単にできるデザインツールのCanvaもご紹介しますので、ぜひ試してみてください。

目次

1. バナーデザインの参考にできるまとめサイト6選

まずは、既存のバナーのデザインを大量に取集したまとめサイトを6つご紹介します。まとめサイトを眺めることでデザインのアイデアストックができます。

さまざまなキーワードで検索し絞ってみることで、欲しいと思っていたデザイン見本にできるバナーにたどり着けますので、検索の方法が多めに用意されているサイトがおすすめです。

1-1. Banner Matome

Banner Matomeは、 掲載数が2万超とボリュームがあり、

・色別

・業種別

・表現別

で検索することができます。

1-2. Retrobanner

Retrobannerは、とてもシンプルなバナーデザイン集です。サイズ別に絞り込んで検索することができるので、特定のサイズによるバナー作成をしたい方には特に参考にしやすいと思います。

右上のメニューアイコン(三本線)から、

・サイズ

・色

・業種

・テイスト

の4つのカテゴリから選んでください。

1-3. バナーデザインギャラリー

バナーデザインギャラリーは、サイズ、色、国内、海外から検索することができます。

また、ご自身が作成したバナーを掲載することもできます。投稿型サイトなので、最近作成された新鮮なデザインを見て参考にすることができます。検索方法は、左側サイドバーから選んでください。

1-4. バナーデザインアーカイブ

バナーデザインアーカイブは、サイズ、色、業種別に探すことができます。無限にスクロールできるようになっているので、スムーズな閲覧が可能です。

絞り込み検索するには、右上の「サイズから選ぶ」「色から選ぶ」「業種から選ぶ」の3つのボタンから選んでください。

1-5. ピンタレスト

Pinterest(ピンタレスト)は、ピンボード風に使える画像共有サイトです。グローバル展開しているので、国内海外問わず、さまざまな国のバナーデザインを見ることができます。

自分自身のボードを持ち、検索して気に入った画像があれば、ピックアップしてコレクションしていきます。自分の画像をアップロードすることも可能ですが、インスタグラムと違い、SNS的に他人と交流する機能はなく、デザイナーなどが自身のデザインの参考にするためのアイデアストックに活用していることが多いサイトです。

アプリ(Google Play App Store)もあり、スマートフォンやタブレット利用もできます。

1-6. MOAT

日本だけでなく、海外にも秀逸なバナーデザイン集のサイトがあります。MOATは世界的にも有名なサイトなので膨大な収録数と、日本ではあまり使われていないようなデザインのバナーを見ることもできるので、視野が広がります。また、サービス名や商品名、企業名で検索ができるので、競合サービスのバナーを調査したいときにも活用できます。

Canvaで人気のバナーデザインテンプレート トップ10

ここで、Canvaを日本でご利用いただいている方たちが最も使っているバナーテンプレートのトップ10を紹介します。おしゃれなバナーからかわいいバナーまで、人気のテンプレートから自分オリジナルのバナーを作ることができます。お気に入りのテンプレートがありましたら、クリックすればすぐにCanvaで自分だけのおしゃれなバナーがデザインできます。

1位. カーネーション背景のラグジュアリーなバナーデザイン

母の日のメッセージにも使えるカーネーション背景のラグジュアリーなバナーデザイン。背景写真とテキストを変えれば簡単にオリジナルバナーのデザインに変更できます。

2位. サーモンピンクベースのかわいいバナーデザイン

手書き風のピンク背景とかわいい花のイラストでポップな印象のバナーデザインです。

3位. シンプルでクリーンな印象のバナーデザイン

時計とノートパソコンの写真を使ったシンプルなバナーデザインです。

4位. 猫がテーマのキャッチーなバナーデザイン

動物の写真を使ったかわいいデザインのバナーデザインテンプレートです。

5位. ヨットの写真で爽やかなイメージのバナーデザイン

青基調のヨットの写真と白い円を活用してとても爽やかな印象のバナーデザインです。

6位. フルーツの写真が印象的なバナーデザイン

カラフルなフルーツの写真を大胆に使ってキャッチー雰囲気のバナーデザインです。

7位. サーモンピンクのリーフモチーフ背景でまとめられた印象のバナーデザイン

サーモンピンクとベージュの2色で落ち着いたイメージでかわいい印象を残せるバナーデザインです。

8位. 夜景写真を使ったクールな印象の不動産系バナーデザイン

夜景写真がかっこいいクールな印象の不動産系バナーデザインです。

9位. アートな雰囲気のバナーデザインテンプレート

ぼやけたカラーの背景が印象的なアートエキシビションに使えるバナーデザインテンプレートです。

10位. オイルペインティング背景のカラフルなバナーデザイン

オイルペインティング背景を使ってカラフルに表現されたバナーデザインテンプレートです。

2. バナー広告の3つの目的

バナー広告の役割と目的を知っておきましょう。バナーはサイズが小さいこともあって、役割や目的を軽視してしまいがちですが、バナー(banner)のもともとの意味は、「旗」「横断幕」で、《人目を引いて興味や関心を持たせる》という重要な目的があるのです。

バナー広告の主な役割は3つあります。

2-1. 幅広いユーザーに対して興味を持ってもらう

ウェブのバナー広告は、ポータルサイトや商品に関連するサイト、ブログ等に掲載することにより、幅広い層の目に入るようにして、興味や関心を持ってもらう役割があります。

たとえばサプリメントであれば、サプリメントユーザー層が多くアクセスしそうな大手新聞社のサイトや健康情報サイト等にバナー広告を掲載し認知度を高めたりします。

実店舗にある幟(のぼり)や旗なども通行人に対して来店を促すためのものなので、バナー広告と役割は同じです。

2-2. 潜在顧客を掘り起こす

すでに顧客になっている人ではなく、これまで商品やサービスを知らなかった層に対して、興味を持ってもらえるようなバナーを作成して、潜在顧客を掘り起こすこともバナー広告の役割です。

特にウェブバナーの場合、さまざまなサイトを訪れるたびに、何度もバナーを見かけることでネットユーザーは興味を持ちます。商品を使ったことがない人に、もっとくわしく商品について知りたいと思わせることが目的です。

2-3. クリックを促して、別サイトに誘導を行う

バナー広告の重要な役割は、クリックを促して、別に用意してあるメインのサイトに誘導を行うことです。

商品購入がゴールとすれば、バナー広告はスタート地点の「入り口」に当たります。最終的にクロージングを行うのは、バナー広告から誘導した先のサイトですが、入り口であるバナー広告がどれだけ、目にした人の興味や関心を強く引きつけることができるかに、商品の売り上げがかかっていると言っても過言ではありません。

バナー広告は小さくても、重要な役割と目的を持っているのです。

3. バナーデザインの基本

バナー広告の役割と目的を把握したら、次はどんなバナーが結果につながるのか、まずは基本的なことから見ていきましょう。「デザインがカッコよければOK!」というだけでは目的を達成できないのが、バナーデザインの奥深いところです。

3-1. リンク先の内容や訴求ポイントをしっかり表現する

バナーに与えられた最大の役割は、リンク先への誘導です。そのために重要なのは、「リンク先に何があるのか」を伝えることです。リンク先の内容を簡潔にまとめ、それを図案化したものである必要があります。

さらに、そのリンク先の情報に触れたくなるよう、訴求するポイントも伝えることも忘れてはいけません。これらが、バナー上で表現する必要がある情報です。バナーを作成するのにあたって、まずはこれらの情報が何であるかを整理するのが良いでしょう。

3-2. バナーを設置するサイトとの関わりを考慮する

バナーを設置するサイトには、それぞれの世界観やターゲットとしている人たちがいます。例えば株に関連するサイトであれば株式投資をしている人、関心を持っている人たちがターゲットです。こうしたサイトからの誘導を期待するリンク先ももちろん、株に関連したサイトということになります。

ここで考慮したいのは、「株をやっている人、株に興味を持っている人」が見たくなるようなバナーであることです。そんな人たちが興味を持つような情報が盛り込まれていること、そして「もっと見たい」と思ってもらうことを考慮すると、より誘導効果が高くなります。

3-3. 最適な大きさにする

バナーには、最適な大きさがあります。伝えたいことが多いのに小さなサイズだと文字が小さくなって読みにくくなりますし、広告予算の都合や、設置するサイトの事情によって思い通りの大きさのバナーを設置できないこともあります。

こうしたさまざまな事情を考慮して、バナーを最適な大きさにする必要があります。こちらは「みんなの株式」という株式情報サイトの、広告主向けバナー仕様です。このサイトにバナーを掲載した場合は、以下のような選択肢がある中から選び、それぞれのサイズに合ったバナーを作成することになります。

3-4. データ量を小さくする

バナーの「サイズ」には、見た目の大きさだけではなくデータ量の「サイズ」もあります。データ量が大きくなると読み込みに時間がかかるため、バナーのデータ量は可能な限り小さくする工夫をしましょう。

近年では光ファイバーによるブロードバンドや無線高速通信によるネット閲覧が主流になっているのでデータ量のことをあまり意識することはありませんが、それでもやはりWi-Fiが混雑している場合など通信速度が遅くなる状況も十分考えられます。その場合にバナーのデータ量が大きいと表示が遅くなり、そのバナーを見る前にページを閉じられてしまう可能性もあります。

逆にデータ量が小さいバナーだと他のバナーよりも早く表示されて目立たせられる余地も生まれるので、データ量を小さくする工夫はとても重要です。

3-5. 原則として色は3色までにする

バナーのデザインに色を多く使いすぎるとゴチャゴチャした印象を与える可能性が高くなるため、デザインの際には使う色を絞り込むことも有効です。メインカラーとサブカラー、そしてアクセントして一部に3つ目の色を使うのがデザインの定石なので、その定石に沿ったデザインをするとすっきりとした印象になり、同時にコーポレートカラーやイメージカラーなどを際立たせる効果も期待できます。

3-6. 文字を絞り込む

伝えたいことが多くなると、どうしてもバナーの中の文字が多くなりがちです。リンク先に誘導したい思いが強いほど文字で伝えたいことも増えてしまいますが、文字が多くなることもゴチャゴチャした印象につながりやすいもの。文字はできるだけ少なく、伝えたいことだけに絞り込むのがひとつのポイントです。

文字の大きさにも工夫をして、本当に伝えたいことを一番大きな文字にして、それ以外の部分と差別化するのも有効です。

4. バナーデザインで重要な3つのポイント

バナーをデザインする上で大切な3つのポイントをご紹介します。バナーは他の広告よりも、広告を目にした人がその場ですぐに行動を起こす(広告をクリックさせる)ようなデザインを考えることが重要だからです。

特に、ターゲット設定はバナー作成の最重要ポイントとなりますので、必ず設定してからデザイン作成に取り掛かってください。

4-1. ターゲット設定

ターゲット設定は必ず行いましょう。なぜなら、ターゲット(標的)を決めていないバナー広告は、誰にも興味を持ってもらえないからです。「誰にでも当てはまるように見えるバナーは、誰にもクリックしてもらえない」とまで言われています。

ターゲットに定めるのは、バナーをクリックしてもらいたい人、つまり最終的に売りたい商品もしくはサービスの購入者となってくれそうな人です。

女性向けとか、高齢者向けといった大雑把な分け方をしただけでは、ターゲット設定とは言えません。

たとえば、女性向けに開発された商品を購入してもらいたい場合、性別や年代だけでなく、既婚か未婚か、会社員なのか専業主婦なのかパート勤務なのか、どんな所に住んでいて生活スタイルはどんな感じなのか、といった細かいところまで想定してターゲット設定を行います。

「このバナーは、まさに自分のために作られたバナーだ」と見た人に思ってもらえるように、ターゲットを細かく絞り、ターゲットに一番訴えかける情報は何なのかを考えて、バナーを作成しましょう。

4-2. ブランドの認知度を高める工夫(ロゴの配置など)

商品やサービスのブランド認知度を高める工夫をしましょう。バナー広告は一定期間、複数のサイトで表示されるように運用展開することが多いので、同じ商品のバナーなのにAのサイトとBのサイトで見たデザインが違っていたら、ブランド認知してもらえません。

特に新商品、新サービスは浸透するまで時間がかかるので、大きさが違うバナーであってもテーマカラーを設定しロゴを必ず配置するなどして、統一感を持ったデザインにすることでブランドの認知度を高める工夫を行いましょう。

ブランディングについて学びたい方は「ブランディングの究極ガイド」の記事をご覧ください。ブランディングを一から構築する方法やブランディングの成功事例を紹介しています。

4-3. クリックを促す「行動喚起」のテクニック

思わずバナーをクリックさせてしまうような「行動喚起」のテクニックも考えましょう。膨大な情報量のウェブページの中には、たくさんの競合他社のバナー広告が掲載されており、工夫を凝らさなければ、目に留めてもらうことさえできず、埋もれてしまうからです。

繰り返しになりますが、バナー広告は、クリック後に誘導されたメインのサイトを見てもらい商品やサービスを購入してもらうことが最終的な目標です。

まずは、「お!新商品か。これはどう使うのだろう?」「わあ、すごく安い!ちょっと買って試してみようかな?」といった感情をバナーを見た人に抱かせ、バナーをクリックして「もっと商品のことをくわしく知りたい!」と思わせなければいけません。

目立つ色で割引額を提示したり、食欲をそそるおいしそうな商品画像を入れたり、GIFアニメ(複数の静止画をコマ送りで表示し、動画のように見せる画像)を配置したりして、クリックを促しましょう。

5. バナーデザインの腕を上げるために|参考にするときの3つのコツ

バナーデザインの腕を上げるには、漠然とまとめサイトを眺めるのではなく、参考のしかたにコツがあります。

ここでは、確実にデザインの腕をあげたい人のために3つのコツを紹介します。

  1. デザイナーの作成意図(コンセプト)を考えながらバナーを見る
  2. デザインを構成しているものを分解して分析してみる
  3. 「自分だったらこう作る」とシミュレーションしてみるのも有効

視点を変えることで、見えるものが違ってきます。表面に見えるデザインテクニックにばかり気を取られず、バナー作成のコンセプトを捉えるようにしてください。

5-1. デザイナーの作成意図(コンセプト)を考えながらバナーを見る

バナーに限らず、デザインには作成の意図(コンセプト)があります。デザイナーが作成したコンセプトを考えながらバナーを参考に見ることで、デザイナーの思考を読み取ることができるようになります。

コンセプトはデザインの骨格のようなもので、コンセプトがブレているとデザインもブレたものが仕上がります。コンセプトが一本の軸のようにしっかりと決まっていれば、デザインもしっかりとしたものに仕上がり、強く訴求するものができます。

なぜこのデザインに決定したのか、デザイナーの思考を読み取るトレーニングを続けていると、自分がデザインする際にブレずにコンセプトを決めることができるようになります。

5-2. デザインを構成しているものを分解して分析してみる

時間があるときでいいので、デザインを構成しているものを分解して分析してみるのもいい勉強になります。デザインを分解してみることで、自分が作成する際のアイデアストックにもできます。

自分が気に入ったバナーや、目についたバナー、ついクリックしてしまったバナーなどを参考にしてみましょう。ライバル商品のバナーを分析してみるのもおすすめです。

以下のように考えながらバナーを分析してみてください。

  • ターゲットはどんな人を想定していると思うか?
  • 画像は適切か?(素材、色味や加工など)なぜこの画像なのか?
  • キャッチコピー(メインタイトル)は適切か?
  • 全体的な色味から受ける印象は商品に合っているか?
  • クリックを促す仕掛けはどれか?

これは真似してみたいと思える部分があれば、アイデアとしてストックしておきましょう。自分がデザインするときにアイデアが枯渇することがなくなります。

5-3.「自分だったらこう作る」とシミュレーションしてみるのも有効

自分がもしこの商品のバナーを作ることになったとしたらこんなデザインをするだろうと、シミュレーションすることも有効です。シミュレーションを繰り返すことで、自分のデザインの幅を広げることができます。

ウェブ上に掲載されているバナーの全てが優れたバナーというわけではありません。場合によっては、全くクリックされない失敗作もあるかもしれません。「たまたま目についたバナーだけど、なぜかクリックしたいと思わないなあ」と感じるようなときは、どこがダメなのかを考えつつ、自分だったらこんな工夫をするかなあ、と考えてみましょう。

逆についクリックしてしまったバナーを自分だったらどう作り変えられるか考えるのも、アレンジ力を高めるいいトレーニングになります。

6. バナーデザインに使えるアプリ、サービスまとめ

ここまでご覧になって、「やっぱりプロでないと難しそうだ」と感じた方もいるのではないでしょうか。確かにバナー職人と呼ばれるようなプロがいるのは事実なので、こうしたプロと張り合うほどのバナーを作るには知識や経験が必要かもしれません。

しかし、今は優れたツールがたくさんあるので、これらのツールを活用すればプロの作品と比べてもそん色のないバナーを作ることは決して難しくはありません。

ここでは、可能な限り楽にバナーを作成したいという方のために、バナー作成を支援するアプリやサービスを3つご紹介します。デザインの心得やプロが使っているツールがなくても、これらのツールを使えば本格的なバナーをお手軽に作れます。

6-1. バナー工房

自分で用意した写真などの画像をアップロードして、そこに飾りフレームや文字を入れることができる加工ツールです。ソフトをインストールすることなくオンライン上で完結するので、手軽なバナー作成ツールとして使えます。

6-2. buttonmaker pro

ツール名だけを見るとボタンを作るツールのように感じますが、ここでいうボタンとはバナーのことです。年額 7,800 円の有料ツールだけあって、テンプレートから簡単に本格的なバナーを作成することができます。

6-3. Canva

出典:Canva

オーストラリア発の本格的デザインツールです。日本版ではもちろん日本語に対応しており、膨大なテンプレートから簡単な操作で本格的なバナーを作成できます。無料版でもかなり本格的なデザインが可能なので、継続的にバナーの作成をする方には強力な武器となります。

次章では、このCanvaを使って簡単にバナーを作る流れを解説します。

7. Canvaならデザインの参考にできて、そのままバナー作成もできる!

短時間でクオリティの高いバナーを作成したいのであれば、デザインツールのCanvaがおすすめです。

Canvaをおすすめする理由は以下の4つになります。

  1. 無料で使えるテンプレートは8,000超!眺めるだけでも参考にできる
  2. 気に入ったデザインのテンプレートを見つけたらそのまま利用OK
  3. 画像もフォントも無料(一部有料あり)で商用も可能
  4. 操作が簡単で、オリジナルのバナーが短時間で作れる

無料で使えるので試してみたい方は、今すぐアカウント登録をしましょう。

スマートフォンやタブレットでも利用できます。こちらからアプリをダウンロードしてください。

7-1. 無料で使えるテンプレートは8,000超!眺めるだけでも参考にできる

Canvaは無料で利用でき、パソコンだけでなく、スマートフォン、タブレットからも利用が可能です。 無料で使えるテンプレートは8,000超も揃っています。そのまま使用することができる、完成形のバナーのテンプレートもバラエティ豊かで豊富に揃っています。

テンプレート数が多いので、デザインをどうしようか迷っているときには、プロが作成したテンプレートを眺めるだけでもアイデア出しの参考にできます。

デザインツールの多くは、有料版に無料のお試し期間が付属していることがほとんどですが、Canvaの場合は、無料版のままで使い続けることができ、無料版で提供している部分のみ利用でもデザインを完成させることができます。

7-2. バナー広告で検索した結果の一例

7-3. 気に入ったデザインのテンプレートを見つけたらそのまま利用OK

気に入ったテンプレートが見つかったら、文字や画像を入れ替えるだけで、バナーを完成させることができます。

ゼロの状態からデザインを起こすのは、非常に手間がかかりますが、すでに用意されているテンプレートから、自分が作成したいバナーのイメージに近いテンプレートを選んで、そのまま利用すればOKです。色や文字、画像などを変えるだけで、オリジナルのバナーがすぐに完成します。

7-4. 画像もフォントも無料(一部有料あり)で商用も可能

画像もフォントも無料で商用も可能です。一部有料のものもありますが、無料で提供されている点数が多いので、無料版だけでも十分商用のバナー作成ができます。

画像の入れ替えも非常に簡単にできます。自分で撮影した画像もアップロードして挿入することができます。

  • 背景画像の入れ替え

テンプレートに使われている文字は、好みのフォントに入れ替えることができます。現在は、88種類の文字が利用可能となっています。

画像上部のアイコンをクリックすれば、文字の色を変えたり、太くしたり、文字を揃えたりすることも簡単操作でできます。

  • 文字の入れ替え

左サイドバーの「テキスト」を選択すると、フォントの組み合わせのテンプレートが選べるようになるので、好みの組み合わせを選べば、すぐにバランスの良い文字組みが完了します。

7-5. 操作が簡単で、オリジナルのバナーが短時間で作れる

操作が簡単なので、オリジナルデザインのバナーが短時間で作成できます。インスタグラムやスマホの写真加工アプリを使い慣れている方であれば、同じような手順でできるので、すぐに覚えることができます。

たとえば、画像を加工することも簡単にできます。画像の色味の調整は、19種類のフィルタから好みの色合いを選べばOK。

画像の切り抜きや反転することもできますし、写真だけでなくイラストやロゴマークなどもテンプレートとして揃っているので、少し加工するだけで、オリジナルのロゴマークを作ることもできます。

  • 画像のフィルター加工

まとめ

バナーデザインのまとめサイトを閲覧する際には、以下のコツを忘れずに参考にしてみましょう。

1. デザイナーの作成意図(コンセプト)を考えながらバナーを見る

2. デザインを構成しているものを分解して分析してみる

3. 「自分だったらこう作る」とシミュレーションしてみるのも有効

ご紹介したCanvaを使ってみることもおすすめです。既存のテンプレートを眺めるだけでもアイデアの参考にできますし、簡単にクオリティの高いデザインのバナーが作れます。ぜひ試してみてください。


この記事で紹介しきれないサービスはこちらで紹介されています!

こちらのバナー関連記事もおすすめです

関連記事

すべて表示

アイディアを形に

もっとも簡単なデザイン作成サービス