ヒートマップとは？種類・見方・改善仮説の立て方・活用場面

監修: 菊地 将（リブランディング株式会社）

「アクセスはあるのに、どこを直せば成果につながるのか分からない」。そのようなときに役立つのが、Webページ上のユーザー行動を色で可視化するヒートマップです。クリック、スクロール、注目されている範囲を見ることで、ボタンが押されていない、重要情報まで到達していない、想定外の場所に関心が集まっているといった状態を把握できます。ただし、色が赤い・青いという事実だけで改善策を決めるのは危険です。ヒートマップは「問題の原因を断定する道具」ではなく、「改善仮説を作るための観察データ」として使い、GA4などの定量データやページの目的と組み合わせることが重要です。

Webヒートマップはページ内のユーザー行動を色で可視化する

Webサイト分析で使うヒートマップは、ページ内で発生したクリック、スクロール、滞在・注目などの行動データを、色の濃淡で見やすくしたものです。

Microsoft Clarityでは、ユーザーのクリックやスクロールなどを集計し、クリックマップ、スクロールマップ、エリアマップ、コンバージョンマップ、アテンションマップとして表示できます。ミエルカヒートマップでも、クリック位置、離脱・スクロール、熟読エリアなどを確認できます。

ここで扱うのは、Webページ上の行動を分析するためのヒートマップです。地図上で店舗の順位を色分けするMEO順位ヒートマップとは目的もデータも異なります。

ヒートマップの強みは、「ページ全体の数値」だけでは見えにくいページ内の偏りを見つけやすいことです。たとえばCVRが低いページでも、原因候補は複数あります。

• CTAまで到達していない
• CTAは見られているがクリックされていない
• 本文よりも補足リンクにクリックが集中している
• 重要な説明より前でスクロールが止まっている
• クリックできない要素がクリックされている

ヒートマップを使うと、このような「どの場所で何が起きているか」を確認し、次に検証すべき仮説を絞り込めます。

最初に見るべきヒートマップは3種類

実務では、まずクリック、スクロール、アテンションの3種類を押さえると分析しやすくなります。ツールによって名称や計測方法は異なるため、実際に利用するサービスの仕様も確認してください。

ヒートマップは、同じページを「押された場所」「到達した範囲」「注目された箇所」の3方向から見ると整理しやすくなります。

クリックヒートマップは「押された場所」と「押されない場所」を見る

クリックヒートマップでは、リンクやボタンだけでなく、ユーザーが実際にどこを押したかを確認します。Clarityのクリックマップでは、通常のクリックに加えて、反応のない場所を押した「Dead clicks」や、短時間に同じ場所を繰り返し押す「Rage clicks」なども確認できます。

見るべきなのはクリック数の多さだけではありません。ページの目的に対して、期待する場所がクリックされているかが重要です。

たとえば問い合わせ獲得が目的のページなら、次のように読みます。

• CTAが十分表示されているのにクリックが少ない
• CTAよりも別ページへのリンクにクリックが集まっている
• 画像や見出しなど、本来クリックできない場所が繰り返し押されている

この場合、「CTAの色を変える」とすぐ決めるのではなく、CTAの文言、直前の説明、ページ内の競合導線、クリックできそうに見えるUIなど複数の原因候補を出します。

スクロールヒートマップは「重要情報まで届いているか」を見る

スクロールヒートマップは、ページのどこまでユーザーが到達しているかを見るために使います。Clarityでは、ページの各位置まで到達したユーザーの割合や、スクロール前に見える平均的な範囲であるAverage foldを確認できます。

重要なのは、単純に「最後まで読まれているか」ではありません。ページの目的を達成するために必要な情報へ、必要なユーザーが到達しているかを見ます。

たとえばサービスページで、料金、導入事例、CTAがページ後半にあり、その前で到達率が大きく落ちているなら、次の仮説が考えられます。

• 前半の説明が長すぎる
• 読者が知りたい情報の順番とページ構成がずれている
• 途中で「自分には関係ない」と判断されている
• CTAや比較材料をもっと早く提示した方がよい

スクロールの低下自体は異常とは限りません。検索ユーザーが必要な答えを前半で得て離脱している場合もあるため、コンバージョンや次ページ遷移と合わせて判断します。

アテンションヒートマップは「関心が集まる箇所」を見る

アテンションヒートマップは、ページ内のどの範囲に閲覧時間や注目が集まっているかを見るために使います。ClarityのAttention mapsは、ページ各部にユーザーが費やした時間を表示します。

注目が集まっている場所は、「良いコンテンツ」とは限りません。理解しにくくて長く止まっている場合もあるためです。反対に、短時間で要点を理解できる表は、滞在時間が短くても役割を果たしている可能性があります。

そのため、次のように「ページ上の役割」とセットで確認します。

• 比較表に注目が集まる → 比較軸が意思決定に役立っているか
• 料金説明に注目が集まる → 不明点や条件不足がないか
• FAQに注目が集まる → 本文で説明不足の論点がないか
• CTA直前の説明が読まれている → クリック率やCVRも上がっているか

ヒートマップは「異常→原因候補→検証」の順で読む

ヒートマップ分析で最も重要なのは、色を見てその場で修正案を決めないことです。まず観察した事実と、その理由についての仮説を分けます。

ヒートマップで見えた現象と、その原因についての仮説は分けて考えます。改善は他データで確認してから行います。

おすすめは、次の5段階です。

1. ページの目的を決める
2. 期待するユーザー行動を決める
3. ヒートマップ上の差を見つける
4. 原因候補を複数出す
5. 他データで確認して改善案を決める

たとえば「料金表の直前でスクロール到達率が下がる」という事実があったとします。

この時点で分かるのは、「その位置まで来るユーザーが減っている」ということです。「料金が高いから離脱した」とはまだ言えません。料金表自体を見ていないユーザーも含まれるためです。

原因候補としては、次のように分解できます。

• 料金表より前の説明が長い
• 前段の情報で検討対象外と判断された
• ページ内リンクで別ページへ移動した
• モバイルでレイアウトが崩れている
• 必要な情報がすでに前半にあり、自然に閲覧を終了した

このように、ヒートマップは原因そのものではなく、原因を探す入口として使います。

GA4などの定量データと組み合わせると改善優先度を決めやすい

ヒートマップ単体では、「そのページのどの場所で行動が偏っているか」は分かっても、そのページがサイト全体でどれだけ重要かまでは判断しにくい場合があります。

そこで、GA4などのアクセス解析と組み合わせます。GA4のファネルデータでは、ユーザーが目的達成までの各ステップをどの程度通過・離脱しているかを確認できます。

実務では、次の順番が使いやすいです。

定量データで優先ページを絞り、ヒートマップで場所を特定し、実際の操作を確認してから改修結果を測ります。

たとえば流入が多く、CVRが低いページをGA4で抽出し、そのページをヒートマップで確認します。CTAまで到達していないなら構成や情報順序、到達しているのにクリックされないならCTA周辺の訴求、クリック後にCVしないならフォームや遷移先と、確認箇所を絞れます。

ヒートマップで見つけた仮説を実装・検証・学習まで継続して回す考え方は、CROの改善サイクル全体で確認できます。

ページ種類ごとに見るポイントを変える

同じヒートマップでも、ページの役割が違えば正常・異常の基準も変わります。

記事ページは「読了率」より次の行動につながる箇所を見る

SEO記事では、最後まで読まれることだけを成功条件にしない方がよいでしょう。検索意図に早く答えられれば、途中で閲覧を終えるユーザーがいても不自然ではありません。

確認したいのは、重要な結論、比較表、関連情報、CTAなどに必要なユーザーが到達しているかです。熟読箇所とクリック箇所を重ねると、「読まれているが次の行動につながっていない場所」も見つけやすくなります。

サービスページは「比較材料からCTAまで」の流れを見る

サービスページでは、課題、特徴、実績、料金・プラン、事例、FAQ、CTAといった意思決定材料が、どの順番で見られているかを確認します。

CTAだけを見ても改善点が分からない場合は、CTA前に必要な判断材料が読まれているかまで戻って確認します。

LPは流入条件をそろえて比較する

広告LPなどは、流入元や訴求が違うとユーザー行動も変わります。同じURLのヒートマップをまとめて見るだけでなく、可能であればデバイス、流入元、期間、キャンペーン条件をそろえて比較します。

Clarityではデバイス別表示やフィルター、セグメント、期間指定などが用意されています。比較条件をそろえずにPCとスマートフォン、広告流入と自然検索を混ぜると、改善判断を誤りやすくなります。

ヒートマップ分析でよくある5つの誤読

ヒートマップは直感的に見えるため、数字よりも「分かった気になりやすい」点に注意が必要です。

1. 赤い場所を「良い場所」と決めつける
   赤は行動や滞在が多いことを示しますが、迷いや誤操作が原因の場合もあります。

2. 青い場所を「不要」と決めつける
   必要な情報を短時間で理解できている可能性があります。ページの役割と合わせて判断します。

3. スクロール低下をすべて離脱とみなす
   別ページへ遷移した、答えを得た、必要な範囲だけ閲覧したなど複数の可能性があります。

4. PCとスマートフォンを一緒に判断する
   画面幅、表示順、操作方法が違うため、デバイス別で確認します。

5. ヒートマップだけで原因を断定する
   ヒートマップは集計された行動の可視化です。GA4、セッション録画、フォームデータ、改修前後の比較などで裏付けます。

また、ツールには計測・表示上の制約があります。たとえばClarityでは、動的に開く一部要素のスクリーンショットを正しく再現できない場合があり、ヒートマップは最大100,000ページビュー単位、データ保持は最大9か月と案内されています。利用ツールの仕様を確認し、表示された図を実際のページ状態そのものだと決めつけないことも大切です。

改善仮説は「観察事実・原因候補・変更案・確認指標」で書く

ヒートマップを改善につなげるには、気づきを文章にして残すと再現性が高まります。おすすめは次の4項目です。

改善案は、観察した事実と原因候補を分け、変更内容と確認指標までセットで記録すると検証しやすくなります。

この形で残すと、「何となく見た目を変えた」状態を避けられます。

優先順位は、影響範囲と改善しやすさの2軸で決めると整理しやすくなります。流入が多い、CVに近い、複数ページで同じ問題が出ている箇所は優先度が高くなります。一方、データが少ないページや一時的なキャンペーンでは、結論を急がず観察期間を延ばす判断も必要です。

ヒートマップが特に役立つ活用場面

ヒートマップは、ページ内の行動差から改善仮説を作りたい場面に向いています。

• SEO記事のCTAや内部リンクの改善
• サービスページの情報順序の見直し
• LPのファーストビューやCTA改善
• フォーム到達前の離脱箇所の確認
• PC・スマートフォンの行動差の確認
• リニューアル前後のユーザー行動比較
• A/Bテスト結果の理由を考える補助分析

一方で、サイト全体の流入推移、チャネル別成果、検索クエリ、ファネル全体などを把握する用途は、アクセス解析やSearch Console等の方が適しています。ヒートマップはそれらを置き換えるものではなく、「ページ内で何が起きているか」を補う分析手段として使うのが基本です。

まとめ

Webヒートマップは、クリック、スクロール、注目・滞在などのページ内行動を可視化し、改善仮説を作るための分析手段です。

大切なのは、赤い・青いという色だけで判断せず、「このページで本来してほしい行動」と実際の行動との差を見ることです。そのうえで、観察事実と原因候補を分け、GA4やセッション録画、改修後の数値と組み合わせます。

まずは流入や事業成果への影響が大きいページを1つ選び、クリック、スクロール、アテンションの3方向から確認してください。改善候補を「観察事実・原因候補・変更案・確認指標」の4項目に整理すると、感覚ではなくユーザー行動をもとに改善を進めやすくなります。

サイト改善の確認項目を体系的に整理したい場合は、実務で使えるチェック資料も活用できます。無料資料は資料ダウンロードページから確認できます。

参考文献・データ元

‹ 親記事: CROとは？コンバージョン率最適化の考え方・KPI・改善サイクル