Claude Code に対応した初の AI ヒートマップ「HeatMapX」を提供開始

合同会社XTVは2026年6月4日、コマンドラインインターフェースから操作可能な「HeatMapX」の提供を開始した。AIによるクリック・スクロール診断と、改善HTMLパッチのプルリクエスト自動生成を行う。Claude Code連携に対応した初のCLI型ヒートマップとして、マーケティングエンジニアのCROワークフローを最適化する。
新製品NQ 89/100出典:PR Times

📋 記事の処理履歴

  • 📰 発表: 2026年6月5日 02:10
  • 🔍 収集: 2026年6月4日 17:26
  • 🤖 AI分析完了: 2026年6月5日 01:10(収集から7時間44分後)
合同会社XTV(本社:東京都、以下XTV)は、2026年6月4日、コマンドラインインターフェース(CLI)から操作する新しいタイプのヒートマップ「HeatMapX(ヒートマップエックス)https://heatmapx.com/」の提供を開始しました。

 ターミナルで heatmapx analyze を実行すると、対象ページのクリック・スクロールを計測し、AIがコンバージョン上の課題を診断、改善のためのHTMLパッチをプルリクエストとして自動生成します。Claude Code に対応したヒートマップとしては、当社が把握する限り初の提供となります(2026年6月時点/当社調べ)。無料プランから利用可能で、「npm i -g heatmapx」ですぐに試せます。

## 背景:ヒートマップは「見るだけ」で終わっていた

従来のヒートマップ/行動分析ツールは、クリックやスクロールを可視化する点では優れている一方、「見てもその先の改善になかなかつながらない」という課題が残っていました。気づきはダッシュボードの中にとどまり、実際の修正コードに落ちる前に忘れられてしまう――サイト改善(CRO:コンバージョン率最適化)の現場で繰り返されてきた“あるある”です。

一方で 2026 年現在、開発スキルを持つマーケターを指す「マーケティングエンジニア」「グロースエンジニア」という職種が、米国 SaaS 企業を中心に急速に広がっています。コードを読み書きでき、改善仮説を自分の手で実装まで持っていく彼ら/彼女らにとって、ダッシュボードを「眺める」型のヒートマップは日々のワークフローと噛み合いません。

HeatMapX は、こうした開発寄りのマーケター・グロース担当者を主な利用者として想定し、彼らの日常ワークフロー(ターミナル・Git・プルリクエスト)の中に分析と改善コードを置きにいくため、GUI ダッシュボード型のヒートマップに対する「CLI 型ヒートマップ」として設計されています。

## HeatMapX が提供する3つの体験

1. **CLI から実行する新しいヒートマップ**
heatmapx analyze /pricing のように、対象ページを指定して実行。クリック・スクロールを軽量タグで計測し、結果を CLI に返します。GUI を開かずに分析を回せます。

2. **AI が課題を診断し、改善コードを“PR”で提案**
計測データを AI(Anthropic Claude)が読み、コンバージョン上の最有力課題を指摘。さらに改善のための HTML パッチをプルリクエストとして生成するため、人間がレビューして取り込めます(自動で本番反映はしません)。

3. **仮説をコードとして管理する「CRO as Code」**
「どんな仮説で、何を変えたか」を Git の履歴として残せるため、改善の知見がチームとコードベースに蓄積されます。CLI × Git × AI の3点セットで、CRO を開発ワークフローに溶け込ませます。

## クイックスタート(30秒で試す)

# 1. インストール
npm i -g heatmapx

# 2. 対象ページを計測・AI診断
heatmapx analyze https ://example.com/pricing

# 3. 改善HTMLパッチをプルリクエストとして生成
heatmapx patch --pr

Claude Code を導入済みの環境では、Claude Code から直接 heatmapx コマンドを呼び出して上記フローを実行できます。

## 想定ユースケース

* **SaaS の料金ページ改善**:heatmapx analyze /pricing で CTA クリック分布を計測。AI が「Free → Pro アップグレード導線が弱い」と診断し、ボタン配置・コピー改善の HTML パッチをプルリクエストで提案。
* **メディア記事の離脱対策**:ブログ記事のスクロール深度を計測。AI が「読者の7割が冒頭3段落で離脱」と検出し、見出し配置・記事内 CTA 挿入位置の改善案をプルリクエストで提案。
* **EC サイトのカートCV改善**:商品詳細ページからカートまでの遷移を計測。AI が「サイズ選択 UI で離脱が集中」と特定し、セレクタ改善コードをプルリクエストで提案。

## 対応環境

* Node.js 18 以上
* 主要ブラウザ(Chrome / Safari / Edge / Firefox の最新版)
* 計測対象:Next.js / Nuxt / React / Vue / 静的HTML サイト(タグを1行入れるだけで導入可)
* 連携:Claude Code、GitHub(プルリクエスト自動生成)

よくある質問

HeatMapXとはどのようなツールですか?

CLIから操作可能なAIヒートマップツールです。対象ページのクリックやスクロールを計測・分析し、AIがコンバージョン上の課題を診断して改善のためのHTMLパッチをプルリクエストとして自動生成します。

HeatMapXの特徴は?

従来のGUIダッシュボード型と異なり、CLIやGitを活用する「CLI型ヒートマップ」です。開発ワークフローの中に分析から改善実装までを組み込む「CRO as Code」を推進します。

HeatMapXで利用可能な主な機能は何ですか?

対象ページの計測・分析(analyze)、AIによるコンバージョン課題の診断、改善HTMLパッチのGitHubプルリクエスト生成(patch --pr)が可能です。

HeatMapXの導入対象となる環境は?

Node.js 18以上で動作し、Next.js、Nuxt、React、Vue、静的HTMLサイトに対応しています。タグを1行追加するだけで計測可能です。

Claude Codeとの連携は可能ですか?

はい、Claude Codeを導入済みの環境であれば、Claude Codeから直接heatmapxコマンドを呼び出して計測やパッチ生成フローを実行できます。