バナー デザイン

広告バナーのデザインを決める方法


広告バナーの作成をする際、どんなデザインにすればよいか分からなくなったことがありませんか?

今回は、デザインの決め方にフォーカスして、 バナーデザインを考える上でのポイントについて書いていきたいと思います。

広告バナーを自分で作るにしろ、社内で作るにしろ、外注するにしろ、まずはあなたがデザインイメージを決定しなければいけません。(プロに依頼する場合は、ある程度お任せや一緒に考える場合もありますが)

デザインを決めるときに、まずはバナーデザインのまとめサイトにいって参考になりそうなバナーを見つけようと思うかもしれませんが、参考バナーを探す前に、まずは自分の中である程度デザインのイメージを固めた方が良いです。

なぜかというと、最初にバナーデザイン参考サイトを見てしまうと、魅力的なバナーがあふれていて、なんとなくのイメージで選んでしまい、結果今回バナーに掲載する サービス ( 商品 )や本来のバナーの目的とデザインとで、ズレが生じてしまう可能性があるからです。

デザインを決める順序は、
まずは自分の中である程度のデザインのイメージを決める。
その次にそのイメージをより具体化する為、また自分以外の人にそのデザインのイメージを伝える目的で、 バナーデザインまとめサイトなどを利用するのが良いかと思います。

まず、自分の中である程度デザインを固めるにあたって、 どんな風に決めていったら良いのか、何を基準に決めたら良いでしょうか。

バナーデザインの決め方には色々な考え方があります。
参考にしていただけたらと思います。

バナーデザインを考える上でのポイント

ターゲット層からデザインを考える

今回の広告バナーの「ターゲット層」からデザインを考えてみます。

誰に向けてのバナーなのか、大きく分類して男性なのか女性なのか、
年齢は、20代なのか30代なのか40代、50代なのか。

まず、ターゲットが男性か女性かで性別が分かれている場合、デザインは大きく変わります。また20代女性なのか、40代女性なのか、ターゲットが年齢層で分かれている場合もデザインのイメージも変わります。

ここでは大まかに書きますが、
男性ならブルー、ブラック、グリーン、コントラスト強め、力強い、かっこいい、クール…
女性なら、レッド、ピンク、パステル、柔らかい、かわいい、きれい…
20代なら、若さ、原色、かわいい、はじける、ポップ、楽しい …
40代なら、落ち着いた、高級感、ハイクラス…
といった感じです。

また性別や年齢層が違っても、同じ趣味趣向のターゲットであればデザインイメージは同じでよい場合もあります。

例えば、「はじめての資産運用に興味を持っている20代~50代の男女」がターゲットの場合。性別も年代もバラバラです。
共通しているのは 「はじめて」の「資産運用」です。その共通することに着目してデザインイメージを考えると、ターゲットに向けての適切なデザインイメージが絞り込まれてきます。

初心者が持つ、資産運用という難しそう、ちょっと怖いというイメージを払拭するような、明るいカラーを使用し初めての方でも敷居を低くして入りやすいイメージします。フォントは明朝ではなくゴシックや丸ゴシックなどで、イラストを使って柔らかい雰囲気を出すのも良いかもしれません。

このように様々なターゲット層から、ターゲットに合わせたデザインを考えることができます。

ランディングページからデザインを考える

広告バナーをクリックした先には、ランディングページが必ずあります。
そのランディングページのデザインと、バナー広告のデザインが全く違うイメージのデザインであることはよくありません。(あえて戦略的に全く違うイメージになった場合を除く)

バナーデザインと、ランディングページのデザインのイメージが全く違うと、ユーザーを惑わせてしまい、違和感を感じたり、最悪の場合、信頼にも欠けてしまう恐れがあります。

既にランディングページができている場合は、基本ランディングページで使用している、 メインカラー、フォントと同じものを使って制作します。
そうすることによって一貫性のあるデザインとなり、ランディングページに飛んだ際もユーザーは違和感なく進むことができます。

このようにランディングページのデザインからバナーデザインを決定することもできます。

バナーの目的からデザインを考える

今回のバナーの目的は、ブランディング認知なのか、コンバージョンの獲得なのか、キャンペーン集客なのかなど、バナーの目的からデザインを考える方法です。

認知が目的で、ブランドが確立されている商品ならそのブランドイメージのデザインで作成したり、新商品の認知であれば、商品パッケージなどを前面に出し、商品自体の視認性を高め、また商品の特徴も大きく記載するなどして、商品のパッケージと特徴をセットで印象付けるようなデザインにする。など。

コンバージョン獲得なら、ランディングページ先で成約を狙うことが目的なので、バナーにもある程度の詳細情報を盛り込んで、 購入につながりそうなユーザーのみのクリックを狙ったデザインにするなど。

キャンペーン目的など、とにかくクリック数を多く狙うなら、いかにクリックされやすいようにボタンを目立たせたり、 インセンティブ(金額)を明確に記載することによってクリックを促したり、派手で目立つデザインにするなど。

バナーの目的によって、その目的を達成するためにはどのようなデザインが良いかといった視点でデザインを考える方法もあります。

過去のバナーの成果からデザインを考える

すでに 過去に同じ内容の広告バナーを出している場合は、過去のバナーデザインの成果からデザインを考えます。

バナーデザインの効果を測定するために、これまで複数パターンのデザインを広告に出していた場合は、どんなバナーデザインが反応がよかったかがわかってきます。

例えば、新米ママ向けの商品のバナーだった場合、お母さんの顔がメインに映っている方が良いのか、赤ちゃんのアップの写真の方が良いか、商品パッケージがメインに映っているバナーが良いのか。色は温かみのあるピンク系が良いのか、それとも商品パッケージに合わせたグリーン系の方が反応が良かったのか、コピーの種類や見せ方、レイアウトなども過去のバナー計測からわかることがあります。

計測のデータがある場合は、結果を活かして、次の広告バナーのデザインを考えていくことができます。

様々な角度からデザインを考えることができる

このようにバナーのデザインは様々な角度から考えることができます。

単に何となくのイメージで決めてしまうのではなく、色々な角度から見てそのバナーの目的に合った最適なデザインを考えていくことが効果的なバナーを作るうえで大切になってくるかと思います。

今後のバナーデザインを考える際の参考になれば嬉しいです。

バナーデザインにお困りの際は…

バナラボは、実績豊富なデザイナーがバナーを作成いたします。広告バナー作成にお困りの際は是非お気軽にご相談ください。

良いバナーデザイン~基本の3つの条件とは~


バナーのデザインは、商品や企業ブランドやバナーの「目的」などによって変わるので一概にこれが良いデザインだという正解はありません。

でも良いバナーにはいくつかの共通点があります。
それはずばり、『わかりやすさ 』 です。
良いバナーの条件として共通しているのがこのわかりやすさです。

わかりやすさの3つのポイント

その1:テキスト量は少なく

【テキスト】
× 文字がごちゃごちゃ多め
〇 少ないテキスト 

『端的に言いたいことを伝える 』
『 短い言葉で刺さるコピー 』
を考えることがポイントです。

バナー内にあれも入れたい、これも入れたいとなり、
結果、狭いスペースの中が文字だらけになってしまい、
わかりづらいバナーになってしまうのはNGです。

限られたスペース内で、いかに伝わるコピーを考えるかが重要です。

<文言を決めるときのポイント>

  • 訴求軸を決める(訴求したいことはできるだけ1~2つに絞る)
  • 長い文章は避ける
  • 文章より箇条書き
  • 同じ意味の文言は省く

例)


どうしても文言が多くなってしまう場合は、
なるべく読みやすくするように、デザインでカバーします。

  • 文字の色やあしらいを考える
    (枠線、ドロップシャドウなどをうまく使ってなるべく読みやすく)
  • 文字の背景を考える
    (デザインによっては背景にマーカーや付箋や飾り枠などを使って読みやすく)
  • 文字のレイアウトを考える
    (目線を考えてばらばらと配置するよりまとめて配置 など)

このあたりは全体のデザインのバランスなどによるところが大きいので、
デザイナーの腕の見せ所でもあります。

その2:わかりやすい画像

【画像】
× 何の画像かよく分からない(何の広告かわからない)
〇 パッと見て何のバナーかわかる

抽象的な画像より、パッと見ただけで何の画像かわかる画像が良いです。

  • サプリメントなら、サプリメントのパッケージ+そのサプリに関連する写真
  • 化粧品バナーなら、商品ボトル写真や、女性の肌のお手入れしている画像
  • 引っ越しやなら、引っ越しトラックや作業員
  • 旅行なら、飛行機や旅先の写真や宿の写真
  • 介護関係なら、介護している画像、介護施設の写真
  • クリニックなら、白衣や病院の画像
  • 不動産なら、マンションや一戸建てなどの住宅写真

 など、 画像を見ただけでどんな業種のバナーかわかることも大切です。


画像だけではわかりずらい業種(種類)の場合は…

例えば、

  • 求人広告
  • 何かのキャンペーン
  • 物ではないサービス(通信、保険、配信サービス)

など他にもあると思いますが、画像でそのもののサービスを伝えにくい内容の場合は、「テキスト」の表現の仕方が重要となります。

キーとなる言葉を目立たせて、
文字で何のバナーかすぐにわかることが重要です。

その3:すっきりとしたレイアウト

【レイアウト】
× 文字が所々にばらばらに配置
〇 文字、画像をすっきりとまとめて配置


わかりすいバナーレイアウトは、文言などのテキスト情報はある程度まとまっている方が読みやすいので、ばらばらと四方八方にテキストを散りばめるのではなく、 ある程度まとめてレイアウトするようにします。

そうすることによって無駄な視線の動きがなく、すっと文字が入りやすくなります。

また画像ですが、バナー内の要素が多くなる場合は、要素と写真などの画像がかぶり過ぎるとお互いが見づらくなり何のバナーかわかりにくくなるので、 画像の数を減らして「写真」と「テキスト」がそれぞれわかるように意識してレイアウトします。

まとめ

良いバナーの3条件

まとめると良いバナーの3条件は、下記になります。

その1:テキスト量はなるべく少なく
その2:わかりやすい画像
その3:すっきりとしたレイアウト

バナーを作成する際や、バナー作成を外注する際には、是非このポイントを意識してみてください。


GDNバナーサイズまとめ【2020年版最新】

gdnバナーサイズ

Googleディスプレイ広告のバナー制作について、要点を抑えて簡潔にまとめました。

GDNディスプレイ広告バナーサイズ

※横×縦/ピクセルサイズ

サイズ
PC SP
300×250(PC/SP)★
336×280(PC)★
728×90(PC)★
160×600(PC)★
468×60(PC)★
320×50(SP)★
320×100(SP)★
250×250(PC/SP)
200×200(PC/SP)
240×400
250×360
580×400
120×600
300×600
300×1050
930×180
970×90
970×250
980×120
300×50

おすすめのGDNサイズ

はおすすめのサイズです。
※バナラボGDN7点セットは★のサイズです。

特に336×280は準備した方がよいといわれています。
336×280と300×250は同じ比率のため、先に大きいサイズの336×280を作成するのがおすすめです。それを縮小するだけで簡単に300×250が作成できます。

バナー容量

  • 150KBまで

拡張子(形式)

  • JPG
  • PNG
  • GIF

GDNレスポンシブディスプレイ広告

  • 1200×628
  • 300×300
  • ロゴ 180×180でOK(推奨1200×1200)
    ※ロゴは省略可

バナー容量

レスポンシブディスプレイ広告:5MBまで

レスポンシブディスプレイ広告における注意点

  • テキスト20%ルールあり
    文字の割合を画像全体の20%以内に収める(テキスト付きのロゴを含む)
  • 掲載面に応じて画像の両端がトリミングされる場合がある為(各辺最大5%)
    必要な要素はその中に収めるようにする

テキスト20%確認ツール

facebookテキストオーバーレイツール:
https://www.facebook.com/ads/tools/text_overlay

こちらのツールを使って、20%以内に収まっているかどうか確認できます。

バナー内必須要素

  • 主体者の明示

会社名、ブランド名、サービス名、商品名のいずれか
ロゴなどがない場合は「提供:〇〇」と画像内に記載してもOKです。
この記載がないと入稿時の審査を通りません。

バナーデザインにお困りの際は…

バナラボは、実績10年以上のベテランデザイナーが、バナーを作成いたします。GDNバナー作成にお困りの際は是非ご相談ください。

link_gdn0

きれいなバナー=(イコール)クリックされるバナーではない


デザインがステキなバナー、かっこいいバナー、今風のおしゃれなバナーが沢山クリックされるとは限りません。イコールではありません。逆に あえて少しダサいバナーや、素人っぽさを出したバナーのほうが良い反応がでることもあるのです。

ではどんなバナーデザインが良いのでしょうか。

バナーを制作する際にどんなデザインにしようかとバナーデザイン集を眺めていると、今トレンドのデザインや、洗練されたオシャレなバナーを見て、いいなぁうちのバナーもこんな風に…と思ってしまったりもしますが、ちょっと待ってください。デザインのイメージを安易に決めるのはNGです。

かっこよくてオシャレな今風バナーだけど、
肝心なことを伝えられていない。
サービス(商品)に全く合っていない。では意味がありません。

多くのバナーの目的は、
いかにそのサービス(商品)に興味のある人にクリックしてもらえるか です。(例外もあります。)

バナーを作る時に、まずこの基本を忘れずに念頭に置くことが大切です。


洗練された無機質なデザインではなく、その商品の良さが伝わる暖かみのあるデザインのほうが合っているかもしれません。

おしゃれなかごに野菜がきれいにまとまっている写真より、生産者の顔が映っていて、みずみずしい新鮮さがあふれているどアップの写真のほうが良いかもしれません。

デザイン次第で、その魅力を伝えることのできるかできないか左右されます。そのデザインが商品(サービス)とミスマッチでは何の意味もありません。

バナーのデザインを考える時に まず 、自社のサービス(商品)の魅力を最大限に伝えるには、どんなデザインが良いかを考えてみることが大切です。

バナーデザインの参考サイト集めました

バナーのデザインを考えるときに参考になる、バナーデザインのリンク集を集めました。

サイズ別、カラー別、業種別、テイスト別など、絞り込んで探すことができ、とても便利です。

社内でデザインのすり合わせをする際、外部にバナー依頼をする際など、言葉のみで希望のデザインを伝えてしまうと抽象的な表現になりやすいため、人よってはイメージに誤差が生まれてしまう場合があります。思い描いていたイメージを言葉で伝えることは思っていた以上に難しい場合があります。

参考デザインとしてURLを提示することでイメージの共有がしやすくお勧めです。



Retrobanner レトロバナー

http://retrobanner.net/別ウインドウリンク

  • サイズ、色、業種、テイストなどから探すことができます。
    バナーをクリックすると、そのバナーで使われている色も抽出することができます。

blog_img1



BANNER LINKS バナーリンクス

http://nonamedesign.info/banner/別ウインドウリンク
サイズ、カテゴリー、カラーなどから探すことができます。

blog_img2



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

http://banner.keizine.net/別ウインドウリンク

  • サイズ、色、業種などから探すことができます。
  • バナーをクリックすると、下に同じサイズのバナーがランダムで表示されます。

blog_img3



BANNER MATOME

http://bannermatome.com/別ウインドウリンク

  • 業種別に加え、表現別に探すこともできます。

blog_img4

 

見やすいくて使いやすいバナーデザインのまとめサイトをご紹介しました。


一度の沢山のバナーデザインを比較して見れるのが良い所です。
同じジャンルのバナー、色使い、レイアウトなどデザインの参考になる部分が沢山あります。

眺めているだけでも楽しく、新たな発見もありデザインの勉強にもなります。
是非参考にしてみてください。