商品表示や広告を行う際、欠かせないのが『バナー』です。
ブログやホームページを見ているとき、アプリを使っているとき、ことあるごとに目につきますよね。
バナーは、あなたの商品やサービスに興味を持つきっかけとなることも多々あります。
第一印象をよくするためにも、バナーのクオリティには、こだわらなければいけません。
『そもそも、どうこだわかったらいいの？』
『作ってみたけど、ぜんぜんクリックされない…』
『いいものを作りたいけど、どうすればいいの？』
という方のために今回、バナーを作るための準備や注意事項、コツを徹底的に解説します。
バナー作成前に考えておくべき6つのこと
多くの人が間違っていることがあります。
それは、いきなり作り始めることです。
何の準備もなく作り始めてしまうと、『なんとなくいい感じだから』と色や画像、フォントを選んでしまい、望む結果が得られなくなってしまいます。
そうならないためにも、作成に取り掛かる前の準備が大切です。
1.そもそも何に使うの？
あたり前のことですが、目的があってバナーを作ろうと考えているはずです。
目的は認知ですか？新規ユーザーの獲得ですか？既存ユーザーへ販売促進ですか？
目的によって、掲載する場所は異なります。
また、掲載場所によって訴求するべき内容や印象、サイズも異なります。
まず始めに目的を明確にしておきましょう。
2.誰に何を？が一番大切
あなたの商品、サービスは誰の悩みを解決するためのものですか？
できるだけ具体的に考えてください。
年齢や性別はもちろん、既婚か未婚か、子どもの有無。
さらに、朝何時に起きて何時に外出し、外出時の主な移動手段は何で、何時に帰宅して何時に寝るのか。
さらにさらに、趣味やよく見る雑誌など、できるだけ具体的に考えましょう。
日常的にどのような言葉をつかっているのか、理解したうえで、どのような訴求が最適か考え、キャッチコピーを決めましょう。
どんな素晴らしいデザインのバナーを作ったとしても、ここにずれがあると結果は得られません。
3.小さいスペースだからこそ、メッセージにこだわろう
バナーは、ホームページなどとは異なり、表現できるサイズに制限があります。
伝えられる内容も自ずと限られてきます。
抽象的な表現は避け、必ず商品・サービスが伝わるメッセージを記載しましょう。
4.色でもメッセージを伝えよう
文字や画像以外でも気を付けておきたいのが配色です。
色にはそれぞれにイメージがあります。
たとえば、
・赤色は力強さや、闘争心、活動的なイメージ
・ピンク色は可愛らしさや、やさしさ、女性らしいイメージ
・茶色は堅実さや、渋み、落ち着いたイメージ
・黄色は騒がしさや、喜び、希望をイメージ
・青色は冷静さや、信頼性、知的なイメージ
など
色の明度や彩度で、多少イメージが変わることもありますが、大まかにはこのように、色でイメージは異なります。
5.つながりも大切
初心者に見落とされがちなのが、つながりです。
リンク先のページのイメージと、大幅に異なるバナーを見かけることがあります。
バナーをクリックしてもらうことが目的であれば、それでもいいのですが、多くの人は、その先にある問い合わせや資料請求、商品・サービスの申込が目的だと思います。
バナーとサイトのイメージが大幅に異なると、直帰率が跳ね上がりますので、望む結果は得られません。
6.最後まで油断せず、入念なチェックを
最後はチェックです。
文言に間違いはないか、文言や画像は適切なサイズか、トンマナはそろっているか、最終確認をした後、掲載しましょう。
掲載後は定期的に状況を確認し、デザインの見直しを行い、改善していきましょう。
ここまで考えた後、バナー作りに取り掛かりましょう。
使い勝手の良いバナーサイズは？
掲載する場所によってバナーのサイズは異なります。
マイナーなサイズのバナーを作成してしまうと、何度もリサイズしなければいけない…、なんてことになってしまいます。
リサイズするのも時間がかかりますので、汎用的が高いサイズのバナーを作るようにしましょう。
そのためにも、媒体毎に必要になるバナーのサイズを把握しておくことが大切です。
ディスプレイ広告
最もメジャーな広告媒体、
Googleと
Yahoo!に出稿する際、必要になるサイズを紹介します。（
2021年
7月時点）
ちなみに
PCとスマートフォンで求められるサイズが異なります。
通常のディスプレイ広告
| バナーサイズ |
Google(PC) |
Google(SP) |
Yahoo!(PC) |
Yahoo!(SP) |
| 300×250 |
おすすめ |
おすすめ |
おすすめ |
おすすめ |
| 160×600 |
おすすめ |
|
おすすめ |
|
| 728×90 |
おすすめ |
|
おすすめ |
|
| 300×600 |
おすすめ |
|
おすすめ |
|
| 320×50 |
|
おすすめ |
|
おすすめ |
| 468×60 |
〇 |
|
〇 |
|
| 320×100 |
|
〇 |
|
〇 |
| 200×200 |
〇 |
〇 |
|
|
| 240×200 |
〇 |
|
|
|
| 250×250 |
〇 |
〇 |
|
|
| 336×280 |
〇 |
|
|
|
| 580×400 |
〇 |
|
|
|
| 120×600 |
〇 |
|
|
|
| 300×1050 |
〇 |
|
|
|
| 930×180 |
〇 |
|
|
|
| 970×90 |
〇 |
|
|
|
| 970×250 |
〇 |
|
|
|
| 980×120 |
〇 |
|
|
|
| 300×50 |
〇 |
〇 |
|
|
| 600×600 |
|
|
〇 |
|
| 640×360 |
|
|
〇 |
〇 |
レスポンシブディスプレイ広告
| バナーサイズ |
Google |
Yahoo! |
| 600×314 |
画像（横長）の最小 |
|
| 1200×628 |
画像（横長）の最大
おすすめ |
画像（横長）の最小 |
| 300×300 |
画像（スクエア）の最小 |
画像（スクエア）の最小 |
| 1200×1200 |
画像（スクエア）の最大
おすすめ |
|
| 512×128 |
ロゴ（横長）の最小 |
|
| 1200×300 |
ロゴ（横長）の最大
おすすめ |
|
| 128×128 |
ロゴ（スクエア）の最小 |
|
| 1200×1200 |
ロゴ（スクエア）の
最大おすすめ |
|
| 180×180 |
|
ロゴ |
Googleファインドキャンペーン広告
Discoverや
Youtube、
Gmailに表示され、ユーザーの興味をひきやすいネイティブ広告。
| バナーサイズ |
Google |
| 600×314 |
画像（横長）の最小 |
| 1200×628 |
画像（横長）の推奨 |
| 300×300 |
画像（スクエア）の最小 |
| 1200×1200 |
画像（スクエア）の推奨 |
| 480×600 |
画像（縦長）の最小 |
| 960×1200 |
画像（縦長）の推奨 |
| 128×128 |
ロゴの最小 |
| 1200×1200 |
ロゴの推奨 |
ちなみに
Facebook広告は、アスペクト比
1.91：
1～
1：
1で
1080×
1080ピクセル以上が推奨されています。
Youtubeは、アスペクト比
16：
9で
1235×
338ピクセル以上が推奨されています。
これらを踏まえたうえで、どのサイズのバナーを作るのか、考えましょう。
事前準備は以上です。
いよいよデザインにはいります。
とその前に、デザインのポイントを理解しておきましょう。
バナーデザインにおける文字の基本
バナーを作るにあたって注意しておかなければいけないのが文字です。
多くのバナーが適当に文字を選ばれている印象を受けます。
結果を出していくためにも、ブランディングを考えていくうえでも、大切なことなので、注意事項を記載しておきます。
読みやすさを最重要視
先ほど、ブランディングうんぬんといいましたが、イメージよりも読みやすさを重視しましょう。
自分の特になるか分からないにもかかわらず、わざわざ読みにくいものを見てくれる人はいません。
最低限、パッと見ただけで何が書かれているかわかるような文字を選ぶことが大切です。
下手に凝った文字や手書き風の文字などは使わず、シンプルで読みやすい文字がおすすめです。
文字の字間と行間も大切
読みやすさという意味では、重複してしまうのですが、文字の字間と行間も意識しなければいけません。
つまり過ぎていたり、空きすぎていると、読みにくくなってしまいます。
文字のサイズや種類、太さによってことなりますので、「これが最適です。」とはいえません。
詳しくは、後で紹介するデザインの参考サイトなどで、実際に使われているバナーを見て、真似してください。
文字の強弱も意識しよう
バナーは読み物ではありません。
ですので、一瞬でユーザーの気を引かなければ、見てもらえません。
そのためには、伝えたい文字とその他を差別化しておく必要があります。
ただし、ブランディングを意識している場合は、その限りではありません。
高級路線を行く場合は、小さく文字の強弱をつけずにデザインした方がいいです。
背景色にも気を配ろう
背景に選んだ色とその上の文字色の明度が近すぎるとコントラストが弱くなり、読みづらくなってしまいます。
背景色と文字色は、コントラストを意識し、仮に色弱の人がバナーを見たとしても、確実に読める配色になるように気を配ってください。
誤字と文法にも注意
繰り返しになりますが、掲載前には、入念なチェックが必須です。
誤字や文法上の間違いがあると、あなたの商品やサービスのクオリティに疑いをもたれてしまう恐れがあります。
バナーデザインにおける写真の基本
バナーを構成するメインの要素は、文字と写真です。
写真は、商品を販売する場合はメインになり、サービスを提供する場合は、文字を補足する役割のある大切な要素。
文字同様に注意事項を記載しておきます。
ここでも大切コントラスト
文字のところで説明しましたが、背景として画像を使う場合、上にのせる文字とのコントラストを意識する必要があります。
『読みにくい
=読んでもらえない』です。
デザイン性よりも読みやすさを優先させてください。
ちなみにコントラストの強さの確認は、バナーをモノクロにすることでわかります。
モノクロにしたとき、文字が読みにくい場合は、コントラストを強めましょう。
写真と文字のイメージをそろえる
ポップな文字を使っているにもかかわらず、高級感のある写真を使ってしまうと、ユーザーが戸惑ってしまいます。
文字、写真、リンク先のサイトのイメージは統一させる必要があります。
後は、あたり前ですが、商品・サービスと全く関係のない写真は、使わないようにしましょう。
余白もデザイン
初心者がやりがちなのが、余白をうめよううめようとしてしまうことです。
限られた範囲でのデザインですので、できるだけ無駄をなくしたい、という心情はわかります。
ですが、想像してください。
文字が大きく余白が適切に取られた本と広辞苑のように文字が小さく余白が少ない本のどちらが読みやすいですか？
広辞苑を見るのが趣味の人もいるとは思いますが、多くの人は文字が大きく余白が適切に取られた本ですよね。
同じくバナーも適切な余白がある方が読みやすいのです。
インパクトの強すぎる写真は控える
場合によっては、いいと思いますが、基本的は写真のインパクトを抑えた方がいいです。
また、ごちゃごちゃした写真も
NG。
何を伝えたいのか、わからなくなってしまいます。
画質も重要
これもあたり前のことですが、画質の良い写真を使ってください。
画質の悪い写真を見ていると目が疲れますよね。
わざわざ疲れることをユーザーはしてくれません。
ここまで理解した後、デザインに取り掛かりましょう。
とはいえ、どのようなデザインにすればいいか、わかりませんよね。
そんな方は、他の人がどんなものを作っているか、参考にしてみましょう。
バナー作りにおすすめの参考サイト
Banner Matome
http://bannermatome.com/
Banner Matomeは読んで字のごとくですが、バナー広告のサンプルをまとめたサイトです。
色や業種、イラストや手書き風といったイメージ別で探すことができるため便利です。
更新自体は
2018年で止まっていますが、
21300個のサンプルが掲載されていて、まだまだ現役で活用できるサイトです。
retorobanner
https://retrobanner.net/
retotobannerは
Banner Matome同様、バナー広告のサンプルをまとめたサイトです。
シンプルなデザインで見やすく、操作もわかりやすくなっています。
さらに、色、業種、サイズ、イメージでの検索ができるので、おすすめの参考サイトです。
2021年
7月時点でのバナーの掲載数は、
11882個です。
banner gallery
https://bannergallery.net/
banner galleryもバナー広告のサンプルをまとめたサイトです。
前の二つに比べて掲載数が約
3000個と少なく、イメージでの検索ができません。
個人的には、
Banner Matomeと
retorobannerで参考になるデザインが見つからなかった時に見に行ってます。
FACEBOOK広告集めました。
http://facebook.adsquare.jp/
FACEBOOK広告集めました。は、読んで字のごとく、
Facebook広告で使われているバナーを集めたサイトです。
Facebookに広告を出す場合は、参考にしてください。
Pinterst
https://www.pinterest.jp/
最後は、
Pinterstです。
バナーデザインのまとめサイトではありませんが、いろいろなデザインアイデアの宝庫。
チラシやパッケージ、ネイルや風景などおしゃれで魅力的な写真を見ることができます。
バナーデザインのアイデアを探す際は、『バナー』『
banner』などのキーワードで検索してください。
ちなみに私は、デザインに悩んだら、すかさず
Pinterstを見るようにしています。
海外のデザインがヒントになることもありますよ。
素敵なデザインはみつかったけど、そのバナーに使われているような画像が手に入らない…
そんな方のために素材を提供しているサイトも紹介します。
バナー作りに使えるおすすめ素材サイト
バナーのクオリティを高めるにも、素材選びは大切です。
クオリティの高い素材は、有料のものしかないと思われがちですが、無料のものでもクオリティの高い素材を提供するサイトはあります。
私が良く使うサイトを、
8サイト紹介します。
1.Unsplash
https://unsplash.com/
Unsplashは、クオリティが高くて会員登録不要で、著作権表記も不要の商用利用可能なフリー素材を提供しています。
2.BURST
https://burst.shopify.com/
Unsplashは、ネットショップ作成サービスを提供する
Shopifyの運営するフリー素材サイトです。
会員登録不要で、著作権表記も不要の商用可能なフリーなので、こちらもおすすめです。
3.Pexels
https://www.pexels.com/ja-jp/
Pexelsは、クオリティが高くて会員登録不要で、著作権表記も不要の商用利用可能なフリー素材を提供しています。
写真だけではなく、動画も提供しているため、動画制作をするときにも便利です。
4.タダピク
https://www.tadapic.com/
もっといろいろな素材提供サイトから無料素材を見つけたい！
というあなたにおすすめなのが、『タダピク』です。
タダピクは、
43の無料素材提供サイトからフリーの写真素材を一括で検索できます。
いろいろなサイトで探す手間が省けるわけです。
5.ぱくたそ
https://www.pakutaso.com/
日本人のフリー素材が欲しい！そんな時は『ぱくたそ』です。
モデルごとに画像がまとめられていて、とても便利です。
もちろんぱくたそも、会員登録不要、著作権表記不要、商用利用可能なフリー素材。
6.Foodiesfeed
https://www.foodiesfeed.com/
食べ物の写真を探しているなら『
Foodiesfeed』。
飲食系の記事を書いているライターさんにもおすすめです。
Foodiesfeedも、会員登録不要、著作権表記不要、商用利用可能なフリー素材。
7.GIRLY DROP
https://girlydrop.com/
GIRLY DROPは、ガーリーな素材を無料配布しています。
女子向けのサービスやメディアを運営している方におすすめです。
会員登録不要、著作権表記不要、商用利用可能なフリー素材。
8.写真AC
https://www.photo-ac.com/
写真
ACは会員登録が必要ですが、日本人の無料写真が多いので、人物素材を探しているのであれば、登録して活用しましょう。
ただし、検索回数やダウンロード数に制限があったり、ダウンロードまで待ち時間があったりするので、私はメインでは使っていません。
著作権表記不要、商用利用可能なフリー素材。
以上がおすすめサイトです。
まとめ
最後にこれまでの話をまとめます。
まず、バナー作りの大まかな流れは、以下になります。
作成前の準備→サイズを決め→参考サイトでイメージを決め→イメージにあった素材を集め→作成
いきなり作り始めるのは
NGです。
バナー作りを始める前に最低限、『誰に何を』は決めておきましょう。
目的が明確になった後は、掲載場所の選択です。
できるだけ、流用できるサイズのバナーを作れば、製作時間を減らすことができます。
そのためにも、各媒体で使用できるサイズを把握しておく必要があります。
（本文中にメジャーな媒体で使用できるバナーサイズを掲載しています。）
デザインのポイントは、写真と文字の使い方です。
詳しいポイントを本文中に書いているので、参考にしてください。
おすすめのデザイン参考サイトや無料素材提供サイトも紹介していますので、ぜひ参考にしてください。
