webバナーとは？ バナーデザイン・バナー制作のための基礎知識
大手メディアサイトから個人ブログまで、様々なwebページでバナー広告は掲載されています。Webデザイン/Web制作のお仕事としても常時依頼はあります。
Photohopなどのグラフィックソフトの基本操作が出来るようになってきたら、バナー制作のお仕事受注を前提にしたトレーニングを行ってみても良いでしょう。今回はバナー制作を始める際に知っておきたい、バナー制作の基礎知識をご紹介します。
webバナーとは
バナー (banner) はウェブページ上で、他サイトや他ページを紹介する役割をもつリンク付き画像のことを指します。バナー広告、もしくは広告バナーと呼ばれるのは、その中でも“広告"として掲載されているものですね。
普通にWebサイト/ページを見ていても、下記のようにバナー広告は各所にあります。
目にする機会も珍しくありませんよね。
こうした広告は、ほとんどがebサイト/ページにお金を支払うことで掲載されています。人気TV番組のCMのように、多くの人に自社の商品やサービスを知ってもらうための手段なわけです。
それ以外に、自社サイト内に別ページの広告バナーを掲載していることもあります。
新コンテンツや特集、有料プランのPR、会員登録を促すなどの目的です。
このように、自サイト内・外部サイトと様々な場所でバナーは使われています。
星の数ほどあると言っても過言ではありませんから、お仕事依頼も多いわけです。
まずは無料の7講座から受講してみましょう。わかりやすくて目からウロコですよ。
» 今すぐ無料講座をチェックする
広告バナーの種類とサイズについて
一口に広告バナーと言っても、掲載される場所によって様々なサイズがあります。
正方形タイプのもの、横長・縦長など、Webサイトを見ていると色々な形のバナー広告を目にする機会があるはずです。
クラウドソーシングサービスの案発案件であればサイズ指定してくれていることが多いですが、例えば「サイト（もしくはLP）を作って欲しい、広告も考えているからバナーもセットで」なんてふわっとしたお話もあります。
全広告サービスで使われるバナーサイズを覚える必要はありません。
が、どこでサイズを調べられるのか・主要サイズはどのへんかは知っておきましょう。
Google/Yahoo!のバナー広告
Google広告のサイズ
Google広告の中で画像を使うものは、主に“レスポンシブ ディスプレイ広告”と“アップロード型ディスプレイ広告”の２種類。
Googleは“レスポンシブ ディスプレイ広告”という、掲載場所に合わせてサイズやレイアウトを自動調整してくれるタイプのディスプレイ広告を推奨しています。クライアントがどの広告タイプを使うか決めかねている場合は、こちらに合わせておくと良いでしょう。
レスポンシブ ディスプレイ広告で使用する画像サイズ要件は、以下のように書かれています。
アスペクト比1：1のスクエア型、アスペクト比1.91：1の横長型のどちらかを使う形ですね。
画像は必要に応じて縮小すれば良いので、赤線で囲ったサイズで作成すると良いです。
また、アップロード型ディスプレイ広告で使える画像サイズ（仕様）は以下URLで紹介されています。
Yahoo!広告のサイズ
Yahoo!広告では、通常の画像広告とSNS広告で、バナーサイズが少し違います。
出典：https://promotionalads.yahoo.co.jp/online/bannersize.html
どちらでも安定して使用できるのは、アスペクト比1：1のスクエア型（1200px × 1200px）と言えそうです。
横長型の場合は、推奨アスペクト比が少し違ってきます。
- ディスプレイ広告（画像）→アスペクト比16:9（幅1200pxなら、高さは675px）
- SNS広告→アスペクト比1.91：1（幅1200pxなら、高さは628px）
Google/Yahoo!のバナー広告サイズまとめ
Google広告、Yahoo広告用の画像は、レスポンシブ広告用のスクエア型を用意すると汎用性が高いでしょう。
やや横長型の画像を使いたい場合は、以下の2タイプがあります。
- アスペクト比1.91：1（1200px × 628px）
- アスペクト比16：9（1200px × 675px）
デザインによっては大きめである“アスペクト比16：9”で作成しておいて、上下をトリミングしても使えそうですね。
加えて、横長（薄型）タイプ・縦長タイプのバナー広告も使用したい場合は、以下のようなサイズも作っておくと盤石です。
- 640×200
- 640×100
- 160×600
SNSで使われるのバナー広告
Facebook広告のサイズ
Facebook広告ガイド
https://www.facebook.com/business/ads-guide/image/facebook-search
ガイドページの内容をより簡単にまとめると、以下の条件に当てはまるものが、FaceBookの画像広告の推奨サイズといえます。
- アスペクト比: 1.91:1～1:1
最低解像度が縦横共に600ピクセル以上
アスペクト比: 1.91:1
1280×670px、もしくはgoogleやyahooでも入稿可能な1200×628pxで作成することが多いです。アスペクト比: 1:1
600×600px、もしくは推奨解像度（1,080px）を考慮して1200×1200pxで作るのが一般的です。
小さいものを拡大すると画質が荒れますので、デザイン・制作時には大きめのサイズを採用したほうが無難でしょう。書き出す時にサイズを調整すれば良いわけです。
Instagram広告のサイズ
インスタグラム広告のサイズも、FaceBook広告とほぼ同じサイズが推奨されています。
Facebook広告ガイド
https://www.facebook.com/business/ads-guide/image/instagram-feed/brand-awareness
ただし、Instagram ストーリーズの場合は「アスペクト比: 9:16および4:5～1.91:1」が推奨です。
横長であればFaceBookと同じアスペクト比: 1.91:1で良いですが、縦長・全画面表示にしたい場合は9:16もしくは4:5と、ちょっと別のサイズが必要になります。
LINE広告のサイズ
LINE広告（LINE Ads） 入稿規定マニュアル
https://www.linebiz.com/jp/manual/line-ads/policy_009/
LINEの広告サイズガイドはわかりやすいです。
Facebookなどと同じくアスペクト比: 1.91:1＝1200×628pxでいけます。
Twitter広告のサイズ
Twitterの広告も、基本的にはアスペクト比** 1.91:1と1:1**があれば大丈夫です。
Twitter広告の仕様とフォーマット
https://business.twitter.com/ja/help/campaign-setup/advertiser-card-specifications.html
Facebook/Instagram/line/twitterのバナー広告サイズまとめ
Facebook,Instagram,LINE,twitterという4つのメジャーSNSの広告。
どのSNS広告でも利用できるのは
アスペクト比 1:1
アスペクト比 1.9:1
の２つ。アスペクト比1.9:1である1200×628pxはGoogle広告などでも使えるので、この２つの比率のバナーは汎用性が高いといえます。
結局、どのサイズで作れば良い？
- アスペクト比：1:1
- アスペクト比： 1.9:1
この２つは使う可能性が非常に高いです。
加えて、Google広告・Yahoo!広告の場合は、300×250pxもPC・スマホ両用で多く使われるので用意しておきたいところ。
画像劣化を防ぐために大きめのサイズで作ると考えます。
- 1200px × 1200px
- 1280px × 670px
- 600px × 500px
この３つのサイズが用意できれば、かなりの広告サービスをカバーできるでしょう。
自分のサイトやサービスの広告を出してみよう、Webサイトデザイン～制作のおまけとして付ける場合にはこのあたりのサイズから作り始めるのが良いと思います。
上下が多少見切れても影響なければ、1200px × 1200pxのデザインから600px × 500pxを切り出すことも可能です。
勿論、そのほかにも横長・縦長・スマホ全画面バナーなど様々なサイズがあります。
ASPなどから広告を出す場合は 728 x 90などのサイズも人気ですから、必要かどうかをクライアントと相談して決めていきましょう。
成果を出せるwebバナーデザインの４大特徴
ここからは、サイト訪問や会員登録など、目的を達成できるためのWebバナーデザインについて考えていきましょう。
前提として、バナーはアート作品ではなく、ビジネスツールということを念頭に置いておくと良いです。
1.バナー１つに情報を詰め込みすぎない
全画面表示広告もありますが、基本的にバナーは限られたスペース内で仕上げなければいけません。重要なのは細部まで細かく情報を伝えることではなく、ユーザーの目・興味を引くものであるということです。
例えば、300px × 250pxのスペースにぎっしりと文字が詰まっていたら？
9割以上の人は、その文字を全ては読まないでしょう。
かつて、Facebook広告（現在のMeta広告）では「20%ルール」と呼ばれる規約がありました。
これは広告用画像で、画像全体にテキストが占める割合が20%以上のものは認めない、というもの。
現在、Meta広告ではこの「20%ルール」は廃止されています。
しかし、画像内に文字があまりにも多すぎると、訴求点が分からずにユーザーを逃がしてしまう危険性もあります。
もちろん、テキストが占める割合が多い＝駄目なバナー、ということではありません。
大事なのは「伝えたいことが、ユーザーに伝わるか（刺さるか）」です。視界に入ったら即座にユーザーが概要を把握できる（もしくは興味を持つ）ことを大前提に作成しましょう。
バナーを作り始めるまえに、バナーに掲載したい情報を書き出して優先順位を付けておくと良いでしょう。
2.バナーのキャッチコピーは単純明快に
視界に入った時、即座にユーザーが概要を把握できる（もしくは興味を持つ）ようにするためにはインパクトのあるキャッチコピーが必要です。
キャッチコピーはバナーのメインコンテンツと言える部分。掲載するテキストの中でも最も大きなフォントサイズで、目立つように配置するのがオーソドックスなやり方です。
こちらは『Retrobanner』というサイトに掲載されているバナーの一部です。
そのジャンルに興味を持っているユーザーであれば「おっ」と思う部分が強調されていますよね。このパンを食べればタンパク質が手軽に取れる、留学と同じような効果がありそうだ…などユーザーにベネフィット（利益・恩恵）を感じさせる・想像させる内容です。
バナーは詳細情報ページへの“入り口”ですので、詳しいことはわからなくても良いのです。
それよりもユーザー目線で、見た瞬間にベネフィットをシンプルに感じられるキャッチコピーを掲載したほうが目にとまる・クリックされる確率は高まるでしょう。
3.画像素材でユーザーに訴えかける
バナーの第一印象を決めるのは写真やイラストです。
Webページを流し読みしている場合、キャッチコピーなどのテキストよりも画像部分の方が目に留まりやすいでしょう。
バナーに使われている画像が魅力的であれば、ユーザーは目を留めます。キャッチコピーの内容と齟齬がなく、リンク先ページの魅力が十分に伝わるものを用意しましょう。
どの画像もインパクトがあり、商品やサービス内容の雰囲気も伝わってきますよね。
内容や雰囲気が伝わる、という点以外に、
バナー素材（画像）の選定には下記３点に注意が必要です。
- 縦横比を変えて規定サイズに押し込む（画像が歪んでいる）
- 解像度が低く画質が悪い
- 画像と文字の色が近く可読性が悪い
上２つは当然として、テキストの可読性も要注意。
素晴らしい画像・魅力的なキャッチコピーを用意できても、画像と文字がゴチャゴチャして双方潰し合ってしまったら意味がありません。お互いが引き立て合うように配置・配色を工夫しましょう。
4.フォント＆配色で、よりバナーの印象をアップ
同じレイアウトのバナーでも、使用するフォントと配色によって印象は変わります。
テキスト主体のバナーであれば、背景色を変えるだけでも雰囲気が違いますよね。
画像を全面に使っていても、フォントと文字色で雰囲気は変わります。
左の方がシャープで「ハンサム」感がありませんか？
文字色・書体だけでも雰囲気は変わりますし、不思議と写真も少し違った見え方をします。
バナーで扱う商品やリンク先ページの作り、クリックして欲しいターゲット層を考慮して配色・フォントを決めましょう。
webバナーデザインの参考に役立つサイト
Retrobanner
上でもバナー例として紹介した『Retrobanner』。
国内で使われているバナーを集めたギャラリーサイトで、サイズ・カラー・業種・テイスト別にバナーを見ることができます。掲載数も国内サイトではトップクラス、眺めているだけでも楽しいサイトです。
BannerDesignArchive
こちらも国内サイトのバナーを収容しているギャラリーサイト。
サイズ、色、業種から絞り込んで表示することができます。
FACEBOOK広告集めました。
タイトルの通り、Facebook広告に特化したバナーデザインのギャラリーサイトです。
Facebookでは画像内テキストを抑えることが推奨されていますので、掲載されているバナーも全体的にスッキリとしたものが多くなっています。
いかに画像内のテキストを押さえつつ、魅力的に見せるか勉強にもなりますね。
Crowd works
クラウドワークスでは、コンペ形式のバナー作成依頼で採用されたデザインの一覧を見ることができます。実際にサイト上でお仕事としてやり取りされ、クライアントに選ばれたものですのでチェックしておきたいところです。
こちらは上記の『FACEBOOK広告集めました。』に掲載されているバナーと比べると、テキストの比率が高いものが多い印象です。限られたスペース内に、読みやすく多くの情報を入れたいときの参考になるデザインも多くありますよ。
fiverr
fiverrは海外のクラウドソーシングサイトです。
世界規模のサイトで、最近は日本でも利用される方が増えているようです。
fiverrではちょっとしたポートフォリオのような形で、売り手側が「こんなWebバナーを作れますよ」というサンプルを掲載しています。
内容は玉石混交ですが、日本ではり見かけしないような配色やデザインも。
アイディア探しに見てみると面白いですよ。
https://www.fiverr.com/categories/graphics-design/banner-ads
まずは無料で14講座から始めましょう！
募集人数には制限があります。サインアップはお早めに。
7月6日まで