スタッフブログ・デザイン

広告バナーの制作方法とデザインのコツ

ありとあらゆるサイトや動画、アプリなどで広告バナーを見かける今、誰しもが身近に広告バナーという存在を感じているでしょう。
そんな広告バナーは、ユーザーの目を止めてクリックを促すために、いろいろな工夫をこらして制作されています。
今回は広告バナーの制作方法とデザインのコツを解説していきます。
弊社では、ひな人形や五月人形の節句商品の販売事業を行っている為、商品の広告バナーを制作する経験が多いです。そちらの経験を踏まえて解説していければと思います。
はじめて広告バナーを制作する方や、悩まれている方は、こちらの記事を参考にしてみてください。

広告バナーの制作方法

1.広告の入稿先の規約を確認

まずは、広告を入稿するサイトによってデザインに制約がありますので事前に確認が必要です。文字のサイズは何px以上、テキストの割合は画像の何%まで、枠線の有無など、入稿先によって様々です。
デザイン以外にも、規約上表示してはいけない情報もあります。折角決めたバナーの内容も、規約違反していたら入稿を受け付けて貰えないので注意しましょう。
バナーのサイズも入稿先によって異なるので、そこも確認しておくことで進めやすくなります。

2.情報の優先度を決める

その後に商品の情報を洗い出していきます。そして、バナーに掲載する情報の優先度を決めましょう。商品名・ブランド名・キャッチコピー・価格など商品にはあらゆる情報がありますが、そちらは決して並列な情報ではありません。売りたい商品の特徴や広告を出す目的が何かを明確にしていれば、自ずと優先度が決まってくるはずです。
機能性を重視する商品なら、その機能性をアピールするためのテキストや画像が優先度として高くなるでしょう。価格が安い事が特徴なら、価格をアピールすることが優先度として高くなります。

3.情報を精査し、簡潔にまとめる

優先度を決めた情報の精査をしていきます。小さなバナーの中で全部の情報を入れることは不可能ですし、ごちゃごちゃしていると優先度の高い情報が伝わらない原因にもなるので、簡潔にまとめることを心がけましょう。
簡潔にまとめることで、明確な目的が出来て、デザインに取り掛かる際も進めやすくなります。
情報を効果的かつ簡潔に伝えるためには何が適しているか、写真か文章かイラストか、商品によっても異なりますのでじっくり考えてみましょう。

4.ラフの制作

優先度と精査した情報を踏まえて、バナーのラフを制作してきます。ひとまずこの段階では、デザインのことは考えず、情報の配置のみで構いません。
優先度が高いものが目立つように配置していき、情報のメリハリをつけながら全体の構図を決めましょう。

文字や画像のサイズでメリハリを付ける

例えば、機能性をアピールするキャッチコピーの優先度を高く設定した場合は、目に止まりやすいように文字のサイズを大きくします。逆に商品名やブランド名は、小さめにします。そうすることで、ユーザーに伝えたいことをパッと見でバナーから読み取ることができます。

バナーのサイズに適した内容量に

バナーのサイズが複数ある場合は、それぞれのサイズに合わせた情報量にしなければなりません。大きいサイズの情報をそのまま小さなバナーに流用しようとすると、バナーが見づらい原因になります。バナーのサイズに適した内容にラフの時点で調整していきましょう。

5.デザインの作り込み

決定したラフを元に、デザインを作り込んでいきます。
ラフの時点で情報のサイズ感はおおよそ決めているので、デザインでは配色や装飾など、さらに手を加えて情報の強弱を意識します。

コントラストを付ける

背景色と文字の色のコントラストを付けることで、ユーザーの目に止まりやすくなります。

色を使いすぎない

華やかに目立たせるために色数を多く使いたいと考えるのは間違いです。色数が多いと伝えたい情報が見えづらくなる原因にもなりますし、まとまりもなくなってしまうので避けましょう。

空間を使って注目させる

以前私のブログで紹介した空間(マージン)の取り方もバナーを見やすくするためには大切なことです。
キャッチコピーの周りにマージンを取ることで、目が止まりやすくなります。

確認はモノクロで

1度モノクロで確認してみると、色のコントラストや文字のサイズ感など、情報の強弱がわかりやすくなり、修正点も見つかりやすくなります。

広告バナーはクリックされることに意味がある

広告バナーはクリックされて役割を果たすものです。完成して終わりではなく、クリックされなければ意味がありません。
もし、クリックされないのであれば、デザインを変えたり、情報の精査をやり直したりなど、効果が出るまで何度もチャレンジすることが大切です。

View Prev 一覧へ戻る View Next

関連記事

KOMARI Member

Category