バナー制作要件に沿って、バナーを作成してみましょう。 今回はデザイン参考を探して、ラフを組むところまで進めます。
既存のバナーを調査する
参考探しと競合バナーの確認
バナーに限らず、デザインをするときに参考を探すのは重要です。
特に注目したいのは、同じターゲット層を狙っている競合サービス。
どのような配色、配置が多いのか、キャッチコピーの雰囲気は……などなど、競合から学ぶことは沢山あります。良い部分は積極的にアレンジして取り入れましょう。
また、自分の中でパッと「コレが良い！」とデザインが思い浮かんだ場合も、競合調査は必要。一切行っていないと、クライアントに競合と差別化したポイントなど、デザインの理由を説明する際に弱くなってしまいます。 ビジネスのためのデザインは、感性だけではなく“根拠”が必要なのです。
バナー探しにおすすめの５サイト
バナーデザインの調査に役立つ、おすすめのサイトを５つ紹介します。
下記で紹介するサイト意外にも、バナーデザインのアーカイブ、クオリティの高い特集バナーを定期的に入れ替えているサイトは沢山あります。ブックマーク集を作っておくとデザイン調査がしやすいですよ。
BANNER LIBRARY
BANNER LIBRARYさんは更新頻度が高く、クオリティの高いバナーを紹介してくれています。検索機能が充実していて、テイスト、カラー、バナー掲載メディア別など様々な条件で絞り込みをかけることができます。
バナー広場
バナー広場さんも更新頻度が高く、様々な条件で検索できることが出来ます。掲載数は12,000以上と、BANNER LIBRARYの4倍以上。掲載バナー数、カテゴリーの細かさのバランスが良いサイトです。
ただし、掲載数が多い分、BANNER LIBRARYよりも厳選されてはいない印象。
Banner Matome
Banner Matomeは掲載バナー数20,000越えと、バナーデザインキャラリー系サイトの中でもトップクラスの掲載数。更新も頻繁で、とにかくバナーを網羅しているサイトと言えます。
テイストなど細かい条件で検索できない点と、掲載バナーのクオリティ差がピンきりなのが難点。
上記2サイトで良いバナーが見つからなかった時に使うことが多いです。
Pinterestは、Webサイト上にある画像を集めてブックマークできるサービス。自分が保存した画像をまとめてシェアするなどの使い方が主ですが、実は画像検索機能がものすごく優秀。デザインアイディア探しにもよく使われています。
検索に慣れるまでは探しにくいと感じる可能性があること、クオリティのバラつきが激しく玉石混交である点に注意。
Facebook広告集めました。
サイト名通り、Facebookの広告を集めたギャラリーサイト。
バナー（画像）部分だけではなく、Facebook上に表示されるテキスト部分もセットで見ることが出来ます。バナー内に入れたいテキスト、説明文として表示する部分を区分けする参考にもなりますよ。
※こちらの会社さんは“インスタ広告集めました。”というページも作られています。
https://www.instagram.com/insta_adsquare/
参考バナーをピックアップしてみる
バナー作成予定のサービスや商品、イメージが違いテイストのバナーを見つけたら、クリップしていきましょう。EvernoteやWord、Illustratorなど、何を使っても良いので、一覧で見られるようにまとめておきます。
Illustratorのアートボードだと、下図のようになります。
赤線部で囲ったバナーは別業種ですが、クライアントが掲載したがっている内容（テキスト）と構成が近いのでピックアップしてみました。
バナーの定番レイアウトを知る
Webで使用されているほぼ全てのバナーは、３つのレイアウトに大別できます。
ただし、複数のレイアウトパターンを組み合わせたケースもあります。割合としては組み合わせたレイアウトのほうが多いくらいですね。
1.分割レイアウト
文字部分と写真部分をはっきりと分けるレイアウトです。
文字裏に画像が来ないので、可読性が高いことが特徴。
縦分割タイプは使用頻度が高く、色々なバナーで使われています。
横分割はテキスト縦書きもしくは横長バナーと相性が良いですね。
右側の縦書きバナーは、最下部に少しだけ縦分割も組み合わせた３カラム構成です。
テキストが横書きの場合は、スペースが限られるので、文字をはみ出させたようなデザインも多く見かけます。
2.全面イメージ画像
写真やイラストを全面に配置させて、その画像に重ねる形でテキストを配置するレイアウトです。画像が主役になることから、特に食品やコスメなど、販売したい“モノ”を強く押し出したい場面でよく使われます。
全面画像タイプはリンクになっていることが分かりにくいです。このため、リンク誘導部分に背景色を付けて目立たせたり、縦分割と組み合わせたりしたものも多くあります。
縦分割と組み合わせたバナーは、下図のようなもの。
リンクだけではなく目立たせたい内容・注意事項等が入ることもあります。よく見かけるレイアウトではないでしょうか。
全面に画像を使用すると、雰囲気は出やすいものの、テキストの可読性やインパクトが弱くなる傾向があります。左の“あかちゃんフェア”は雰囲気重視ですね。 右二枚は写真の余白（商品以外の部分）を活かす、テキストにシャドウを付ける、目出させたいテキストに背景色を敷くという方法で可読性を高めています。
3.アイテムを並べる
素材写真の数が多い時、沢山のものの中から“選べる”ことを強調したい時には、いくつもの写真を並べたレイアウトが使われます。
よりポップなコラージュ風も
ポップな印象を与えたい場面では、画像を切り抜いて組み合わせたコラージュ風のデザインも使われています。規則正しく素材を並べていくレイアウトよりも、難易度は高め。
余白を生かしたレイアウトも◎
レイアウトを組む時に、余白を大きくとると清潔感や洗練された印象になります。
コピーも際立つので、制作案件の条件・イメージに合う場合は余白を作ってシンプルなレイアウトにしても良いでしょう。
ラフにレイアウトを書いてみる
バナー制作に戻りましょう。
制作条件とクリップした参考バナーを見ながら、まずはラフを書いてみます。頭で考えるだけよりも、実際に絵に起こしてみて気づけることも多いでしょう。
ラフは手書きでも、ペンタブレットを使って書いても良いです。
ポイントは白黒で作成することと、作り込みすぎないこと。
人に見せるものではないので、下の例くらい雑でも大丈夫。
レイアウトを本決定すると言うよりは、頭の中にあるイメージを「目に見える」形にしてみるくらいの気持ちでササッと書いてみましょう。
良さそうなレイアウトは、グラフィックソフト上で作り込んでいけば良いのです。
今回のお題では、クライアントが掲載を希望しているテキストが結構あるので、無難に分割系のレイアウトにしてみました。
クライアントは画像を用意してくれていませんが、人の写真が欲しいですね。
次回はバナーに必要な素材を用意していきます。