ランディングページ

反応率が劇的にアップするランディングページのヘッダーの作り方!

ヘッダーでランディングページの反応率が大きく変わると言っても過言ではありません。

それは何故か?

 

広告業界、ウェブ業界に共通する「3秒ルール」という言葉があります。

「3秒ルール」とは、チラシは手にとって3秒でそのまま読むか、捨てるかを判断することを言います。

 

同じように、ウェブ業界でもウェブサイトにたどり着いて、ヘッダー(ファーストビュー)を閲覧し、3秒でそのまま読み進めるか、ページを閉じるかを判断すると言われています。

 

あなたのランディングページは3秒でどう判断されているでしょうか?

今回は、あなたのランディングページの反応率が上がるヘッダーの作り方のポイントをお話したいと思います。

反応率が上がるヘッダーはこれだ!

はじめに、反応率を上がるポイントを押さえているヘッダーをごらんください。

このヘッダーに反応率が上がるポイントが隠されていますがわかりますか?

特に変わったフォント、レイアウトをしているわけではありません。

 

なぜ反応率がこのヘッダーは上がるのかを1つずつ解説していきます。

ヘッダーの反応率が上がる3つのポイント

ヘッダーの反応率を上げるにはいくつかポイントがあります。

今から話す3つのポイントを押さえておけば、今のヘッダーより劇的に反応率が上がります!

ポイント1:コピーを活かすデザインを目指す

こちらの2枚の画像をごらんください。

【背景黒+文字白】

【背景白+文字黒】

コピーを活かすデザインとして「黒背景に白文字」は、「白背景に黒文字」より読みにくいと言われています。

 

90年以上前にGホームズ氏が研究によると

『黒背景に白文字』→約140cmの距離から読める

『白背景に黒文字』→約168cmの距離から読める

 

また広告研究者であるダニエル・スターチ氏の実験では・・・

 

『黒背景に白文字』→1秒あたり4語読める

『白背景に黒文字』→1秒あたり6語読める

 

との結果が出ました。

 

このことから、余程の理由がない限り『黒背景の白文字』はオススメしません。

常にコピーを活かすデザインをするように心がけましょう。

 

ちなみに『黄色背景に黒文字』が2番目に視認性・可読性が良いと言われています^^

ポイント2:ヘッダーに人物写真を入れる

街を歩いていると多くのポスターが貼られています。

意識してみると、人物が入っているポスターがやたら多くないですか?

<引用>http://www.city-volunteer.metro.tokyo.jp/jp/join/application/

それには理由があります。

人物の写真が入っていると、自然に注目するようになるからです。

 

ランディングページのヘッダーも同様で、人物の写真を入れることで目に留まるようなデザインを作ることができます。

 

ただどんな人物写真でも良いってわけではありません。

ペルソナ』をイメージできる写真や『将来自分はこうなりたい』とイメージできる写真など。。

 

ランディングページと写真がミスマッチにならないように気をつけましょう。

ポイント3:CVボタンは目立たせる

ヘッダー内にはなるべくCVボタンを設置するようにしましょう。
ただCVボタンを入れるからには目立たせるように配置しなくてはいけません。

 

『お問い合わせボタンは赤色の方が購買意欲を掻き立てる』という話を聞いたことありませんか?

 

確かに赤色は『購買色』と言われていて、チラシや値札などに多く使われています。

しかし、CVボタンを赤にすれば全て解決というわけではありません。

例えばヘッダーのメインカラーが赤の場合は、CVボタンを赤にしたところで目立たないですよね。

 

重要なのは配色で他の要素で隠れないように、CVボタン目立たせることです。

 

仮にCVボタンを赤色で使うのであれば、こちらの方が目立ちます。

もちろん赤のボタンが正しいというわけでは無いので、配色にによっては緑、もしくは青かもしれません。

CVボタンは他の要素の配色とと差別化できるような配色で配置しましょう。

 

ちなみにスペースがあればCVボタンに矢印が効果的です。

人間は矢印の方向に目が誘導されやすいですので、1つのテクニックとして取り入れてみましょう。

ヘッダーを見てページを閉じる人は70%以上!

一般的にユーザーがランディングページに訪れて、離脱する(ページを閉じる)確率は70%以上と言われています。

 

冒頭でも話していますがヘッダーを見て魅力的では無い場合、3秒以内で離脱してしまうってことですね。

 

これって結構多いですよね?

そのまま読み進める人は、100人中30人いないってことですよ笑

 

しかも、下にスクロールしていくにあたりユーザーはさらに半分以上減少していくと言われています。

 ・100人→ヘッダーで30人→下にスクロールで15人以下

 

すなわち、コンバージョン率をあげるにはいかにヘッダー(ファーストビュー)部分で離脱させないかが大事だとわかります。

 

逆に言うと、ヘッダーさえ訴求力の高いデザインで作れば、コンバージョン率が劇的にアップする可能性がグッと高まるということです!

 ・100人→ヘッダーで30人→下にスクロールで15人以下

 ・100人→ヘッダーで50人→下にスクロールで25人以下

あなたのランディングページはこんなヘッダーにしていない?

反応率を上げるランディングページという視点から特に注意したのが次の2点です。

・ビジュアル重視のヘッダーになっている

・CVボタンをヘッダー内に配置していない

そのようなヘッダーに当てはまっていたら、すぐに変更することをオススメします。

ビジュアル重視のヘッダーになっている

ヘッダーはヴィジュアル重視のカッコイイヘッダーが必ずしも反応率が上がるわけではありません。

 

こちらのヘッダーをご覧ください。

第一印象はクールでかっこいいデザインですね。

しかし、実際に何を売り出したいのかわかりませんよね?

 

シューズなのか??
ジムなのか??
それとも違うものなのか??

 

第一印象で『何の商品なのか?』『これを使えば自分にはどんなメリットがあるのか?』などすぐに情報がインプットされるようなヘッダーが理想です。

 

ランディングページのヘッダーは、カッコイイに越したことはありませんが、俗に言う『コピーを殺しているデザイン』になっている場合があるのです。

 

ヘッダーはあくまでもコピーを読ませることが一番大事で、ヘッダーのコピーを読みやすく作るのがデザインの役割です。

 

また商品にもよりますが、基本的には商品名よりキャッチコピーを大きくして目立たせる方が良いです。

 

知名度のある商品であれば商品名を大きくしてアピールするのはわかりますが、知名度がない商品を大々的に大きくするより、キャッチコピーなどを大きくして目立たせた方がファーストビューでユーザーに情報が伝わりやすいからです。

 

いま一度自分のランディングページのヘッダーを確認してみましょう。

CVボタンをヘッダー内に配置していない

ヘッダーでユーザーの心を見事にキャッチしたのにも関わらず、肝心の『申し込みボタン』(CVボタン)にたどり着くまで長いと、ユーザーは離脱してしまう可能性があります。

 

特に無料サンプル系、低価格のお試し商品などのランディングページの場合は、ファーストビューにCVボタンは必須です。

 

CVボタンを下の方に配置して、ランディングページを全て読んで申し込みするよりヘッダーにCVボタンを配置した方が反応率は高いです。

なぜなら無料サンプル商品、低価格のお試し商品ならお手軽に申し込むことができるからです。

俗に言う『今すぐ客』ですね。

 

逆に、高額商品などは無理してCVボタンを配置する必要はありません。

高額商品となると、必ず下までスクロールで進み読んだ上で購入するか、しないかを決めるのでスペース的にCVボタンを配置するのが厳しいのであれば、無理して入れなくて良いです。

まとめ

いかがだったでしょうか?

今回の話を実際のランディングページに活かすことができれば、必ず今よりも反応率が上がるでしょう。

コピーを生かすも殺すもデザインに掛かっています。

あくまでもコピーが主役でそれをサポートするのがデザインです。

 

今日のまとめです。

反応率が上げるヘッダーの3つのポイント

【ポイント1】コピーを活かすデザインを目指す

【ポイント2】ヘッダーに人物写真を入れる

【ポイント3】CVボタンは目立たせる

 

決してビジュアル重視ではなく、コピーを読ませるデザインを心がけるようにしましょう。

ABOUT ME
若旅 宏和
若旅 宏和
"Dragon Ash"と"RIZIN"をこよなく愛す群馬県伊勢崎市在住の若旅(わかたび)です。musubuではグラフィック&ウェブデザイン担当。ロゴマークのデザインからランディングページまで幅広く制作します。娘に「かっこいいパパ」と思われるように奮闘中。JAGDA(社団法人日本グラフィックデザイナー協会)会員/ロゴ初心者講座 講師