マーケティングブログ

バナー作成のコツ!初心者でもバナーをおしゃれにする作り方

WEBサイトでよく見かけるバナー。いざ作ってみると、「何から始めてみたら…」とお困りの方も多いと思います。
そこで、今回はよく使われているバナーのサイズなどの基礎情報から、バナー作成初心者必見の押さえておくべきコツをバナーの作り方と合わせてご紹介します!

WEBサイトでよく見かけるバナー。作るのは簡単に見えますが、
「作ってみたら時間がかかってしまった」
「作ってみても思ったようなおしゃれイメージにならない」
「作り方がわからない」
という経験は無いでしょうか?バナーを簡単に作るためにはいくつかコツがあります。
そこで、今回はよく使われているバナーのサイズなどの基礎情報からバナーのコツや作り方をご紹介します!

バナーとは?

バナーとは、ウェブ上でサービスや商品などを紹介する画像のことを指します。
直訳すると「旗」や「のぼり」という意味です。町中で見かけるのぼりのように、ウェブで検索したり、ホームページを見たりしているとき、ふと目に留めて興味を持ってもらうことがバナーの役割です。
しかし、ただおしゃれなバナーを作れば目に留めて貰えるという訳ではありません。見た人が興味を持つようなバナーを作成することが重要です。

よく使うバナーサイズ

バナーを使用して広告出稿する際は、「Yahoo!広告 ディスプレイ広告(運用型)(略称:YDA)」と「Google ディスプレイ ネットワーク(略称:GDN)」の2つのサービスを利用する事が多いと思います。 YDAとGDNでは配信先やターゲティングなど細かな違いがありますが、今回はYDA、GDNでよく使われているバナーサイズをご紹介します。

YDA・GDNでよく使われているバナーサイズ

YDA(旧YDN)GDN
728px × 90px970px × 90px
640px × 200px728px × 90px
640px × 100px468px × 60px
600px ×500px336px × 280px
468px × 60px320px × 50px
320px × 100px300px × 600px
300px × 600px300px × 250px
300px × 250px250px × 250px
160px × 600px200px × 200px

レスポンシブ広告のバナーサイズ

 YDA(旧YDN)GDN
横長300px × 300px横縦比 1.91:1
600px × 314pxより大きい画像
正方形1200px × 628px横縦比 1:1 
300px × 300pxより大きい画像
ロゴ180px × 180px横縦比 1:1
128px × 128px より大きい画像
(推奨サイズ:1200px × 1200px)

設置場所とサイズが決まったら早速バナーを作っていきましょう!

バナーの作り方!バナーをおしゃれにするコツ

いざ作ろうと思っても作り方が分からず「まずは何から始めれば…」と、手が止まってしまう方も多いのではないでしょうか?
今回は一例として、「おうちカフェ」をテーマにしたバナーを作成する際の作り方を説明していきます。

ターゲットを決める

バナーを見てほしいユーザーはどのようなユーザーなのかを決める必要があります。
「趣味が旅行、インターネットサーフィン」かつ「一人暮らしの男性」のようにターゲットを細かく設定することで、より見てほしいユーザーの目に留まるバナーを作りやすくなります。

例えば男性をメインターゲットとするなら青をベースカラーに、女性をメインターゲットにするならピンクをベースカラーにするなど、ターゲットにあわせて作り方を変えます。

ターゲット:男性

ターゲットが男性のバナー

ターゲット:女性

ターゲットが女性のバナー

伝えたいことを整理する

バナーは一瞬で何を表しているか判断できなければいけません。
情報量が多すぎると、内容を理解することに時間がかかってしまいます。
バナーに記載する情報量はなるべく少なく、伝えたいことが簡潔に伝わるような素材や言葉・フレーズを選びましょう。

情報量が多すぎるバナー

情報量が多すぎるバナー

情報量が適切なバナー

情報量が適切なバナー

素材の優先順位を決める

伝えたいことをまとめたら、その中で優先順位を決めましょう。

例えば「こんなパンケーキがおうちで簡単に作れますよ!」ということをユーザーにアピールしたい場合は画像を目立たせてみます。

パンケーキを目立たせたい場合

パンケーキを目立たせるバナー

先ほどとは違い、「おうちカフェ」というコンセプトをユーザーに伝えたい場合は、画像を控えめにしてテキストを前面に押し出してみます。

おうちカフェを目立たせたい場合

ロゴを目立たせるバナー

デザインを考える

こんな感じにしたい、というイメージを決めましょう。
デザインを決める際には、バナーまとめサイトやPinterestで参考になりそうなバナーを色々と探してみるのがおすすめです。
たくさんの種類のバナーを見比べて作り方を参考にし、ターゲットとするユーザーの気持ちになってクリックしたくなるようなデザイン考えてみましょう。

バナーで検索

モノクロで素材を配置してみる

まずはモノクロで作ってみましょう。
最初から色を決めて進めようとすると配色に時間がかかってしまうので、最後に色を決める事が時短のコツです。

モノクロで配置したバナー

文字、素材の位置を調整する

文字や素材の隙間は広すぎても狭すぎても可読性が低くなってしまうので読みやすくなるよう調整しましょう。
また、余白は目立出せたい部分を強調することに使うことができます。
余白を利用して訴求部分をより目立たせましょう。

余白少なめ

余白少なめのバナー

余白多め

余白が多めのバナー

おすすめの参考サイト

どのようなデザインにするか悩んだら、参考になりそうなバナーを探しましょう!
以下のサイトは様々なバナーをジャンルごとにまとめていてイメージにあったバナーを検索しやすいのでおすすめです。
たくさんのバナーを見て作り方と研究し、良いバナーの良いところを真似してより良いバナーを作成しましょう。

「こねこのバナーデザインアーカイブ」

https://coneco.tokyo/

「色」、「サイズ」、「業種」から絞り込んで検索することができます。レクタングルやスクエアサイズ以外の横長・縦長のバナーが原寸で掲載されていて見やすくなっています。

「レトロバナー」

https://retrobanner.net/

「色」、「サイズ」、「業種」以外に「テイスト」からバナーを絞り込む事ができ、「かわいい」「クール」「おしゃれ」など、イメージから探すことができます。

「BannerMatome」

http://bannermatome.com/

21,300本のバナーが掲載されているバナーまとめサイトです。
「色」、「業種」以外にも、「テキスト風」「立体風」など、バナーの表現別にも検索することができます。

まとめ

バナーを作る上で一番大切なことは、「多くのユーザーに見てもらうこと」ではなく「ターゲットのユーザーに興味を持ってもらうこと」です。
また、Aのサービスでうまく訴求できたバナーでも、Bのサービスでは訴求できないということもあります。
ターゲットの目に留まるバナーは1つとは限りません。
たくさんバナーを作って試行錯誤を繰り返し、よりターゲットの目に留まる良いバナーを作成しましょう!

この記事を書いた人

Web集客相談フォームはこちら!

当ブログの運営をしている株式会社メディアエクシードは、少数精鋭のWebマーケティング会社です。
一言でいえば、少数だからこその強みを生かした「痒いところに手が届く会社」です。

王道のWebマーケティングだけではなく、弊社が自社プロダクトの集客のために、独自で編み出したマーケティング手法を持っており、
そのノウハウの中からクライアント様の業態に合った最適な集客プランをご提案させていただいております。

もし、「現状のWeb施策が成約に繋がっていない、Webで効率的に新規開拓をしたい!」とお考えでしたら、お気軽にご相談ください。

お問い合わせのサービス必須

貴社名

ご担当者名必須

電話番号

メールアドレス必須

集客に利用されたいホームページのURL

検索キーワードをお知らせください

お問い合わせの詳細必須

関連記事

TOPへ戻る