loading

バナーリサイズの方法を教えます!今すぐ実践できる4つのポイント

2021年1月4日
バナーリサイズのポイント

 

広告バナーの制作や、サイト内バナーの制作においてリサイズが必要になることってよくありますよね。いざバナーをリサイズしよう!という時にレイアウトに悩んだことのある方も多いのではないでしょうか。レイアウトに悩んでいると時間が取られてしまいますよね。ですがリサイズにはなるべく時間はかけたくないものです。

 

今回は、各サイズに適切な情報量とレイアウトでバナーをパパっと制作するためのポイントを紹介します。見やすくわかりやすいバナーを制作して、CTRを改善しましょう!

 

バナーのリサイズが必要なのはどんなとき?

そもそもバナーのリサイズが必要なのはどんな時でしょうか。それぞれ見ていきましょう。

ディスプレイ広告

ディスプレイ広告ではGDNやYDNなど、媒体ごとに入稿できるバナーサイズが細かく設定されています。そのため、各媒体の入稿規定サイズにリサイズしなくてはいけません。例えばYDNでは600×500のバナーを入稿できますが、GDNではできません。GDNでディスプレイ広告を出稿しようとすると、600×500のバナーをGDNに対応しているサイズにリサイズする必要があります。

 

各媒体の対応サイズについてはこちらの記事で詳しく紹介しているので、是非ご覧ください。

ディスプレイ広告バナーサイズ一覧(2020年最新版)

 

サイト内バナー

サイト内バナーでもリサイズが必要な場合が多くあります。例えばECサイトのトップページに、特集として720×400で大きく表示されるバナーを制作するとします。特集一覧ページ等の下層ページがあるなら、200×160などの小さいサイズにリサイズする必要がありますよね。こういった場合は、伝えるべき内容をできるだけ変えずにバナーをリサイズしなくてはいけません。

 

バナーリサイズがうまくいく4つのポイント!

ここではバナーリサイズを成功させるための4つのポイントを紹介します。この4つのポイントさえ押さえていればほとんどの場合、きれいにリサイズすることができるでしょう。

リサイズ前のバナーはこちらです。サイズは600×500と、YDNで多く使用されるバナーサイズです。

 

 

1. 情報を詰め込みすぎない!

バナーのリサイズで最も重要なことは情報を詰め込みすぎないことです。元のバナーの情報を無理矢理入れてしまうと、ごちゃっとして見にくいバナーになってしまいます。あらかじめ情報に優先順位をつけて、なくても支障がない情報は削りましょう。

 

GOOD

情報が整理されたバナーデザイン

元のバナーから不要だと感じた文言を削除することで、すっきりとわかりやすいバナーになりました。

 

BAD

こちらはリサイズ前のバナーの情報をすべて入れてリサイズしたバナーです。余白が少なくごちゃっとした印象ですよね。どれが重要な情報なのか一目で判断しにくくなってしまっています。

 

2.ユーザーの目線を意識すべし!

人の目線は左上から右下に移動します。横長にリサイズする場合は左上から右下へと順序を意識して情報を並べましょう。縦長の場合は上から下に配置すると良いでしょう。

 

GOOD

ユーザーの目線を意識したバナーデザイン

目線を意識して左上から右下へと読ませたいテキストを配置することで、ユーザーを迷わせません。

 

BAD

このように「さらに!¥3,000割引クーポンプレゼント」という文言を、左に配置してしまうと、違和感がありますよね。前に何の情報もなく「さらに!」といわれてもユーザーは一目で何のことか理解できず混乱してしまう可能性があります。

 

3.ロゴの位置に注意すべし!

基本的にロゴは4隅に置きましょう。ブランドを全面に押し出したい場合は、大きく配置するのも良いでしょう。横長の場合は左右の隅、縦長の場合は上下のいずれかに配置することが望ましいです。

 

GOOD

バナーデザインにおけるロゴの位置

バナーには「クリックしてもらう」こと以外にも、「ブランドやサービスの存在を広く認知してもらう」という役割があります。基本的にはバナーの四隅に控えめに入れることをおすすめしますが、ブランド自体に価値がある場合や、サービス名を知ってもらいたい場合などは、大きく配置するのも一つの方法です。

 

4. レイアウトは思い切って変えるべし!

リサイズする際はできるだけ元のバナーの印象を変えないようにしたいものです。ですが、元のバナーのレイアウトを意識しすぎると、不自然になってしまいます。1~3のポイントを意識してレイアウト変更することで、ほとんどのバナーはきれいにリサイズすることができるので、試してみてください。

 

GOOD

レイアウトを変更したバナーデザイン

元のバナーからレイアウトを大きく変更しました。横長という特性を活かして、情報を横に並べることで見やすいバナーになりました。

 

BAD

元のバナーのレイアウトを意識しすぎると、ちぐはぐなバナーに。バランスも悪く、とても見やすいバナーとは言えません。

 

実際にバナーをリサイズしてみよう!

では先ほどお伝えした4つのポイントを意識してバナーをリサイズしてみましょう。今回リサイズするのは「300×250」の航空会社のバナーです。

 

航空会社のバナーデザイン

 

すっきりとした見やすいバナーですね。リサイズする際は、まず始めにバナーに含まれている情報をすべて書き出しておきましょう。

 

【テキスト】
・バナイチ
・航空券インターネット売上No.1
・24時間いつでも予約可能!!
・最大70%OFF!!

【写真】
・手の写真

 

ではさっそく、このバナーを「120×600」にリサイズしてみましょう。

 

航空会社のリサイズバナー

 

縦長の形を活かしてテキストを配置します。比較的長い文章は縦書きにすると読みやすく、きれいにまとまります。また、ユーザーの目線は上から下へ動きます。そのため縦長の場合、重要な情報はバナーの上部に配置するとよいでしょう。サービスロゴは控えめに最上部に配置することで、訴求内容を邪魔しません。

 

次に「468×60」にリサイズしてみましょう。

 

リサイズしたバナーデザイン

 

思い切って写真を削除してみました。「468×60」サイズで先ほどの手の写真を入れると、写真がかなり小さくなってしまい文字の大きさとのバランスが取りにくくなってしまいます。そういった場合は思い切って要素を減らすことも大切です。

 

要素を減らす際に、どこを削っていいのかわからないと悩む方も多いでしょう。そんな時には、始めに書き出した情報に立ち戻りましょう。

 

【テキスト】
・バナイチ
・航空券インターネット売上No.1
・24時間いつでも予約可能!!
・最大70%OFF!!

【写真】
・手の写真

 

これらの情報の中で、絶対に必要なものは何でしょうか?ディスプレイ広告に必ず必要なのは「主体者情報」です。「主体者情報」とは、一般的には企業名やサービス名、ブランドロゴを指します。その広告が何の広告なのか、誰から出された広告なのかを明記する必要があるのです。ですので、「エアトリ」というサービス名は必ず入れなければならない一つ目の情報です。

 

次に重要な情報は、そのサービスのキャッチコピーです。ですので「航空券インターネット売上No.1」という文言は必ず入れたいですね。

 

そしてユーザーへのメリットも欠かせません。そのバナーをクリックするとどのようなメリットがあるのかが一目でわかる文言が入っていると効果的です。そのため「最大70%OFF」という文言は必須です。

 

他の2つ「24時間いつでも予約可能!!」「手の写真」はあるとわかりやすいですが、レイアウトを考慮すると優先順位は低いと判断しました。

 

リサイズの際は、無理矢理元のバナーに含まれている情報をすべて入れようとせず、どの情報が必要かを見極めることが重要です。今回は、情報を削ってそのサイズに適切な見やすいバナーを制作しましたが、その逆も然りです。大きいサイズにリサイズするときや、余白がどうしても生まれてしまうときは、情報を増やすのも一つの手です。※増やしすぎるとごちゃごちゃして見にくくなってしまうこともあるので注意が必要です。

 

サイズごとに参考バナーが検索できるギャラリーサイトがあるんです!

無数にあるバナーのサイズ。適切にリサイズするには、今回お伝えした4つのポイントの実践はもちろんですが、たくさんの参考バナーを見て引き出しを作っておくことが大切です。

 

参考バナーを探すときに便利なのがバナーデザインのギャラリーサイトです。

 

バナーデザインの参考サイト「バナー広場」では、バナーサイズごとに絞り込み検索ができる機能が付いており非常に便利です。

 

バナー広場のサイトイメージ

 

バナー広場には現在約11,388件のバナーが登録されています。(2020/12/28現在)

 

ジャンルやカテゴリも豊富で、お気に入り機能も付いているのでリサイズの参考に役立つこと間違いなしです!

 

まとめ

いかがでしたでしょうか?

リサイズに時間をかけたくない!リサイズしてもCTRを維持したい・改善したい!という方は、是非4つのポイントを参考にバナーを作成してみてくださいね。

 

ページトップへ