Webサイトやアプリ内で目にする機会が多いバナー広告ですが、バナー（Banner）を直訳すると、「旗、のぼり」という意味になります。
つまり、インターネット上に掲げられる看板・のぼりとイメージすると分かりやすいです。
今回は、基礎的なバナー制作の知識とバナー制作の参考サイトについて紹介します。
ぜひ今後のバナー制作の参考にしてください！
バナーとは
バナーはWebサイトやデジタル広告などで見かける小さな広告です。一般的にリンク付きの画像となっており、ユーザーの目を引き付けてクリックしてもらい、宣伝したい商品・サービスサイト、自社サイトなどに誘導する機能を持っています。
そして、誘導先の商品の販売促進やセミナー申込み、Webサイトの認知向上などに結び付けることを目的にしています。
バナーは、見た人に何を伝えたいのか瞬時に伝える必要があります。
そして、バナー画像には、ユーザーの目に留まり、表記された内容に興味を持ち、クリックしたくなるような説得力を持たせなければなりません。
そのため、小さな枠内には単なる見た目のデザインの美しさのみならず、様々な綿密な計算が組み込まれています。
バナー制作の流れ
基本的なバナー制作の流れについて説明します。バナーデザインの大きな特徴は、要素の絞り込みです。
極力少ないテキストで、明瞭なメッセージを伝えることを意識しましょう。
STEP1：目的とターゲットを明確にする
まず、制作するバナーは誰に伝えたいのか、ターゲットを明確にします。
ターゲット次第で文章の表現方法や、文字サイズ、その他デザイン全般が変わってきます。ターゲットの軸が定まっていると、デザインのブラッシュアップを図る際に修正事項を具体化することができます。
次に、ターゲットにどうして欲しいかを考えます。
バナーをクリックして欲しいのはもちろんですが、クリックして商品を購入して欲しいのか、アプリのダウンロードをして欲しいのか、セミナーに参加申し込みして欲しいのか等、目的を明確化しておきましょう。
目的とするユーザーのアクションを決めておくことで、設置したバナーの効果がどの程度のものかクリック数、コンバージョン率、アクション実行率などから計測し、次のマーケティングに活かすことができます。
STEP2：バナーのサイズを選ぶ
バナーには、一般的なサイズの基準があります。ただし、特定のWebサイトや広告プラットフォームによって多少調整が必要な場合があるため事前に確認が必要です。
ターゲットや目的に合わせて適切なサイズを選ぶようにしましょう。
ちなみに、2大ネットワークと言われているGoogleのディスプレイ広告、Yahoo!のディスプレイ広告の両者の規格で取り扱われている定番のサイズは下記の通りです。
300×250ピクセル：ミディアムレクタングル（Medium Rectangle）
ウェブサイトのサイドバーや記事内に表示されることが一般的です。
広告スペースとして一般的であり、コンパクトながら十分な情報を表示できるサイズです。
728×90ピクセル：リーダーボード（Leaderboard）
ウェブページの上部に表示されることが一般的なバナーサイズです。
通常、ウェブサイトのヘッダーエリアや記事の上部に配置され、幅広い広告メッセージやロゴを表示するのに適しています。
160×600ピクセル：ワイドスカイスクレイパー（Wide Skyscraper）
ウェブサイトのサイドバーやコンテンツの横に表示されることが多いです。
縦長の形状であり、視覚的に目立つ広告スペースとして活用されます。
300×600ピクセル：ハーフページ（Half Page Ad）
縦長の形状であり、ウェブページのサイドバーなどの横幅の広いスペースに配置されることが多いです。
コンテンツとの並列表示が可能で、多くの情報やグラフィックを表示するのに適しています。
320×50ピクセル：モバイルバナー（Mobile Banner）
モバイルデバイスのウェブページやアプリ内に表示されることが一般的なサイズです。
モバイル画面に適した小さなバナーサイズであり、コンパクトに表示されることが特徴です。
その他のサイズは、下記の公式サイトから確認しましょう！
STEP3：要素を洗い出す
バナーに載せたい要素を全て書き出します。テキストや写真、イラストなどバナーに収まるかどうかは気にせず、必要だと思うものを洗い出してみてください。
バナーにどのような要素を盛り込むのかを可視化することで、この後のデザインが考えやすくなります。
STEP4：要素の優先順位をつける
書き出した要素の中で、一番伝えたいこと、主役となる要素を1つ選択します。
続いて、その次に重要な要素を順番に考えます。さらに、この作業を行う過程で、重複している要素、余計な要素などは除外するようにします。
STEP5：要素のレイアウトを決める
要素の順位に基づいて重要な要素は大きく、サブ要素は小さく表示するなど強弱をつけながらモノクロでレイアウトを考えます。
まずはテキストから配置し、その後に必須となる画像やイラストを配置すると考えやすいかと思います。
ユーザーがどの順番でレイアウトした要素を見るか、視線の動線にも配慮することが重要です。
優先順位がしっかり反映されたレイアウトとなると、ぱっと見でユーザーに内容が伝わるバナーに仕上がっていきます。
STEP6：フォントサイズを調整する
フォントのデザインを調整し、より読みやすいテキストになるようにしていきます。
強調したい文字は、文字を太くしたり、背景を加えたりする等して優先順位の強弱がより明確になるよう意識します。
また、ターゲットに適したフォントスタイルを使用するとともに、より読みやすい文章となるよう、文字詰めの作業なども忘れないようにしましょう。
STEP7：色を付ける
フォントや背景色などを調整していきます。全体の色味に合わせて、使用する画像やイラストの色味も調整しましょう。
また、バナーを表示させるWebサイトの配色を考慮して、Webサイトのデザインの邪魔にならないものの、しっかり目立つ色使いを色々と試しながら決めていきます。
STEP8：あしらい・全体調整をおこなう
バナー全体の世界観を作り込んでいくために、細かいあしらいを加えながらデザイン全体の調整を行います。
今一度、主役となる要素が目立っているか、ターゲットと目的に合致したデザインになっているか等、ブラッシュアップを行いながら最終のデザインに仕上げていきます。
最新のバナーが豊富に揃っている参考サイト5選
より良いバナーを作成するためには、日頃から様々なデザインをインプットして引き出しを増やしておく必要があります。
そのためには、バナー広告のデザインがまとまっている参考サイトを見るのがおすすめです。
また、バナー作成でデザインに迷ったときや模写して学習したいときにもおすすめです。
最新のバナーが豊富に揃っている参考サイトを5つ紹介します！
BANNER LIBRARY
BANNER LIBRARYは、多様な種類やテーマのバナーデザインを掲載するギャラリーサイトです。
おしゃれでトレンドをおさえたデザインが多く、更新頻度も高いです。5,000点以上のバナーが掲載されており、カテゴリやテイスト、色、バナーサイズなど様々な用途に合わせた検索が可能です。
また、ハッシュタグ検索も可能であり、トレンドに合わせた選定ができます。
Bannnner.com
高品質かつ多様なバナーデザインを掲載するギャラリーサイトです。
更新頻度が高く、5,000点以上のバナーが掲載されています。バナーサイズやカテゴリ、季節性、色など様々なジャンルから検索が可能です。
特に、縦割り・横割り、切り抜き、写真メインなどデザインのあしらい別にも検索ができるため、デザインを考えるうえで非常に参考にしやすいサイトとなっています。
レトロバナー
高頻度でバナーデザインが更新されているギャラリーサイトです。13,000点以上のバナーが掲載されており、バナーサイズの種類も豊富に揃っています。
バナーサイズやカテゴリ、業種、色など様々な用途に合わせた検索が可能です。
また、各バナーで使用されている主要なカラーコードを取得することができ、デザインを参考にするうえで非常に利便性が高いサイトです。
バナー広場
数多くのバナーが掲載され、更新頻度も高いギャラリーサイトです。14,000点以上のバナーが掲載されており、様々なジャンルが揃っています。
検索機能も充実しており、サイズや色、カテゴリのみならず、デザインの雰囲気やデザインの要素別での検索もできるようになっています。
また、複数のカテゴリやキーワードでの絞り込み機能や月間閲覧数ランキングを見ることができるなど、用途に合わせた選定が可能となっています。
バナー専門のギャラリーサイトではありませんが、多数のバナーデザインを検索できる画像検索サイトです。
キーワード検索で用途に合わせたバナーデザインを見つけることができます。また、1つ画像を選択すると、似たようなデザインの画像も多数表示されるで、検索の手間が省けてとても便利です。
ちなみに、Pinterestは無料で使用できますが会員登録が必要です。会員登録することで、お気に入りの画像を登録することができます。
特定の分野に特化したバナー参考サイト3選
次に、特定の分野に特化したバナーデザインの参考サイトを紹介します。
Facebook広告やInstagram広告に特化した参考サイトです！
Facebook広告集めました。
Facebookに使用する広告バナーに特化したギャラリーサイトです。約800点が掲載されており、カテゴリ別に画像検索することが可能です。画像だけではなく、一緒に掲載するテキストも紹介されているため、まさにFacebook広告を考える際に便利なサイトです。
インスタ広告集めました。
前述した「Facebook広告集めました。」と同じ会社が提供している、Instagram広告に特化したギャラリーです。
こちらは、実際のInstagramのアカウント上で公開されているため、利用する際はInstagramのアカウント登録が必要です。定期的に更新されているため、フォローして最新の情報をチェックできるようにしておきましょう。
Meta広告ライブラリ
Metaが公式に提供している広告ライブラリのサイトです。
Metaが手掛けているFacebookやInstagram、Messenger、Audience Networkに掲載されている広告を閲覧することができます。
実際の表示に近い形で見ることができ、広告を掲載している広告主の情報（フォロワー数、掲載期間、いいね！の数など）も知ることができるため、マーケティングの観点からも参考になります。
なお、現在掲載している広告しか見ることができないため、暫くの間参考にしたい場合はキャプチャを残しておくことをお勧めします。
まとめ
バナーは、小さい枠でありながら、作り手の様々な試行錯誤が詰まった奥深いデザインとなっています。
そして、デジタル広告の定番ツールとして現在も広く使われています。
そのため、今回ご紹介させていただいたように参考となるギャラリーサイトも充実しています。
自社のデザインの参考のみならず、競合他社のデザインも覗き見ることができるためマーケティングの参考としてもギャラリーサイトを活用してみてください。
