ヒートマップの使い方マニュアル

ver. 1Ptmind

ヒートマップツールとは①

• ヒートマップツールとは、ユーザーが「どこをクリックしたのか」「どこを見たのか」などをサーモグラフィーを通してビジュアライズすることができるツール。本ドキュメントでは、 Ptengineを例に説明する。

• Ptengineには、Webページ上でどこがクリック（タップ）されたのかを集計した「クリック」と、サイト上でどこが注視されたかを集計した「アテンション」の 2種類のヒートマップがある。また両方のヒートマップには「スクロール到達率」を示す罫線が表示される。

2よくクリックされる箇所 よく閲覧される箇所

ヒートマップツールとは②　ヒートマップの操作方法

3

1 23

4

1ユーザーがＷｅｂページのどこに注目しているか、どのコンテンツを目指しているかをマウスのクリック（ PC）やタップ（スマートフォン）を元にヒートマップで表したものが「クリックヒートマップ」。

2 ページのどこが注視されたかを、各エリアの滞在時間から判断してヒートマップで表したものが「アテンションヒートマップ」。3「 PAGE SCENE」はサイトのWebページの画面が縮小されるが、「ウェブビュー機能」を利用することで、実寸の大きさでヒートマップを確認することができる。

4 「デバイス・センター」と呼ばれるこの箇所で、ユーザーが閲覧に使用したデバイスを絞り込むことができる。例えば、タブレットやスマートフォンからの PCサイト閲覧者を除外し、 PCからの閲覧者のみのデータを抽出することができる。

ヒートマップツールとは③　クリックヒートマップ

• 「クリックヒートマップ」では、サイトがどのように利用されているかを確認する。クリックヒートマップ上にマウスカーソルを合わせると、以下のような表示になる。

4

1

1

34

2

5

＜クリックヒートマップの見方＞クリックヒートマップはユーザーがサイトをクリック（タップ）した場所がヒートマップで表され、クリック（タップ）回数が多かった場所はより赤くなり、少なかった場所はより青くなる。スマートフォンの場合、スクロールやフリック等、タップ以外での画面タッチは除外されて表示される。スクロール到達率は、ユーザーがサイトを閲覧した際に、どこまでスクロールしたのかをユーザーの割合で示しており、どの部分まで見たのかが分かるようになる。スクロール到達率 100％＝ファーストビューとなり、ページ下部になればなる程、数値は下がる。 50％のラインが表示された場合、訪問者の2人に 1人はその箇所までスクロールし閲覧したことになる。【色の目安】　※下記の数値は相対的なものです。赤→一番クリック数が多いエリア橙→赤の 80％程度黄→赤の 60～ 70％程度緑→赤の 50％程度青→赤の 20％～ 40％程度

1スクロールバーでサイト下部を確認することができるが、左上の→をクリックすると、別ウィンドウでヒートマップが表示されるため、一目で広い範囲を確認したり、レポートとして出力することができる。「ウェブビュー機能」も利用可能（→ P13参照）。

2 スクロール到達率を表す数字、およびライン。3 スクロール到達率のオン /オフを切り替えるボタン。（画面上ではオン）4 ヒートマップが正しく表示されない場合、こちらの更新ボタンをクリックし、再読み込みを行う。5 「赤く表示されるエリア」のしきい値を変更する機能だが、通常は Ptengine側で自動調整される。

ヒートマップツールとは④　アテンションヒートマップ

• 「アテンションヒートマップ」では、サイト内の該当箇所の滞在時間から、Webページがじっくり見られているかを確認する。クリックマップ上にマウスカーソルを合わせると、以下のような表示になる。

5

＜アテンションヒートマップの見方＞アテンションヒートマップはユーザーがサイトで見ていたエリアをその場所での滞在時間から総和し、ヒートマップの濃淡で表す。よく見られている場所ほど赤くなる。スクロール到達率は、クリックヒートマップ同様、ユーザーがサイトを閲覧した際に、どこまでスクロールしたのかの到達率を表している。【色の目安】　※下記の数値は相対的なものです。赤→一番閲覧されたエリア橙→赤の 80％程度黄→赤の 60～ 70％程度緑→赤の 50％程度青→赤の 20％～ 40％程度

1

1

34

2

5

1スクロールバーでサイト下部を確認することができるが、左上の→をクリックすると、別ウィンドウでヒートマップが表示されるため、一目で広い範囲を確認したり、レポートとして出力することができる。「ウェブビュー機能」も利用可能（→ P13参照）。

2 スクロール到達率を表す数字、およびライン。3 スクロール到達率のオン /オフを切り替えるボタン。（画面上ではオン）4 ヒートマップが正しく表示されない場合、こちらの更新ボタンをクリックし再読み込みを行う。5 「赤く表示されるエリア」のしきい値を変更する機能だが、通常は Ptengine側で自動調整される。

ヒートマップツールとは⑤　ページ分析 (i)

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

6

ヒートマップツールとは⑤　ページ分析 (ii)

7

1スクロールバーでサイト下部を確認することができるが、「→」マークをクリックすると、別ウィンドウでヒートマップが表示されるため、一目で広い範囲を確認したり、レポートとして出力することができる。

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

1 2

33

43

• ページ上部にあるフィルターアイコンをクリックする。

ヒートマップにフィルターを掛ける

• 8

特定のユーザの動向だけを知りたい場合、フィルター機能を利用してセグメントを掛ける。

フィルターアイコン

予めセグメント条件として保存してある（後述）フィルターの条件を設定する。ラジオボタンをクリックし、「実行」ボタンをクリックする。

ヒートマップのフィルターを追加する①

9

よく利用する絞り込み条件をフィルターに保存する。

フィルターを呼び出し「追加」ボタンをクリックする。

右の例ではリピーターのみに絞り込むフィルターを追加している。「フィルター選択」で「訪問タイプ」を選び、「再訪問」にチェックを入れて「確定」ボタンをクリック。

「追加」ボタン

ヒートマップのフィルターを追加する②

10

作成したフィルターの内容やフィルター名を変更したい場合は編集を行う。• ページ上部にあるフィルターアイコンをクリックし、編集したいフィルター名の右端にあるペンのアイコンをクリック。

• 編集画面でフィルター名やフィルター条件を変更し「保存」ボタンをクリックすれば編集は完了する。

ヒートマップのフィルターを追加する③

11

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

ヒートマップを比較する①

12

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

12

「比較対象の追加」ボタンフィルターボタン

ヒートマップを比較する②

13

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

「アテンション」ボタン

「 ×」ボタン