# ヒートマップ/パフォーマンスの概要

## ヒートマップでできること <a href="#what-you-can-do" id="what-you-can-do"></a>

対象ページのURLを入力するだけで、クリック・スクロール・注視領域の状況を可視化し、サイト改善に役立てることができます。パフォーマンスタブではPageSpeed Insightsの分析結果も確認できます。

## 画面構成 <a href="#screen-layout" id="screen-layout"></a>

画面は「ヒートマップ」タブと「パフォーマンス」タブの2つで構成されています。

### ヘッダー <a href="#header" id="header"></a>

| 項目   | 説明                    |
| ---- | --------------------- |
| 期間選択 | 過去7日 / 過去4週 / カスタム期間  |
| 比較   | 異なる期間やセグメントのデータを並べて比較 |
| フィルタ | セグメントで絞り込み            |
| クリア  | 入力したURLや分析結果をリセット     |

### 対象URL入力 <a href="#url-input" id="url-input"></a>

分析したいページのURLを入力します。過去に分析したURLが履歴として表示されるため、ワンクリックで再選択できます。

## ヒートマップタブ <a href="#heatmap-tab" id="heatmap-tab"></a>

### 操作パネル <a href="#control-panel" id="control-panel"></a>

| 項目        | 説明                                |
| --------- | --------------------------------- |
| デバイス      | PC / モバイルを切り替え                    |
| 数値集計      | `回数`（PV数ベース）/ `UU数`（ユニークユーザー数ベース） |
| 統計のみ取得    | ポップアップを開かずにAPIからデータを取得            |
| ヒートマップを表示 | 対象ページをポップアップで開き、ヒートマップを重畳表示       |
| 接続解除      | ポップアップとの接続を切断                     |

### 分析結果サマリー <a href="#analysis-summary" id="analysis-summary"></a>

以下の指標が表示されます。

| 指標       | 説明                |
| -------- | ----------------- |
| PV数      | サンプルサイズ           |
| クリック     | 総クリック数            |
| CTR      | クリック率（%）          |
| 直帰率      | 直帰した割合（%）         |
| 平均スクロール率 | ページの平均スクロール到達率（%） |
| 要素数      | クリックされた要素の種類数     |

### 日次推移 <a href="#daily-chart" id="daily-chart"></a>

PV数（棒グラフ）とCTR・直帰率・平均スクロール率（折れ線グラフ）を日次で表示します。各系列のラベルをクリックして表示・非表示を切り替えられます。

### クリックランキング <a href="#click-ranking" id="click-ranking"></a>

クリック数の多い要素をTop 20まで表示します。各要素にはセレクタ、テキスト内容、クリック数、CTRが表示されます。セレクタはホバーでコピーできます。

### スクロール到達率 <a href="#scroll-rate" id="scroll-rate"></a>

ページを5%刻みで20段階に分割し、各位置への到達率を横棒グラフで表示します。

### 注視領域 <a href="#attention-area" id="attention-area"></a>

ページを20分割した各領域の平均滞在時間を横棒グラフで表示します。滞在時間が長いほど暖色で表示されます。

### 高PVページ一覧 <a href="#top-pages" id="top-pages"></a>

URLを入力する前の状態では、PV数上位のページ一覧（最大20件）が表示されます。`分析` ボタンをクリックすると、そのURLが自動入力されます。

### クイック分析 <a href="#quick-analysis" id="quick-analysis"></a>

表示中のヒートマップ分析結果に対して、AIによるクイック分析を実行できます。改善ポイントや注目箇所を即座に提示します。詳しくは [チャットエージェント](/ai/agent.md) をご覧ください。

## パフォーマンスタブ <a href="#performance-tab" id="performance-tab"></a>

PageSpeed Insights（PSI）によるパフォーマンス分析結果を確認できます。Desktop / Mobileの両方を同時に取得し、タブで切り替えて表示します。

### スコア <a href="#psi-scores" id="psi-scores"></a>

以下の4カテゴリのスコア（0〜100）が表示されます。

| カテゴリ           | 説明                  |
| -------------- | ------------------- |
| Performance    | ページの読み込み速度と応答性      |
| Accessibility  | アクセシビリティの準拠状況       |
| Best Practices | Web開発のベストプラクティスへの準拠 |
| SEO            | 検索エンジン最適化の状況        |

スコアは色分けで表示されます（90以上: 緑、50〜89: オレンジ、50未満: 赤）。

### Core Web Vitals <a href="#core-web-vitals" id="core-web-vitals"></a>

| 指標                            | 説明           |
| ----------------------------- | ------------ |
| LCP（Largest Contentful Paint） | 最大コンテンツの表示時間 |
| TBT（Total Blocking Time）      | ブロッキング時間の合計  |
| CLS（Cumulative Layout Shift）  | レイアウトのずれ     |

補助指標としてFCP、Speed Index、TTIも表示されます。

### その他のセクション <a href="#psi-sections" id="psi-sections"></a>

* **90点到達シミュレーション**: 各メトリクスで90点に到達するための目標値
* **ネットワーク概要**: リソースタイプ別のリクエスト数と転送サイズ
* **メインスレッドワーク**: JavaScriptの実行時間内訳
* **パフォーマンス改善提案**: レンダリングブロックリソース、未使用コード、遅いスクリプトなどの改善項目

### AI改善プロンプト <a href="#ai-prompt" id="ai-prompt"></a>

各カテゴリの改善指示をコーディングエージェントにそのまま貼り付けて利用できるプロンプトが生成されます。`一括コピー` で全カテゴリのプロンプトをまとめてコピーできます。


---

# 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/overview.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.