もう迷わない!クリック率アップの効果的なバナーの作り方!

こんにちは。PIXTAスタッフのhairiです。

デザイナーが作成する頻度が非常に高い、バナー。
サイト作っても、アプリ作っても、なに作っても、
バナー制作は必ずといっていいほどついてきます。。。

コンバージョンが高いの作って!クリック率高いのつくって!と
怒濤の中にいるみなさま向けに、バナー制作の3原則をまとめました。


色は効果あるの?

title_color

以前ボタンの色は「緑色」が効果が高いともちきりでしたが。。
バナー全体の色味はどうでしょうか??
結論から言います。目立つ色は緑色に限らず、押されやすいです。

[クリック率の高かった上位3カラー]

  • 黄色バナー
  • ピンクバナー
  • 緑バナー
弊社でもいろいろなテストをしましたが、
一番効果が高かったのは少し抑えめの黄色のバナーでした。(続いてピンク、黄緑など)
つまり。。

色の原則:
そこまで濃すぎず、明るくしっかりしている色味(パントーンのやや濃い目くらい)が
クリック率が高い!


こちらは掲載サイトの背景色との兼ね合いもあるので、
なるべくどんな背景でもきちんと目にはいる色を選ぶ、というのがポイントです。
もちろん、色は被写体とのバランスも考えてください。

ポイントカラーよりは全体が統一された色味であるほうが、
より目に認識されやすくなります。
写真をそのまま置くよりも、切り抜いて背景色を統一にした方が色効果は高いです。



メインビジュアルはどうすればいいの?

title_v

細かくいろんな要素があると、なんだかよくわからないし、
テキストも目立たなくなってしまいがちです。

ビジュアルの原則:
王道は、それがなんであるか、一目でわかり認識しやすいものを選ぶこと!


輪郭があやふやなものや、複雑なパーツよりもシンプルなもののほうが認識されやすいです。
被写体を何にするかはプロモーションするものによりますが、
どんなものが一般的に一番人の目を引くことができるのでしょうか?

それは、ずばり顔のアップです。
動物でも人でも同じです。引きよりアップのほうが効果は高いです。
実際のバナーでも37.5%クリック率があがりました。
また横向きや斜めよりも正面の方が、よりインパクトがでます。
顔認識カメラを思い出してください。ちょっと角度が変わったりすると、
認識してくれなかったりしますよね?
バナーを見る人はあれと同じです。
読みたいコンテンツの目の端にちらっとうつるレベルでしかないのです。
顔だよ!めっちゃ見てるよ感をだして存在感をアピールしましょう!

[PIXTAバナーで反応のよかった画像]


コピーはどう書けばいいの?

title_t

デザイナーを悩ませるコピー。。うちにライターがいれば!と思われる方も少なくないはず。
そんなときは注意したいのはこれ!

コピーの原則:
シンプルにわかりやすく!!読みやすい文字で!


じっくり読んでささる内容があればちょっと文章は長くても、、という話もありますが、
テスト結果では、「要点」をズバリ、大きな文字で訴える!ことが非常に有効でした。
弊社の場合では、「写真素材」これです。
すごいシンプル感。シンプルすぎる。。でもこの言葉がないと何屋だかわからないですよね?
テキストはコンバージョン(商品購入などサイト上で獲得できる最終的な成果)に
深く繋がってくる部分です。
コピーの違いでなんとコンバージョン率は13%近く差がでました!Σ (゚Д゚;)

[コピー比較]
text
何のバナーなのか、まず目にしてもらうことが一番だと思います。
アピールポイントを集約した、ぐっと刺さるコピー制作に力を入れましょう!
考えるときはこんなところを意識するとよいと思います。

・何の商品/サービスなのかを伝える

・それを使う/経験することでこんな体験ができるよ!とアピールする
 例えば:エステのバナー「-8cmやせる体験

・ターゲットに潜在している「○○したい!」欲求、「○○したいのに」不満を刺激する
 例えば:転職会社のバナー「うわっ・・・私の年収、低すぎ・・・?」 →有名なアレです。

「方法」「法則」「秘訣」なども誘引ワードとして最近流行ですね。
「○○する方法とは」のように最後まで言い切らないで続きを読ませるパターンもあります。

・ギャップでねらう [挑戦企画系]
 ビジュアルとの合わせ技ですが、ギャップで目を釘付けにするのも有効です。
 例えば:転職サイトのバナー「ちくしょう 転職だ!

ギャップのインパクトはすごい効果です!ついつい引き込まれてしまいます。
そんなインパクトの強いバナー素材を作りたい方はこちらをチェックしてみてください!

インパクトがあるバナー用素材100選


いかがでしたでしょうか。基礎的なところですが、ぜひ効果的なバナー制作の参考にしてみてください。

» この記事に使用されている素材一覧

( この記事のTOP画像に使用した素材No.8289679Sergey Nivens