blog»活用法»LPのファーストビューで◯%以上が離脱していたら黄色信号!すぐに実践できる5つの改善ステップ

blog  image
LPのファーストビューで◯%以上が離脱していたら黄色信号!すぐに実践できる5つの改善ステップ

2021年12月20日

この記事は約11分で読めます。

こんにちは。マーケター兼データアナリストとしてお客様のご支援をしております、渡良優と申します。

先日Ptengine Experienceがバージョンアップされましたね。これにより、効果的なサイト改善がよりスムーズに実行できるようになりました。本記事では、この機能をより使い倒すために、すぐにできてインパクトのあるファーストビューのヒートマップの見方と改善方法をご紹介したいと思います。

▷ 新しくなった「Ptengine Experience 2.0」の詳細はこちら

またこの記事は、「WebサイトやLPにヒートマップを導入したけど、改善につなげられていない」「具体的な改善方法が分からない」といった方を対象にしています。

記事を読み終わる頃には、「ヒートマップを用いたアクセス解析と、それに基づく改善施策の実行」ができるようになっていることでしょう!

それでは、さっそく本題に入ります。


▼ヒートマップとは?

ヒートマップとは、Webサイトにアクセスしたユーザーが「どこまでスクロールしているか」「どこを注視しているか」「どこをクリックしているか」といった情報を、視覚的に分かりやすく分析するための手法のことです。

Google Analyticsなどを利用すれば、ページ内スクロール率やクリック数などを計測することもできますが、複雑な設定が必要なうえに取得できる情報は数字のみなので、なかなか直感的な分析ができない点がネックになりがちです。

これを解決してくれるのがヒートマップです。

ヒートマップを使うと、数字で取得した情報が画像に変換されるので、誰でもかんたんに注目すべき箇所が分かります。

▼ヒートマップで最初に確認すべきは「ファーストビュー」

各ページの最上部に位置するブロックを、ページ内で最初に見られることから「ファーストビュー」と呼びます。


ヒートマップを用いたアクセス解析で最も重要なのは、このファーストビューに関する分析です。

ファーストビューは、実店舗で例えると店頭にあたる部分です。

お見せの看板や店構えを見たときに「気になるな」と思えば入店しますよね。同様に、ファーストビューの役割も、まずは「気になるな」と思ってもらい、その下のコンテンツを読んでもらうことです。

ユーザーは、ファーストビューを見た瞬間に「表示されたコンテンツが自分にとって有益かどうか」を判断し、離脱するか、そのまま読み進めるかを決めます。

つまり、ファーストビューで「有益ではない」と判断されてしまった場合、その下のコンテンツがどれだけ有益であっても、読まれないまま離脱されてしまうことになります。

したがって、何よりもまずは「ファーストビューで離脱されていないか」を確認する必要があります。

▼ファーストビューで◯%以上が離脱していたら改善が必要

それでは、「ファーストビューで離脱されていない」と言える基準について学びましょう。

この基準値は、ユーザーの流入元によっても異なります。

その理由は、流入元によってユーザーの興味関心の強さや対象が変わるためです。

▷ファーストビューのスクロール維持率(100%に続く2本目の線に表示される値)

  • 検索エンジン流入/リスティング/アフィリエイト → 80〜90%
  • リマーケティング広告 → 60〜80%
  • カテゴリ配信広告 → 30〜50%
  • ブロードリーチ広告 → 20~30%

例えば、Facebook広告を配信していて、ファーストビューのスクロール維持率が30%を下回るような場合は、改善が必要だと言えます。

実際に自社サイトのヒートマップを確認し、基準値以下になっていないか確認してみましょう。

また、仮にスクロール維持率が低くても、例えばファーストビューにボタンを設置していて、そこがよくクリックされているような場合には問題がありません。

各ページの目的に応じて、他の指標も組み合わせながら分析ができるとよいでしょう。

▼すぐに実践できる5つの改善ステップ

さて、問題が明らかになったら、次に改善のためのステップを学びましょう。

1から順に試していくことで、どんなページでも確実に改善していくことができます。

①「読み込み速度の遅さ」や「レイアウト崩れ」など、基本的な問題を解消する

どんなに良いコンテンツを用意していても、読み込み速度が遅ければユーザーはそれを見ずに離脱してしまいます。

同様に、レスポンシブ対応ができておらずレイアウトが崩れていれば、ユーザーは閲覧モチベーションを削がれてしまうでしょう。

細かいデザインやコピーライティングを見直す前に、基本的な問題が解消できているかどうかをチェックしてください。


Webサイトの読み込み速度を検証できる「PageSpeed Insights


②流入元に応じたコミュニケーション設計ができているか確認する

例えば、指名検索をして訪れるユーザーと、リスティング広告経由でアクセスするユーザーは、求めているコンテンツがまったく異なります。

指名検索をしているユーザーは既にその商品に強い興味を持っている一方で、リスティング広告をクリックしたユーザーはその商品が課題を解決してくれるかどうかを気にしています。

このような、流入元ごとのユーザーのニーズの違いを正確に理解しないまま改善を実行しても、的外れな施策になりかねません。

まずは、ヒートマップを設定しているページにはどこからどんなユーザーが訪れているのかを正確に把握しましょう。

そして、そのユーザーたちが求めているコンテンツを用意できているのかを改めてチェックしてみましょう。

③誰に向けてのどんな商品・サービスなのかを明記する

ファーストビューなどに配置される、商品・サービスの特徴を言い表したテキストのことを「メインコピー」と呼びます。

ユーザーはこのメインコピーを読み、その商品・サービスが自分にとって必要なのかどうかを判断します。

あなたなら、下記の2つのメインコピーのうち、どちらにより惹かれますか。

「お手頃価格なのに美味しい、満足度の高いクッキー」

「予算2,000円のギフトにぴったり!工場直送の生クッキー」

多くの人は2つ目のコピーを見て「気になるな」と思ったのではないでしょうか。

メインコピーは、いわば商品の自己紹介です。

簡潔で、具体的で、ターゲットが明確なほどに、ユーザーの興味をそそります。

誰に向けた、どんな商品・サービスなのかを、ファーストビューに記載しましょう。

④そのページで達成できることが分かるCTAを設置する

ユーザーがWebサイトを訪れた際に、まず気にするのは「そのページで何ができるのか」ということです。

言い換えれば「そのページで達成できること」を示してあげることで、ユーザーに判断しやすい状況をつくってあげることが重要です。

このような「ユーザーに達成してほしいアクションを喚起する要素」のことを「CTA」と呼びます。CTAは「Call To Action」の略です。

例えば「今すぐ申し込み」「購入する」「問い合わせる」といったテキストが乗ったボタンを見かけたことがあるでしょう。これがCTAです。

このようなCTAがあることで、ユーザーは「このページではこういう目的が達成できるんだ」と意識することができ、それを前提にページを読み進めることができます。

⑤実績・評価・推奨など、第三者のポジティブな意見を掲載する

ユーザーは、商品・サービスの売り手自身のセールストークに対しては常に懐疑的です。

それに対して、第三者による評価・推奨は、強力な信頼性があります。


例えば、下記のような実績があればすぐに掲載しましょう。

・利用者数、購入件数
・受賞、大会での入賞
・ユーザーの口コミ
・著名人や芸能人などの愛用

客観的な情報として、ユーザーの安心と信頼につながります。

▼でも、サイトの改修には時間がかかる…ならPtengine Experience 2.0!

ここまでご紹介したサイト改善のステップについて、「理解はしたけど、自分でWebサイトを編集するのは難しいので、なかなか実践できない…」という方も多いでしょう。

そんな方にオススメしたいのが、Ptengineの新ツール「Ptengine Experience 2.0」です。

PtengineExperience 2.0

Ptengine Experienceは エンジニアやデザイナーでなくとも「サイト編集」「Web接客」などの基本的な施策から、「A/Bテスト」「パーソナライゼーション」といった高度な改善まで、ノーコードでかんたんに実施できる、Webサイト担当者のためのツール。

そして、「2.0」バージョンでは、従来の機能に加えレポーティング機能が大幅に進化。

1分でサイト改善を実行し、最短1日で改善の成果が出るような、高速PDCAを実現します。

Ptengine Experience 2.0を使えば、先にご紹介した「すぐに実践できる5つの改善ステップ」のうち、ほとんどの改善施策がかんたんに実現できます。

①流入元に応じてページの内容を変更したり、ポップアップを出し分ける

Ptengine Experience 2.0では、流入元でユーザーをセグメント分けして施策を実行できます。

これにより、異なるニーズや課題を持つユーザーに対して、それぞれ適切なコミュニケーションを実現することが可能です。


例えば、リスティング広告の出稿キーワードごとにファーストビューのキャッチコピーを出し分けることができます。また、指名検索経由でアクセスしたユーザーだけにポップアップを出す、なんてことも。

ターゲットごとに細かい最適化ができるので、CVRの大幅な向上が見込めます。

②デザイナーやエンジニアに頼らず、自分でサイトをサクッと編集

Ptengine Experience 2.0を使えば、サイトの開発環境にアクセスしてソースコードを編集しなくても、サイトの改修を行うことができます。


Ptengine Experience 2.0の利用に必要なのは、数行のタグを設置する作業だけ。

デザイナーやエンジニアでなくとも、かんたんにWebサイトを修正・改善可能に。

キャッチコピーやバナー、画像の差し替えが必要になったとき、いつもデザイナーやエンジニアに頼んで、時間をかけて変更してもらっていませんか?

Ptengine Experience 2.0を導入することで、そういった手間が一切不要になります。

③メインコピーやCTAなど、重要な要素の有効性をABテストで検証

Ptengine Experience 2.0を利用することで、サイトを修正・改善するだけでなく、その有効性をABテストで検証することもできます。

ABテストの実行・検証に専門的な知識は必要ありません。数クリックでABテストを実行でき、Ptengine Experience 2.0から実装されたレポーティング機能により、誰にでも分かりやすいテスト結果が表示されます。

特にメインコピーやCTAなど、CVRに強く影響する要素のABテストを行うことで、短期的に大きな売上の増加に貢献することができるでしょう。

▼今ならPtengine Experience 2.0が初月99%OFF

今なら、この「2.0」バージョンのリリースに伴い、最大規模のキャンペーンを実施中。2021年末までのご契約で、月間プランが初月99%OFFでご利用いただけます。

同時に、有料プランを制限なしで無料でご利用いただけるフリートライアルもご用意しておりますので、ぜひこの機会に試してみてくださいね。

Ptengine Experience 2.0の詳細を確認する

いかがでしたでしょうか?ぜひシェアをお願いいたします。