初めてバナーのデザインを制作するのって大変ですよね。
「どのように作ればよいのか分からない…。」「今、正解とされているバナーって何なんだろう。」っと嫌になることもあるかと思います。
しかし、バナーというものは使用用途に限らずWebサイトにおいてとても重要な要素です。あなたが制作したバナーによってそのWebサイトの利益は大きく変わってくるでしょう。
今回はそんなバナーのデザインについて基本から参考例まで詳しくご紹介しまします。
目次
バナーとは？
バナー（Banner）は、そのまま訳すと「旗」や「横断幕」や「のぼり」という意味があり、Webのバナーも似たようなもの。ホームページ上にある「のぼり」のようなものです。
画像にリンクを貼ることで、クリックするとWebページへ移動する仕組みになっています。
バナーは商品やサービスを写真や文字を使い画像で表現することによって見て簡単に分かりやすく伝え、その画像にリンクを組み込むことにより他のページからその商品やサービスのホームページへと誘導するもののことです。
バナー作成の基本
バナーを作るにあたってデザインはとても重要ですが、基本として押さえておかなければならないのは「画像サイズ」です。
バナーを作る際には様々な場所で利用されます。
その時、予想していたよりも小さかったり、大きかったりすると画質やリンク先へのジャンプ時間などがかかってしまいます。
なので、バナーは何種類かサイズを分けて作成しましょう。
バナーデザイン作成の手順
バナーの作り方ですが、初心者の方は以下の手順に沿って進めていくことをオススメします。
- 伝えたい言葉を2つまで上げる
- 画像を選定する
- クリックを促すボタンを付ける
①伝えたい言葉を2つまで上げる
バナーでは情報量が多いと目を留めてもらいにくくなります。
確かに伝えたい内容は沢山あるとは思いますが、全てを詰め込むと「結局のところは何を伝えたいのか」が伝わらなくなってしまいます。
もちろん、何でも良いというわけではありません。「SALE‼ 80％OFF‼」「〇〇店にて」「営業時間10:00～22:00」などを入れても何のお店なのかも分からなくなってしまうので、バナー作成に慣れるまではバナーを入れる言葉を2つに絞りましょう。
②画像を選定する
画像は自身で撮った写真が一番良いですが、それが無ければフリー画像サイトからダウンロードし、使用しましょう。
オススメのフリー画像サイトはこちらです。
フリー画像サイトは他にもありますが、気を付けなくてはならないのは、その画像に人が映っている場合です。
その場合、基本的には画像に移っている人には肖像権があります。詳細からその人の画像の使用許可が下りているかどうかを確認しましょう。
③クリックを促すボタンを付ける
バナーと言っても見た目はただの画像です。その画像にリンクが組み込まれているかどうかというのは、その画像にカーソルを合わせなければ分かりません
クリックを促すボタンを付けるだけでクリック率は何倍にも変わるのです。
しかし、ただそのボタンに「この画像をクリック！」という言葉を付けるだけだと効果が薄れます。
その時には「（商品やサービスの）効果を実感したい方はクリック！」にするなど工夫をしましょう。
男性にはたまらないかっこいいバナー2選
上手く作られているバナーには男性が自然とタップ（クリック）してしまうような仕組みが組み込まれています。
その中でも男性向けのバナーは女性に比べると本能的な欲望をつつくようなバナが良質であり、反応率が良いとされています。
クライアントのコンテンツによりますが、男性がターゲットのバナー制作の仕事が来た場合には、以下に紹介する要素を入れてみてください。
可愛い女性の写真を使ったバナー
引用元：『ガナバタ』「人物写真フリー素材についにアイドルがやってきた！」https://www.ganabana.net/entry/2014/11/26/183000
一見、研石のバナーとは思えないバナーですね。
上のバナーのように「この商品があれば女性から好印象を得られますよ！」と言わんばかりの画像を入れ込んでいます。
男性がターゲットの商品であれば、異性である可愛らしい女性の写真を使うと良いでしょう。
カッコいい人物の写真を使ったバナー
引用元：『Lancers』「婚活スクールのバナー広告デザイン – chiyochiさんの提案」https://www.lancers.jp/work/proposal/4137456
これは「カッコいい男性でも自分と同じような悩みを持っているんだな」という共感をしているバナーです。
自分の今の悩みに直接当てはまった言葉がバナーに入っていると、そのバナーを見た人は人ごとではなく、目に留めてくれるのです。
女性向けのかわいいバナー2選
女性がターゲットのバナーは男性と比べ本能的な欲望をつついても反応薄なことが多かったりします。
それは「かわいい」などの感情で、論理的にはバナーのコンテンツとは関係の無い感情がトリガーとなってバナーをタップすることがあるのです。
もちろん、ターゲットのニーズを解消してくれることが分かるような表現は必要ですので、ごちゃごちゃしない様にバランスの良いデザインに仕上げなければなりません。
男性がターゲットのバナーと比べて単純ではないことが多いですが、以下に紹介する要素を参考にしてみてください。
ふわふわ系ピンクのバナー
引用元：『NEVERまとめ』「【Webデザイン】可愛い&女性向けバナー広告デザインまとめ」https://matome.naver.jp/odai/2135083216252995701
女性向けのペット用品店のバナーです。
ご覧の通り、犬よりも女性のイラストが大々的に使われています。
ペットの小物を販売するお店だからと言ってぺットのイラストを使うのではなく、ターゲットである女性に向けた素晴らしいバナーです。
理想の状態が映し出されているバナー
引用元：『女性のためのトレーニングジム比較』「ボディメイクプログラムHMBのリアルすぎる6つのレビューとは？」http://womantrainingjim.com/tab-cat4/bodymakeprogramhmb/
自身の理想を画像で分かりやすく表現したバナーです。画像だけ見てもダイエットや筋トレ関連のバナーだと分かるほどです。
バナーで重要なのは「分かりやすさ」。それをしっかり重点に置いたバナーです。
シンプルでおしゃれなバナー3選
上記では「男性向け」と「女性向け」の2種類のパターンを紹介しましたが、クライアントのコンテンツによっては特に性別などでターゲットを分けていない場合があります。
その時には敢えてどちらかが反応しやすいようなデザインに寄せるのではなく、シンプルなバナーにし、必要な情報を「見やすく」デザインしたバナーの方が良いでしょう。
以下ではシンプルなバナー3選を紹介します。
伝えたい内容を確実に伝えているバナー
引用元：『Rakuten LINKSHARE』「リンクシェア アフィリエイト報酬アップ情報」https://www.linkshare.ne.jp/campaign/ls_up/2015/02/dhc0210.html
このバナーには敢えてあまり画像を使うことはせずに配色（色合い）で目が留まるように作られています。
情報量も多くなってしまってはいますが、一番伝えたい「報酬2倍」という文字から「バナーを貼るだけ」という風に誘導されていき、ストレスなくバナーをクリック出来ます。
男女共に目につきサービスのイメージが付きやすいバナー
引用元：『MARKE IT』「バナー広告31選（BtoB向け）」https://www.markeit.jp/blog/btob_banner_ad/
商品やサービスの中には男性や女性でターゲットを分けているものばかりではありません。
その場合は上のバナーのようにその商品・サービスのイメージを尊重して配色することが多くあります。
文字よりも画像で伝えるシンプルなバナー
引用元：『Liberal Life Style』「ブログランキングバナー_シンプルバナー」http://rks-lab.com/?page_id=693
上のバナーを見てください。まず初めに目に留まったのは何でしょう。らく背景の「南国のビー」の画像だと思います。
そして、日本人は「南国のビーチ」＝「お金」と解釈をしがちです。つまり、上のバナーは文字を読まれる前にそのサービス内容を理解させているのです。
また、画像は文字よりも情報量が多いためこのようなことが可能です。
これだけは抑えておきたいバナー参考サイト3選
バナーというものはいわばWebサイト上の「CM」みたいなもので流行りが存在します。
また、今まで受けてきたバナー制作のターゲットとは全く異なるターゲットの仕事を受けることも多々あります。
そんな時にすぐにいくつもの既存バナーを参考にできるサイトを抑えていくことは、デザイナーにとってとても重要です。
今後のバナー制作の能力向上のために以下に紹介する「バナー参考サイト」は抑えておいてください。
いろいろなバナー広告のデザインをながめながらインスピレーションを沸かせてみてほしいサイト。
現在3,024枚のバナーが登録されています。
BANNER LINKS
http://nonamedesign.info/banner/
バナーのサイズなどから検索が可能なので自分が参考にしたいバナーがすぐに見つけることが出来ます。
バナーデザインアーカイブ
全2,129件のバナーが登録されており、色や業種からバナーを選ぶことが出来ます。
バナーの業種の偏りがないので、様々なバナーを探し、参考にすることが出来るでしょう。
まとめ
バナーというものは商品やサービスの売り上げを上げるための大きな入り口です。
その重要度とてつもなく高い。その意識を持ち制作に励んでください。
また、初めて製作する際には参考のためにバナーをいくつも紹介しているサイトを利用しましょう。必ずあなたがバナー制作で悩んでいる部分のヒントがあるはずです。
