ファーストビューとは？CVアップに効果的なデザインのコツ5つ 市川莉緒 2021.06.30 2022/11/11 CROUI/UXWEBデザイン実例 CVR改善UIWEBデザインサイト改善ヒートマップ ファーストビューとは？ ファーストビューの改善に有効な5つの方法 ファーストビューとは？ ファーストビューとは、WEBサイトなどの最初に目に入る領域を指します。 ファーストビューという呼称は和製英語であり、英語圏ではこの領域のことを「折り目の上」を意味する “above the fold” （アバブ・ザ・フォールド）と呼びます。ファーストビューはユーザーがそのWEBサイトに滞在するかどうかに大きく影響を与える部分であり、WEBサイト制作や運用の際に特に重要になります。 アイキャッチ（メインビジュアル／キービジュアル）はファーストビューと混同されることもありますが、画像などの視覚的なコンテンツを指し、ファーストビュー内のひとつの要素です。 Webサイトの構築や改善の際はファーストビューの内容次第でCVR（コンバージョン率）やUX（ユーザーエクスペリエンス）が分かれると言っても過言ではありません。 ではどのようなファーストビューが効果的なのでしょうか？ ファーストビューの改善に有効な5つの方法 以降、具体的なファーストビューの改善方法５つと成功事例を解説していきます。 ① アイキャッチはコンテンツの内容に合わせる（メディア記事） ② 過剰な宣伝は控える（メディア記事） ③ サービスの利用価値を端的に訴える（LP、サービスサイト） ④ 訴える内容は少なくする～ファーストビューのカルーセルは非推奨～ ⑤ ページスピードを改善する ① アイキャッチはコンテンツの内容に合わせる（メディア記事） 特にメディアにおいてアイキャッチはコンテンツの内容と合わせることが大切です。 自然検索で情報収集するユーザーはタイトルで記事に興味を持ち、「自分の悩みを解決できるのでは？」と期待感をもって流入します。そのため、ファーストビューの内容から別の印象を抱いたり、期待感が削がれたりすると、「このページは思っていたのと違う」「欲しい情報や内容が書かれていなさそう」と瞬時に判断され、直帰につながります。 例えば女性向けの記事には女性の写真を使用しましょう。 アイキャッチをコンテンツの内容に合わせて変更しただけで、1週間でCVR（コンバージョンレート）を258%改善した成功事例もあります。 【事例】アイキャッチの変更によりCVRを258%改善 この記事では、「LP」という検索数の多いキーワードで1位に表示され、PV数がブログ内で最も多いにもかかわらず、CVRが著しく低いという課題がありました。 そこで、ページ内のユーザー行動を可視化できるヒートマップで原因を分析したところ、冒頭での離脱が多く起こっていました。 対策として、アイキャッチを内容に関連性のあるシンプルなものに変更した結果、この記事からのCVRが258%もアップし、さらには平均ページ滞在時間も約1分半増加しました。 ユーザーが記事を読み進めるかどうかを判断するのに、アイキャッチが重要な材料であると言えます。アイキャッチがコンテンツの内容と一致しているか、無料のヒートマップを使うことで簡単に分かりますので、今一度確認してみましょう。 無料のヒートマップを使う 【参考】メディア記事のファーストビュー例 メディア記事のファーストビューにはアイキャッチ以外にもメニューなどが存在します。一般的な構成要素を併せて覚えましょう。 サービスサイトや別の記事に遷移してもらえるよう、ハンバーガーメニューやグローバルナビゲーションも分かりやすく設置しましょう。 ② 過剰な宣伝は控える（メディア記事） 広告として出しているLPを除き、記事の内容と関連性がない過剰な宣伝は控えましょう。内容と関連性がないと、離脱に繋がったり、ユーザーの不信感に繋がります。 ファーストビューで内容と関連性が低い宣伝がある記事と、宣伝がない記事の離脱率を検証した例があります。 【検証】ファーストビュー内の宣伝は、離脱を大きく左右する？ 同じブログ内のコンテンツでも、広告が入ったサイドバーがあるかないかで、ページ冒頭箇所での離脱率に違いがあるのでしょうか。スクロールヒートマップを用いて、1位に表示している2つのページを比較検証しました。 結論、宣伝がない記事の方が、冒頭での離脱率が低いことがわかりました。 冒頭での離脱率が高い左の記事のファーストビューは、「無料トライアル中」の宣伝バナーが目立っています。離脱率を高める原因のひとつとして、内容と関連性の低い宣伝をファーストビューに置くことはユーザーの意図ズレを引き起こすのではという仮説が考えられます。 また、こちらの仮説の検証結果について、こちらでご紹介しています。実際にCV（コンバージョン）が2倍になり、大きなインパクトに繋がりました。 宣伝や広告を挟む場合は、なるべくファーストビューは避け、ページ後半や離脱幅が安定しているエリアを選ぶことをおすすめします。 ファーストビューで離脱が発生していないか確認するためには、無料のヒートマップがオススメです。是非使ってみてください。 無料のヒートマップを使う ③ サービスの利用価値を端的に訴える（LP、サービスサイト） ファーストビューではサービスの利用価値を端的に訴求しましょう。 LPやサービスサイトなど、商品・サービスの販売や、宣伝を目的としたページでは、流入直後にいかに素早く興味や注目を引けるかが重要です。訴求文が長く、内容にまとまりがないとサービスの魅力が伝わらず、離脱に繋がってしまいます。 ファーストビューからの直帰を防ぎ、ページを読み進めたりすぐに問い合わせをしてもらうためには、端的に「その商品・サービスを利用することによってユーザーが得られるメリット」を訴求することが求められます。 ファーストビューでサービスメリットを端的に訴求することで、CVRを4%向上させた成功事例もあります。 【事例】サービスメリットを訴えることでCVRが4%向上 変更前のコピー文は感情に訴えかけるような内容でしたが、そこから画像内①のように、端的でメリットが明快なコピー文に変更しました。 同時に画像内の②のようにお問い合わせにかかる時間を明記し、ユーザーの心理的な負担を軽減しました。この結果、ファーストビューからのCVRが4%も上昇しました。 ファーストビューは、ページに流入したユーザーがはじめに目にする領域のため、ユーザーが得られるサービスのメリットを直感的に、分かりやすく訴求しましょう。 【参考】LPのファーストビュー例 LPではファーストビューとCTA（購入等を促すボタン）が主な構成要素です。 ファーストビューで興味を引いた後、すぐに購入などのコンバージョンに進んでもらえるようにCTAも忘れずに配置しましょう。CTAやCVボタンの効果的なデザインはこちらの記事で紹介しています。 【参考】サービスサイトのファーストビュー例 サービスのメリットを伝えるアイキャッチやコピー文を大きく入れることがよくあります。また、お問合せや購入に直結する場合にはCTAも入れます。 ページ流入後、どこに遷移してもらいたいかを基準に構成しましょう。 ④ 訴える内容は絞る～ファーストビューのカルーセルは非推奨～ ファーストビューのカルーセルはユーザーにクリックする箇所を迷わせてしまう場合があります。 カルーセルとは1画角に複数の画像やバナーをスライドして表示させるものです。カルーセルを設置すると、複数の内容をまとめて表示できるので一見メリットが大きそうですが、意外なデメリットがあります。 ファーストビューに設置したカルーセル内項目のクリック率をまとめた実験データを2つ紹介します。 【事例①】 アメリカのノートルダム大学が行った実験によると、ページ訪問者（3,755,297）のうち、冒頭にあるカルーセル内のいずれかの項目がクリックされた割合はわずか1.07%と低いものでした。 さらにそのうち「項目①（最初に表示される項目）」のクリック率が約90%を占め、「項目②」以降はほぼクリックされていないことがわかりました。 【事例②】 弊社が2021年4月に取得したあるページのクリックデータでは、2,871あるPV数のうち、カルーセル内ひとつ目の項目のクリック数がわずか13という結果が出ました。 ファーストビュー内のトップコンテンツにもかかわらず、 クリック数はPV数・総クリック数の1%にも満たず、 さらにはファーストビューよりも下のリンクよりもクリック率が大きく下回る結果になりました。 さらに、カルーセル内最後の項目（9個目の項目）に至ってはクリック数が0という結果も明らかになりました。 こちらの詳しいクリックデータは、ミエルカヒートマップを使えば面倒な設定をすることなく計測できます。各リンクのクリック数を計測したい方は是非使ってみてください。 無料のヒートマップを使う ファーストビューのカルーセルがクリックされない原因と対策 ファーストビューのカルーセル内項目のクリック率が低い原因に、以下が挙げられます。 ・ファーストビューに情報が多いと何のサイトなのか伝わりにくくなる ・導線が多いとユーザーはクリックすべき箇所を迷ってしまう ・最初からじっくりサイトを読む（眺める）ユーザーは少ない ・ユーザーに「興味がない情報だ」と判断されて読み飛ばされる 「思うようにページ遷移が起こらない」「CTAが押されない」「離脱が起こる」といった悩みに繋がりかねません。 ファーストビューには以下の軸を元に訴求内容を絞り、端的に入れましょう。 ファーストビューに入れるべき内容 ・何ができるサービスなのか ・サービスの強み ・利用することで得られるメリット ・ユーザーの興味がある情報 ⑤ ページスピードを改善する 画像の容量は小さくし、ページの読み込みスピードを改善しましょう。ページ流入後、内容の読み込みが遅く表示に時間がかかれば、直帰や離脱につながります。 Googleの2017年の調査によると、ページの読み込みスピードが4秒遅れるだけで直帰率が90％上昇することが明らかになりました。出典：Think With Google 画像の容量を小さくするには無料の圧縮ツールの利用がおすすめです。特にアイキャッチや画像の容量サイズは小さくしましょう。 まとめ ファーストビューの定義、CVRをあげるために必要なテクニックと成功事例を紹介しました。 また、ファーストビューを改善するためには、ページ内のユーザー行動を可視化できるヒートマップの活用がおすすめです。現状分析を行い仮説を立て、ABテストなどで検証することで効果的に改善を進められます。 ミエルカヒートマップは、無料から始められるので是非この機会に活用してみてはいかがでしょうか。 無料のヒートマップを使う 編集者情報 市川莉緒 大阪大学卒。新卒でFaber Companyに入社後、 300近くの会社のヒートマップ分析に従事。 現在はミエルカヒートマップのマーケティングを担当。 大学時代1年休学し1人で世界を放浪。 グレートバリアリーフでのダイビングが最高の思い出。 監修者情報 玉飼 真一 この記事をシェアする
