初心者必見！広告バナーのサイズや種類、作成のコツを業種別に徹底解説
こんにちは。日々広告バナー作成に勤しんでいるデザイナーです。今回はバナー作成を検討している初心者さん向けに、知っておくと便利なバナーの種類やサイズ、審査落ちしないポイント、クリックされやすいコツなどをまとめてみました。
バナー作成する際の参考になれば幸いです。
資料で詳しく確認したい方はこちらへ
バナーとは
バナーとは、webサイトやホームページ上で画像にリンクを貼り、他のwebサイトや商品などを紹介する画像のことです。
バナーには色々なサイズがあり、業種や商品も幅広く宣伝することができるとても便利なアイテムです。そんなバナーのことをこれから詳しく説明していきたいと思います。
バナーサイズと種類一覧
現在あるバナーサイズの中で、よく配信されているバナーの種類をピックアップし、簡単な一覧表にまとめました。
| 名前 | サイズ | PC | スマートフォン | 一言メモ |
|---|---|---|---|---|
| レクタングル | 300×250 | ○ | ○ | 一番メジャーなサイズ |
| レクタングル（大） | 336×280 | ○ | ○ | レクタングルと同じアスペクト比（縦横比）で、 ひとまわり大きいサイズ |
| ビッグバナー | 728×90 | ○ | 主にPCで使用される横長ビッグバナー | |
| ワイドスカイスクレイパー | 160×600 | ○ | 主にPCで使用される縦長バナー | |
| フルバナー | 468×60 | ○ | 主にPCで使用される横長ビッグバナー | |
| モバイルバナー | 320×50 | ○ | 主にスマートフォンで使用される横長バナー | |
| モバイルバナー（大） | 320×100 | ○ | 主にスマートフォンで使用される横長バナー | |
| レスポンシブ | 1200×628 | ○ | ○ | 別途用意されたテキストと組み合わせるバナー部分、 SNSやフィード面への掲載に利用可能 |
| レスポンシブスクエア | 1200×1200 | ○ | ○ | 別途用意されたテキストと組み合わせるバナー部分、 SNSやフィード面への掲載に利用可能 |
○：配信対応している
どのバナーサイズを作ればいい？悩んだときは
バナーを作成する際、全サイズを網羅するのは時間もお金もかかってしまいます。どのサイズのバナーを優先的に作成すればよいか悩んだ時には、最も多くの広告媒体に掲載され、PCにもスマートフォンにも使用可能なサイズのレクタングルを作成するとよいでしょう。また、SNS広告への出稿を検討している場合は、レスポンシブを作っておくと便利です。時間とお金に限りがある場合にはまず、この2種類をおすすめします。
バナー作成のポイント
広告媒体にはルールがあり広告掲載前には必ず審査があります。審査落ちのリスクを防ぐために実施した方がよい事や、バナー作成する際のデザインのコツについて、項目別に記載していきます。
広告審査落ちしない為に、最低限実施した方がよいこと
- 枠線を付ける
枠が無く背景が白や淡い色だと掲載サイトに同化してしまう恐れがあります。枠は広告と広告を掲載しているサイトの境目を認識させ、この枠内は広告だと示す役目をしてくれます。
- 提供元を明記する
提供元の明記は必須事項です。会社名や視認可能なロゴか【提供：〇〇】を必ず記載しましょう。
- 画像形式
JPG、PNG、GIFなど、それぞれの広告媒体の指定フォーマットに合わせましょう。
- 容量
それぞれの広告媒体の指定容量に合わせましょう。
多くの広告媒体は150KB以内と定めています。
- リンク先との整合性
ユーザーがせっかくバナーをクリックしても、遷移先のLPがバナーの内容と異なれば、戻るボタンですぐ離脱してしまいます。バナー広告とリンク先LPの整合性を意識して作成しましょう。
- アニメーションの無限ループ禁止
無限ループは審査落ちする可能性が高まります。15秒～20秒をめどに停止させましょう。
- ふさわしくない画像や表現の使用
当たり前のことですが、差別的な表現やアダルト要素が強い画像は掲載しないようにしましょう。
上記以外にも、ユーザーが不快に感じる画像や虚偽が含まれる画像も使用を避けましょう。
- 金額の税込表記
2021年4月より、小売段階の価格表示をするときの「総額表示」が義務化されることになりました。
税込価格の表記を心掛けましょう。
- 法令遵守
薬機法、景品表示法をはじめとした法令遵守を徹底しましょう。
景品表示法、薬機法、広告表現について詳しく記載されているブログはこちら
クリック効果を上げるコツ
- CTA（Call To Action）ボタンをつける
CTA（Call To Action）ボタンとは、バナーを見たユーザーが次の行動に進むよう促す文言が書かれたボタンのことです。
バナーのサイズにもよりますが、一般的にCTA（Call To Action）ボタンを設置した方がCTR（クリック率）が高くなる傾向があります。
ボタンの文言もバナーの中身に沿った文言（詳細はこちら・予約する・お申込み など）で作成するとより効果的です。
- ベネフィット（ユーザーメリット）を記載する
ユーザーのメリットになることを、分かりやすく目立つように記載しましょう。
- ターゲットを意識する
バナーの訴求内容に明確なターゲットがいるなら、そのターゲットにあった訴求内容を意識しましょう。
ペルソナのイメージをバナーに盛り込むなどの工夫も効果的です。
デザインする時に注意すること
- 文字の強弱をつける
訴求内容に優先順位をつけ、一番伝えたいことを一番目立たせるようにしましょう。文字を詰め込み過ぎたり、抑揚がない文字列だとユーザーに伝わりにくい訴求になってしまいます。
- 解像度が低い画像は使わない
解像度が低い画像や、小さい画像を無理矢理引き延ばした素材は、見た目がよくないだけでなく、会社やサービスのイメージダウンにつながる恐れがあるので避けるようにしましょう。
- コントラストつける
文字と背景色が似たような色にならないよう、コントラストをつけて読みやすいクリエイティブを心掛けましょう。
- FラインZラインの法則を取り入れる
人の視線は上からFやZのラインで流れていくので、バナーもその流れで読めるように、配置順も目立たせたいコピーは左上に配置し最初に読ませ、最終的にサイトに誘導させる右下にCTA（Call To Action）ボタンを配置するなど、視線の流れを意識して作成しましょう。
- 明るいクリエイティブを意識する
取り扱う商品にもよりますが、明るく楽しい雰囲気のクリエイティブを心掛けましょう。
業種別バナーの制作ポイント
ここからは、サービスや商品の業種別にバナーを作成する際のコツと、その各業種のバナーでよく使用されている画像をご紹介していきます。
健康・ダイエット系
コツ：対象者に問いかけるような口調でターゲットを重視した訴求にしましょう。
おすすめ画像：ターゲット層をイメージしやすい画像やイラスト、商品がある場合はパッケージ画像も配置しましょう。
薬機法や景品表示法に抵触する画像を使用すると審査で落ちてしまうこともあるので注意しましょう。
キャンペーン系
コツ：お得な金額やポイントの数字を真ん中にドーンと目立たせましょう。色味は、興奮やスピード感、元気なイメージのある赤や黄色、オレンジなどの暖色系が好ましいです。
おすすめ画像：紙吹雪や放射の背景、コイン山積みなどのにぎやかなイメージがおすすめです。
あくまでお得な情報の訴求なので「金儲け」につながる射幸心をあおるような表現は避けましょう。
B to Bサービス系
コツ：サービス内容をよく理解し、初めての人にもわかりやすい訴求を心掛けましょう。より専門性の高いサービスの場合はクライアントにできるだけキャッチコピーを出してもらうことをおすすめします。
おすすめ画像：訴求したいビジネスがイメージでき、シンプルでコピーにあった画像を選びましょう。サービスによっては、サービスを受けている側のイメージや、サービスのシステム画面などがあると尚よいでしょう。
また、サービスが複数ある場合は分かりやすいアイコンを並べて表現するのもおすすめです。
EC系
コツ：取扱商品によってテイストを分けたり、差別化できるサービス（SALE、送料無料など）があれば掲載しましょう。
- おすすめ画像：一押し商品の写真やサービスやブランドのロゴなどがおすすめです。
金融系
コツ：信頼性が最も重視される業種なので提供元、金利は必ず掲載する。安心感のある落ち着いたデザインを心掛けましょう。株やFX、先物取引など、「儲かる」という表現はNGです。
おすすめ画像：会社ロゴ、クレジットカードの場合はカード素材がおすすめです。
グループ会社が銀行や大手企業であれば信頼性がアップするので、使用可能な範囲であればグループ会社のロゴ使うと尚よいでしょう。
保険系
コツ：信頼性重視の業種なので提供元を明記しましょう。お得な金額があれば目立たせるようにしましょう。
ターゲットによって訴求が大きく異なる業種なので、ターゲットを明確化した訴求を意識しましょう。例えば、若者向けであれば金額訴求、高齢者向けであれば「〇歳まで加入可能！」などの文言を使い分けて作成しましょう。- おすすめ画像：ターゲット層をイメージできる画像がおすすめです。
旅行系
コツ：提供元を明記しましょう。場所や時間、日数とお得感のある金額を訴求するのもおすすめです。あればおすすめツアーの内容なども記載しましょう。
- おすすめ画像：旅行先の引きのある景観画像やターゲットに行ってみたいと思わせる景色の画像などがおすすめです。
不動産系
コツ：場所や駅徒歩〇分、間取りや金額などターゲットが知りたい情報を記載しましょう。
- おすすめ画像：キレイな外観・内装、間取りなどがおすすめです。
無料で使用できるおすすめ画像生成ツール5選
バナー作成に使用できる無料の画像生成ツールをご紹介します。自分で作りたいけど何から始めればよいかわからない、という方は是非参考にしてみてください。
Canva
Canvaは非常に使いやすく、多くの広告用テンプレートが用意されています。特にSNS広告やバナー広告に適しています。無料プランでも高品質なデザインが可能ですが、より高度な機能や素材は有料です。
公式：Canva
Snappa
SnappaもまたWeb広告、特にSNS広告に焦点を当てています。使い勝手がよく、多くのテンプレートと編集オプションがあり初心者にもおすすめです。
公式：Snappa
VistaCreate
VistaCreateはCanvaと非常に似ていますが、Web広告やSNS広告に使える独自の機能とテンプレートが多数あります。C向けの飲食系のショップなどにおすすめです。
公式：VistaCreate
Google Web Designer
Googleが提供するこの無料ツールは、HTML5広告やバナーの作成に特化しています。よりテクニカルな側面もカバーしているため、多少の学習曲線がありますが、非常に強力です。
公式：Google Web Designer
Fotor
Fotorは画像編集だけでなく、広告バナーの作成にも使えるオンラインツールです。多くのテンプレートと編集オプションがあり、初心者でも簡単に使用できます。
公式：Fotor
これらのツールは基本的には無料で使用でき、追加機能やプレミアムテンプレートを使用する場合に有料プランが必要です。用途やスキルレベルに応じて選んで使用してみてください。
まとめ
色々紹介してきましたが、クリックされやすいバナーを作成するコツは、明確に決められたターゲットに対して広告主の訴求ポイントを正しく伝えることです。とは言え、最初からそんなに上手くは出来ないですよね。実際に作成したバナーを掲載してみて、地道にABテストを繰り返していくことがとても重要です。そこからクリックがされやすい傾向、コンバージョンがされやすい傾向など分析することで、また新たなバナーを作成し、数をこなしていく内に、よいバナーを作成できるようになっていきます。恐れずに色々な訴求やデザインのバナーに挑戦していきましょう！
この記事のホワイトペーパーもございますのでぜひご覧ください。
初めてバナーを外部に作成依頼しようとされている方や、バナー作成を検討しているバナーデザイン初心者さん向けに、知っておくと便利なコツやポイントなどをまとめてみました。
筆者紹介
印刷会社、デコメ制作などを経てwebデザインに辿り着き日々広告バナー作成に勤しんでいるデザイナーです。
要望にマッチしたデザインを心がけています。
制作の幅を広げるべく、HTMLやコピーライティングを勉強中。
