バナー作成完全ガイド！ 作成のコツから出稿媒体別サイズまで

Web制作を担当していると、「バナー」に触れ、作る機会も多いと思います。ユーザーを自サイトやメインコンテンツへ上手に誘導するためには、バナーの「質」が求められます。

ただ、Web担当になったばかりの人や、デザインに自信がない人の中には、「どのようにバナーを作ればいいのかわからない」と悩んでいる人も多いのではないでしょうか。

そこで今回は、バナーのサイズや作成のコツ、お手本になるクリエイティブなど、バナー作成に必要な基礎知識をまとめてご紹介します。

バナーとは

まずは、バナーの定義を確認しておきましょう。

バナーとは、直訳すると「banner=旗、横断幕」のこと。お店の前に立てられている”宣伝のぼり”をイメージしていただくとわかりやすいと思います。バナーはWeb上でもこののぼりと同じで、サイトを宣伝するために目立つように貼られた画像のことを指します。

また、画像にリンクが貼られていて、クリックするとWebページへ遷移する仕組みになっています。様々なメディア内でバナー広告の設置スペースが準備されていることも多く、インターネットを利用するユーザーは日常的に目にしています。

自サイト内のコンテンツに誘導するバナーですと下記の赤枠のような形になります。

一方で、他サイトからユーザーを誘導する広告バナー（ディスプレイ広告など）ですと下記の赤枠のような形になります。

上記のような静止画像だけではなく、アニメーションで作られたバナーもあります。特に静止画かアニメーションという決まりはなく、自由に作成することができますが、サイズの規定がある場合はそれに従う必要があります。

バナーにはどんなサイズがある？

バナーを使う場所は、大きく2つに分けられます。

• 自分のサイト
• 他人のサイト（広告出稿）

自分のサイトに載せるバナーであれば、サイズやデザインは自由に決めることができます。しかし、広告出稿などで他人のサイトに掲載してもらう場合は、バナーのサイズに制限があります。

各サイト・サービスによってバナー規定はさまざまですので、ここでは有名サービスを例に挙げてバナーサイズの例を紹介します。

Google AdSense

Googleが提供している広告配信プラットフォームは、利用している人も多いと思います。Googleが「高い効果が見込める広告サイズ」としているのが、以下の5サイズ。バナーのサイズ設定に迷っている場合は、このサイズを参考にすると反応が良いかもしれません。

【300×250】
テキストコンテンツの中や、記事の末尾に組み込むと効果的です。

【336×280】
これも、テキストコンテンツの中や、記事の末尾に組み込むと効果的です。

【728×90】
メインコンテンツの上部やフォーラムサイトに配置すると効果的です。

【300×600】
インプレッション数が増加しているサイズで、ブランド認知度の向上を目的に使われることが多いサイズです。

【320×100】
モバイルでよく使われるサイズです。

画像出典：Google AdSenseヘルプ

その他にも、Google AdSenseでは以下のバナーサイズが用意されています。

【320×50】【468×60】【234×60】【120×600】【120×240】【160×600】【300×1050】【970×90】【970×250】【250×250】【180×150】【125×125】

A8net

アフェリエイトプログラムを提供しているA8netが広告素材として準備しているバナーサイズは、以下のとおりです。

【80×60】【88×31】【100×60】【100×100】【120×60】【120×90】【120×600】【125×125】【160×600】【224×33】【234×60】【250×250】【300×250】【320×50】【336×280】【350×80】【350×160】【350×240】【468×60】【728×90】

ホームページ・ブログ・スマートフォンなど、掲載箇所や目的に応じてピッタリのサイズを選ぶことで、より多くのクリックを見込めます。

それぞれのバナーサイズに掲載できる画像・テキストのイメージを見てみましょう。

画像出典：A8.net

伝えたい情報を分かりやすく訴求できるサイズのバナーを選ぶことも大切ですので、情報量という観点からバナーサイズを選びましょう。

バナー作成のコツ

バナー作成は「簡単にできるだろう」と思いがちですが、情報量やレイアウト、配色などを考えると手が止まってしまうケースが多くあります。初心者でも簡単に、かつ効率よく”クリックされる美しいバナー”を作るためのコツをご紹介します。

カラーやフォントなどの細かい部分から考え始めると、要素が抜けてしまったり、時間がかかったりします。ポイントなのが、大枠を考えて詳細を詰めていくことです。

バナーの要素を洗い出す

まずは、バナーに載せたい情報を洗い出します。キャッチコピー、キャンペーンの締め切り、会社ロゴ、写真（メインビジュアル）など、とりあえず全てを書き出してみましょう。テキストだけのバナーより、画像がある方がユーザーの目を引きますので、なるべく商品画像やイメージ画像など訴求したい内容と関係のある画像を盛り込みましょう。なお、商品などのオリジナル画像が準備できない場合でも、フリー素材などを活用してバナーにアクセントを付けると良いです。

キャッチコピーを考える際には、「メイン」と「サブ」に分けて強弱をつけるのも有効です。あまり文字数が多くなると読みにくくなりますから、メインコピー10字程度、サブコピー20字程度を目安に要約しましょう。

サイズを決める必要がある場合は、要素の量や目的に合わせて考えましょう。複数サイズでバリエーションを作る必要がある場合は、中間サイズから始めて調整するとスムーズが進みます。

ターゲットを定める

「誰にでも当てはまるバナーは、誰にも選ばれない」ということを念頭に置いて考える必要があります。そのため、「これは、自分のためのバナーだ」と思ってもらえるように、バナーの情報を訴求したいターゲットを設定しましょう。

例えば、「女性」ではなく、「主婦」「20代の働く女性」「甘いものが好きな女性」「女子高生」「子育て中のママ」「40代のマダム」など、具体的に定めることで、より”刺さる”バナー作成に繋がります。

ターゲットの行動を想像する

ターゲットを定めたら、ターゲットになりきって行動を想像してみましょう。「どんなページを見ているときに、どんな気持ちでバナーを押すかな」と考えることで、要素の重要度が見えてきます。

例えば、以下のバナーを例に考えてみましょう。

画像出典：株式会社ハウスメイトパートナーズ

ターゲットは、春からの新生活に向けて一人暮らしを考えている若者。
「初期費用を押さえて部屋を探したいな」→W0円を強調
「お、春向けのキャンペーンがあるんだ」→春部屋キャンペーンの周知
「いつまでだろう」→キャンペーンの締切を明記

と、ターゲットの思考に沿って要素が配置されていますよね。

「ストーリー」のあるバナーは、自然とユーザーに行動を促します。ターゲットに近い存在がいれば、ヒアリングして参考にするのもいいでしょう。

ラフを考える

構成要素がはっきりしたら、いよいよバナー作成に着手します。

レイアウトを考える

レイアウトは無限にあるように思いますが、初心者の場合は下記のパターン」当てはめて考えるとスムーズです。

• テキストと画像を分割して配置する（縦半分・横半分）
• 全面に画像を配置し、その上にテキストを載せる
• 複数の画像を並べる

テキストや画像といった構成要素を当てはめてみて、どれが一番適切かを考えてみましょう。悩むようであれば、複数作って判断するのもいいでしょう。

遷移先のページとの関連性を考える

遷移先のページと大きくイメージが変わるバナーにならないように注意しましょう。例えば、赤メインのバナーをクリックした先のページが青を基調にしたページだった場合、ユーザーは大きな違和感を感じます。そのため、バナーと遷移先のページがひとつづきになるイメージで考えましょう。

まずは手描きで

ある程度方向性が決まったら、パソコンで作業をする前に、ラフ案を手描きすることをおすすめします。頭の中がスッキリしますし、その後の作成作業がスムーズに進みます。

なお、人の視線は左上から右下に動きますから、テキストを配置する際には「視線」を意識してラフ案を考えましょう。

モノクロでレイアウトを考える

手描きのラフ案に従って、パソコンでデザインに起こしていきます。その際、いきなりカラーで作成を始めると、配色に引っ張られて時間がかかってしまいます。まずは「モノクロ」で各要素の配置を決めましょう。

フォントや字間を調整する

デザインの細部を詰めていきます。フォントや文字サイズを調整します。例えば、文字の大きさや太さを変えると、その部分を強調できます。

また、字間調整（カーニング）も忘れずに。英数字の前後の不自然な空白は、違和感に繋がります。文字数が少ない時は、真ん中に寄せるように意識すると、スッキリとまとまります。

なお、GDNの場合にはテキスト量の指定があり、画像内に含めるテキスト量が20%以内にしないと審査落ちします。審査落ちしないためにも文字のサイズには充分注意しましょう。

カラーを決める

カラーを決める際は、「あまりカラフルにしすぎない」のがポイントです。あまりにカラフルだと、ごちゃついてしまうからです。

迷った際には、メインビジュアルに使われているカラーや、遷移先のサイトのカラーを使いましょう。遷移先のイメージと異なる配色にすると、ユーザーが戸惑って離脱してしまうので注意が必要です。

デザインの参考にしたい、素敵なバナーたち

印象的なバナーをいくつか紹介します。バナー作成の引き出しを増やすために、たくさんの成功事例を見て研究しましょう。

ついついクリックしたくなる「診断型バナー」

生涯学習のユーキャンのディスプレイ広告で使用されているのが、以下のバナーです。

Yes/Noのクエスチョンが記載されていて、「自分も診断したい！」と思わされます。このように、ボタンのような素材が組み合わされていたり、結果が気になるコンテンツを利用すると、ユーザーの行動を促すことができます。

遷移先は「ぴったり講座診断」コンテンツ。こうして遷移先とバナーを見比べると、背景（木目調）やカラーリングが同じなので、違和感なく診断を始められます。

画像出典：株式会社ユーキャン

記事広告への誘導バナー

化粧品口コミサイト内に掲載されている記事広告への誘導バナー。手書き文字風のフォントを使うことで、つい目が止まります。

このバナーが掲載されているときには、Webページの左右にも商品広告バナーが配置されているので、インパクトが大きいです。

遷移先の記事広告を見てみましょう。バナーとテイストが同じなので、関連したページということが一目瞭然。バナーをクリックした流れで、自然に読み進めてしまいます。

画像出典：イミュ株式会社

「何これ？」二度見しちゃうユニークバナー

IT/Web業界に強い転職サイトGreenのバナーはユニーク。「転職」というワードから発想を広げて「現状を変えたい」という叫びが現れている素材チョイスが面白いです。働く人のホンネが出ているので、ついつい二度見してしまいそうです。

Greenのバナーには、以下のバリエーションもあります。

遷移先はこちら。転職したい！という気持ちを前向きに肯定してくれるメッセージが印象的ですね。

画像出典：株式会社アトラエ

「ブランド」を全面に押し出したバナー

ブランドの認知度を向上したい場合には、ブランド名や主力商品を全面に押し出したシンプルなバナーを用いることがあります。

下記は、ジュエリーブランドNIWAKAのバナーです。

遷移先のブランドページと同じテイストのバナーで、ブランディングを行っています。

画像出典：NIWAKA

ライフスタイルを想像できるオシャレバナー

自然派ボディソープ「BOTANIST」のバナーは、商品が置かれているシチュエーションの写真を全面に配置し、「理想のライフスタイルを実現する商品」としてアピールしています。

まるでインスタのようなビジュアルですよね。ナチュラルな製品に興味のある若い女性が、思わず「オシャレ！」といいねを押したくなりそうです。

遷移先は商品購入ページなのですが、そこでも同じくライフスタイルが見えるような写真が使われています。

画像出典：株式会社I-ne

バナー事例をたくさん見られるサイトを参考に

他にもバナー事例をたくさん見て研究したいという方は、以下のページがおすすめです。さまざまなバナーがまとめてあり、業種やテイスト別に見ることもできます。アイデアに煮詰まったときなど、眺めているとひらめきが降りてくるかもしれません。

▼レトロバナー

画像出典：レトロバナー

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

画像出典：バナーデザインアーカイブ

おわりに

ブランドや製品の認知度を高め、多くのユーザーへ訴求するためには、魅力的なバナー作成が欠かせません。作れば作るほどコツも掴めて「自分の型」が見つかりますから、失敗を恐れずにいくつも作ってみてください。トライ＆エラーを繰り返し、魅力的なバナーを作成しましょう。デザインのご相談は当社の「バナー制作」をご確認ください。