読者です 読者をやめる 読者になる 読者になる

Life is bitter

日常生活で考えたことやデザイン・写真・インテリアをはじめとした役に立ちそうな知識をまとめて記しています。

バナーやアイキャッチ制作時に参考にしているサイト6選と心得

f:id:life-is-bitter:20161008121311j:plain

WEBサイトを眺めていると最近ではまず見ないことはありえないバナーやアイキャッチ画像。

私自身、デザインバイト時代に自社サイトのためのバナーやリマーケティング広告のためのバナーであったり、フリーランスで活動をはじめてからもこんなバナーお願いしますと依頼されたりでかれこれ500個以上はバナーのデザインをしてきました。お蔵入りしたボツ案も含めると750個以上は堅いでしょうか。

このブログでもデザインの筋トレというか準備運動的な意味を込めてアイキャッチ画像は作っているのですが、バナーやアイキャッチって制作すればするほど意外と奥が深いなと感じます。

担当者から「ちょっと要素多いんですけどこれ全部入れて下さい!」とサイズに対して無茶苦茶な量の内容を盛り込めるよう試行錯誤したり、クリック率を上げるためにはド派手なこの色が一番だけどデザインのトーンと合わないしどうしようかなと悩んだり、自信のあるデザインだったものが全然コンバージョンに結びつかなくてA/Bテストしまくったり…。

などなどあげればキリがないのですが、良いバナーやアイキャッチを作るということは一見簡単そうに見えて、その裏ではデザイナーの苦悩や努力がいろいろあるのです。

今回は私がバナーやアイキャッチを制作するときに参考にしているサイトと制作する上で心がけていること、知っておくべきことを主にバナー制作初心者向けにまとめてみました。

バナーやアイキャッチ制作時に参考になるサイト

1. Retrobanner

f:id:life-is-bitter:20161008123552p:plain

http://retrobanner.net/

最新のバナーが揃っています。頻繁に更新されているのが助かりますね。また、サイズや業種で絞込みできるのもGOOD。

2. バナーデザインアーカイブ

f:id:life-is-bitter:20161008123848p:plain

http://banner.keizine.net/

Retrobannerと同じく業種やサイズで絞りこめるのが助かるサイト。とりあえず1と2を見とけば何かしら得るものはあります。

3. バナーデザインまとめ。

f:id:life-is-bitter:20161008124111p:plain

http://bannermatome.com/

掲載しているバナーの数が圧倒的です。競合他社のものを調査するときなどお世話になっています。

4. Pinterest

f:id:life-is-bitter:20161008124353p:plain

https://jp.pinterest.com/

上であげたような純粋なバナーは少ないのですが、Pinterestはデザインのクオリティが高いものが多くあります。デザイン性重視ならばまずはこちらで調査。「デザイン バナー」とでも検索すると良いでしょう。

5. マイフェイバリット関西

f:id:life-is-bitter:20161008124505p:plain

http://www.my-fav.jp/feature/

マイフェイバリット関西さんのサイトはアイキャッチのクオリティが抜群に良いです。ディレクションしている人、制作しているデザイナーは誰なんだろう…。個人的に非常に好きなテイストなので気になりまくっています。

6. 旬香周島おきなわ

f:id:life-is-bitter:20161008124625p:plain

http://cp.okinawastory.jp/top/tokushu/

こちらのサイトもなかなかにクオリティが高いです。洗練されすぎず、親しみやすいところがとても参考になります。 

制作する上で知っておくべきこと

私が今までバナーやアイキャッチを数多く制作してきて、クオリティを上げていくために心がけたことがいくつかあります。

1. 良いと思った他のバナーのどこが良かったのか分析する

デザインの力を上げていく上でこれは欠かせません。上であげたような参考サイトを見ていて「あ、このバナーのデザイン良いな」と思ったらどこがどうよかったのかを必ず分析しましょう。

デザインはアートとは違うので感性だけで行うものではありません。そして、いいものには必ず理由があり、デザイナーは制作したものがどうしてその最終アウトプットになったかを説明できなければなりません。バナーの分析はそうした力をつけるためにも非常に有用です。

どう分析していくかといいますと私の場合、

・多色使いだけど全体のバランスがいい→彩度が揃ってるからか…今度カラーチャートで確認してみよう
・文字のバランスがいいな→ベタ打ちじゃなくて助詞はちゃんと小さくしたり細かく調整してるなあ
・タイポだけなのにすごくクオリティ高い→このフォント使ってるからか…今度買おうかな
・要素めちゃくちゃ多いのにまとまってる→こういう配置のしかたもあるのか、試してみよう
・洗練されてて高級感がある→こういう形のあしらいを足せば高級感が出るのね

などなど、なんとなくいいなと参考にしてなんとなくマネしてみるのではなく、具体的にどう良かったのかをノートに書き出すなどしてみましょう。自分のデザインの引き出しがどんどん増えていきます。

2. 目的によってバナーのデザインは大きく変わる

一口にバナーやアイキャッチと言っても、それらがどういった目的で使われるのかによって全くデザインは異なってきます。

クリック率やコンバーションファーストな考え方が第一であるリマーケティング広告(リターゲティング広告)のバナーでは、美しくバナーをデザインしてもクリックがされないなら全く意味がないため、思わずクリックさせてしまうようなエグいデザインのものが多いです。目立ちまくる下品な赤色を使ったり、クリック率をあげるためにボタンをつけたり…。個人的にはこのクリック率・CV至上主義なバナーは嫌いですが…。

一方でブランディングのためのバナーやアイキャッチは、世界観を伝えるもののためですからリマケバナーのようなものでは大体NGが出てしまうものです。つまるところ、ひとつ同じものを扱っても広告のためかブランディングのためかでバナーの作り方は全然違うということです。バナーを制作する際は無駄なリテイクをしないために必ずその目的を確認しておきましょう。

3. 色違いやサイズ違いのバリエーションを用意する

心がけていることのひとつとして、私は必ず色違いやサイズ違いのものを用意してバリエーションを用意しています。

最終的にGOするデザインはひとつかと思うのですが、WEBの場合大体の会社ではA/Bテストをしてどういうバナーがいいか検証しますよね。というかA/Bテストをする予定はない、と言いつつなんだかんだで「やっぱりするから色違いのバリエーションお願いします!」という事案が多い…。

そのバリエーションのためにまた新たに時間を取られるのは結構無駄ですので、あらかじめ作っておくことをおすすめします。

4. できれば使用する写真素材のディレクションもする

バナーを制作していて一番絶望するときが、もらった写真素材がクソあまり良いものでないとき。

「こんな素材で一体何が作れるんじゃ!」と心の中では思うのですが、「それを何とかするのもデザイナーとしての資質が試されるところ!」とも思い複雑なところ。しかし、もしも使用する写真に関してこれから撮影しますよ、あるいはこれからフォトストックなどで買いますよ、ということでしたら是非こんな写真にしてくれとお願いしてみましょう。

「いい感じの素材がもらえたけどこれ文字要素を置くところ無くない…?」という場面がしばしばあり、もし可能ならその後デザインすることも考慮した写真撮影ができたら非常に良いですね。まあ、そこまでいくとデザイナーというよりディレクターの権限までいっちゃうか。

最後に

いかがでしたでしょうか。バナーデザインだけにとどまらず、その他のビジュアルをデザインしていく上でも有用な心得であると思っています。参考になれば。