# ヒートマップ/パフォーマンスの使い方

## ヒートマップを表示する <a href="#view-heatmap" id="view-heatmap"></a>

1. 対象URLに分析したいページのURLを入力します
2. `ヒートマップを表示` をクリックします
3. 新しいウィンドウで対象ページが開き、接続が確立されます
4. ポップアップ内の `分析開始` をクリックすると、ヒートマップが表示されます
5. 管理画面側に分析結果（サマリー、日次推移、クリックランキング等）が表示されます
6. 分析を終了する場合は `接続解除` をクリックします

{% hint style="warning" %}
ポップアップがブロックされる場合は、ブラウザの設定でWicle（<https://app.wicle.io）のポップアップを許可してください。>
{% endhint %}

{% hint style="info" %}
ポップアップを開かずに統計データだけを確認したい場合は、`統計のみ取得` をクリックしてください。
{% endhint %}

### デバイスを切り替える <a href="#switch-device" id="switch-device"></a>

操作パネルの `PC` / `モバイル` を切り替えると、デバイスごとのデータで分析できます。

### 数値集計モードを切り替える <a href="#count-mode" id="count-mode"></a>

| モード | 説明                                        |
| --- | ----------------------------------------- |
| 回数  | 分母はPV数、分子はPVごとのイベントデータ（クリック・スクロール等）で集計します |
| UU数 | 分母・分子ともにユニークユーザー単位で集計します                  |

### 比較モードを利用する <a href="#comparison-mode" id="comparison-mode"></a>

ヘッダーの `比較` をクリックすると比較モードがONになります。同じURLを異なる期間やセグメントで並べて比較できます。

* `並べて表示` をクリックすると、2つのポップアップが横並びで開きます
* URL変更やスクロール位置は両ウィンドウで同期されます
* 分析結果は2カラムで並列表示され、各指標の差分が矢印付きで表示されます

{% hint style="info" %}
比較モード中はパフォーマンスタブは利用できません。
{% endhint %}

### 要素をクリックしたユーザーを検索する <a href="#search-users" id="search-users"></a>

ヒートマップが表示されたページ上で要素をクリックすると、クリック数とCTRのほかに `セレクタでの検索` と `テキストでの検索` が表示されます。いずれかを選択すると、その要素をクリックしたユーザーの検索結果に遷移できます。

### 計測設定が無効の場合 <a href="#tracking-warnings" id="tracking-warnings"></a>

スクロールイベントまたは注視領域イベントの計測がOFFになっている場合、画面上部に警告バナーが表示されます。

* **スクロールイベントがOFF**: スクロール到達率の可視化にはスクロールイベントの計測が必要です
* **注視領域イベントがOFF**: 注視領域の可視化には注視領域イベントの計測が必要です

警告バナー内のリンクから [イベント送信設定](/initial-setting/tag.md#ibento) ページへ移動して有効化できます。

## パフォーマンスを分析する <a href="#performance" id="performance"></a>

1. 対象URLを入力します
2. `パフォーマンス` タブに切り替えます
3. Desktop / Mobileの両方のPSI分析が自動的に開始されます（10〜30秒程度）
4. 分析結果が表示されます

`再計測` をクリックすると最新のデータで再分析できます（60秒のクールダウンあり）。

### AI改善プロンプトを利用する <a href="#use-ai-prompt" id="use-ai-prompt"></a>

パフォーマンス改善提案の各セクションには、コーディングエージェント向けの改善プロンプトが用意されています。`一括コピー` で全カテゴリの改善指示をまとめてコピーし、Claude Code等に貼り付けて改善を実行できます。


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.wicle.io/analytics/heatmap/usage.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.