アクセス解析を見れば、どのページで離脱が多いかは分かります。しかし、そのページの何が問題なのかまでは分かりません。この空白を埋めるのがヒートマップです。
mページのどこまで読まれ、どこが注目され、どこがクリックされているかを色で可視化することで、数値だけでは見えなかった原因が浮かび上がります。ただし、眺めるだけでは改善につながりません。
本記事では、ヒートマップの種類と特性を整理したうえで、離脱原因を特定する手順、症状ごとの打ち手、ツールの選び方、そして導入時の法令面の注意点までを解説します。
| 確認したいポイント | 結論 | 詳細 |
|---|---|---|
| 何が分かる？ | ページ内での行動の傾向 | スクロール到達率が高い箇所では、ユーザーがその情報に関心を持っている可能性があります。 |
| 解析ツールとの違いは？ | ページ内の動きを見る点 | アクセス解析はページ間、ヒートマップはページ内を対象にします。 |
| 離脱原因はどう探す？ | 数値で絞ってから見る | 対象ページを特定してから、スクロールとクリックで原因を絞ります。 |
| どれくらいのデータが必要？ | ページあたり数百セッション | 少ないと偶然の動きを傾向と誤認します。 |
| 注意点は？ | 外部送信に関する法令対応 | タグで情報を外部に送るため、通知や公表の義務が生じます。 |
この記事でわかること
- ヒートマップの種類と、それぞれで分かること
- 離脱原因を特定するための5つの手順
- よくある症状と、対応する改善の打ち手
- カートやフォームでの活用方法
- ツールの選び方と、外部送信規律への対応
| EC支援の実績とサービスがわかる3点セットを無料配布中 サイト改善に取り組みたい方へ。FORCE-Rの会社概要・支援実績・サービスの特徴をまとめた資料を無料でダウンロードいただけます。社内での検討資料としてもご活用ください。 ＞ 資料ダウンロードはこちら |
ヒートマップとは？
ヒートマップとは、ページ内でのユーザーの行動を色の濃淡で可視化する手法です。多くの人が見た場所は暖色、そうでない場所は寒色というように表示されます。
数値の羅列ではなく視覚的に表現されるため、専門知識がなくても状況を把握できます。社内で改善案を議論する際の共通言語としても機能します。
数値で説明しても伝わらなかった課題が、色を見せるだけで理解されることは珍しくありません。関係者の合意を取りやすくなる点も、実務上の利点です。
主な種類
| 種類 | 分かること | 主な用途 |
|---|---|---|
| スクロールヒートマップ | どこまで読み進められたか | 重要情報の配置が適切かを確認 |
| アテンションヒートマップ | どこがよく見られているか | 関心を集めている要素の特定 |
| クリックヒートマップ | どこが押されているか | 導線の機能状況と誤クリックの発見 |
| マウス移動 | カーソルがどこを動いたか | 視線の代替として補助的に使う |
| 録画再生 | 個々の動きを時系列で追える | 特定の離脱パターンの詳細確認 |
この中で最初に見るべきはスクロールとクリックです。離脱の原因を探る場面では、この2つで多くの問題が見つかります。
録画再生は情報量が多い一方、確認に時間がかかります。全体の傾向をつかんでから、気になった動きを個別に追う使い方が効率的です。
アクセス解析との違い
アクセス解析が扱うのは、どのページからどのページへ移動したかというページ間の動きです。これに対しヒートマップは、1つのページの内側で何が起きたかを見ます。
離脱率が高いという事実は解析で分かりますが、その原因はページの中にあります。だからこそ、両方を使わなければ改善までたどり着けません。
両者は競合するものではありません。解析で問題のあるページを特定し、ヒートマップでその中身を確認するという役割分担で使うのが基本です。
順序を逆にすると効率が落ちます。すべてのページを見て回るのは現実的ではないため、必ず数値から入るようにしましょう。
離脱原因はどう特定する？
ヒートマップを開いて眺めるところから始めると、時間ばかりかかります。次の順序で進めてください。
STEP1：数値で対象ページを絞る
まずアクセス解析で、流入が多く、かつ離脱率が高いページを特定します。改善の効果が大きい順に着手するためです。
流入が少ないページを改善しても、全体への影響は限られます。優先順位は、影響の大きさで決めましょう。
商品ページであれば、アクセス数の多い主力商品から着手します。1ページの改善が、同じ構成の他のページにも展開できる場合は、さらに効果が広がります。
STEP2：スクロール到達率を確認する
どこまで読まれているかを見ます。特に確認すべきは、重要な情報や購入ボタンが、到達している範囲に収まっているかどうかです。
目安として、到達率が5割を切る位置から下は、多くの人に届いていない領域だと考えます。そこに重要な情報を置いているなら、位置を見直す価値があります。
到達率が急激に落ちている箇所があれば、そこに離脱を促す要因がある可能性が高くなります。長すぎる説明文、唐突な話題の転換、読みにくい構成などが該当します。
あわせて、購入ボタンがどの位置にあるかも確認します。到達率が3割の位置にしかボタンがなければ、7割の人はボタンを見ないまま離れていることになります。
STEP3：注目されている箇所を確認する
アテンションヒートマップで、どの要素に関心が集まっているかを見ます。伝えたい情報が読まれていなければ、配置か見せ方に問題があります。
注目されていない要素は、削るという判断もあります。情報量を減らすことで、残した情報が読まれやすくなる場合があるためです。
ページを長くする方向にばかり改善が進むと、かえって到達率は下がります。足すだけでなく引く視点も持ちましょう。
逆に、想定していなかった箇所に注目が集まっている場合は、そこに顧客の関心があるということです。訴求の順序を組み替える材料になります。
企業が最も伝えたい内容と、顧客が知りたい内容がずれていることはよくあります。この差を見つけられる点が、ヒートマップの価値のひとつです。
STEP4：クリックの状況を確認する
押されるべき場所が押されているか、リンクではない場所がクリックされていないかを確認します。後者は、顧客が情報を求めているのに得られていないというサインです。
逆に、押されることを想定していたボタンが使われていない場合は、見つけられていないか、押す理由が伝わっていないかのどちらかです。
画像を押して拡大しようとしている、文字をタップして詳細を見ようとしているといった動きが見つかれば、そこに情報の不足があります。
スマートフォンでは特にこの傾向が出ます。画面が小さいぶん、拡大や詳細確認の動作が増えるためです。
STEP5：条件を分けて比較する
スマートフォンとパソコン、新規と再訪問、流入経路別など、条件を分けて見ると原因が絞り込めます。全体では見えなかった問題が、特定の条件でだけ起きていることは珍しくありません。
特にスマートフォンとパソコンでは、レイアウトも読まれ方も大きく異なります。まずは購入の多い端末から確認しましょう。
広告からの流入と検索からの流入でも、行動は変わります。事前の期待値が違うためです。流入経路ごとに見ると、着地ページの適合度が判断できます。
症状と原因の対応
| 見えている症状 | 考えられる原因 | 検討する打ち手 |
|---|---|---|
| 途中で到達率が急落 | 長すぎる、話が逸れている | 構成の見直し、要素の削減 |
| 重要情報が読まれていない | 配置が下すぎる | 上部への移動、要約の追加 |
| 非リンク部分がクリックされる | 情報が不足している | 該当箇所に説明やリンクを追加 |
| 熟読されているのに購入されない | 不安が解消されていない | レビュー、保証、送料情報の明示 |
| ボタンが押されていない | 見つけにくい、押しにくい | 配置とサイズの調整 |
| サイト改善の課題整理からご支援します FORCE-Rは調査モニターによる消費者目線の検証と、データ分析の両面からサイト改善をご提案しています。どこから着手すべきかの整理から、お気軽にご相談ください。 ＞ お問い合わせはこちら |
よくある症状への打ち手は？
実際の現場で頻出するパターンと、その対応を整理します。
ファーストビューで離脱している
最初の画面で大半が離れている場合、期待と内容が合っていない可能性があります。広告や検索結果から来た人が、想像していたものと違うと判断している状態です。
流入元と着地ページの内容が一致しているかを確認します。訴求している内容が最初の画面に見当たらなければ、そこで判断されて終わります。
この場合、ページを直すべきか、広告の表現を直すべきかの両方を検討します。どちらが実態に近いのかを基準に判断してください。
スクロールはされるが購入されない
最後まで読まれているのに購入に至らない場合、情報は届いているが不安が残っていると考えられます。サイズ感、素材、配送日、返品条件など、判断に必要な情報が不足していないかを確認しましょう。
この場合、実際に見てもらって意見を聞くほうが早く原因にたどり着けます。ヒートマップで当たりをつけ、消費者の声で裏づけるという組み合わせが有効です。
レビューの内容も手がかりになります。購入者が事前に不安だった点を書いていれば、それが検討中の人にとっての障壁でもあります。
特定の要素で動きが止まる
ある箇所でカーソルの動きが止まる、あるいは繰り返し往復している場合、内容が理解しづらい可能性があります。専門用語、複雑な表、条件が多い説明などが該当します。
社内で当たり前の言葉が、初めて見る人には通じないことがあります。読み手の前提知識を想定し直す機会として活用しましょう。
専門用語を使う場合は、その場で短い説明を添えるだけでも理解は進みます。別ページへ誘導すると、そのまま戻ってこないこともあります。
関連情報を探して戻っている
ページ内を上下に往復する動きが多い場合、必要な情報が分散していると考えられます。関連する情報は近くにまとめる、比較表にするといった整理が有効です。
サイズや仕様の情報は、特にこの傾向が出やすい部分です。画像を見ながら数値を確認したい場面では、両方が同時に見える配置が求められます。
カートやフォームではどう使う？
購入直前の離脱は、売上への影響が最も大きい領域です。
カート画面での確認ポイント
送料や手数料の表示位置で動きが止まっていないか、クーポン入力欄が探されていないか、購入ボタンが見つけにくくなっていないかを確認します。
金額が変わる箇所で動きが止まっている場合、想定外の出費と受け取られている可能性があります。送料の条件を前の段階で示しておくだけでも、印象は変わります。
カートまで進んだ顧客は、購入意思を持っています。ここでの離脱は、ほとんどがサイト側の問題です。原因の全体像はカゴ落ちとはカートに入れた商品を購入せず離脱されること！サイトを離れる理由と対策を紹介で整理しています。
決済方法の選択画面も確認対象です。希望する支払い方法が見当たらず離脱している場合、選択肢を増やすだけで改善することがあります。
入力フォームでの確認ポイント
どの項目で入力が止まっているか、エラーが発生している箇所はどこかを見ます。項目数が多い、エラー表示が分かりにくいといった問題は、ここで発見できます。
入力途中で離脱している項目が特定できれば、その項目を任意にする、入力例を添えるといった具体的な対応につながります。
フォームの改善は、比較的少ない工数で効果が出やすい領域です。具体的な手法はEFO対策とは？進め方・7つの具体的な手法・ツール・成功事例を徹底解説で解説しています。
原因を裏づける
ヒートマップで見えるのは行動であって、理由ではありません。なぜそこで止まったのかは推測にとどまります。実際の利用者の声とあわせて確認すると、精度が上がります。
離脱理由の実態については、当社の調査結果を含めてカゴ落ち対策の決定版｜原因10選＋改善策15選＋独自アンケートでわかる購入者の本音でも紹介しています。
ツールはどう選ぶ？
無料で使えるものから、高機能な有料ツールまで幅があります。
確認すべき項目
- 取得できるページ数やセッション数の上限
- スマートフォンとパソコンを分けて見られるか
- 流入経路や新規・再訪問で絞り込めるか
- 録画再生など、個別の動きを追える機能があるか
- データの保存期間
- サイトの表示速度への影響
見落とされやすいのが表示速度への影響です。計測用のタグが増えるほどページの読み込みは重くなります。改善のために入れたツールが離脱を増やしては本末転倒です。
導入前後で表示速度を計測しておくと、影響の有無を確認できます。無料の計測ツールでも十分に判断できます。
まずは無料や低価格の範囲で試す
最初から高機能なツールを契約する必要はありません。主要なページだけを対象に、無料枠や低価格のプランで試し、改善が回る手応えを得てから拡張するほうが確実です。
使いこなせないまま契約だけが続く事態は避けましょう。ツールの機能より、見て判断できる担当者がいるかどうかのほうが重要です。
モールに出店している場合は、そもそもタグを設置できないことがあります。自社ECサイトが対象になる施策だと理解しておきましょう。
モールでは、管理画面で見られるアクセス指標を使って改善を進めることになります。使える手段が限られるぶん、商品ページの基本設計がより重要になります。
導入時の注意点は？
データの読み方と、法令面の両方に注意が必要です。
データ量が少ないと判断を誤る
数十件程度のセッションでは、偶然の動きが色として表れます。ページあたり数百セッション以上を目安に、一定量が溜まってから判断しましょう。
アクセスが少ないページでは、そもそもヒートマップでの判断が難しくなります。この場合は、実際に使ってもらって意見を聞くほうが確実です。
期間も、短すぎると曜日や施策の影響を受けます。少なくとも数週間分をまとめて見るほうが、傾向として信頼できます。
セールやキャンペーンの期間中は、通常とは異なる行動になります。平常時の傾向を知りたい場合は、その期間を外して見ましょう。
外部送信に関する規律に対応する
ヒートマップツールは、タグを通じて利用者の端末から情報を外部へ送信します。この場合、送信される情報の内容や送信先を通知または公表する義務が生じます（参考：総務省「外部送信規律FAQ」）。
多くの場合、プライバシーポリシーや専用のページに記載する形で対応します。ツールを追加するたびに記載を更新する運用にしておきましょう。
広告やアクセス解析のタグも同じ対象になります。ヒートマップだけでなく、サイトに設置しているタグ全体を一度棚卸ししておくと確実です。
あわせて、個人情報の取り扱いについても確認が必要です。どのような情報が取得され、どこに保管されるのかを把握しておいてください。
入力フォームを対象にする場合は特に慎重な設定が必要です。氏名や住所などが記録されない設定になっているかを、導入時に確認してください。
仮説を持って見る
目的なくヒートマップを眺めても、気づきは得られません。「この位置の情報が読まれていないのではないか」という仮説を立ててから確認するほうが、判断が速くなります。
仮説が外れることも成果です。想定していた原因が違うと分かれば、次に確認すべき箇所が絞られます。
見て終わりにしない
最も多い失敗は、可視化した結果を眺めて満足してしまうことです。改善案を決め、実行し、再度確認するというサイクルまでを含めて設計してください。
確認する頻度も決めておきましょう。毎日見る必要はありませんが、施策を打った後には必ず確認する運用にしておくと、判断が積み上がります。
変更前後で同じページを比較できるよう、修正前のデータは保存しておきましょう。
一度に複数の箇所を変えると、どれが効いたのか分からなくなります。可能であれば、変更は1か所ずつ行い、その都度確認する進め方が理想です。
まとめ
ヒートマップは、ページ内でのユーザー行動を色で可視化するツールです。スクロール、アテンション、クリックの3種類が基本で、離脱原因を探る場合はスクロールとクリックを中心に確認します。
分析では、まずアクセス解析から改善対象のページを絞り込みます。そのうえで、スクロール到達率が70％未満になる箇所があれば、その直前に離脱につながる要因がないかを確認します。また、CTAのクリック数・クリック率が目標値の50％以下であれば、配置や文言、導線の見直しを検討する目安になります。注目されている箇所とクリック状況も照らし合わせ、情報の過不足を判断しましょう。
ただし、70％や50％といった数値はあくまで目安であり、ページの種類や長さ、流入経路によって適切な基準は異なります。端末や流入経路ごとにデータを分け、自社の過去データや改善前後の数値と比較することが重要です。
ヒートマップで把握できるのは「どのように行動したか」であり、「なぜその行動をしたか」まではわかりません。アンケートやユーザーインタビューなどの消費者の声と組み合わせることで、改善施策の精度を高められます。導入時は十分なデータ量を確保し、外部送信に関する必要な通知・公表を行ったうえで、分析から改善、効果検証までのサイクルを設計しましょう。
| サイト改善から売上最大化まで、ご相談ください FORCE-Rは、商品ページ改善からデータ分析、広告運用までを一貫して支援しています。まずは資料で支援内容をご確認いただくか、現状の課題をお気軽にご相談ください。 ＞ 資料ダウンロードはこちら ＞ お問い合わせはこちら |
