スクロールマップ：UXを最適化してコンバージョンを増やす5つの方法

スクロールマップは、ウェブサイトやアプリのスクロール行動を追跡するヒートマップで、ユーザーがウェブページやページ要素とどのようにやり取りしているかを理解するのに役立つ強力なビジュアル分析ツールです。

スクロールマップは、訪問者がWebサイトをどのようにスクロールしているかのデータを素早く収集 します。これにより、ユーザーエクスペリエンス（UX）改善の機会を発見し、適切な変更を加えることで、最終的にコンバージョンの向上につなげる ことができます。

この記事では、スクロールマップとは何か、どのように設定するのか、そしてユーザーエクスペリエンスを向上させる実用的なインサイトを見つけるためにスクロールマップをどのように使用するのか、スクロールマップについて知っておくべきことを紹介します。

スクロールマップとは何ですか？

スクロールマップは ウェブサイトのヒートマップの一種で、デスクトップ、タブレット、モバイルデバイス上でユーザーがページをどこまでスクロールしたかを視覚的に示すものです。スクロールマップでは、ページの最も閲覧されている部分と最も閲覧されていない部分を、暖色（人気）から寒色（不人気）までのカラーグラデーションで表現します。 つまり、赤は、ユーザーが最も閲覧しているページの要素を表し、青は、顧客とのインタラクションが少ない、または全くないことを表します。

スクロールマップの例

スクロールマップは色だけでなく、ページをさらに下に進んだユーザーの割合も知ることができます。平均ファーストビュースコアも表示されるため、スクロールを開始する前にほとんどの訪問者がページのどの部分を見ているかを簡単に視覚化することができます。

スクロールマップとヒートマップの比較

スクロール（左）とクリック（右）のヒートマップの例

ヒートマップは、さまざまな種類の視覚的ウェブ解析データを指す総称です。その中で、スクロールマップ はヒートマップの一種であり、ページ内で最も「見られた」セクションを示すもの です。 スクロールマップでは、「最も閲覧された」部分が暖色で表示されます。一方で、「最もクリック（またはタップ）された」要素 は、別のヒートマップであるクリックマップによって記録されます。

つまり、スクロールマップはウェブサイト、アプリ、プロダクトページのヒートゾーンを上から下へ生成するため、クリックマップやムーブマップのような他のタイプのヒートマップによくある「紙ふぶき」のようなパターンを描くのではなく、垂直の虹のように見えます。

ヒートマップの例をご覧ください。スクロールマップが他のタイプとどのように比較されるかをご確認いただけます。

プロからのアドバイス：Contentsquareでヒートマップを設定すると自動的にすべてのヒートマップタイプ（スクロール、クリック、レイジークリック、移動）のデータを収集します。

すべてのヒートマップデータを「エンゲージメントゾーンマップ」 や 「ゾーニング分析」に統合し、一度に双方とも可視化することも可能です。 この視覚的な分析により、ユーザーが最もインタラクションしているページ要素を素早く特定 できるため、ページのUXを検証し、エンゲージメント向上のために最適化することができます。

スクロールマップの5つの使い方

データパターンとUX最適化の機会を見つけることに関しては、いくらでもクリエイティブになることができます。ここでは、スクロールマップを使用する最も一般的な方法を5つ紹介します。

1.人々の関心を失っている箇所を見つける

スクロールマップは、ユーザーがページのどの辺りまで下降したかを示します：寒色（青）は、ページのそのセクションを見た人が少ないことを意味します。

スクロールマップのカラーグラデーションは、視聴率の高さ（赤）と低さ（青）を示す

例えば、長いランディングページがあり、すべての情報を見てもらいたい場合などです。スクロールマップデータは、どのようにUXデザインやコピーを調整すれば、離脱を減らし、コンバージョン率を上げることができるかを実践的に考えるのに役立ちます。

プロのヒント：スクロールマップと個々のユーザーセッション記録（セッションリプレイ）を組み合わせることで、ユーザーが実際にどのようにページを操作しているかを見ることができます。

ヒートマップで、ページの人気なエリアと不人気なエリアの感覚をつかむことから始めましょう。次に、セッションリプレイを確認して理由 を確認します。

2.フォールドラインを勘違いしている人がいないか確認する。

ページの下のほうにコンテンツがあることに訪問者が気づかないことがあります。これは「偽の底」と呼ばれ、ユーザーを混乱させ、苛立たせるホワイトスペース、改行、ブロックが原因である可能性があります。スクロールマップのパーセンテージを使用すると、ページの「深度テスト」を行い、偽の底をチェックし、特定の要素を通過してスクロールする人の数を確認することができます。

プロのヒント：Contentsquareのレイジクリックマップは、ユーザーが同じ要素を繰り返しクリックする現象 を追跡します。これは、ユーザーが何らかの反応を期待しているにもかかわらず、何も起こらないことでフラストレーションがたまり、最終的にサイトを離脱する要因 となります。 このヒートマップは、ウェブサイトのバグ（ボタンが機能していない、リンクが切れている、ユーザーの混乱を招く要素（クリックできそうに見えるが実際には機能しないデザイン など、ページの高い直帰率の原因を見つけるのに役立ちます。 レイジクリックのパターンを分析し、サイトの問題点を修正することで、ユーザーエクスペリエンスを向上させ、コンバージョン率を高めることができます。

3.ユーザーが平均的なフォールドより上のコンテンツを見るかどうかを発見する

ウェブページの「ファーストビュー」と呼ばれる部分は、ランディング時に大多数の人が目にする部分です。

スクロールマップは、デスクトップユーザーとモバイルユーザーの両方について、ページの平均折りたたみ回数を自動的に計算します。スクロールマップの平均折り返しデータを見ることで、CTAのような重要な要素を複数のデバイスで機能するように折り目の上に配置することができます。

スクロールマップは、スクロールする前に多くのユーザーが見る平均的なファーストビューを示しています。

4.ユーザーが必要なものを見つけられるかどうかを把握する

スクロールマップを活用したページ最適化の目的は、「できるだけ多くのユーザーにページ最下部までスクロールさせること」だと思われがちですが、それは誤解です。 実際には、ユーザーが必要な情報を見つけられずに仕方なくスクロールしている 場合もあります。このような状況では、サイトのナビゲーションや情報配置に問題がある可能性があり、単にスクロール率を上げるのではなく、ユーザーが求めるコンテンツに素早くアクセスできる設計 を目指すことが重要です。

この終わりのないスクロールは何だったのか デビアスContentsquareヒートマップを使ってランディングページを見直したときに気づいたことです。

チームは、ユーザーがカートに追加ボタンを見ておらず、そのためスクロールしているという仮説を立てました。そこで、固定表示されるCTAを追加したところ、コンバージョンが10％増加しました。

プロのヒント：ユーザーの行動についてさらに詳しい情報を得るには ページ内アンケートを設定します。 そして、アンケートツールを使って、今日、探していたものは見つかりましたか？といったような質問をすることで定性的なデータが得られます。このデータは、定量的なヒートマップデータを分析する際に、より深いコンテキストを提供 し、ユーザーの行動をより正確に理解するのに役立ちます。

5.あなたのページがクロスデバイスで優れた体験を提供しているかどうかを知る

ユーザーの行動は デスクトップとモバイルで異なることがあります。 レスポンシブ対応のサイト（デバイスごとに同じページを自動調整するサイト）を最適化する場合、スクロールヒートマップを活用すると、モバイルとデスクトップそれぞれでユーザーがどこでスクロールを止めるのかを確認 できます。 このデータを基に、すべてのデバイスで最適なユーザー体験を提供できるデザインを構築しましょう。

携帯電話のヒートマップ用スクロールデータ

スクロールデータは、ピクセル単位で最適なユーザーエクスペリエンスを設計するための貴重な情報 です。 ヒートマップデータを活用することで、デスクトップとモバイルそれぞれでユーザーの注意を引く最適なCTAの配置場所を正確に特定できます。

プロのアドバイス：一般的に、モバイルに最適化されたページは短くなる傾向がありますが、スクロールマップデータを収集し、ユーザーがモバイルデバイスでどのような行動をとるかを調べることで、オーディエンスに最適なページの長さとデザインを決定することができます。

Contentsquareでスクロールマップを設定する方法

簡単な3ステップでスクロールマップを設定できます：

ステップ1：Contentsquareのトラッキングコードをウェブサイトに追加する。

コンテンツスクエアに登録し、固有のトラッキングコードを取得してください。

次にContentsquareのトラッキングコードをを設置してください。詳しい手順はこちらをご覧ください。

ステップ2：ページのURLを入力する

次に、スクロールマップを作成したいページのURLを追加します。これらの手順は、使用するプランによって若干異なります：

• 👉 無料プランとGrowthプランのヒートマップ説明

• 👉 EnterpriseプランとProプランのヒートマップ説明

EnterpriseプランまたはProプランをご利用の場合は、ゾーニング分析をクリックし、ページまたはページグループを選択してください。

次にスクロールマップを作成したいページのURLを入力し今すぐ分析するを押してください。

ステップ3：スクロールマップを見直す

Contentsquareがサイトデータを収集すると、スクロールマップが表示されます。

スクロールマップを見るには、見たいページに向かって、ヒートマップとスクロールマップをドロップダウンから選択します。

また、ヒートマップをデスクトップ、タブレット、モバイルのセッション表示に切り替えることもできます。

スクロールマップを作成してユーザーをより深く理解する

スクロールマップは、ユーザーがページのどのセクションを読み飛ばしているのか、さらに重要なのは、ユーザーが一度も見ていないコンテンツを特定することができます。

訪問者があなたのサイトとどのようにやり取りしているかを確認したら、セッションリプレイを使って、 なぜ顧客は特定の行動を取ったのかという、行動の裏にある理由を見つけ出しましょう。 こうすることで、本当に喜ばれるユーザー体験を作り上げることができます。