バナーとは、直訳すると「のぼり」「旗」のことを指します。のぼりは、商店街のお店の前に出ている、ひらひらとしている旗が思い浮かぶと思います。ウェブ上のバナーも似たようなもので、ホームページ上にある旗のようなものです。

 

バナーを作成する際に、なかなかデザインが思い浮かばない人やイメージが湧かない人のために、参考にするおすすめサイトや、デザイン制作のノウハウをご紹介します。

 

お問い合わせ　　　資料ダウンロード

 

1.おすすめバナーデザインギャラリーサイト

 

 

広告を出稿する媒体別に、おすすめのバナーデザインギャラリーサイトをご紹介します。

 

 

1-1 Facebook/Instagram広告

 

Facebook広告、Instagram広告のバナーデザイン参考のおすすめは、「広告ライブラリ」です。「広告ライブラリ」は、Meta（旧Facebook）が運営する公式サイトで、Metaが提供する広告を閲覧できます。

 

広告検索する際は、「国」「広告カテゴリ」「キーワード」の3つから絞り込みができ、Facebookアカウントを持っていなくても利用可能です。

 

詳細はこちらからご確認ください。

広告ライブラリ

 

 

1-2 Twitter広告

 

Twitter広告のバナーデザイン参考のおすすめは、「Twitter広告透明センター」です。Twitter社の公式サイトで、各アカウントが出稿している広告を検索できます。

 

競合他社のバナーデザインなどを参考にする際、重宝するサイトです。

 

詳細はこちらからご確認ください。

Twitter広告透明センター

 

 

1-3 YouTube広告

 

YouTube広告のデザイン参考のおすすめは、YouTube広告まとめサイト「動画広告研究所」です。「動画広告研究所」は公式サイトではありませんが、YouTubeに出稿されている広告が多数まとめられています。

 

広告はカテゴリ別で検索できるので、こちらも競合他社の分析などに役立ちます。

 

詳細はこちらからご確認ください。

YouTube広告まとめサイト「動画広告研究所」

 

 

1-4 汎用性の高い参考サイト

 

広告媒体に限らず、汎用的に使えるデザイン参考サイトをご紹介します。

 

 

1-4-1 BANNER LIBRARY

 

さまざまなバナーがまとめられており、カテゴリ別やテイスト別、トピック別、カラー別など、さまざまな角度から参考デザインを探せます。

 

詳細はこちらからご確認ください。

BANNER LIBRARY

 

 

1-4-2 バナー広場

 

こちらのサイトも、各種バナーがまとめられています。男性や女性などバナーに使われている要素別、不動産や飲食店など業種別に検索できるのが特徴です。

 

詳細はこちらからご確認ください。

バナー広場

 

 

2.バナーデザインの制作ポイント

 

 

ここからは、広告掲載先に関わらず必要になる、バナーデザイン制作のポイントをご紹介します。

 

 

2-1 「誰に・何を・どこで伝えるか」を明確に

 

まず、「誰に・何を・どこで伝えるか」を明確にすることが求められます。

 

例えば、出稿主にとっては当たり前のことでも、クリエイティブを見る側は知らないこともあります。そのため、広告で伝えたい内容は、分かりやすく載せる必要があります。また、掲載先によって、ユーザーの置かれている状態が異なります。Twitterでは、ある程度ふざけた広告の方がバズるかもしれませんが、Instagramでは、フォトジェニックなデザインの方が受けがいいでしょう。

 

ターゲットを絞り、ターゲットの置かれた状況を意識することが重要です。

 

 

2-2 サイズ・レイアウト

 

出稿先の媒体に合わせたバナーサイズや、レイアウトを考慮することもポイントです。例えば、Google広告のディスプレイ広告で使われるバナーサイズは、約50種類あります。

 

しかし、工数が多いため、これら全てのサイズを制作することは少ないです。スマホユーザー向けなのか、PCユーザー向けなのかなどの戦略に応じて、10種類程度作ることが望ましいでしょう。

 

また、各サイズに応じて、キャッチコピーのレイアウトなどを変更します。小さいサイズのバナーでは伝えられることが限られるため、情報の取捨選択が重要です。

 

バナー広告のサイズについて詳しく知りたい方はこちら

 

 

 

2-3 フォント

 

バナーに載せる文字は、ターゲットや訴求内容に合わせてフォントを変えます。文字のフォントによって、バナーの印象は大きく変わります。そのため、伝えたい情報にマッチしたフォントを選ぶことが重要です。

 

例えば、ビジネスパーソン向けのセミナー情報であれば、太めのゴシック体を使用するのが良いでしょう。女性向けアパレルECサイトの期間限定セール情報であれば、細めの明朝体を使用するなど、ターゲットのペルソナに合わせてフォントを使い分けましょう。

 

 

2-4 キャッチコピー

 

バナーに掲載するキャッチコピーは、バナーデザインのなかで最も重要な要素です。限られた情報の中で、ユーザーに行動を起こしてもらうために、一目でベネフィットが伝わる内容にしましょう。宣伝したい商品やサービスのメリットなどは、バナー内で伝えるには情報過多です。商品やサービスを使うと「どうなるのか」という未来（ユーザーにとってのベネフィット）をキャッチコピーに使うのがベストです。

 

 

2-5 写真・イラスト

 

バナーに使う写真やイラストは、ユーザーの目を留めるアイキャッチとして重要な役割を果たします。写真やイラストの印象で、バナー全体の印象が決まります。キャッチコピーや文字情報が読みづらくない程度に、含めるようにしましょう。

 

 

2-6 バナーの色

 

バナーの色合いは、ターゲットを惹きつけるために重要な要素です。色はそれぞれ意味を持っています。そのため、伝えたい情報やターゲットに合わせた色を選ぶ必要があります。

 

例えば、サマーフェスティバルのバナーであれば、夏らしい青色をベースにすることが多いです。黄色や赤色がメインだと秋のイメージ、ピンク色がメインだと春のイメージとなるため、伝えたい情報と色の持つ意味がちぐはぐとなってしまい、ユーザーに不快感を与えます。

 

バナーの色合いに迷ったときは、バナークリック後のLPサイトのメインカラーを参考にすると良いでしょう。

 

 

3.成果UPにつながるバナーデザインの特徴

 

 

ここからは、成果につながるバナーデザインの特徴を紹介します。

 

 

3-1 ユーザーの導線に沿ったデザイン

 

バナー全体のデザインは、ユーザーの導線に合わせることが望ましいです。人の視線は、左上から右下に向かって動きます。そのため、最も重要度の高い情報を左上に配置するようにしましょう。また、目線が最後に行きつく右下には、「詳細はこちらをクリック」など、アクションを促す要素を入れておくことがおすすめです。

 

 

3-2 メリットが分かりやすいデザイン

 

バナーデザインは、伝えたい情報がシンプルに掲載されている状態が良いでしょう。バナーなどの画像クリエイティブは、「読む」というよりは「見る」状態です。そのため、情報を詰め込みすぎると、何も伝わらなくなってしまいます。文章を読まなくても、訴求したい内容が伝わるデザインにしましょう。

 

 

3-3 文字と背景のコントラストを強くする

 

文字と背景のコントラストを強くすることもポイントです。先述したように、バナーをパッと「見る」だけで、情報が伝わるデザインにすることが重要です。そのためには、文字の視認性を高める必要があります。文字色と背景色の組み合わせを考えてデザインしましょう。背景が、画像でコントラストを出しづらい場合は、文字に背景をつけることも有効的です。

 

 

3-4 バナーデザインとランディングページに一貫性を持たせる

 

最後に、バナーデザインとランディングページ（LP）のデザインは一貫していることが重要です。バナーの目的は、LPにユーザーを誘導することです。そして、LPの目的は、ユーザーをコンバージョンに結びつけることです。

 

バナーとLPの印象が乖離していると、戸惑いを与えます。そのような場合、ユーザーはLPから離脱してしまう可能性が高いです。バナーとLPのデザインには一貫性を持たせ、ユーザーをコンバージョンまでつなげられるように意識しましょう。

 

 

4.まとめ

 

成果UPにつながるバナーデザインをするためには、競合他社が出稿しているバナーを参考にすることが重要です。自社の差別化ポイントは、強みやベネフィットです。

 

限られたサイズのクリエイティブの中で、ユーザーにとってのベネフィットを効果的に掲載することがポイントです。その際には、バナー掲載先やターゲットを意識したデザインにすることはもちろん、ユーザーの目線の動きや、遷移先のLPデザインとの統一性を持たせることも必要です。

 

成果を出すバナーデザインには、バナー以外の総合的な視点も求められていることを意識しましょう。