はじめに
みなさん、バナーとはご存知でしょうか。そんなの知ってるよと言われるかもしれませんが、まず初めにバナーの基本的な意味合いにつきまして説明いたします。
― バナーとは
バナーという単語を日本語で訳すと、「旗」や「のぼり」という意味合いです。WEBサイト上で自社のバナーが目立ち、かつ宣伝効果となるようにのぼりをだしている。このような解釈で問題ないです。他社のWEBサイトから自社のWEBサイトに訪れてもらうために、宣伝をしているということです。宣伝ということはもちろん、他社のWEBサイトからクリックを促して自社のWEBサイトに来てもらわなければなりません。
さて、クリックしたくなるバナーとはどんなバナーでしょうか？
今回、バナー作成のコツについて記事にしてみましたのでぜひご覧ください。
バナーの基本的な作り方
― 専用ソフトでつくる
バナーを無料で作成できるCanvaというサイトがあります。初心者でも簡単におしゃれなデザインのバナーを作成することができますので活用してみてください。
また、応用としてPhotoshopで作成することもおすすめします。細かい点も修正できるという点から、Photoshopのほうが理想とするデザインにより近づけることができるでしょう。
― ラフ画を描く
バナーを作ると決めたらまずは、ラフ画ですね。バナーに載せる情報をどんどん洗い出していきましょう。キャッチコピー、キャンペーンやセールの期日、会社ロゴ、写真（メインビジュアル）など、とりあえず全てをざっと書き出してみましょう。サイズはどうするのか、写真は何枚ぐらい重ねるのか、はたまた文字だけで魅せるか。ざっと頭の中にあるイメージをラフに落とし込むことで整理ができ、後々の作業も進めやすいでしょう。
― ターゲットを定める
このバナーのターゲットは誰に向けたものなのか、を考えることが必要です。20代女性向けなのか、子育て中のママたち、はたまた50代女性なのか。女性であれば、「限定」や「特別」などのフレーズについついつられてしまうかもしれません。ターゲットを絞り込むことで、より具体的なデザインを考えることができます。さらに、そのターゲットになりきってみて「どのようなバナーならついついクリックしてしまうかな。」などと考えてみましょう。
※ターゲットが異性ならなりきるのも難しいかもしれないので、身近な人に取材をするのもいいかもしれませんね。
デザイン性
次に、デザイン性について説明いたします。
以下の比較バナーはどちらのほうがユーザー目線で作られているかを考えてみてください。
① SALE デザイン
どちらのほうがクリックしたくなりましたか？
一番の違いは文字の読みやすさですね。 シンプルなデザインですが、重要なセールの部分が読みづらければ意味がありません。 背景の色や写真と照らし合わせて文字のデザインを考えてみましょう。
② 指輪ショップデザイン
どちらのほうがクリックしたくなりましたか？
一番の違いはフォントですね。 ついつい安っぽさを感じてさせてしまっては指輪購入を検討中のターゲット層には刺さりません。 フォントが醸し出すイメージって結構大きなものですね。最初からご自身のPCに搭載されているフォントだけを使用するのではなく、無料フォントもどんどんダウンロードしていき、より良いデザインを追求していきましょう。
③アウトドア品専門店デザイン
どちらのほうがクリックしたくなりましたか？
一見、下のバナーも良いように感じますが、よくよく写真を見てみると背景写真が「本」ですね。なのにアウトドアショップと書いてあります。文字と写真がミスマッチだと、伝えたいことが伝わりません。ロゴや言葉と写真は必ず合っているようにしましょう。
おすすめの参考サイト
筆者おすすめのデザインサイトをご紹介します。どちらも簡単に使用できるので、ぜひ活用してみてください。
― pinterest（ピンタレスト）
お気に入りのデザインがあればピンをつけておくことで、いつでも閲覧することができ、さらに、ピンをつけたテイストと似たデザインが今後表示されるようになっています。つまり常に好みのデザインが表示されるということなんですね。その時々の興味にあわせて表示することができるのでとても便利です。
― dribbble（ドリブル）
アメリカ発祥のデザイナーのためのSNSです。作品の公開をするにはすでに公開をしているデザイナーより招待をされる必要があります。それだけ質のよいデザインが揃っているということになりますね。閲覧は無料なので、見る専門として活用しても、デザインのインスピレーションとなるでしょう。
まとめ
いかがでしたでしょうか？簡単なようで難しいバナー作成ですがポイントをおさえていればユーザーがクリックしてしまうバナーを作成できます。何度もトライしてエラーを繰り返し練習しながら学んでいきましょう！
