Ptengineのヒートマップの使い方のマニュアルです。 ご質問などは下記までお願いいたします。 https://www.facebook.com/groups/Website.Improvement.Open.Source/

1. ヒートマップの使い方
マニュアル
ver. 1
Ptmind

2. ヒートマップツールとは①
• ヒートマップツールとは、ユーザーが「どこをクリックしたのか」「どこを見たのか」などをサーモグラフィーを
通してビジュアライズすることができるツール。本ドキュメントでは、Ptengineを例に説明する。
• Ptengineには、Webページ上でどこがクリック（タップ）されたのかを集計した「クリック」と、サイト上でどこが
注視されたかを集計した「アテンション」の2種類のヒートマップがある。また両方のヒートマップには「スク
ロール到達率」を示す罫線が表示される。
2よくクリックされる箇所 よく閲覧される箇所

3. ヒートマップツールとは② ヒートマップの操作方法
3
1 23
4
1
ユーザーがＷｅｂページのどこに注目しているか、どのコンテンツを目指しているかをマウスのクリック（PC）やタップ（スマートフォン）を元にヒート
マップで表したものが「クリックヒートマップ」。
2 ページのどこが注視されたかを、各エリアの滞在時間から判断してヒートマップで表したものが「アテンションヒートマップ」。
3
「PAGE SCENE」はサイトのWebページの画面が縮小されるが、「ウェブビュー機能」を利用することで、実寸の大きさでヒートマップを確認すること
ができる。
4 「デバイス・センター」と呼ばれるこの箇所で、ユーザーが閲覧に使用したデバイスを絞り込むことができる。例えば、タブレットやスマートフォンか
らのPCサイト閲覧者を除外し、PCからの閲覧者のみのデータを抽出することができる。

4. ヒートマップツールとは③ クリックヒートマップ
• 「クリックヒートマップ」では、サイトがどのように利用されているかを確認する。クリックヒートマップ上にマウ
スカーソルを合わせると、以下のような表示になる。
4
1
1
3
4
2
5
＜クリックヒートマップの見方＞
クリックヒートマップはユーザーがサイトをクリック（タップ）した場所がヒートマ
ップで表され、クリック（タップ）回数が多かった場所はより赤くなり、少なかっ
た場所はより青くなる。
スマートフォンの場合、スクロールやフリック等、タップ以外での画面タッチは
除外されて表示される。
スクロール到達率は、ユーザーがサイトを閲覧した際に、どこまでスクロール
したのかをユーザーの割合で示しており、どの部分まで見たのかが分かるよ
うになる。
スクロール到達率100％＝ファーストビューとなり、ページ下部になればなる
程、数値は下がる。50％のラインが表示された場合、訪問者の2人に1人はそ
の箇所までスクロールし閲覧したことになる。
【色の目安】 ※下記の数値は相対的なものです。
赤→一番クリック数が多いエリア
橙→赤の80％程度
黄→赤の60～70％程度
緑→赤の50％程度
青→赤の20％～40％程度
1
スクロールバーでサイト下部を確認することができるが、左上の→をクリックすると、別ウィンドウでヒートマップが表示されるため、
一目で広い範囲を確認したり、レポートとして出力することができる。「ウェブビュー機能」も利用可能（→P13参照）。
2 スクロール到達率を表す数字、およびライン。
3 スクロール到達率のオン/オフを切り替えるボタン。（画面上ではオン）
4 ヒートマップが正しく表示されない場合、こちらの更新ボタンをクリックし、再読み込みを行う。
5 「赤く表示されるエリア」のしきい値を変更する機能だが、通常はPtengine側で自動調整される。

5. ヒートマップツールとは④ アテンションヒートマップ
• 「アテンションヒートマップ」では、サイト内の該当箇所の滞在時間から、Webページがじっくり見られている
かを確認する。クリックマップ上にマウスカーソルを合わせると、以下のような表示になる。
5
＜アテンションヒートマップの見方＞
アテンションヒートマップはユーザーがサイトで見ていたエリアをその場所での
滞在時間から総和し、ヒートマップの濃淡で表す。よく見られている場所ほど
赤くなる。
スクロール到達率は、クリックヒートマップ同様、ユーザーがサイトを閲覧した
際に、どこまでスクロールしたのかの到達率を表している。
【色の目安】 ※下記の数値は相対的なものです。
赤→一番閲覧されたエリア
橙→赤の80％程度
黄→赤の60～70％程度
緑→赤の50％程度
青→赤の20％～40％程度
1
1
3
4
2
5
1
スクロールバーでサイト下部を確認することができるが、左上の→をクリックすると、別ウィンドウでヒートマップが表示されるため、一目で広い範
囲を確認したり、レポートとして出力することができる。「ウェブビュー機能」も利用可能（→P13参照）。
2 スクロール到達率を表す数字、およびライン。
3 スクロール到達率のオン/オフを切り替えるボタン。（画面上ではオン）
4 ヒートマップが正しく表示されない場合、こちらの更新ボタンをクリックし再読み込みを行う。
5 「赤く表示されるエリア」のしきい値を変更する機能だが、通常はPtengine側で自動調整される。

6. ヒートマップツールとは⑤ ページ分析(i)
• 「ページ分析」は、サイト内リンク、外部リンク、ボタン、フォーム等のエリアを自動的に判別し、各エリアにお
けるクリック数と割合を表示する機能。クリックヒートマップでは視覚的にしか確認できなかった、クリック数
や訪問者数に対するクリック率を数値化し表示させる機能。
6

7. ヒートマップツールとは⑤ ページ分析(ii)
7
1
スクロールバーでサイト下部を確認することができるが、「→」マークをクリックすると、別ウィンドウでヒートマップが表示されるため、一目で広い
範囲を確認したり、レポートとして出力することができる。
2 目の形のアイコンクリックすると、計測範囲をインタラクティブ要素(クリックでアクションが生まれる箇所、リンク等)のみに絞るか、リンクが存在し
ない箇所も含め全体を計測するかを選ぶことができる。
3 計測箇所は基本的に、一番クリックされた箇所と比較して多いほど赤に近い色、少ないほど濃い青に近い色で描画され、該当箇所にマウスオン
することでその数値を知ることができる。
4 右側の「クリック分布」にて、左側のページ分析マップにて存在するクリック箇所を数値で表示している。右上のフロッピーディスクのアイコンをク
リックすることで、データをCSV形式で保存することができる。
1 2
3
3
4
3

8. • ページ上部にあるフィルターアイコンをクリックする。
ヒートマップにフィルターを掛ける
• 8
特定のユーザの動向だけを知りたい場合、フィルター機能を利用してセグメントを掛ける。
フィルターアイコン
予めセグメント条件として保存してある（後述）フィル
ターの条件を設定する。ラジオボタンをクリックし、「
実行」ボタンをクリックする。

9. ヒートマップのフィルターを追加する①
9
よく利用する絞り込み条件をフィルターに保存する。
フィルターを呼び出し「追加」ボタンをクリックする。
右の例ではリピーターのみに絞り込むフィルターを追
加している。「フィルター選択」で「訪問タイプ」を選び、「
再訪問」にチェックを入れて「確定」ボタンをクリック。
「追加」ボタン

10. ヒートマップのフィルターを追加する②
10
作成したフィルターの内容やフィルター名を変更したい場合は編集を行う。
• ページ上部にあるフィルターアイコンをクリックし、編集したいフィルター名の右端にあるペンのアイコンをクリック。
• 編集画面でフィルター名やフィルター条件を変更し「保存」ボタンをクリックすれば編集は完了する。

11. ヒートマップのフィルターを追加する③
11
不要になったフィルターを削除することもできる。
• フィルター編集画面右上にある「削除」ボタンをクリックすれば、削除が完了する。

12. ヒートマップを比較する①
12
作成したフィルター条件を使用するか、その場でフィルター条件を指定するかして、ヒートマップを比較することがで
きる。
• ページ上部にある「比較対象の追加」ボタンをクリックする。クリックヒートマップが2つになる。それぞれのフィルタ
ーボタンをクリックし、条件を選択する。※片方条件なし、片方フィルター条件あり、という比較も可能。
12
「比較対象の追加」ボタン
フィルターボタン

13. ヒートマップを比較する②
13
• アテンションヒートマップを確認したい場合は左上の「アテンション」ボタンで表示を切り替える。
• 比較表示を中止する場合、画面右上端の×ボタンをクリックすることで、元の表示に戻る。
「アテンション」ボタン
「×」ボタン