UIXHERO
#234
インタラクション・アニメーション
#234

ひーとまっぷ

ヒートマップ (Heat Map)

別名・表記:Heat Map

UIXHERO Definition

大量の行動データを色の濃淡で可視化する手法。Web UXでは、クリック・スクロール・滞在時間などのユーザー行動を視覚的に表現するために用いられる。

概要

大量のデータを視覚的に理解しやすくするための手法。 Web解析ツールにおけるヒートマップは、アイトラッキングの研究成果を参考に設計されていることが多いが、実際のWebツールではマウスカーソルの動きやクリックデータを用いて可視化しているケースが一般的である。研究では視線とマウスの動きには一定の相関が確認されているが、完全に一致するわけではないため注意が必要である。

ヒートマップは探索的データ分析(Exploratory Data Analysis)の一手法としても用いられ、数値データでは気づきにくいパターンや偏りを直感的に発見するのに役立つ。

UIXHEROでは、ヒートマップを「仮説生成のための可視化ツール」と位置付け、単独での意思決定には用いないことを推奨している。

UXでの活用

  • デッドスペースの特定: 誰も見ていない・クリックしていないエリアを見つけ、削除するか改善する。
  • 誤クリックの発見: リンクではない場所(画像やテキスト)が頻繁にクリックされている場合、ユーザーがそこをリンクだと思い込んでいる(アフォーダンスの誤認)可能性がある。

💡 使いどころ

ページ内のどのコンテンツが注目されているか、あるいは無視されているかを直感的に把握したい時。CTAボタンの位置や文言の効果測定。

⚠️ 注意点・誤用

「なぜそこが見られているのか」という理由までは分からない。赤いエリア=良いエリアとは限らず、興味があるのか、理解できずに迷っているのかはヒートマップ単体では判断できない。

具体例

  • クリックヒートマップ(よくクリックされる場所がわかる)
  • スクロールヒートマップ(どこで離脱したかがわかる)
  • アテンションヒートマップ(どこに滞在したかがわかる)
出典・参考文献:
  • Chen, M. C., Anderson, J. R., & Sohn, M. H. (2001). What can a mouse cursor tell us more? Correlation of eye/mouse movements on web browsing. CHI '01 Extended Abstracts on Human Factors in Computing Systems, 281–282.
  • Huang, J., White, R. W., & Buscher, G. (2012). User see, user point: Gaze and cursor alignment in web search. Proceedings of the SIGCHI Conference on Human Factors in Computing Systems, 1341–1350.
  • Nielsen, J. (2006). F-Shaped Pattern for Reading Web Content. Nielsen Norman Group.
  • Goldberg, J. H., & Kotval, X. P. (1999). Computer interface evaluation using eye movements: Methods and constructs. International Journal of Industrial Ergonomics, 24(6), 631–645.

関連する解説記事

関連する記事詳細が見つかりませんでした。

作成: 2026年2月14日

読んだ内容を、自分の画面に当てるとき

UIXHEROは、記事を書くほかに、画面の検品・判定、デザインシステムの構築、実装と改善の伴走を受けています。何を頼めばいいか決まっていない段階の相談も、同じ窓口で受けます。

UIXHEROに頼めることを見る

※ 記事の内容についての質問や、書いてほしいテーマの要望も同じ窓口で受けています

この記事をシェアする
シェア: