# アテンションヒートマップ

{% hint style="success" %}

### アテンションヒートマップ 

アテンションヒートマップは、訪問者の閲覧エリアの滞在時間をサーモグラフィーで視覚化する機能です。\
これにより、クリック操作がなくても訪問者の興味関心を把握できます。
{% endhint %}

### アテンションヒートマップの活用シーン

* **ユーザーの関心を分析**: \
  訪問者が特に注目しているコンテンツや、逆に興味を持たれていないコンテンツを特定できます。
* **コンテンツ配置の最適化**: \
  重要な情報が適切に配置されているかを確認し、必要に応じて改善することが可能です。

### 操作/設定方法

1. **アテンションヒートマップを表示**: \
   ヒートマップ機能を選択し、対象のページを表示します。
2. **色の意味を理解**:
   * オレンジ〜レッド: 長時間滞在したエリア
   * グリーン〜ブルー: 興味が薄いエリア
3. **色づきの仕様を考慮**:
   * 90%以上の滞在時間は赤色で表示され、0%は透明になります。
   * ブラウザの中央や、ユーザーがスクロールを止めた位置が赤くなります。
4. **調整バーの活用**: \
   ヒートマップの色の閾値を調整し、確認を容易にします。

### 分析のポイント：

#### 原則

1. レッドエリア：「ポジティブ要因」と「ネガティブ要因」の両面から考察
2. ブルーエリア：主に「ネガティブ要因」を検討
3. 色ムラが大きいエリア：閲覧意欲の変化が顕著

   ![](https://devhelp.ptengine.jp/wp-content/uploads/2023/05/Untitled-16.png)

   ![](https://devhelp.ptengine.jp/wp-content/uploads/2023/05/Untitled-17.png)

   ![](https://devhelp.ptengine.jp/wp-content/uploads/2023/05/Untitled-18.png)

#### チェックポイント：

1. 関心を引くコンテンツと読み飛ばされるコンテンツの特定
2. 予想通りのコンテンツが注目されているか確認
3. 重要コンテンツの配置が適切か検討
4. 全体的な色の濃さを確認し、赤くなるよう改善

#### 色づき**の仕様について**

デフォルトのアテンションヒートマップはユーザーの滞在時間を相対的に評価し、色づきを決定しております。

具体的には主に下記の計算式と3つのルールをもとに色づきを描写しております。

#### **アテンションの色づき計算式**

![](https://devhelp.ptengine.jp/wp-content/uploads/2022/10/heatmap_attention_06.png)

![](https://devhelp.ptengine.jp/wp-content/uploads/2022/10/heatmap_attention_01.png)

#### 上記の計算式を基に、90%以上になるエリアはほぼ赤色に、そして、橙、黄色、黄緑、青と移り変わり、0%の場合は透明になります。

**色付きのルールは下記のように、ご参照ください。**

①ブラウザの真ん中が最も赤くなる

![](https://devhelp.ptengine.jp/wp-content/uploads/2022/10/heatmap_attention_02-1024x580.png)

②ユーザーがスクロールを止めた位置が重なると赤くなる

![](https://devhelp.ptengine.jp/wp-content/uploads/2022/10/heatmap_attention_03-1024x547.png)

③ユーザーがブラウザを長い時間止めた位置が赤くなる

![](https://devhelp.ptengine.jp/wp-content/uploads/2022/10/heatmap_attention_04-1024x499.png)

この仕様により、ページの特定の部分が極端に閲覧されて他の部分との閲覧時間の差が10倍以上になると、特定の部分以外の色が極端に薄くなってしまう場合があります。

この場合、ヒートマップ画面にある調整バーを左にずらしていただくことで、赤色になる閾値を調整しヒートマップを確認しやすくなりますので、ぜひご活用ください。

#### よく見られる色づきの傾向

![](https://help.ptengine.jp/wp-content/uploads/2021/09/%E5%9B%BE%E7%89%8711-12.png)

* ヒートマップⅠ型: あまり見られていない
* ヒートマップⅡ型: ファーストビューでの離脱が多い
* ヒートマップⅢ型: 興味が途中で戻る
* ヒートマップⅣ型: 網羅的に見られている

型別の改善のポイントとして：

* Ⅳ型：ユーザー体験向上に注力し、CVRや回遊向上を目指す
* Ⅰ、Ⅱ、Ⅲ型：まずⅣ型を目指す
* Ⅰ型の場合：ターゲットと訴求方法を再考し、他ページの分析も活用して改善
* それぞれの仮説および改善策の詳細につきましては、下記をご参照ください。

## **ヒートマップⅠ型**

![](https://help.ptengine.jp/wp-content/uploads/2021/09/%E5%9B%BE%E7%89%8711-13.png)

## **ヒートマップⅡ型**

![](https://help.ptengine.jp/wp-content/uploads/2021/09/%E5%9B%BE%E7%89%8711-14.png)

## **ヒートマップⅢ型**

![](https://help.ptengine.jp/wp-content/uploads/2021/09/%E5%9B%BE%E7%89%8711-15.png)

## **ヒートマップⅣ型**

![](https://help.ptengine.jp/wp-content/uploads/2021/09/MicrosoftTeams-image.png)