ヒートマップとは何か
ヒートマップとは、ウェブページ上でユーザーがどこをクリックし、どこまでスクロールし、どこに視線を集中させているかを色の濃淡で可視化したツールです。数値データだけでは見えない「ユーザーの行動パターン」を直感的に把握できるため、LPO(ランディングページ最適化)において非常に有効です。
GA4などのアクセス解析ツールは「何人が来て何人がコンバージョンしたか」という結果を教えてくれますが、「なぜ離脱したのか」は教えてくれません。ヒートマップはその「なぜ」を解明するための補完ツールです。
ヒートマップの種類
クリックヒートマップ
ユーザーがページ上のどこをクリックしたかを可視化します。クリックが集中している箇所は「ユーザーが反応しているコンテンツ」です。逆に、クリックしてほしいCTAボタンへのクリックが少ない場合は、ボタンの視認性・配色・テキストの改善が必要です。
よく見られる問題パターン:
- ◆クリックできない画像や文字に多数クリックが集中している(→ リンク追加を検討)
- ◆CTAボタンよりも上部のナビゲーションにクリックが集中している(→ ナビを削除してLPに集中させる)
スクロールヒートマップ
ページのどこまでスクロールされているかを示します。一般的なLPでは、ファーストビュー(画面上部)から下に行くほど閲覧率が低下します。重要な情報が「スクロール率50%以下」の領域にある場合、多くのユーザーに見られていない可能性があります。
改善の基準:
- ◆スクロール率が急落するポイント(離脱ポイント)を特定し、その直前のコンテンツを改善
- ◆CTAボタンをスクロール率70〜80%の位置に追加配置
アテンションヒートマップ(ムーブメントヒートマップ)
マウスの動きを追跡し、ユーザーがどこに注目しているかを推測します。一般的に、マウスの動きと視線の動きには相関があるとされています。ユーザーが「読んでいる」エリアと「読み飛ばしている」エリアを把握できます。
Clarityの使い方
概要
Microsoft Clarityは完全無料のヒートマップ・セッション録画ツールです。データ量の制限がなく、GA4との連携も可能なため、コスト重視のLP運用に最適です。
導入手順
- ◆Microsoft Clarity にアクセスし、Microsoftアカウントでサインイン。
- ◆「新しいプロジェクト」を作成し、サイト名とURLを入力。
- ◆発行されたトラッキングコードをサイトの
<head>タグ内に貼り付け。 - ◆WordPressの場合はプラグイン「Microsoft Clarity」をインストールするだけでOK。
主要機能の見方
- ◆ダッシュボード:セッション数・怒りクリック(連打)率・デッドクリック率・スクロール深度の平均を一覧表示
- ◆ヒートマップ:ページURLを選択し、「クリック」「スクロール」「エリア」の3種類を切り替えて表示
- ◆セッション録画:実際のユーザー操作を動画で確認。離脱直前の行動が把握できる
Hotjarの使い方
概要
HotjarはClarityよりも高機能な有料ヒートマップツールです。無料プランでも月間35セッションまで録画できます。アンケート機能(NPS・ポップアップ調査)を内蔵しており、定性データと定量データを組み合わせた分析が可能です。
Clarity vs Hotjar の比較
| 項目 | Clarity | Hotjar |
|---|---|---|
| 費用 | 完全無料 | 無料〜$99/月 |
| セッション録画 | 無制限 | 無料:35件/月 |
| ヒートマップ | 3種類 | 3種類 |
| アンケート機能 | なし | あり |
| GA4連携 | あり | あり(有料) |
| データ保持期間 | 90日 | プランによる |
コストを抑えたい場合はClarity、ユーザーへの直接調査やフォーム分析まで行いたい場合はHotjarが適しています。
ヒートマップ分析の改善判断基準
改善優先度の決め方
ヒートマップから改善アクションを導出する際は、以下の判断フローを使います。
1. スクロールヒートマップ → 離脱ポイントを特定
2. クリックヒートマップ → 意図しないクリック集中箇所を特定
3. セッション録画 → 離脱ポイントの前後の行動を確認
4. 改善仮説を立てる → A/Bテストで検証
具体的な改善アクション例
- ◆ファーストビューでのスクロール率が低い:キャッチコピー・ビジュアルの変更、ローディング速度の改善
- ◆CTAボタンへのクリックが少ない:ボタン色・テキスト・配置位置の変更
- ◆フォームの途中離脱が多い:入力項目の削減、エラーメッセージの改善
- ◆特定の画像に多数クリック:画像にリンクを追加するか、クリックを想起させるデザインを変更
まとめ
ヒートマップはLPOの「仮説発見ツール」です。GA4が「結果」を教えるのに対し、ヒートマップは「原因の仮説」を与えてくれます。まずは無料のMicrosoft Clarityを導入し、スクロールヒートマップで離脱ポイントを特定することから始めましょう。離脱ポイントが見つかれば、改善施策の優先順位が自然と決まり、A/Bテストによるコンバージョン率改善サイクルが回り始めます。
この記事に関連するコース
LPOマスター
LPO(ランディングページ最適化)の高度なテクニックを体系的に学ぶ上級講座です。ヒートマップ分析、ファネル分析、マイクロコピー、ページ速度最適化、パーソナライゼーション、多変量テストなど、CVRを最大化するための実践的スキルを8つのレッスンで習得します。