ヒートマップ（heatmap）とは、視線やクリック、スクロールが、画面のどこに集まっているかを、色で示した図である。集まる場所は暖かい色、集まらない場所は冷たい色で描く。
たとえば、ある商品ページの、クリックのヒートマップを見る。商品画像のあたりが、赤く表示される。一方、購入ボタンは、青く、ほとんど押されていない。利用者は、画像を押して、拡大しようとしているのかもしれない。このように、利用者の動きを、ひと目で確かめられる。
主な3つの種類
視線のヒートマップ
特別な視線計測の装置で、利用者の目の動きを記録して作る。ニールセン・ノーマン・グループ（NN/g）の書籍「Eyetracking Web Usability」の紹介ページによると、色は、次の意味である。
- 赤は、いちばんよく見られた場所である。
- 黄は、それより少なく見られた場所である。
- 青は、いちばん見られなかった場所である。
- 灰色は、視線がまったく集まらなかった場所である。
画面で、利用者が何を見ていて、何を見ていないかが、分かる。Fパターンは、F字を描くように視線が動く、読み方の型で、視線のヒートマップに現れる。
クリックのヒートマップ
どこが、どれだけクリックされたかを、色で示す。Microsoft Clarity（サイトの利用状況を調べるツール）のようなツールでは、訪問者のクリックを自動で集めて、数秒でヒートマップを作る。多くの訪問者の操作を重ねた図なので、傾向がつかめる。要素ごとに、クリックの数を見られるので、ボタンが押されているかを確かめるのに向く。
スクロールのヒートマップ
ページの、どこまで届いたかを示す。多くの人が届いた場所は暖かい色、届かなかった場所は冷たい色になる。ある位置まで進んだ人の割合が分かる。ページを開いたとき、スクロールしなくても見える範囲（ファーストビュー）の、平均の位置も分かる。重要な内容が、多くの人が届く位置にあるかを確かめられる。
使うときの注意
- ヒートマップは、何が起きたかを示すが、なぜ起きたかまでは示さない。理由は、ユーザビリティテストなどで確かめる。
- ユーザーフローを調べるときは、ユーザビリティテストが中心で、クリックのヒートマップのような分析データは、補助的な情報源になる、と NN/g は書いている。
- Clarity では、1ページごとにも、複数のページをまとめても、作れる。目的に合わせて、見る範囲を決める。
出典
- Nielsen Norman Group「Eyetracking Web Usability」（書籍の紹介ページ）
- Microsoft Learn「Heatmaps overview」（Microsoft Clarity のドキュメント）
- Nielsen Norman Group「User Journeys vs. User Flows」（2023年）
