ヒートマップとは？クリック・スクロールの種類と分析のやり方

最終更新：2026年10月12日

ヒートマップとは、ウェブページ上で訪問者がどこをクリックし、どこまでスクロールし、どこで長く止まったかを、赤から青への色の濃さで可視化する分析ツールです。ヒートマップ分析の役割を一言でいえば、「読まれていると思っていた場所が、実は素通りされていないか」を確かめる検算です。アクセス解析の数字が「何人が離れたか」を教えてくれるのに対して、ヒートマップは「ページのどこで離れたか」を見せてくれます。この記事では、クリック・スクロール・アテンションなど種類ごとの違いを一覧表にし、言葉の由来、アクセス解析との使い分け、そして読み方でつまずきやすい点まで書いていきます。

ヒートマップとは？クリック・スクロール・アテンションの種類一覧

ヒートマップとは、ページ上の行動データを色の温度に置き換えて重ねた図で、主な種類はクリック、スクロール、アテンション（熟読）の3つです。どの種類も「たくさん起きた場所ほど赤く、少ない場所ほど青く」という同じ表現を使いますが、色が意味しているものはまったく違います。

無料で使えるMicrosoft Clarityの公式ドキュメントでも、クリックマップ、スクロールマップ、エリアマップ、コンバージョンマップ、アテンションマップの5種類が用意されていると説明されています（Microsoft Learn「Heatmaps overview」）。ツールによって呼び名は少しずつ違うので、色が何を数えているかで整理しておくと迷いません。

表を見るとわかるとおり、同じ「赤い場所」でも、クリックなら「押された」、スクロールなら「そこまで来た」、アテンションなら「そこで止まった」です。ヒートマップを社内で共有するときに、どの種類の図なのかを書き添えずに「ここが赤いので読まれています」と言ってしまうと、議論の前提がずれたまま進みます。

ちなみに「ヒートマップ」で検索すると、株価の値動きを色分けした株式市場のヒートマップや、遺伝子の発現量を色で示した研究用の図も出てきます。どれも「値の大小を色に置き換えた表」という意味では同じ仲間ですが、この記事で扱うのはウェブサイトの行動を可視化するヒートマップです。

ヒートマップの由来──ウェブ分析の提唱者ははっきりしない

ウェブページのヒートマップ分析について、「この人がこの年に考案した」と言い切れる一次出典は見当たりません。色の濃淡で数値の表を塗り分けるという手法そのものはずっと古く、それがアクセス解析のツールに取り込まれて広まった、という順番です。

英語版ウィキペディアの「Heat map」の項目では、色を塗り分けた行列の図の最も古い例として、1873年にトゥーサン・ルア（Toussaint Loua）がパリの区ごとの社会統計を手描きで塗り分けたものを挙げています。「heat map」という言葉については、ソフトウェア開発者のコーマック・キニー（Cormac Kinney）が1991年に、金融市場の情報をリアルタイムで表示するソフトの名称として商標登録したと書かれています。株のヒートマップが検索で目立つのは、この出自を考えると自然なことかもしれません。

ウェブの世界でヒートマップという見せ方を有名にしたのは、視線を計測するアイトラッキング調査です。ユーザビリティ研究で知られるニールセン・ノーマン・グループは、2006年の調査で、文章中心のページが「F」の字の形に読まれる傾向を見つけたと報告し、2017年の再調査でもパソコンとスマホの両方でこの傾向が残っていたと書いています（ニールセン・ノーマン・グループ「F-Shaped Pattern of Reading on the Web」）。その結果を説明する図として使われたのが、視線の集まりを赤く塗ったヒートマップでした。

いまのヒートマップツールの多くは、視線ではなくクリックやスクロールのデータから同じ見た目の図を作っています。見た目が似ているぶん、アイトラッキングの図と同じものとして読んでしまいやすい。ここは後の「読み方の失敗」でもう一度触れます。

アクセス解析・離脱率との違い──「何人」と「どこで」と「なぜ」

アクセス解析とヒートマップの違いは、アクセス解析が「何人が来て、何人が離れたか」を数えるのに対し、ヒートマップは「ページのどこで離れたか、どこで止まったか」を見せる点にあります。どちらが優れているかではなく、答えられる問いが違います。

GA4のようなアクセス解析ツールは、ページ単位、流入経路単位で数字を集計するのが得意です。どのページで人が離れているかは、離脱率とは？計算方法と直帰率との違い・改善する場所の選び方で書いた手順で特定できます。ただ、離脱率が高いページを見つけても、そのページの1行目で帰ったのか、最後まで読んで満足して帰ったのかは、数字だけではわかりません。そこを埋めるのがヒートマップです。GA4で直帰がどう数えられているかはセッションと直帰率とは？GA4での定義とエンゲージメント率との関係にまとめました。

ヒートマップは行動の記録なので、分類としては「何が起きたか」を見る定量寄りの道具です。「なぜ」までは教えてくれません。だから、ヒートマップで見つけた不自然な場所を、インタビューやユーザーテストで確かめにいく組み合わせが効きます。調査手法の組み合わせ方は定量調査と定性調査の違いとは？手法一覧と使い分け・組み合わせ方にまとめています。

ヒートマップ分析のやり方──「読まれているはず」を先に書き出す

ヒートマップ分析のやり方でいちばん効くのは、図を開く前に「このページでいちばん読ませたい場所」と「そこは読まれているはずだ」という予想を書き出しておくことです。ヒートマップは、作り手の思い込みと実際の行動のずれを見つける検算の道具なので、予想がないまま眺めても、きれいな色の図を見た満足感しか残りません。

広告会社にいた頃、LPの改善会議では「ここは読まれているはず」という前提のまま、コピーの言い回しを何案も比べる場面がよくありました。でも、その段落までたどり着いている人がそもそも少なければ、言い回しをいくら磨いても結果は動きません。順番として先に確かめるべきなのは、言葉の良し悪しより「そこまで届いているか」です。届いていると分かってから言い回しを比べる手順は、ABテストとは？やり方の手順と有意差の考え方で書いています。

ぼくがヒートマップを見るときは、だいたい次の順番で進めます。

• ページの中で「ここを読ませたい」「ここを押させたい」場所を、図を開く前に2〜3か所書き出す
• スマホとパソコンを分けて表示する（画面の大きさが違うと、同じ位置でも意味が変わる）
• スクロールヒートマップで、書き出した場所までの到達率を見る
• 到達しているのに反応がない場所は、アテンションヒートマップで「止まって読まれたか」を見る
• クリックヒートマップで、押されるはずの場所と、押されているのにリンクではない場所を見る
• 気になった場所を数件のセッション録画で確かめ、改善案を1か所に絞る

読み方でつまずきやすい点も、表にしておきます。

この中でいちばん大事なのは、押せない場所へのクリックです。押されているのにリンクがない場所は、訪問者が「ここを押せば次に進めるはず」と期待した証拠になります。作り手が置いた導線と、読者が探した導線がずれている場所が、そのまま改善の候補になります。人は口で言うこととやることが違う、という話はインサイトとは？マーケティングでの意味とニーズとの違い・見つけ方でも書きましたが、ヒートマップはその「やること」の側を、ページの上で静かに見せてくれる道具です。

2026年時点での注意点──スマホの縦長とプライバシー

2026年時点でヒートマップを読むときに気をつけたいのは、スマホ中心の縦長ページになって「最初の画面」の重みが変わったことと、記録の範囲をプライバシーの観点で管理する必要があることの2つです。

ニールセン・ノーマン・グループの2018年の調査では、ページを見ていた時間のうち最初の画面（スクロールせずに見える範囲）に使われたのは57%で、2010年の同じ調査の80%から下がったと報告されています。最初の2画面分までで74%でした（ニールセン・ノーマン・グループ「Scrolling and Attention」）。人は昔よりスクロールするようになった一方で、それでも視聴時間の大半はページの上のほうに集まっている、という読み方ができます。ページの下に置いた大事な情報は、思っている以上に届いていない前提で設計したほうが安全です。

検索から来た読者は、答えを探して見出しから見出しへ飛ばし読みをしがちです。アテンションヒートマップで見出し直下の数行だけが赤くなっているなら、その数行で答えを言い切れているかが勝負になります。この「見出しの直下で言い切る」という書き方は、SEOとは？何の略かとSEO対策の3種類、AI検索との関係をわかりやすくで書いたAI検索への対応とも同じ方向を向いています。

プライバシーの面では、ヒートマップやセッション録画のツールは、入力フォームの中身などを記録しないよう伏せ字にする設定を持っているものが多いです。導入するときは、伏せ字の設定がどうなっているか、プライバシーポリシーで行動データの取得を説明しているかを、サイトの運営者として確認しておく必要があります。ここは使うツールの公式ドキュメントで設定を確かめてください。

ヒートマップに関するよくある質問

無料で使えるヒートマップツールはありますか？

あります。代表的なのはMicrosoft Clarityで、クリック、スクロール、アテンションなどのヒートマップとセッション録画を無料で使えます。国内のツールにも無料プランを用意しているものがあります。まず無料のツールで「自分のページの読まれ方」を一度見てみるだけでも、思い込みとのずれに気づけると思います。

ヒートマップ分析は何PVくらいから意味がありますか？

Microsoft Clarityの公式ドキュメントでは、ヒートマップの生成に最低トラフィックの制限はないとされています。ただ、図が出ることと、判断に使えることは別です。何PVあれば十分かという出典のある目安は見当たらないので、曜日や流入元の偏りがならされるまで期間を延ばし、少ない人数の動きで結論を出さないようにするのが現実的です。

アテンションヒートマップは視線を測っているのですか？

多くのツールでは、視線は測っていません。画面のその位置が表示されていた時間を集計して、「止まって読まれた場所」を推定しています。開いたまま席を離れた時間も数えられる可能性があるので、アイトラッキング調査の視線の図とは別物として読むのが安全です。

株のヒートマップとウェブのヒートマップは何が違いますか？

どちらも数値の大小を色で表す点は同じですが、株のヒートマップは銘柄ごとの値動きや時価総額を色と面積で示した図です。ウェブのヒートマップは、ページ上の訪問者の行動を色で示します。検索結果では両方が混ざって出てくるので、マーケティングの文脈で調べるときは「ヒートマップ分析」や「ヒートマップ ツール」で探すと見つけやすいです。

おわりに──ヒートマップが映すのは、書き手の思い込み

ヒートマップは、訪問者の行動を色で見せてくれる道具です。でも、図を開いていちばん驚くのは、たいてい訪問者の行動そのものではありません。「ここは読まれているはず」と信じていた自分の前提が、色のない青い帯の中に沈んでいることのほうです。

だから、ヒートマップは開く前の準備で効き目が決まります。読ませたい場所を書き出し、予想を立て、そのうえで色を見る。予想と色がずれた場所だけが、次に手を入れる場所になります。

読まれていないのではない。読まれていると思い込んでいただけ。ヒートマップが測っているのは、読者の熱ではなく、書き手の思い込みの温度だと思います。