バナー広告をデザインしてみたものの、
「なかなかクリック率が上がらないな」
「見込み客の反応がよくないな」
と悩んでいませんか?
バナー広告を作ったあなたは、
「バナー広告を通して、個人や自社の商品を効果的に販売したい」
「バナー広告を通して、サービスの魅力を知ってもらいたい」
など、さまざまな目的を持っているのでしょう。
しかし、目的に応じたバナー広告のデザインになっていないと、コンバージョンには繋がらず、なかなか結果が出ません。
結論から言うと、バナー広告のデザインをつくる際には、デザインする際のコツを押さえることが重要です。
そこで本記事では、バナー広告のデザインに悩んでいる方や、作成後になかなか成果がでないという方に向けて、以下3つのポイントを中心にご紹介します。
- 効果的なバナー広告のデザイン
- 伝わるバナー広告デザイン作成のコツ
- バナー広告デザインにおすすめのサイト
ぜひ最後まで読んで、目的を達成できる効果的なバナー広告のデザインを知り、商品の売り上げアップを目指しましょう!
そもそもバナー広告ってなに?
バナー広告とは、 Web上で商品やサービスを知ってもらうために作成する、画像・動画・GIFなどを使用した広告をさします。
たとえば、下記の「Yahoo! JAPAN」のトップページの赤枠部分はバナー広告です。
テキストのみの広告と比べ、パッと目に入るデザインが魅力的です。
バナー広告を効果的に活かすためには、視覚へ訴えかけるデザインを意識しましょう。
効果的なバナーデザインが押さえているポイントは4つ
バナー広告のデザインは、クリック率が低ければ意味がありません。
より訴求力の高い効果的なバナーデザインにするためには、視覚に訴えかける以外にも以下4つのポイントが求められます。
- わかりやすいキャッチコピーを載せる
- 共感できるキャッチコピーを載せる
- インパクトがあり目を惹くバナーにする
- どこかで見たことがあると感じるバナーにする
それぞれ詳しくご紹介します。
わかりやすいキャッチコピーを載せる
キャッチコピーとは、人の注意を引くための宣伝文句のことをさします。
わかりやすいのは大前提ですが、これがなかなか難しいのです。
ひとめでメリットが伝わりやすく、具体的に「自分の役に立つ」イメージのできるキャッチコピーを目指し、バナーデザインに載せましょう。
共感できるキャッチコピーを載せる
ターゲット層が強く共感するキャッチコピーが載っているバナーデザインは、クリック率が高くなります。ターゲット層が悩んでいるポイントを具体的に言語化してキャッチコピーにし、より親近感を覚えてもらえるようにしましょう。
インパクトがあり目を惹くバナーにする
インパクトがあり、つい目が向いてしまうバナー広告のデザインもクリック率が高まります。たとえば、写真のビジュアルを激しいものにしたり、黄や赤などの明るい色味を使用するとインパクトが増し、人の目を惹きやすくなるでしょう。
ただし、インパクトばかりではあまり効果がありません。キャッチコピーをしっかり作りこむことで、クリック率につながります。
どこかで見たことがあると感じるバナーにする
「どこかで見たことがある」と感じるような既視感のあるバナーも、クリック率が高くなるバナー広告のデザインです。
直感的に「知ってる気がする」と思えるデザインは自然と目を惹き、安心感を与えるため、クリック率が高まる傾向にあります。砂糖は「白」、ラーメン屋さんは「赤いのれん」など、ジャンルによるイメージカラーも大切にしましょう。
「伝わる!」バナー広告デザインを作るコツ
バナー広告のデザインは、伝わるデザインを意識することも大切です。
ターゲットの目を惹くためにインパクトだけを追求してはいけません。意味が正確に伝わりづらかったり、商品・サービスに関係のないデザインになったりしては本末転倒になってしまいます。
伝わるバナー広告デザインをつくるために、以下のようなポイントに注目してみてください。
- 4つのデザイン基本原則を意識する
- バナー広告の目的を明確にする
- 媒体ごとの特徴を知る
- 背景と文字のコントラストをあげる
- 情報は必要なものに絞り簡潔にする
- 文字の可読性をあげる
- 色のバランスに注意する
- メリハリをつける
- 色の心理効果を利用する
- フォントの印象を有効活用する
以下で詳しく紹介していきます。
4つのデザイン基本原則を意識する
デザインには、4つの基本原則があります。
基本を意識することで、伝えたいメッセージが伝わりやすくなり、見た目もより質の高いものにできます。
特にバナー広告のデザインでは、基本に忠実に制作を進めましょう。伝えたい情報をどのように強調するか・どの情報を優先的に伝えるかなどをうまく調整できるようになります。
4つの原則は次の通りです。
- 近接
- 整列
- 強弱
- 反復
順番に解説していきます!
近接
「近接」 は、関連があるもの同士をグループ化してまとめる手法です。
人は、距離が近いほど関連した情報のまとまりとして判断しやすい傾向があるため、見てすぐにグループ内容を理解できるようにしましょう。
また、空白を上手に利用することで、距離でカテゴリ分けすることも可能です。関連性が高いものは近く、関連性が低いものを遠くにすることでも情報のグループ化ができ、理解のしやすさも高まります。
整列
「整列」は、要素を縦横に整列させることでデザインに統一感をだす手法です。
ガイドラインを引き情報を揃えることで、情報量が多く感じるレイアウトであっても整った印象にすることができます。「近接」で整理した情報を「整列」することで視線の流れも自然になります。
また、あえて強調したいものだけ整列させないことで、特定の情報のみ目立たせることも可能です。
強弱
「強弱」は、情報の文字サイズや色を変えることで見た目の強弱を生み、特定の情報に視線を集中させる手法です。あえて「整列」の規則から外れさせることで、目立たせたい情報に目を行きやすくすることが可能です。
反復
「反復」は、規則に基づきスタイルやフォーマットを統一する手法です。
カテゴリー分けした情報の構成も、一貫性をもたせることで情報が伝わりやすくなり、混乱を回避することができます。
バナー広告をデザインする際は、上記の4原則を守ることで情報が伝わりやすいデザインになるでしょう。
バナー広告の目的を明確にする
効果を見込めるバナー広告をデザインするためには、目的をしっかり決めておくことも大切です。バナー作成を始める前に、以下のようなことを決めておきましょう。
- 広告のターゲット
- 何を伝えたいか
- バナーを見たあと、どう行動して欲しいのか
- どのような文言が必要か
上記の項目を整理し、広告を掲載する目的を明確にすることで、どのようにすれば効果的な広告になるか見つけられるはずです。
媒体ごとの特徴を知る
バナー広告のデザインを制作するなら、広告を載せるGoogleやYahooなどの媒体ごとの特徴を知っておきましょう。
媒体により、バナーの推奨サイズや入稿規定、バナーの表示のされ方などが異なっているからです。
たとえば、バナー広告は以下のような媒体で配信が可能です。
- Yahoo!
- LINE
もし、媒体の入稿規定に従わずに広告を入稿した場合、画像がトリミングされたり、圧縮されてしまったりする可能性があります。
広告のクオリティが落ちれば、クリック率は低下します。作成したバナーが適切に掲載されるよう、媒体ごとの特徴は理解しておきましょう。
背景と文字のコントラストをあげる
バナー広告で打ち出す文字が見やすくなるよう、背景と文字のコントラストはあげましょう。特に写真や背景のうえに文字をのせると、文字が見えにくくなってしまうことも多いので要注意です。
文字を目立たせたい場合には、以下のような方法を試してみてください。
- 背景をぼかす
- 明度差をつける
- 文字にふちどりをつける
- 文字に影をつける
- 余白要素のうえに文字を乗せる
文字が読みにくい場合は、背景が目立たないようにぼかしたり、文字を装飾して目立たせるなどの工夫をしましょう。
情報は必要なものに絞り簡潔にする
バナー広告のデザインをつくる場合は、情報は必要なものに絞りましょう。細かい文字が多いバナーは読まれづらくなる要因となるからです。基本的に、記載する情報が少ないほど、情報は伝わりやすくなります。
たとえば、広告には以下のような情報を盛り込みましょう。
- ターゲットの興味を惹くもの
- 商品・サービスの価値
- 他の商品・サービスとの差別化ポイント
また、情報の優先順位に応じて文字の大きさや色を変更することで、伝えたいことがより明確になります。
バナー広告はターゲットの興味を惹くものです。
バナー広告だけですべての情報を網羅せず、広告で誘導した先で紹介するようにしましょう。
文字の可読性をあげる
バナー広告を制作する際は、記載する文字が読みやすくなるように工夫しましょう。
たとえば、文字の可読性をあげたいなら、以下の要素を盛り込んでみてください。
- 可読性が高い配色を選ぶ
- 可読性が高いフォントを選ぶ
- 可読性の高いウエイトを選ぶ
バナー広告は、使用する端末によって解像度が低くなったり、サイズが小さく表示されたりすることもあります。遠目から見ても読むことができるかをよくチェックしましょう。
特に、フォントは注意深く選びましょう。
フォントによって、デザイン全体の印象が大きく変化するからです。
やさしい・カジュアルなど、書体の種類によって印象はまったく異なります。広告にそぐわないフォントを使用すると、全体のバランスが崩れる可能性もあるので注意しましょう。
色のバランスに注意する
バナー広告を制作する際は、広告全体の色のバランスにも気を付けましょう。読みやすい配色を選んだり、色による強調をしたりすることで、デザインの質はまったく変わってきます。
バナー広告の配色を選ぶ際には、以下を参考にしてみてください。
- 使用する色数を減らす
- キーワードに合った色を選ぶ
- ユーザー・ターゲットから色を選ぶ
- 伝わりやすさを重視する
レイアウトや写真がよくとも、色の選び方が悪ければクオリティの低い広告とみなされてしまいやすくなります。色のバランスにもこだわり、広告バナーは制作しましょう。
色の心理効果を利用する
バナー広告を制作する際は、色の心理効果はぜひ利用しましょう。色は、人の心理に大きく働きかけるからです。
たとえば、色によっては以下のような印象を与えるとされています。
色 | 色が人に与える印象 |
赤 | 情熱・興奮・明るさ・活力 |
青 | 知的・信頼・爽快感・誠実 |
黄 | 元気・愉快・賑やか・無邪気 |
緑 | 調和・安定・若さ・リラックス |
オレンジ | 明るさ・喜び・活発・陽気 |
ピンク | かわいい・愛情・幸福・柔らかさ |
紫 | 高貴・上品・優雅・神秘 |
白 | 純粋・清潔・神聖・正義 |
黒 | 高級感・重厚感・威厳 |
また、色は印象に作用するだけでなく、視覚・聴覚・嗅覚・味覚・触覚などの五感にも影響を与えます。
以上のように、色を変えるだけで与える印象はまったく変わってきます。ぜひ、ターゲットに与えたい印象をもとに適した色を選んでみてください。
バナー広告デザインにおすすめ!商用利用OKのフリー素材サイト5選
バナー広告のデザインを制作する際に、どの素材サイトを使用すればよいのか悩んでいませんか?そんな方に向けて、商用利用可能のフリー素材サイトを5つご紹介します。
- イラストAC
- イラストナビ
- ソコスト
- ビジネス素材ByRunland
- ちょうどいいイラスト
ぜひ、あなたにとって使用しやすいサイトを見つけてみてください。
イラストAC
「イラストAC」は、国内最大級のイラスト素材サイトです。商用利用OKのイラストが240万点以上掲載されており、幅広いジャンルを揃えているため、必要な素材がきっと見つけられるはずです。
会員登録をすればすぐに利用でき、無料会員であれば1日に4回のキーワード検索、最大9点のイラストをダウンロードが可能です。月額1,569円(税込)のプレミアム会員に登録すれば、検索回数やダウンロード数に制限なく利用できます。
イラストナビ
シンプルで優しい印象のバナーに仕上げたい場合には、手書きのようなイラストが多く揃う「イラストナビ」がおすすめです。
アウトドアやビジネス、イベントなど、ほかにもさまざまなジャンルのイラストが揃っており、基本的に無料で商用利用が可能です。ただし、画像を30点以上まとめて使用する場合には有料となるので注意しましょう。
ソコスト
「ソコソコ使えるシンプルなイラスト素材」をコンセプトとしている「ソコスト」もおすすめのフリー素材サイトです。汎用性の高い、シンプルなタッチのイラストを多く揃えていることが特徴です。
ソコストでは、ダウンロードの際にイラストのカラーを変更ができるので、加工せずにそのまま利用することできます。ほかにも、さまざまなファイル形式に対応しているのも利点のひとつです。あなたが利用しているイラスト編集ソフトに合わせてダウンロードができるでしょう。
ビジネス素材ByRunland
「ビジネス素材ByRunland」は、Web制作会社のRunLandが運営するフリー素材サイトで、名前の通り、ビジネス向けの画像素材に特化しています。
画像は以下のようなシーンごとに分類されています。
- 表情
- 営業シーン
- 会議シーン
- 受付シーン
イラストは青色ベースのものが多めです。Aiファイルでダウンロードすれば、Illustratorを使用し色の変更ができます。
ちょうどいいイラスト
「ちょうどいいイラスト」は、ゆるいタッチのイラストを使用したい場合におすすめの商用利用可能のサイトです。人物以外にも、物をメインにしたイラストも豊富に取り揃えているので、幅広くバナー広告のデザインに使用できる素材を見つけられるはずです。
また、イラストは3種類のカラーバリエーションから選ぶことが可能です。そのため、つくりたいバナーの雰囲気にあわせて色の変更もできます。
バナーデザインの参考に!ギャラリーサイト11選
「レイアウトが上手くいかない」
「バナーの参考サイトを上手く探せない」
「最近のトレンドってどんな感じなんだろう?」
バナー広告のデザインを制作しているあなたは、以上のようなデザインの悩みを抱えているのではないでしょうか。
そんなあなたに、バナーデザインに参考になるおすすめのギャラリーサイトを紹介します!
- BANNERLIBRARY
- バナーデザインアーカイブ
- バナー広場
- Bannner.com
- retrobanne
- Facebook広告集めました。
- Meta広告ライブラリ(Facebook広告ライブラリ)
- インスタ広告集めました。
- Youtube広告まとめサイト「動画広告研究所」
- Twitter広告透明性センター
以下で、それぞれ詳しく解説します。
BANNERLIBRARY
「BANNERLIBRARY」は、トレンドを押さえたおしゃれなバナーが厳選されているギャラリーサイトです。
BANNERLIBRARYは、Instagramのように紹介されているバナーそれぞれにハッシュタグがついていることが特徴です。たとえば、おしゃれな食事などのバナーを制作したいとき、参考となるデザインを探したい場合には、ハッシュタグで検索すると関連の広告を一覧で見つけることができるでしょう。
バナーデザインアーカイブ
「バナーデザインアーカイブ」には、幅広いジャンル、業種のバナー広告が2,000点以上掲載されています。
以下の項目から検索したいバナーの種類を絞り込むことが可能です。
- サイズ
- 業種
- 色
バナーはスクロールで表示されるため、閲覧時の負担がなく、見れるのもポイントです。
バナー広場
たくさんの種類のバナーを見たいという人には、「バナー広場」がおすすめです。バナー広場では、検索カテゴリが細かく分かれており、自分が探したい参考デザインを探しやすくなっています。
たとえば、バナー広場ではサイズ別に細かくバナーを探すことができます。見つけづらいサイズの広告の場合も、参考にできるデザインをみつけやすいでしょう。
月間閲覧数ランキングの閲覧もできるので、他のデザイナーがどういったデザインを参考にしているのか確認できるのもポイントです。
bannnner.com
「bannnner.com」は、特に質の高いバナーを閲覧したいときにおすすめのサイトです。分類は、サイズ以外にも以下のように細かく分類されています。
- キャラクター
- テキストのみ
- 切り抜き
- 顔切り抜き
参考にしたいデザインのバナー広告にすぐにたどり着けるでしょう。
retrobanner
「retrobanner」は、おもに日本のバナーデザインを掲載しているギャラリーサイトです。更新の回数が多いため、漫画風の広告など、最近のトレンドのバナーデザインを閲覧できます。
retrobannerでは、サイズ、色、業種、テイストなどから分類を選ぶことができます。また、バナーをクリックすることで、デザインに使われている主要なカラーコードを確認できるのも魅力です。
Facebook広告集めました。
「Facebook広告集めました。」は、Facebookの広告バナーをまとめたサイトです。およそ800点のFacebookの広告バナーが業種ごとにカテゴリー分けされているので、参考にしたい Facebook 広告を簡単に検索できます。
また、デザインだけでなく広告文がどのような記載になっているかも確認可能です。訴求力の高い文章を作成したいときにも、ぜひ利用してみてください。
Meta広告ライブラリ(Facebook広告ライブラリ)
Meta広告ライブラリ(Facebook広告ライブラリ)では、Metaのサービス内で使用される広告のクリエイティブや掲載開始日、掲載されているプラットフォームの数などを無料で閲覧できます。
たとえば、プラットフォームとは以下のような媒体をさします。
- Audience Network
- Messenger
検索することで、該当ページの広告フォーマット、Facebookページのいいね!数、InstagramアカウントID、Instagramアカウントのフォロワー数などまで確認可能です。
インスタ広告集めました。
「インスタ広告集めました。」は、アドスクエア株式会社が運営しているサイトで、Instagramで掲載されたバナーが1,900点以上投稿されています。
たとえば、以下のようなバナー広告のデザインを閲覧できます。
- ファッション
- 化粧品
- 食品・飲料
- 家電
- 旅行関連
- 業務代行サービス
Instagram上にある、幅広い商品やサービスのバナーを参考にできます。
Youtube広告まとめサイト「動画広告研究所」
Youtube広告まとめサイト「動画広告研究所」は、Youtubeに掲載されている広告が集約されているサイトです。
女性向けや男性向けなどで商材のカテゴリが分かれており、動画に設定されているタグからも検索が可能です。ぜひ、動画広告を制作する際には参考にしてみてください。
Twitter広告透明性センター
「Twitter広告透明性センター」は、Tiwtter社が運営する公式サイトです。右上にある検索窓からTwitterのハンドルネームを入力すると、アカウントがだしている広告を検索することができます。
「Pinterest」は、ユーザーがアップした画像や写真、イラストなどを共有できるSNSです。
Pinterestでは、検索窓でキーワードを打ち込んで検索すると、さまざまな画像を閲覧できます。業種やテイストなど、あなたの気になるキーワードを掛け合わせて検索してみましょう。
初心者は要チェック!バナー作成で注意すべき4つのこと
この記事を読んでいるあなたは、バナー広告のデザインをするのははじめてで何に注意すればよいのだろうと悩んでいるかもしれません。
そこで、初心者がバナー作成で注意すべきことを4つ紹介します。
- 伝えたい要素は絞り込む
- 素材はしっかりこだわって選ぶ
- 色やフォントは目的をもって選ぶ
- 全体に統一感を持たせる
以下で詳しくご紹介します。
伝えたい要素は絞り込む
バナー広告のデザインでは、伝えたい要素は必ず絞りましょう。すべての情報をバナー広告のなかに集約しようとすると、要素が多くなりすぎて一番重要なポイントがわかりづらくなってしまうからです。
たとえば、以下のような工夫があげられます。
- 重要な部分を大きく、重要でない部分は小さくする
- 記号や単位は小さく表記する
- 日付はシンプルな記載にする
- 記載しなくても伝わるものは省略
バナー広告のサイズは300×250pxほどのものが一般的と言われています。スペースのなかの情報を減らせば減らすほど、目立たせたい情報を際立たせることが可能です。
素材はしっかりこだわって選ぶ
バナー広告のデザインに使用する画像・写真などはこだわって選びましょう。
バナーをみたときにターゲットが「これは自分のことだ」と思えるかどうかは、素材の質にも大きく左右されるためです。
たとえば、文章をしっかり読み込まないと内容がわからない広告よりも、画像やイラストを使用し、直感的に伝わりやすい広告は訴求効果も高くなります。できるだけ、ターゲットがすぐに内容を理解できるような素材を使用しましょう。
商用利用OKの高品質なフリー素材サイトもあるので、ぜひ確認してみてください。
色やフォントは目的をもって選ぶ
色やフォントはなんとなく選ばず、目的をもって選びましょう。色やフォントは、ターゲットに与える印象に大きく関わっており、その後の行動にも大きく影響を及ぼすからです。
たとえば、同じ画像と文章を使用していても、背景の色を変えるだけで与える印象は異なります。フォントについても、「やわらかい」「綺麗」「凛々しい」など、持っている性質がひとつひとつ異なっているので、デザインをする際には注意深く選びましょう。
全体に統一感を持たせる
バナー広告のデザインをするときは、全体の統一感を失わないように気を付けましょう。統一感があるデザインは、ターゲットに安心感を与えるからです。
たとえば、ひとつのバナーの中にたくさんの色を使いすぎてしまうと、配色が難しくなります。そのため、使う色は3色と決め、割合は70%、25%、5%などとすると、色のバランスをとりやすくなるはずです。
また、バナー広告ではブランドのカラーを基準に据えましょう。そこに色を足したい場合は、色相循環図を確認し反対の位置にある色(補色)や、基準となる色と似ている色を選ぶことをおすすめします。
バナー広告作成におすすめのデザインソフト
バナー広告は、デザインソフトを使用して作成します。たとえば、以下のようなツールを使用することが多いでしょう。
- Illustrator
- Photoshop
- バナー工房
- Canva
以下で、ツールやソフトについて解説します。あなたが使いやすいものを使用してみてください。
ツール名 | 概要 |
Illustrator | 本格的なイラストを作成できるツールです。図形を使用したイラストの作成や写真のトレースもできます。 |
Photoshop | たくさんの機能が搭載されており、さまざまなバナーを作成可能です。写真の補正や合成を行えます。 |
バナー工房 | 無料で使用できる画像編集ツールです。イラストのトリミングや、文章の挿入ができます。 |
Canva | 無料で使用できるイラスト作成ツールです。テンプレートを使用し、簡単にバナーを作成できます。 |
特に、バナー工房やCanvaなどはデザイン初心者の方でも簡単に利用できるツールです。迷っている場合は一度試してみてはいかがでしょうか。
バナーデザインを外注で制作するといくらかかる?
バナー広告のデザインを外注する場合、だいたいの費用は1枚あたり3,000〜1万円ほどになります。
ただし、バナーの種類によっても相場はまったく異なります。
バナー広告の種類 | 相場 |
静止画バナー | 3,000~1万円 |
GIFアニメバナー | 7,000円~ |
動画広告 | 3万円~ |
以上のように、動画の広告作成を考えているのであれば、数万円ほどの費用がかかることもあります。
また、複雑なアニメーションを使用したり、レイヤー数の多い凝ったデザインにしたりすると、10万円以上の費用がかかる場合もあります。広告のサイズや品質によってもかかる費用は変動するでしょう。
「予想外の出費となってしまった」という事態を避けるためにも、外注するときは必ず事前に見積もりをだしてもらうようにしましょう。
困ったときには「cone」へ相談!
今回は、バナー広告のデザインの重要性から作成の際のポイント、注意するべきことまでたっぷり紹介してきました。
そうはいっても「ひとりでつくるのは難しそう」「安心して仕事を頼める人を探したい」という人もいると思います。そのような場合には「cone」などのサイトに相談するのもおすすめです。
coneは、個人のクリエイターに仕事を依頼できる制作依頼サイトです。coneには、バナーデザインに限らずイラストや動画など、あなたの要望にこたえられるクリエイターが在籍しています。もしも、あなたが個人間の契約に不安を感じているなら、coneが仲介をすることで、双方の要望にマッチした発注が可能です。
心配や不安をかかえている場合には、ひとりで悩まずに専門家への相談も選択肢にいれてみてくださいね!