> For the complete documentation index, see [llms.txt](https://helps.ptengine.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://helps.ptengine.com/faq/others/heatmap-rendering-logic.md).

# ヒートマップの描画ロジック

Ptengineのアテンションヒートマップは、ユーザーの相対的な滞在時間に基づいて色を決定しています。具体的には、主に以下の計算式と3つの表示ロジックに基づいて色を描画しています。

#### アテンションカラーの計算式 <a href="#zhu-yi-li-yan-se-ji-suan-gong-shi" id="zhu-yi-li-yan-se-ji-suan-gong-shi"></a>

上記の計算式に基づき、90%以上の領域はほぼ赤色で表示され、その後オレンジ、黄色、黄緑、青へと遷移し、0%の場合は透明になります。

**3つの表示ロジック**

1. **アテンションはブラウザ画面の中央に収束する**
2. **ユーザーがスクロールを停止した位置が重なると赤くなる**
3. **ユーザーが最も長く滞在した位置の時間に基づいて描画される**

補足説明として、上記の内容に基づき、ページの特定の部分が極端に閲覧されている場合（他の部分との閲覧時間の差が10倍以上など）、特定の部分以外の色が極端に薄くなることがあります。この場合は、ヒートマップ画面の調整スライダーを左に移動して赤色の閾値を調整することで、ヒートマップを見やすくすることができます。ぜひご活用ください。