> 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/insight/smart-heatmap/click-heatmap.md).

# クリックヒートマップ

ページ上の各要素に対するクリック行動が見えるヒートマップです。**どの要素が使われていて、どの要素が見落とされているか**が一目で分かるので、ページ改善のヒントになります。

***

## このヒートマップで分かること

* ページ内で最もクリックされている要素はどこか
* CTA ボタンに十分なクリックが集まっているか
* リンクが設定されていないのにクリックされている箇所はないか

> 要素単位のクリック分析を行うには、対象ページに [要素設定](https://helps.ptengine.com/insight/smart-heatmap/pages/nMt0VhjvPFQTPK8rfwck#要素の設定) を済ませておいていただくと、各指標が見えるようになります（クリックヒートマップに切り替えると要素は自動でスキャンされます）。

***

## 2 つの表示モード

ヒートマップ左上のプルダウンで、表示モードを切り替えられます。デフォルトは **クリックヒートマップ（色表示）** です。まずは全体のクリック分布を直感的につかみ、その後に **要素クリック（数値表示）** で具体の要素単位データを掘り下げる流れがおすすめです。

| モード                       | 特徴                                                      |
| ------------------------- | ------------------------------------------------------- |
| **クリックヒートマップ**（色表示・デフォルト） | クリックが集中したエリアを色の濃淡で表示。インタラクション可能と指定されていない箇所のクリックも見つけられます |
| **要素クリック**（数値表示）          | クリック数・クリック率・クリック比率を要素ごとに表示                              |

<figure><img src="/files/8YR6JX4OaKCJM69yZeMc" alt=""><figcaption><p>2つの表示モードの切り替えプルダウン</p></figcaption></figure>

***

## クリックヒートマップモード（色表示）

クリックの重なりを\*\*サーモグラフィー（色の濃淡）\*\*で見せるモードです。要素設定がない箇所のクリックも見えるので、「リンクが設定されていないのに押されている」要素の発見に役立ちます。

| 色  | 意味             |
| -- | -------------- |
| 赤色 | クリックが集中しているエリア |
| 青色 | クリックが少ないエリア    |
| 透明 | クリックがほぼないエリア   |

***

## 要素クリックモード（数値表示）

要素ごとのクリックデータを**数値**で表示するモードです。さらに、以下の 3 つの指標を切り替えられます。

| 表示指標       | 説明                               |
| ---------- | -------------------------------- |
| **クリック数**  | 各要素がクリックされた合計回数                  |
| **クリック率**  | クリック数 ÷ 表示数。クリックされやすさの指標         |
| **クリック比率** | ページ全体のクリック数に対する各要素の割合。人気要素の特定に有効 |

<figure><img src="/files/MsPBxx5UQ5QtHSUhNDLh" alt=""><figcaption><p>要素クリックモード（各要素にクリック数が表示される）</p></figcaption></figure>

### 要素の詳細確認

ヒートマップ上の要素をクリックすると、その要素の詳細ポップアップが開きます。

* 表示数
* クリック数
* クリック比率
* クリック UV（ユニークユーザー数）
* コンバージョン数

<figure><img src="/files/GEPzGxkhytzpkmtCwVgm" alt=""><figcaption><p>要素詳細ポップアップ</p></figcaption></figure>

### 右側の要素リスト

ヒートマップ右側のパネルには、ページ内の全要素が一覧で並びます。

* **並び順**：デフォルトで\*\*ページ上の出現順（要素の上端の高さ順）\*\*に並びます。各列のヘッダーをクリックすると、その指標で並び替えられます
* **行をクリックしたとき**：要素リストの行をクリックすると、**右側パネルの内容がその要素の詳細データに切り替わります**。要素単位の詳細を確認するための導線で、ヒートマップ側でジャンプ・ハイライトする動作はありません

### 要素分析（詳細データと内訳）

要素をクリックすると、上記の主要数値に加えて、その要素をクリックした訪問の**内訳データ**も確認できます。「どんな経路で来た人が押しているのか」「どのデバイスから押しているのか」など、要素単位で訪問属性を分けて見たいときに便利です。

| 内訳データ | 説明                                  |
| ----- | ----------------------------------- |
| 流入元   | この要素をクリックした訪問の流入元（検索エンジン、キャンペーン など） |
| 端末情報  | この要素をクリックした訪問のデバイス情報                |
| 入口ページ | この要素をクリックした訪問のランディングページ             |
| 地域    | この要素をクリックした訪問の地域                    |

<figure><img src="/files/Vzu0WtioOjjNKHcRwJge" alt=""><figcaption><p>要素クリックの内訳データ・流入元フィルター</p></figcaption></figure>

### 要素の操作メニュー

要素を選択すると、以下の操作が行えます。

| 操作          | 説明                 |
| ----------- | ------------------ |
| リネーム        | 要素に分かりやすい名前を付ける    |
| 位置へ移動       | その要素の位置までビューをスクロール |
| **CTA に設定** | 重要な CTA としてマーク     |
| **固定表示に設定** | フローティング要素として設定     |
| 削除          | 要素マークを削除           |

<figure><img src="/files/nSWmcI072YwBcRaQR22U" alt=""><figcaption><p>要素を選択した状態と操作メニュー</p></figcaption></figure>

***

## CTA のみ表示フィルター

「**CTA のみ表示**」にチェックを入れると、CTA に設定した要素だけがヒートマップと要素リストに表示されます。重要な要素に絞ってサクッと分析できます。

<figure><img src="/files/e7KJBPXuKjk4C4AsyPUJ" alt=""><figcaption><p>CTA のみ表示フィルター</p></figcaption></figure>

> CTA の設定方法は [ブロック・要素の設定方法 — CTA とは](https://helps.ptengine.com/insight/smart-heatmap/pages/nMt0VhjvPFQTPK8rfwck#cta-とは) をご覧ください。

***

## 使用する指標

| 指標名        | 定義                              | 計算式                           | 表示モード  |
| ---------- | ------------------------------- | ----------------------------- | ------ |
| **クリック数**  | 対象要素に対するクリック数。リンクの有無に関わらず計測されます | —                             | 要素クリック |
| **クリック率**  | 対象要素のクリック率                      | 対象要素のクリック数 ÷ 対象ブロックに到達した PV 数 | 要素クリック |
| **クリック比率** | ページ内のクリック全体数に対する対象要素のクリック割合     | 対象要素のクリック数 ÷ ページ全体のクリック数      | 要素クリック |

> 各指標の詳しい計算式は [指標リファレンス](/insight/smart-heatmap/metric-reference.md) をご覧ください。

***

## 分析のヒント

### クリックの「ポジティブ要因」と「ネガティブ要因」

赤くなっている箇所が、必ずしも良い状態とは限りません。

* **ポジティブ要因**：CTA ボタンや重要なリンクにクリックが集まっている
* **ネガティブ要因**：リンクのない画像やテキストにクリックが集まっている（＝ ユーザーの期待とページの設計にズレがある）

### CTA クリック率の目安

CTA ボタンのクリック率は、訪問数に対して **10% 以上**が一つの目安です。10% を下回るときは、CTA の視認性、コピー、配置などを見直してみるとよいでしょう。

### チェックポイント

* クリックが集中している場所は、想定通りか
* よくクリックされている要素が、ページの目の届きにくい場所に置かれていないか
* クリックされているのにリンクやアクションが設定されていない要素はないか
* CTA ボタンのクリック率は十分か

***

## 関連ページ

* [コンバージョン貢献ヒートマップ](/insight/smart-heatmap/conversion-heatmap.md) — クリックされた要素が CV に貢献しているかを確認
* [滞在ヒートマップ](/insight/smart-heatmap/stay-heatmap.md) — クリックされた要素があるブロックの滞在状況
* [指標リファレンス](/insight/smart-heatmap/metric-reference.md)
