新人デザイナー必見 ！ 伝わるバナーを素早く作るコツ

一見簡単に作れそうに見えるかもしれないバナーですが、いざ制作に取りかかると思ったより時間がかかってしまうなんてこともあると思います。
画像や訴求ワードをしっくりくるように配置するだけでも一苦労だけど、時間は限られている。
それでも良いものを出したい！　そんなお悩みに少しでも役立つような、バナー制作のコツをいくつかご紹介していきたいと思います。

効果的なバナーとは

バナーは、ただ自分の好みだけを優先してデザインすれば良いという訳ではありません。
可愛いものやオシャレなもの、凝ったものが必ずしも多くのユーザーに響くということはありません。効果的なバナーはユーザーにとって見やすく、わかりやすいものである必要があります。
そして、色んなものが混在しているページの中でユーザーの目を引き、興味を持たせることができるデザインであれば、そのバナーはとても良い効果を発揮できるはずです。

長い時間をかけても意味がない？

デザインは、長い時間をかければかけるほど良いものが出来上がるとは限りません。
むしろ、短い時間で質が良いものをつくることが出来れば、周りの人にも自分にも、良いことがたくさんあります。
効果的なバナーがどのようなものかを意識した上でそのコツを知って制作していけば、長い時間をかけて試行錯誤したり、つくり直したりすることが減るでしょう。

ぐちゃぐちゃレイアウトはもうやめよう

まず、この2つのバナーを見比べたいと思います。

1は特にユーザー目線を意識せず作成したバナーです。
2はユーザー目線のポイントを考えながら作成されたバナーです。

一目で違う点は多くありますが、これからレイアウトで迷わないために、作成時のポイントを抑えていきたいと思います。

ユーザー目線になってみる！

バナー制作に限らずですが、ユーザーからの見え方を考慮しながら制作することはとても重要です。
自分目線でどんなものが良いか考えてもレイアウトに迷ってしまい、迷宮入りしてしまいます。

そのようなときは、「このバナーをみるターゲットはどんな人なのか」「どんな風になっていたら読みやすいのか」「この情報は本当に必要か？」など、ユーザー目線で考えることで、どうデザインするべきか、頭の中が整理できます。

1のバナーを参考に、ポイントを見ていきます。

1. 特別インパクトのある部分がなく、視線が引き寄せられづらい
2. 優先順位が低い要素が、一番初めに目に入る
3. バランスが悪い

ユーザーは、左から右へ、上から下へ視線を移動させるため、興味を持たせるような文言を左上に配置すると良いです。
そして、不自然な余白や、過剰に詰まっているところがあると、ユーザーに見づらいという感覚を与えてしまうかもしれません。バランスが整ったバナーは見やすく、情報が伝わりやすいです。

このように、ユーザーからの見え方を頭に置いてレイアウトを組むことで、より効果的なバナーが制作できます。

レイアウトの参考サイト3選

バナー制作のポイントを意識しながら制作しても、レイアウトに迷ってしまったり、アイディアが欲しい時があると思います。そのような時に役立つバナーレイアウトの参考になるサイトを3つご紹介します。

http://banner.keizine.net/
banner design archive
サイズ・色・業種などから選ぶことができるので、自分が制作するバナーの参考になりそうなものを見つけやすいと思います。

https://retrobanner.net/
retro banner
こちらのサイトも、サイズ・色・ジャンルなどから選ぶことが出来ます。数もたくさんあるので、日頃から様々なバナーのデザインを見て引き出しを増やしておくと良いと思います。

http://bannermatome.com/
Banner Matome
こちらのサイトは、色・業種からバナーを探すことが出来ます。バナー制作のコツやサイズについても書かれているので、新人デザイナーにはとても役立つサイトだと思います。

効果的な色って？

レイアウトに引き続き、配色にもコツがあります。ユーザーの目につきやすい色や、クリックされやすい色、年代によって好まれる色、持たせたいイメージに合った色など、その時々で相応しい色を選ぶことが重要です。

統計を参考にする

色にはそれぞれ特有のイメージや、心理的効果があります。
バナーの目的によって、適切なイメージの配色をする必要があります。

例えば、「赤色」は、視界に入ってきやすく、印象が強い色です。そして食欲増進効果がある色なので、飲食関連にも適している色です。

「青色」は、集中力や冷静さ、爽やかさなどのイメージがあります。また、誠実なイメージも強いため、学習関連や信頼を得たいイメージなどにも適しています。

「緑色」は、癒しや落ち着き、安全などのイメージがあります。
その他の色にもそれぞれイメージがあり、これらはユーザー目線を考慮した際にはとても役立つはずです。ぜひ、色のイメージを頭に入れておくと良いでしょう。

次に、バナー内にあるボタンについてです。
『詳しくはこちら』などのボタンには押されやすい色がテストされた統計があります。
「緑色」のボタンはクリックされやすくなり、「赤色」のボタンは購買意欲が上がります。

もちろん、統計ばかりを意識して気持ち悪い組み合わせの配色になってしまっては良くないので、色相環なども意識して配色を調整しましょう。

素敵な配色サイト3選

統計だけでなく、視覚的に気持ちの良い色の組み合わせを見つけることも重要です。作業中に迷ってしまった時にすぐ配色の参考が見つかるように、ここでは素敵な配色サイトを３つご紹介します。

https://colorhunt.co/
Color Hunt
綺麗な配色がたくさん並んでいて、とても参考になります。

https://flatuicolors.com/
FlatUIColors
色をクリックすると、そのままカラーコードがコピーできるので便利です。

http://webcolourdata.com/
WebColorsData
気になるサイトのURLを入れるとサイトの配色がわかります。

まとめ

より良いバナーを作り上げるために、自分の好みや感覚を指針にして制作を続けることも大事ですが、それだけになってはいけません。ユーザーの目線に立ってみたり統計を知って、様々な角度から制作のポイントを見直し続けることも大事なことです。

入社したての今、上司に与えてもらったタスクを素早く、そして高い質でこなせば、新たなタスクがもらえてどんどん成長していけるはずです。
期待以上のものを、期待以上の早さで制作するために、日々様々な情報を自分でピックアップして、最良のコツを掴んでいってください。