ヒートマップ分析とは、Webページ上のユーザー行動を色の濃淡で可視化し、「ページのどこを見て、何をクリックし、どこで離脱しているか」を読み解く手法です。GA（Google Analytics）が「いつ・何回・どこから」というマクロな行動を扱うのに対し、ヒートマップは「ページ内のどこで何が起きたか」というミクロな行動を扱います。離脱の多いセクションやクリックされていないCTAを特定でき、配置や構成の見直しを通じてCVR改善につなげられます。
「うちのLP、直帰率が高いんですけど、どこが悪いのかわからないんです」
先月、BtoB向けの採用管理SaaSを提供しているクライアントとの定例で出た話です。GAでページごとの離脱率やスクロール率は見ている。でも「ユーザーがページのどこを見て、何に反応して、どこで離脱しているのか」が掴めない。データはあるのに、次の打ち手に繋がらない。この状態の企業は少なくありません。
GAは優秀なツールですが、「ページ上でユーザーがどう振る舞ったか」を可視化する機能は弱いです。セッション数やイベント数は出ても、CTAの手前で何割が離脱しているかはわかりません。
そこで導入したのがヒートマップです。Microsoft Clarityを入れたところ、問題はすぐに見えました。ファーストビュー下の「導入実績」セクションの手前で50%以上が離脱。一方、ページ中盤の料金比較セクションはクリックヒートマップで多く触られている。ユーザーは料金が気になっているのに、そこに辿り着く前に離脱していたわけです。
そこで構成を組み替えました。料金比較をファーストビュー直下に移動し、導入実績はページ下部に移す。この変更だけでLPのCVRが1.4倍になっています。
ヒートマップ分析は、「なんとなくサイトが悪い気がする」を「ここが具体的に問題で、こう直せばいい」に変換するための手法です。この記事では、ヒートマップの種類ごとの見方、ツールの選び方、そしてGAと組み合わせて実際にCVR改善につなげるまでの実践プロセスを解説します。
ヒートマップとは何か
ヒートマップは、Webページ上のユーザー行動を色の濃淡で可視化する分析手法です。赤いところはよく見られている・よくクリックされている場所、青いところは関心が薄い場所。サーモグラフィーのようにページ全体を「温度」で表示します。
GAが「いつ」「何回」「どこから」というマクロな行動データを扱うのに対して、ヒートマップは「ページ内のどこで何が起きたか」というミクロな行動データを扱います。この2つは役割が違うので、どちらかだけでは不十分です。後半でGAとの併用についても触れますが、まずはヒートマップ単体の話から始めます。
ヒートマップには主に3種類あります。クリックヒートマップ、スクロールヒートマップ、アテンション（注目）ヒートマップ。それぞれ読み取れる情報と、改善に使える場面が違います。
クリックヒートマップの見方
クリックヒートマップは、ユーザーがページ上のどこをクリック（スマホならタップ）したかを集計して表示するものです。ボタンやリンクだけでなく、画像やテキストなど「クリックできない要素」への誤クリックも記録されます。
読み取り方のポイント
最初に確認すべきは、CTAがちゃんとクリックされているかです。ページにCTAボタンを配置しているのに、クリックヒートマップでそのボタンがほとんど赤くなっていなければ、目立っていないか、位置が悪いか、文言がユーザーの動機と合っていないか。原因はいくつか考えられますが、「クリックされていない」という事実がまず可視化されます。
次に、リンクでない要素がクリックされていないかを見ます。見落とされがちですが重要です。あるBtoBの人材紹介サービスで、ファーストビューの「年間3,000件の紹介実績」というテキストに大量のクリックが集まっていました。ユーザーは実績の詳細を見たいのにリンクがなかった。導線を追加したところ、実績ページの閲覧数が3.2倍になりました。リンクでない要素へのクリック集中は「ユーザーが期待した動線がそこにない」ことを意味します。
もうひとつ確認したいのが、グローバルナビのクリック分布です。ほとんどクリックされていないメニュー項目は不要かもしれません。逆に下層ページへのクリック需要がナビ上に表れていれば、メニュー構造の見直しが必要です。
クリックヒートマップから引き出す改善アクション
| 観察された状態 | 考えられる原因 | 改善アクション |
|---|---|---|
| CTAボタンのクリックが少ない | 目立っていない、文言が弱い | 色のコントラスト強化、文言変更（CTA最適化の記事も参照） |
| リンクでない要素にクリック集中 | ユーザーが動線を期待している | リンクを追加、またはクリックで展開する仕組みを実装 |
| フッター付近のクリックが多い | 情報を探して最後まで辿り着いている | 求められている情報をページ上部に移動 |
| 複数のCTAのうち一部だけクリックされている | 文言や位置で優劣がついている | ABテストでクリック率の高いパターンを他の配置にも適用 |
スクロールヒートマップの見方
スクロールヒートマップは、ページのどの位置までユーザーがスクロールしたかを表示します。ページの上部が赤（全員が見ている）、下に行くほど青（見ている人が減っている）になるのが一般的です。
読み取り方のポイント
一番大事なのは、色の変化が急な場所を探すことです。上から順に自然に減っていくなら正常ですが、あるセクションの境界で急にガクッと減っている場合、そのセクションがユーザーを離脱させている可能性があります。
Contentsquareの2024年デジタルエクスペリエンスベンチマークレポートによれば、Webページの平均スクロール率は約44%です。つまりページの半分から下は、半数以上のユーザーに見られていません。これはあくまで平均ですが、CTAをページの下半分にしか置いていないサイトは、この事実を知った上で意思決定するのが望ましいです。
CTAの位置とスクロール到達率を照合することも欠かせません。先ほどの採用管理SaaSでは、CTAがページの70%地点にあり、到達率はわずか28%でした。72%のユーザーはCTAを見ていなかったことになります。ファーストビュー内と中盤にもCTAを追加した結果、到達率が82%に上がり、CVRは1.9倍になりました。これは文言やデザインの問題ではなく、純粋に配置の問題でした。
コンテンツの順序を再設計する
スクロールヒートマップのもう1つの使い方は、コンテンツの順序を最適化することです。
ページ構成を「自分たちが伝えたい順」で組んでいるサイトは多いですが、ユーザーが知りたい順とは限りません。スクロールとクリックのヒートマップを合わせて見れば、関心が高いコンテンツがわかります。それをページ上部に持ってくる。
BtoBのクラウドセキュリティサービスのLPで、スクロールヒートマップでは「機能説明」セクションでの離脱が大きく、クリックヒートマップでは「料金」へのアンカーリンクが最多でした。構成を「料金→導入メリット→事例→機能説明→CTA」に変更したところ、平均スクロール率が38%から56%に改善。内容は1文字も変えていません。
アテンションヒートマップの見方
3つ目はアテンションヒートマップ（注目ヒートマップ）です。ユーザーがページのどの領域に長く滞在しているかを可視化します。スクロールの速度やマウスの動き、滞在時間から算出されるもので、「読まれている」「じっくり見られている」箇所がわかります。
クリックヒートマップが「行動」を、スクロールヒートマップが「到達」を示すのに対して、アテンションヒートマップは「関心」を示します。
読み取り方のポイント
赤い（注目度が高い）部分がCTAの近くにあるかを確認します。ユーザーがじっくり読んでいるセクションの直後にCTAを配置するのが最も効率的です。注目度が高いのにCTAがない場所は、コンバージョンの機会損失になります。
逆に、重要なコンテンツなのに注目度が低い場所はないかも見ます。たとえば、導入事例のセクションに力を入れて書いたのに注目度が低い場合、見出しが弱い、レイアウトが原因で読み飛ばされている、位置が深すぎるといった可能性があります。
ある製造業向けBtoBのサイトで、「対応可能な業界一覧」テーブルに高い注目が集まっていたのにCTAがありませんでした。直下に「お客様の業界に合わせた事例をお送りします」というCTAを追加したところ、他のCTAの2.1倍のクリック率になりました。
3種類を組み合わせて読む
ここまで個別に説明してきましたが、実務ではこの3種類を組み合わせて分析します。
たとえば、あるセクションについて「スクロール到達率は60%あるのにアテンションが低い」なら、そのセクションは読み飛ばされています。「アテンションは高いのにクリックが少ない」なら、じっくり読んだうえで行動に至っていない（CTAが弱いか、次のステップが不明確）。「クリックは多いがCVにつながっていない」なら、クリック先のフォームやページに問題がある。ヒートマップの真価は、こうした複合的な読み解きにあります。
ヒートマップツールの選び方
ヒートマップツールは複数ありますが、BtoBの現場でよく使われている3つを比較表にまとめます。
| 比較項目 | Microsoft Clarity | Hotjar | Ptengine |
|---|---|---|---|
| 料金 | 完全無料 | 無料〜$80+/月 | 無料〜¥7,980+/月 |
| クリック/スクロール | ○ / ○ | ○ / ○ | ○ / ○ |
| アテンション | △（限定的） | △（ムーブで代替） | ○ |
| セッション録画 | ○（無制限） | ○（プランで制限） | △ |
| セグメント分析 | ○ | ○ | ○（特に強い） |
| ABテスト | × | × | ○ |
| 日本語対応 | △ | × | ○ |
| GA連携 | ○ | ○ | ○ |
Clarityの最大の強みは、完全無料でセッション録画とDead Click検出（クリックされたのに何も起きなかった箇所の自動検出）が使える点です。GAとの連携もでき、セグメント別のセッション録画フィルタリングが可能です。アテンションヒートマップが弱いのが弱点になります。
Hotjarは管理画面が洗練されていて共有機能が強いです。ムーブヒートマップ（マウスの軌跡追跡）やフィードバック収集ウィジェットがユニークな機能です。ただし無料プランは月35セッションしか記録できず、実用的な分析には有料プランが必要です。
Ptengineは日本製で管理画面が完全日本語です。アテンションヒートマップが3つの中で最も見やすく、セグメント別分析（「スマホの新規ユーザーだけ」など）とABテスト機能が一体化しているのが実務では便利です。
予算がなければClarity、日本語環境とアテンション分析を重視するならPtengineが向いています。クライアント案件では、初期導入はClarityで始めて、分析が軌道に乗ったらPtengineに移行するパターンが多いです。
GAとヒートマップの併用
ヒートマップだけで完結する分析もありますが、GAと組み合わせることで精度が上がります。GAが「全体の傾向」を、ヒートマップが「ページ内の具体的な行動」を担う。この役割分担が重要です。
使い方の1つ目は、GAで「どのページが問題か」を特定し、ヒートマップで「なぜ問題か」を掘ることです。いきなりヒートマップを見るのではなく、GAのファネル分析で離脱が増えているページを特定してから、そのページのヒートマップに入ります。このプロセスが実務では一番多いです。
2つ目は、セグメント別の比較です。GAで「CVしたユーザー」と「CVしなかったユーザー」のセグメントを作り、同じページのヒートマップを比較します。CVしたユーザーだけが見ているセクションがあれば、そこが意思決定に影響している可能性が高い。Clarityの場合、GAとの連携設定をすればセグメント条件に基づいてセッション録画をフィルタリングできます。
3つ目は、流入元別のヒートマップ比較です。オーガニック検索からのCVRは2.8%なのにSNS広告経由は0.4%。同じLPなのにこんな差があることもあります。ヒートマップを流入元でセグメントすると、検索流入は機能比較をじっくり読んでからCTAを押し、SNS広告流入はファーストビューだけ見て離脱、といった行動パターンの違いが見えます。SNS広告用にはファーストビュー内CTAが必須なのか、あるいは専用LPを作るべきか。こうした示唆は、GAとヒートマップの両方を組み合わせて初めて得られます。
ヒートマップ分析からCVR改善につなげた事例
ここからは、クライアント案件でヒートマップ分析がCVR改善にどうつながったか、具体的なプロセスを紹介します。
事例1：勤怠管理SaaSのLP（構成変更でCVR 1.6倍）
月4,200セッション、CVR 0.9%（月間CV38件）のLPでした。GAでページ25%地点での離脱が40%と判明。Clarityで確認すると、そこは「機能一覧」セクションの途中でした。8つの機能を並べているが、3つ目あたりからユーザーが急減。クリックヒートマップでは、ページ下部の「料金プラン」と「他社比較」のクリックが突出していましたが、そこまで到達しているのは35%だけでした。
機能一覧を3個に絞り、料金プランをファーストビュー直下に移動、CTAを3箇所に配置。CVRは0.9%から1.44%（1.6倍）、月間CVは38件から61件になりました。順序と構成を変えただけで、本文は変えていません。
事例2：ITコンサルのコーポレートサイト（Dead Click修正でフォーム到達率2.1倍）
月間セッション2,800に対してフォーム到達が月84件（到達率3%）のサービスページでした。ClarityのDead Click検出を使うと、「サービスフロー図」の画像に月間420回以上のDead Clickが集中していました。ユーザーはフロー図をクリックして詳細を見ようとしているが、リンクが未設定。セッション録画でも、フロー図クリック→何も起きない→離脱というパターンが繰り返されていました。
フロー図にツールチップと直リンクを追加し、直下にCTAを配置。フォーム到達率は3%から6.3%（2.1倍）に改善しました。Dead Clickのデータがなければ、この場所にCTAを置く発想には至りません。
事例3：業務用資材ECの商品ページ（注目ヒートマップから価格表示を変更しCVR 1.3倍）
Ptengineのアテンションヒートマップで商品ページを分析。「仕様表」への注目度が高い一方で「価格」周辺の注目度が低い状態でした。セッション録画で確認すると、価格が税別・小文字で表示され、ロット割引表が別タブに格納されており、ユーザーが仕様確認後に価格を探せず離脱していました。価格の税込表示化・拡大、ロット割引表の展開表示、仕様表直下へのCTA追加で、カート投入率は4.2%から5.5%（1.3倍）に改善しました。
ヒートマップ分析でよくある間違い
1つ目は、サンプル数が少ない段階で判断することです。100セッション未満で「このセクションは読まれていない」と判断するのは危険です。最低1,000セッション以上、月間セッションが少ないページは2〜4週間蓄積してから見ることをおすすめします。
2つ目は、色だけで判断することです。ページ上部が赤いのは当たり前です。大事なのは「CTAの位置が青いのは問題だが、フッターが青いのは正常」のように、期待に対してどうかという基準を持つことです。
3つ目は、ヒートマップだけで完結しようとすることです。ヒートマップは「何が起きているか」を教えてくれますが「なぜ起きているか」は教えてくれません。セッション録画、GAとの照合、場合によってはユーザーインタビュー。複数のデータソースを組み合わせて初めて正確な原因特定ができます。
ヒートマップ分析の始め方
これから始める方に向けて、最短ルートを紹介します。
- Clarityを導入する（15分）。GTM経由でもサイト直貼りでも可。専門知識は不要です
- 1〜2週間データを溜める。最低1,000セッション分は必要です
- CVRに直結するページから見る。LP・サービスページが最優先で、トップページやブログは後回しにします
- スクロールヒートマップでCTA到達率を確認する。50%以下ならCTA配置の見直しが最優先です
- クリックヒートマップでDead Clickを確認する。リンクでないのにクリックされている箇所があれば、導線を追加します
この5ステップだけで、最初の改善施策は見えてきます。
ヒートマップは「見て終わり」のツールではない
きれいな色の画面を見て「面白いですね」で終わるケースが少なくありません。ですが、それはGAのダッシュボードを眺めて満足するのと同じです。
冒頭の採用管理SaaSのクライアントは、ヒートマップからLPの構成を変更し、CVRが1.4倍になりました。広告費もテキストも変えていません。ユーザーが求めている情報を、ユーザーが見る場所に移しただけです。
ただ、ヒートマップを正しく読み解いて施策に落とし込むには分析経験が要ります。株式会社ティーラが提供するCVアップパートナーズでは、Clarityの導入設定からGA連携、データの読み解き、改善施策の実装、ABテストでの検証まで一気通貫で支援しています。
「ヒートマップは入れたけど、見方がわからない」という方は、CVアップパートナーズの資料をご覧ください。ヒートマップを起点としたCVR改善の進め方をまとめています。
参考文献
※1：Contentsquare「2024 Digital Experience Benchmarks」 https://contentsquare.com/insights/digital-experience-benchmark/
※2：Hotjar 料金ページ https://www.hotjar.com/pricing/
※3：Ptengine 料金ページ https://www.ptengine.jp/pricing/
