webバナーとは？ バナーデザイン・バナー制作のための基礎知識
大手メディアサイトから個人ブログまで、様々なwebページでバナー広告は掲載されています。Webデザイン/Web制作のお仕事としても常時依頼はあります。
Photohopなどのグラフィックソフトの基本操作が出来るようになってきたら、バナー制作のお仕事受注を前提にしたトレーニングを行ってみても良いでしょう。今回はバナー制作を始める際に知っておきたい、バナー制作の基礎知識をご紹介します。
webバナーとは
バナー (banner) はウェブページ上で、他サイトや他ページを紹介する役割をもつリンク付き画像のことを指します。バナー広告、もしくは広告バナーと呼ばれるのは、その中でも“広告"として掲載されているものですね。
普通にWebサイト/ページを見ていても、下記のようにバナー広告は各所にあります。
目にする機会も珍しくありませんよね。
こうした広告は、ほとんどがebサイト/ページにお金を支払うことで掲載されています。人気TV番組のCMのように、多くの人に自社の商品やサービスを知ってもらうための手段なわけです。
それ以外に、自社サイト内に別ページの広告バナーを掲載していることもあります。
新コンテンツや特集、有料プランなどのPRですね。
このように、自サイト内・外部サイトと様々な場所でバナーは使われています。
星の数ほどあると言っても過言ではありませんから、お仕事依頼も多いわけです。
広告バナーの種類とサイズについて
一口に広告バナーと言っても、掲載される場所によって様々なサイズがあります。
正方形タイプのもの、横長・縦長など、Webサイトを見ていると色々な形のバナー広告を目にする機会があるはずです。
クラウドソーシングサービスの案発案件であればサイズ指定してくれていることが多いですが、例えば「サイト（もしくはLP）を作って欲しい、広告も考えているからバナーもセットで」なんてふわっとしたお話もあります。
全広告サービスで使われるバナーサイズを覚える必要はありません。
が、どこでサイズを調べられるのか・主要サイズはどのへんかは知っておきましょう。
Google/Yahoo!のバナー広告
Google広告のサイズ
Google広告のヘルプページでは下記のように紹介されています。
例なので他にも使用されるサイズはありますが、代表的なものではあるでしょう。
Google 広告 ヘルプ
https://support.google.com/google-ads/answer/7031480?hl=ja
Yahoo!広告のサイズ
Yahoo!広告もgoogle広告と同じような画像サイズが推奨されています。
ディスプレイ広告で使用できる画像サイズ - Yahoo!広告 公式 ラーニングポータル
https://promotionalads.yahoo.co.jp/online/bannersize.html
Google/Yahoo!のバナー広告サイズまとめ
Google広告、Yahoo広告用のバナー広告をデザインする場合、下記の2サイズは最低限用意しておきましょう。
- 600×500
- 1200×628
掲載されているサイズには同じアスペクト比のバリエーションもあります。
最も大きなサイズで作っておけば、縮小して利用することができます。
加えて、横長タイプ・縦長タイプのバナー広告も使用したい場合は
- 640×200
- 640×100
- 160×600
なども作っておくと盤石です。
SNSで使われるのバナー広告
Facebook広告のサイズ
Facebook広告ガイド
https://www.facebook.com/business/ads-guide/image/facebook-search
ガイドページの内容をより簡単にまとめると
- アスペクト比: 1.91:1～1:1
- 最低解像度が縦横共に600ピクセル以上
という条件に当てはまるものが、FaceBookの画像広告の推奨サイズといえます。
アスペクト比: 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バナーデザインの４大特徴
1.バナー１つに情報を詰め込みすぎない
全画面表示広告もありますが、基本的にバナーは限られたスペース内で仕上げなければいけません。重要なのは細部まで細かく情報を伝えることではなく、ユーザーの目・興味を引くものであるということです。
例えば、300px × 250pxのスペースにぎっしりと文字が詰まっていたら？
9割以上の人は、その文字を読まないでしょう。
かつてFacebook広告では「20%ルール」と呼ばれる規約がありました。
これは広告用画像で、画像全体にテキストが占める割合が20%以上のものは認めない、というもの。
現在この「20%ルール」は廃止されていますが、
依然Facebookでは画像内テキストを抑えることが推奨されています。
広告画像のテキストについて
https://www.facebook.com/business/help/980593475366490?id=1240182842783684
実際に運用されているバナー広告には、もっと画像内テキストの割合が多いものもあります。テキストが占める割合が多いから駄目、ということはありません。
しかし、文字数は押さえたほうが良いです。
バナーを作り始めるまえに、バナーに掲載したい情報を書き出して優先順位を付けておくと良いでしょう。
つまり視界に入ったら即座にユーザーが概要を把握できる（もしくは興味を持つ）ことを大前提に作成しましょう。
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
Web制作のプロになろう！スキルハブの無料ビデオ
無料ビデオ14講座/98レッスンが受け放題！
わかりやすい動画レッスンHTML/CSS, JS, デザイン, WordPress, Railsなどがなんと無料。 募集人数には制限があります。サインアップはお早めに。
無料申し込み期限：
4月25日
まで
募集人数: 100名（残りわずか）
