女性の画像

視線をキャッチ!人目を引くバナーをデザインするコツまとめ


バナーはデザインによって2倍以上もクリック数に差が出ることをご存知ですか。

コンバージョンが高いバナーを作ってほしい!
クリック率の高いものをお願い!
そんな要望にこたえるため、日々頭を悩ませているデザイナーの皆様に向けて、
人目を引くバナーデザインのコツをまとめてみました。

【デザインする前に】

Landscape

http://nos.twnsnd.co/

 

バナーの目的を確認する

バナー制作には大きく2つの目的があります。
1つ目は、バナーをクリックされることにより『集客アップ』を図る目的です。
2つ目は、ユーザーにバナーを見てもらい、『認知度をアップ』させる目的があります。
似ているようですが、1つ目は次のアクションへ誘導するものであり、二つ目はそれ自体で訴えかけるといった違いがあります。
その目的にあわせて、バナーデザインの手法を変えていきます。

 

ターゲットを明確化する

ウェブ上のどういう人がターゲットなのか明確にします。
そして、どのような訴求でターゲットとなる人をサイトへ誘導し、
どのようなフローで説得するのかストーリーを組み立てます。

 

ターゲットを綿密に捉え、興味の喚起をどう訴求して促すか明確にし、バナー制作を行っていきまます。

 

バナー掲載場所の特徴を理解する

「バナーの掲載先サイト」や「掲載場所」によっても、
そのデザインや訴求方法を変えます。
例えば、ポータルサイトなどでバナー広告を出稿する場合、目的が集客数アップです。

 

掲載場所がページのトップ、もしくはページの中間、下部に掲載するのかでも、制作デザインやバナー制作の手法を変えます。

 

また、掲載先サイトに派手なバナーが多いのであれば、
あえてシンプルでおとなしめなデザインや、ペールトーンの背景などを使い、
「信頼・安心」の持てるバナーを掲載するなど、掲載先サイトにの特徴を考慮してデザインします。

 

【バナーを制作してみよう】

d91dbdf0d0c72185faca41b4ed90cfdb_m

 

画像出典:photoAC

 

クリック率の高い背景色を使う

クリック率の高かった背景色上位3位は以下の通りです。

 

1位 イエロー
2位 ピンク
3位 グリーン

 

濃すぎず、明るくしっかりした印象の色味がクリック率が高いようです。
こちらは掲載サイトの背景色と、被写体のバランスを考えることがポイントです。

ポイントとなるカラーは全体に統一感がある方が認識されやすいため、
写真はそのまま置くよりも使いたい部分を切り抜いて、
ポイントとなるカラーの面積を多くとると色の効果が高く出ます。

 

要素にあわせてレイアウトを考える

縦・横分割レイアウト

横割りレイアウト 縦割りレイアウト

半分はビジュアルイメージに、半分はテキストやロゴなどを入れるスペースに使っているデザインです。
くっきり分かれるのでメリハリがついて見やすいレイアウトです。

 

全面ビジュアルレイアウト

イメージ全面レイアウト

イラストや写真などをバナー全体に使うレイアウトです。

ビジュアルを大きくすることによってインパクトの高いバナーですが、
背景によってテキストや文言を入れるのが難しい場合があります。

 

イメージを並べるレイアウト

イメージを並べるレイアウト

商品やモデルさんなど横並び・縦並びに並べることによって、
商品の品ぞろえの豊富さや、賑やかさを表現することができます。

雑誌やカタログを見ているような楽しいレイアウトです。

 

イメージを敷き詰めたレイアウト

イメージ敷き詰めレイアウト

イメージを並べるレイアウトとは違い、イメージをたくさん使い、背景に敷き詰めるレイアウトです。

アーティスティックな感じを与えます。全面ビジュアルレイアウトと違い、背景として利用するので、文字の配置などは比較的自由に配置しやすいです。

 

斜めにする

斜めレイアウト

斜めのレイアウトは躍動感があり、スピード感やかっこよさを表現します。

 

余白を持たせる

余白レイアウト

スッキリと余白を空け、対称を引き立てるレイアウトです。
清潔感やインパクトを出しやすくなります。

手書きのラフを書く

手書きのラフを描くと、制作に入った時に迷う時間がぐっと減ります。
手描きを描く時間が惜しく、すぐにPCでデザインを行いたくなりますが、
この初めの仕込み作業をが十分にできておらずイメージが曖昧だと後々まで響くので、
ここの工程は手を抜かずじっくりと行いましょう。

ビジュアルは一目でわかるもを

輪郭があやふやなものや、複雑なパーツは認識されにくいため、
シンプルなものを利用することが認識力UPにつながります。

 

コンテンツを読んでいるユーザーに目の端でバナーを認識させるために一番効果的なのは、「顔のアップ」です。
人でも動物でもキャラクターでも、ひきより正面アップの方がインパクトがあり、
また表情も悲しい表情より、嬉しい楽しい笑顔の表情のほうが認識されやすいようです。

 

コピーはシンプルがベスト

コピーを考えるときの三原則は、

「シンプル」「わかりやすい」「読みやすい」です。
要点を一目で理解できて、こころにグサッ!とささるコピーを考えます。

 

・サービス・商品名

・安さ、簡単さ、希少性を表現
今だけ980円!!、限定100個!など。

・ランキング、具体的な数字を入れる
3分でできる!、99%の人が効果あり。など。

・コンプレックスの刺激
ブツブツ毛穴、もう悩まない!

・方法・法則・秘訣 などの誘惑ワード
ネット料金を半分にする秘訣・・・

・呼びかける
その抜け毛、大丈夫?

普段からCMや広告などのキャッチコピーを意識的に見て、
アイディアの引き出しを広げることも必要です。

 

モノクロでレイアウトする

最初からフルカラーでデザインしてしまうと、配色とデザインで悩んだときに
後々余分な作業時間をとってしまいます。
まずはモノクロでレイアウトを組み、その後色をつけていきます。
作業工程が多く面倒に感じますが、段階を踏んでいくことで作業効率アップにつながります。

要素を3~4カ所のグループでまとめる

限られた枠内にたくさんの要素をいれると、
結局何が言いたいのか要点がわかりにくくなってしまいます。
あれもこれも入れてほしい!といった要望にこたえなくてはならない場合には、
要素をグ3~4つのグループにわけ、グループごとに優先順位を決めます。
優先順位の高いグループから目立たせてデザインすることで、
情報のボリュームの多いバナーでもわかりやすくまとめることができます。

 

文字組とジャンプ率で訴求力UP

字間のバランスを整えることで、読みやすさと視認性が高まります。
illustratorのカーニング・トラッキング・文字詰め機能をつかって、
文字組を調整することを忘れずに。

 

また、バナーの雰囲気にあわせて適切なジャンプ率をつけ、メリハリをつけます。
ジャンプ率が高いレイアウトは、勢いや力強さをアピールし、
印象としてははつらつとしたイメージを伝えることができます。
反対に、ジャンプ率が低いレイアウトは、落ち着いた印象を与えます。
オーソドックスな明朝体でさらに品の良さも感じられます。
文字にメリハリをつけるのとつけないのとでは、与える印象が随分かわってきます。

 

太いふち効果

教科書や参考書のページを開いたときに、ふと目に入る太いふちで囲まれたところは、
内容は読まなくとも自然と重要項目と理解しますよね。
バナーにおいても太いふちで囲むことにより、目を引きやすくなります。

 

また、シンプルなデザインや掲載先の背景色と似ている場合でも、
ふちをつけることでバナーをはっきり差別できるようになります。

 

詳細はコチラボタンはやっぱり大事

以前は必須要素だった「詳細はこちら」のボタン。
最近はユーザーがバナー慣れしているためか、あまり見なくなったのですが、
バナー制作において次のアクション喚起のためには、
やはりこのボタンがある方クリック率UPするようです。

 

出来あがったら、もう一度モノクロにしてチェック

完成!と思ったら、最後にもう一度全体をモノクロにして、視認性のチェックをします。
モノクロにしてみて文字が沈んでいないか、訴えたいことは何かぱっと見て伝わるか?
最終確認を行います。
モノクロにして見にくい文字は、カラーにしても視認性が低くなりますので、
忘れずしっかりと確認しましょう。

 

参考バナーに注意

クライアントの好みのデザインを見すぎてしまうと、意識が偏ってしてしまい、
どうしても参考バナーやワイヤーフレームと類似したものをデザインしがちになってしまいます。
必要な文言や画像などの要素のみ押さえ、デザインに関しては頭の隅に入れておく程度に。

 

【まとめ】

今回ご紹介した人目を引くバナーをデザインするコツはいかがだったでしょうか。
小さな枠で一瞬で心をつかむバナー制作。
デザイナーに求められるものは多く、デザイン力はもちろん、
分析力やトレンドをつかむ能力が必要です。
目的と要点をしっかり押さえて、高品質なバナーを制作できるよう参考にしてください。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


Next ArticleIllustratorであとからでも変形・修正できる斜体のテキストを作る方法