ヒートマップの読み解き方の解説です。

1. Ptengine
ヒートマップ
の読み解き方
株式会社Ptmind
Ver. 1.1

2. 2
プロローグ
シンプルな事例

3. (1) ヒートマップから
ユーザーの動向を読み取る際の
考え方、推測の仕方など②
成果を上げた事例：
シューズEC
3出所： http://www.eye-brain.jp/blog/rakuten-heatmap/
トップページの直帰率が
―20％ポイントと大きく低下

4. 4
左の事例だと、ファースト
ビューで大きな割合を占める
スライドバナーはそれほど
クリックされておらず、
下にスクロールした所にある
「メンズスニーカー」などの
商品カテゴリバナーは
よくクリックされています。
また、ファーストビューから
1スクロールした人は僅か
31％と、殆どの人が離脱してい
ることがわかります。
ユーザーの
31％がこの
ラインに到達
スライドバナー
商品カテゴリーバナー

5. 5
そこで、スライダーを取り
払って商品カテゴリバナーを上
に持ってきてみました。
また、クリックの多いカテゴリ
を優先して上に置くようにして
みました。
ファーストビューからのスク
ロール数は34％とあまり
変わっていませんが、
検索ボタンや商品カテゴリの
クリック数が大きく増えて
います。
この結果、トップページの
直帰率は―20ポイントと大きく
下降しました。ユーザーの
34％がこの
ラインに到達

6. 6
よく見られている
（よく使われている）
コンテンツが下にある

7. 7
出店ショップ事例

8. 8
セレクトショップ
スマホ向け
トップページ
「週間レビューランキング」
1ページを
2分割してあります

9. 9
アパレル
PC向け
トップページ
「Now Hit! リアルタイム売れ筋アイテム」

10. 10
アクリル加工
PC向け
トップページ
「カテゴリー別おすすめアイテム」

11. 11
楽天以外のショップ事例

12. よく見られている「NEW」の上にあまり見られていないエリア。
ヒートマップから見えるファクト アパレル
「NEW」
12
EC

13. よく見られている「特選ギフトセット」のスクロール到達率は47%。
ヒートマップから見えるファクト 食品
「特選ギフトセット」
13
EC

14. よくクリックされているリンクの場所のスクロール到達率が10％未満
（同じリンクはページ上部には無い（ハンバーガーメニューも無
い））
ヒートマップから見えるファクト アパレル
新着商品一覧
オススメ
商品一覧
14
EC

15. ケース
6 よくクリックされている「テーブルウェア」のリンク。スクロール到
達率が23%前後。
ヒートマップから見えるファクト アクセサリー
テーブルウェア
15
EC

16. 16
ユーザーの
興味・関心を把握する
Part 1

17. ヒートマップの分析方法
分譲マンション 物件サイト
事例
17

18. ケース1
東京都文京区 高級物件
18

19. 19
交通アクセス
マンション物件サイト
「周辺環境」のページ
Q. 「交通アクセス」以外でじっくり見られているのは？
？
？
PC向けサイト

20. 20
交通アクセス
マンション物件サイト
「周辺環境」のページ
A. 「教育」「子育て」

21. ケース2
東京都杉並区
シングルマザーに人気の物件
21

22. 22
A. じっくり見られているのは？
？
PC向けサイト

23. 23
A. 物件から近いスーパーの情報
イトーヨーカドー サミット

24. ケース3
横浜市中区
めったに出ない駅近希少物件
24

25. 25
Q. スクロールを止めて見ているユーザーが多いのは？
？
Smart Phone向けサイト

26. 26
A. 「プロジェクトストーリー」
希少物件が実現した物語
プロジェクトストーリー

27. たとえば今回の
分譲マンションの分野では、
アテンションヒートマップで
ユーザーの興味関心の
知見をためていくと・・・
27
このように

28. ユーザーの興味関心のデータの
蓄積があります！
↓
コンペで優位に立てる
28
分譲マンション専門のウェブ制作会社では

29. ターゲット購買層を想定した
「外さない」マンションサイトを
発注
↓
機会損失を防ぐ
29
マンションデベロッパーウェブ管理部門では

30. 30
ユーザーの
興味・関心を把握する
Part 2

31. 31
「AIの浸透」
「技術の発展と社会への影響」
はここまで到達したユーザーにしっかり
見られている。
「AIが今後社会にどう影響を与えて
いくのか」、詳しく知りたいと考えて
いる読者が多いと推測される。
＝このような注目エリアは、今後
執筆される記事のテーマの
参考になる可能性がある。
アテンションヒートマップ
じっくり読まれている箇所から次の記事のヒントを得る
メディア

32. 32
クリックヒートマップ
【1】 【2】 【3】
【1】
【2】
【3】
【アテンションヒートマップの活用】
長いページは、その時々の後半のアテンションに注目。
長いページになると後半のアテンションの色は、
ブルー、透明になりがちです。その中で、ユーザーが
スクロールを止めた位置が水色、緑色、黄色等になります。
日々更新されていくページでは、その時々で、ユーザーが
スクロールを止めている位置を見ることで、ユーザーが
注目しているコミックを知る手掛かりになります。
電子書籍販売

33. 33
「導入実績はこちら」を見せるのが遅すぎないか？
ヒートマップから見えるファクト 経理ソフト
BtoB

34. 34
データ連携の話を先にするべきか？
ヒートマップから見えるファクト 経理ソフト
データ連携の説明
「お客様の声」
「事例を見る」
BtoB

35. 35
ユーザーの関心事を、アテンションヒートマップから知る
ヒートマップから見えるファクト 経理ソフト
はじめて会計ソフトを使うので、
無料版では不安です。
サポート面では「丁寧なマニュアル」「使い方が
よくわかる動画」「よくある質問集」も利用できます。
BtoB

36. 36
集中力が途切れた
理由を推測する

37. 37
アテンションの流れが変わる地点
エステ
格安で体験できる
コースを紹介する
LP。
７万円、９万円の
コース紹介が掲載されて
以降の場所は、
アテンションがあまり
集まっていません。

38. 38
ユーザービリティと
ナビゲーションの改善に
役立てる

39. 39
旅館

40. 40
【課題】リンク先に何があるかを分かりやすく示す
2016年春・夏ウェア＆
グローブのニュー
モデルをご紹介します。
【課題】 「2016 SPRING & SUMMER」のバナーは、ファースト
ビューに近く、ユーザーの視界に入りやすい位置にありながら、あまり
クリックされていません。その原因の一つは、 「2016 SPRING &
SUMMER」という表記しかないために、リンク先にどんなコンテンツが
あるのか、ユーザーにとって分かりにくいという点にあります。
【改善案】 「2016 SPRING & SUMMER」のバナーは、
洗練されたデザインである一方、「リンクの先に何があるか
分かりにくい」という点においては、導線として、誘導力が
弱いと言えます。左の改善例のように、バナーのデザインを
損なわないようにしつつも、リンク先にどんなコンテンツが
あるのかを具体的に示した方が、よくクリックされるように
なります。
改善案
バイク用品・バイクパーツ

41. 41
【課題】よく使われる導線を上へ
スクロール到達率
11％
【課題】 「部品情報検索（パーツカタログ）」はよくクリックされていますが、
スクロール到達率11%の所に設置してあり、よく使われる導線としては、設置されて
いる位置が下になってしまっています。
【改善案】 よく使われる導線は探さなくても視界に入ってくる位置に置くことで、
ユーザーはリンクを探す時間を節約することができます。「関連コンテンツ」は、
右サイドメニューの「キャンペーン」の上に持って行くことをおすすめします。
「キャンペーン」
ボート

42. 42
メディア等
「読ませる系コンテンツ」で
知見をためる

43. 43
クリックヒートマップ本文終了地点のスクロール到達率 15％
記事の本文の
最後まで読んだのは
何％？
メディア

44. 44
クリックヒートマップ本文終了地点のスクロール到達率 26％
記事の本文の
最後まで読んだのは
何％？
メディア

45. 45
クリックヒートマップ
記事のインデックスがよくクリックされている。
この記事を読んだことで、関連記事を読みたいという
モチベーションが高まったことが表れている。
連載記事の場合、読み終わった後の、
バックナンバーのリンクのクリックに注目
メディア

46. 46
LPの評価

47. ファーストビューを過ぎると、スクロール到達率が、100％ → 69% →
55% と低下していく。
ヒートマップから見えるファクト コスメ
47
EC

48. 48
ユーザーの行動を
把握する

49. 動きがあるバナーがクリックされていない
ヒートマップから見えるファクト アウトドア
画像が次々切り替わるエリアだけクリックが少ない
49
EC

50. 50