スクロール解析を使ってファーストビューを本気でABテストしよう | SiTest (サイテスト) ブログ

メニューボタン閉じるボタン

スクロール解析を使ってファーストビューを本気でABテストしよう

ウェブサイトでもっとも重要な部分は何だと思いますか?
 
読みたくなるような面白い文章、惹きつけられる魅力的なデザイン、欲しい情報がどこにあるか分かりやすい構成。
言うまでもなく全て重要ですよね。
でも、例えこれら全てを兼ね備えているウェブサイトであったとしても、商品やサービスの購入率が低いことがあります。
 
その原因は、「ファーストビュー」にあります。

スポンサーリンク

 
SiTest ファーストビュー
 
「ファーストビュー」とは、ウェブページを表示した際にスクロールせずに最初に表示される領域のことです。
もう少し分かりやすくお伝えすると、ウェブページでユーザーが最初に見る部分ですね。
 
今回はこのファーストビューの重要性と、そこから購入率の改善につなげるテクニックをご紹介していきます。
 
 

ファーストビューはなぜ重要なのか?

 

ファーストビューの役割

 
ファーストビューはウェブサイトの「入り口」にあたります。
お店でもそうですが、「入り口」が汚かったり何かよく分からなければ入ることをためらってしまいますよね。
 
entrance
 
ウェブサイトでは、ファーストビューで離脱されてしまうとその後どれだけ良いコンテンツを用意していてもまったく意味がありません。
ファーストビューでどれだけ多くのユーザーに対して「下にスクロールしてみよう」と思わせられるかで、ウェブサイトの成約率は大きく変わってくるのです。
 
 

ファーストビューで離脱されると悲惨なことに

 
SiTest では、スクロール解析でファーストビューの注目度と離脱率を調べることができます。
まずはあなたのウェブサイトの状況を一度確認してみましょう。
 
スクロール解析
 
ただし、「ファーストビューが赤くなっているから大丈夫かな」と考えるのは危険です。
そもそもファーストビューは訪れた全てのユーザーが見るため、赤くなっているのが普通だからです。
開いたまま長時間放置することもありますので、赤くなっているからといって注目されているわけではありません。
 
むしろファーストビューの場合は注目度よりも離脱率の方が重要です。
 
離脱率
 
その下に一体どれだけのユーザーがスクロールしているのか。
その割合で、ウェブページの命運が別れると言っても過言ではありません。
 
 
仮にあなたのウェブサイトのトップページに5,000人のユーザーがアクセスしたとします。
この時ファーストビューで50%が離脱してしまうと、もう既に2,500人しか購入する可能性がなくなってしまいます。
 
ユーザーの離脱
 
広告などでお金をかけてせっかく集客してきたユーザーが、1スクロールもせずに離脱してしまうのは本当にもったいないです。
1人集めるために100円かけているなら、先ほどの例の場合だと100円×2,500人=250,000円も無駄にしています。
 
もちろんファーストビューを見て下にスクロールをしたからといって、必ずしも購入につながるわけではありません。
しかし、そもそも購入する可能性が0になってしまうようなファーストビューでは、やはり売上に確実に影響してきます。
 
少しでも多くのユーザーを獲得したいなら、売上を伸ばしたいなら、ファーストビューはこだわって作りましょう。
 
 

ファーストビューでスクロールさせる3つのポイント

 
ファーストビューの重要性に気づいていただけましたでしょうか?
それではどのようなファーストビューであればユーザーがスクロールするか、そのポイントをご紹介していきます。
 

1.キャッチコピーで惹きつけろ!

 
ウェブサイトの制作や管理に携わっている方なら誰しもがわかっていることですが、キャッチコピーは何より大切です。
と言っても、今回は「うまいキャッチコピー」の書き方をお伝えするのではなく、どうキャッチコピーで惹きつけるかをお伝えします。
 
ユーザーが最初に見る場所は、基本的に最初に目に飛び込んでくる場所です。
そのため、フォントサイズやフォントカラー、文字の長さ、配置されている場所などが関わってきます。

サブキャッチなど伝えたい度合いが下がるものと比較して、一番目立つように設計し、配置しておきましょう。
 
キャッチコピー
 
また、そのウェブページに訪れるユーザーが何を求めているか?ということも考えるべき重要なファクターです。
どういうキーワードで検索してくるのか、あるいはどの広告・バナーをクリックしてくるのかを考慮して、その認識とのズレをなくすことで、ユーザーのスクロールする割合は変わってきます。

一方的な自己満足メッセージではなく、ユーザーの目線に立って考えてみてくださいね。
 
 

2.メインビジュアルでイメージさせろ!

 
キャッチコピーが重要だとお伝えしましたが、力加減を誤ってしまうと逆に離脱してしまうこともあります。
詰め込みたい情報を全部文字で載せても、ユーザーは全部読んでくれるわけではありません。

そこで活用していただきたいのが、メインビジュアルです。
 
メインビジュアルにどんな画像を使うかは、特に視覚的に伝えられるというメリットを考慮して考えると効果的です。
例えば化粧品ならそれを使って肌が綺麗になっているイメージの女性を使うのは定番ですよね。
あなたが取り扱っている商品やサービスを購入した後どうなるのか、ということをイメージさせられればユーザーは興味を持ちやすくなります。
 
メインビジュアル
 
また、信頼度を高めることも1つの方法です。
知名度のある企業やブランドでない場合、ユーザーはあなたの商品やサービスを知らないことがほとんどです。

そういったユーザーに対して、信頼できるデータ(「Yahoo! ショッピングカテゴリランキング1位!」など)や有名人・有名企業の使用事例などを視覚的に見せられると、ユーザーは安心感を持ってウェブページを見てくれるようになります。
 
 

3.表示領域に気をつけろ!

 
ファーストビューでもう1つ気をつけていただきたいのが表示される領域の大きさです。
PCの画面解像度の主流は「1366px×768px」と「1920px×1080px」と言われていますが、ユーザーによってまちまちなので一概にこのサイズが良い、というものはありません。
 
表示領域
参考:StatCounter GoalStats (2014年8月 日本のデータ)
 
 
ただ、あまりに大きく作りすぎてしまうと肝心の中身が分からずスクロールされないまま離脱されてしまいます。
 
特に高さは768pxが主流の1つになっているため、できるだけ上部に重要な内容を持ってきましょう。
ブラウザのサイズを縮めて見るユーザーも多いので、高さは500~550pxが妥当なラインです。
スマートフォンの場合も利用している機種によって異なりますが、300~350pxを目安にするとよいでしょう。
 
 

ABテストを駆使してファーストビューを最適化しよう

 

スクロールするかどうかはユーザー次第

ファーストビュー設計のポイントをご紹介してきましたが、そうは言っても簡単に離脱率が減るわけではありません。
あなた自身が「これならきっと見てくれるだろう」と思っていても、実際にファーストビューからスクロールするかどうかはユーザーが決めることです。

実際「え、こんなキャッチコピーが一番反応いいの?」といったことも起こります。
 
そのため、ファーストビューの最適化にはABテストが欠かせないのです。
 
ABテスト
 
 

こんなウェブサイトもやってるファーストビューのABテスト

 

Case1.クックパッドのABテスト

 
クックパッドといえば月間のべ利用者数が5,000万人を超える料理レシピの投稿・検索サイトです。
クックパッドでは、「プレミアムサービス」のスマートフォン向け登録ページでキャッチコピーのABテストを実践していました。
 
cookpad
参考:http://blog.marketing.itmedia.co.jp/kurosu/entry/635.html
 
 
クックパッドではまずメルマガで複数のキャッチコピーをテストして、クリック率の高かったものをウェブサイトにも反映させました。
ABテストのサイクルを効率よく回しながら、現在ではプレミアムサービスの会員を140万人にまで増やしています。
 
 

Case2.大統領選挙キャンペーンでのABテスト

 
割りと有名な話ですが、2008年の大統領選挙戦でオバマ大統領はメールアドレス登録ページのABテストを実施しました。
メインビジュアルを6種類用意し、他にも登録ボタンを4種類用意してテストを行っています。
 
大統領選挙
参考:http://skillhub.jp/blogs/86
 
 
メインビジュアルでは家族との写真がもっともよい結果を出し、最終的なコンバージョン率も40.6%改善されました。
 
ちなみにオバマ大統領は2012年の再選時にもファーストビューのテストを行っています。
献金ページでもABテストをしており、まさに事例の宝庫ですね。
 
 

スクロール解析→ABテストでファーストビューを改善

 
今回はファーストビューについてお伝えしましたが、「ファーストビューが大事なんだ」と思うだけでは何も変わりません。
 
まずはあなたのウェブサイトのファーストビューがどう見られているか、どれくらい離脱されているかを把握しましょう。
そして、キャッチコピーやメインビジュアル、ボタンなどをABテストして、ユーザーが逃げずにスクロールするようなファーストビューを作りましょう。
 
売上を伸ばすためには、まずファーストビューを改善。
そのためにスクロール解析とABテストをうまく活用していきましょう。
 
 
次回はファーストビューも含めて、 SiTest を活用したABテストの事例をお伝えします。

「ABテストで始める成約率改善への道」はこちらからどうぞ。

今回の記事と合わせてご覧いただき、あなたのウェブサイトを最適化して売上アップにつなげてくださいね。