こんにちは、上級ウェブ解析士の宮です。
普段は東京の単品リピート通販会社（D2C）でクリエイティブデザイナーをやっています。
ウェブページのA/Bテストをしていて
「LPO（ランディングページ最適化）の一環としてFV（ファーストビュー）のキャッチコピーや写真のテストをしてるのに、CVRがほとんど変わらないので、どのFVが良いか判断できない……」
または
「せっかく頑張って書いたブログの記事だから、最後まで読んでもらいたい……」
など思ったことはありませんか？
特定の商品やサービスの申し込みを目的としたLP、ブログ記事のどちらにおいても重要なのは「FVでいかに興味をもって続きが読みたくなるか」です。つまり、ユーザーがあなたのページのFVを見た瞬間に、
「このページは私が抱えている課題の解決に役立ちそう」
と思ってもらうのが本来のFVの役割です。
LPにおいて申し込み完了をCVとするなら、そこに至るまでの過程は大きく５つのカテゴリに分類できます。
- ランディングページ到達
- LP内をスクロールしてコンテンツを読む
- フォームページ到達
- フォーム入力
- 申し込み完了ボタンをクリック
FVはこのうち1と2，つまり「ランディングページ到達」から「LP内をスクロールしてコンテンツを読む」過程に大きく影響します。
そこで、FV変更に伴うLPOでは読了率（スクロール量の計測）を意識したA/Bテストをおすすめします。FVからの読了率を上げることができれば、興味関心のあるユーザーをLP内に数多く、また長時間留めることができるので、結果としてCV数も増えます。
主目標のCVRだけを追って見ていると、正確な判断ができるまでCV数も相応数ためる必要があります。特に、スモールスタートした商品やサービスのA/Bテストでは1コンバージョンの差が大きかったりして正確な判断がつきにくいです。その点、読了率（スクロール量）は少ないセッションでもユーザーの興味をどれだけ惹きつけられたか判断できる指標なので、Googleオプティマイズなどの副目標として設定しておくと多角的にA/Bテストの結果が判断できます。
FVイメージを変更しただけでコンテンツ読了率が83％→94％に改善
FVがウェブページの読了率に与える影響はとても大きいです。
私の会社で販売している女性向けプロテインサプリ「しなりずむ」のFVイメージを少し変えただけで読了率（※LP全体の長さの上から10％以上をスクロールしたセッション）がオリジナルと比較して11％以上改善しました。
FVの変更点は画面左下の人物写真（女性の管理栄養士と男性のパーソナルトレーナー）のありなしです。第三者権威として商品に信頼感や安心感を感じてもらうために追加しました。（実際に商品開発の段階で写真のお二人にはご協力頂いております）
この商品は女性向けの健康食品です。
従来の粉末タイプのプロテインを粒状にすることで、持ち運びが便利であったり、水に溶かす必要もないので、気軽にプロテインを摂取できる商品です。キャッチコピーは「新発想！粒のプロテインでジムに行かずに美ボディに！」です。
さて、上の3つのFVにおいて、どのFVが最も読了率が高かったか判断できますか？
▼FVのテスト結果（読了率/スクロール量10％以上）
- オリジナル（人物なし）：83.89％
- パターンB（女性の管理栄養士）：94.78％
- パターンC（男性のトレーナー）：91.56％
結果として、女性の管理栄養士をFV内に配置した「パターンB」が最も反応率が良く、オリジナルから実に11％以上も改善しました。この結果を踏まえて、LP内でも「女性の管理栄養士コンテンツ」を新たに作った方が良いなど、新たな仮説やテスト案を作りLPOを実施していきました。
人もウェブも第一印象は0.2秒で決まる！
人間の第一印象は0.2秒で決まると言われています。
- 元気で楽しそうな人
- 怒っている人
- 悲壮感を漂わせている人
言葉を交わさなくても、その人の目や表情、仕草などあらゆる視覚情報から瞬時に他人を判断します。最初の第一印象というのは、なかなか払拭されません。それ以降も引きずられます。それは対人コミュニケーションに留まらず、ウェブの世界でも同様です。
Googleの検索結果（SERP : サープ）からページ読み込みが完了して表示された最初のページを見た瞬間、そのページを読み進めるかは、無意識レベルで瞬時に判断しています。
- 左上に配置されたロゴのデザイン
- タイトル文の内容
- FVに使われている写真
- 本文のフォントサイズや色
- ページ全体の文字量
- デザインのトンマナや雰囲気
人間は、自分にとって有益なページかどうかを瞬時に複数の要素から判断して、読むか離脱するかを決めます。
「読みたくなるFVはどっち？」A/Bテスト事例で解説
では、実際に私が運用しているブログ記事でのFVのA/Bテスト事例をご紹介します。下のイメージはイタリア旅行に関する記事のFVです。記事の読者ターゲットは「はじめてイタリア旅行に長期連休を利用して行くユーザー」です。イタリア国内を周遊する場合、各都市にどれくらい滞在すればイタリア観光を満喫できるのか？をわかりやすく解説したページです。
下の2つのFV、いったいどちらがより読了率が良かったか想像してみてください。
※両パターンに使用してる写真は全て私が撮影しました。
どちらのFVがより読了率が高かったか判断できますか？結果は……
▼読了率（スクロール量80%以上）
パターンA：53%
パターンB：45%
よってパターンA（フィレンツェの街並みと男女）の勝ちです。この結果から色々な考察ができます。
- Aは情緒的で想像力がかきたてられ、記事に対する期待値があがった？
- Bは写真と文字がゴチャゴチャして何か分からない？
- Bは旅行パンフレットの表紙みたいで商売色が感じられる？ → 格安ツアーなどを売り込まれそうで嫌がられた？
まとめ
CV数が少ないLPでも読了率をみることで、FV改善の成果は計測できます。またA/Bテストで重要なのは、勝ち負けを判断するだけではなく、なぜ勝ったのか？負けたのか？その考察をすることで、次のテストやさらなるLPOへと繋げられます。ぜひFVは妥協せず、よりよいクリエイティブを目指し続けてください。
