---
title: Claude Code Chrome デバッグ連携でWebアプリを効率化する方法
description: Claude CodeとChrome DevToolsをMCP連携すると、コード修正とブラウザでの画面確認・デバッグを1つの指示で実行できます。スクリーンショット検証やパフォーマンス分析、フォームテスト自動化の手順と活用パターンを解説します。
image: https://start-link.jp/hubfs/blog/screenshots/generated/kv_claude-code-chrome-devtools.jpg
---

[![StartLink](https://start-link.jp/hs-fs/hubfs/logo/%E6%9C%80%E7%B5%82Start%20Link%20(500%20x%20150%20px)%20(%E8%83%8C%E6%99%AF%E3%81%82%E3%82%8A).png?width=130&height=39&name=%E6%9C%80%E7%B5%82Start%20Link%20(500%20x%20150%20px)%20(%E8%83%8C%E6%99%AF%E3%81%82%E3%82%8A).png "StartLink")](https://start-link.jp)

- [会社情報About](https://start-link.jp/about)
- [サービスService](https://start-link.jp/service)
- [プロダクトProducts](https://start-link.jp/sync)
- [YoutubeYoutube](https://start-link.jp/about/sns)
- [ブログBlog](https://start-link.jp/hubspot-ai)
- [業界別ガイドIndustry guides](https://start-link.jp/case)
- [採用情報Recruit](https://start-link.jp/recruit)

[資料DL](https://start-link.jp/download/service) [無料相談 →](https://start-link.jp/contact)

[会社情報](https://start-link.jp/about) [サービス](https://start-link.jp/service) [プロダクト](https://start-link.jp/sync) [Youtube](https://start-link.jp/about/sns) [ブログ](https://start-link.jp/hubspot-ai) [業界別ガイド](https://start-link.jp/case) [採用情報](https://start-link.jp/recruit)

[資料ダウンロード](https://start-link.jp/download/service) [無料相談 →](https://start-link.jp/contact)

- [トップ](https://start-link.jp)
- [会社情報](https://start-link.jp/about)
- [サービス](https://start-link.jp/service)
- [Youtube](https://start-link.jp/about/sns)
- [ブログ](https://start-link.jp/hubspot-ai)
- [Contact](https://start-link.jp/contact)
- [個人情報保護方針](https://start-link.jp/privacy-policy)
- [個人情報取り扱い規定](https://start-link.jp/personal-information-processing-agreement)

[ホーム](https://start-link.jp) › [ブログ](https://start-link.jp/hubspot-ai) ›[AI活用](https://start-link.jp/hubspot-ai/ai) ›[Claude Code実践](https://start-link.jp/hubspot-ai/ai/claude-code-practice) ›Claude Code Chrome デバッグ連携でWebアプリを効率化する方法

# Claude Code Chrome デバッグ連携でWebアプリを効率化する方法

- 2026年3月17日
- 最終更新: 2026年10月24日

![](https://start-link.jp/hubfs/blog/screenshots/generated/kv_claude-code-chrome-devtools.jpg)

この記事の結論

Claude CodeとChrome DevToolsをMCP経由で連携すれば、ブラウザ上で動作するWebアプリのDOM操作・スクリーンショット撮影・パフォーマンス分析・コンソールログ監視をClaude Codeから直接実行できます。「コード修正→ブラウザ確認→再修正」という手動サイクルが、Claude Codeへの1回の指示でコード修正と画面検証を同時に完了する自動サイクルに変わります。

ブログ目次

もっと見る ▼

**Claude CodeとChrome DevToolsをMCP経由で連携すれば、ブラウザ上で動作するWebアプリのDOM操作・スクリーンショット撮影・パフォーマンス分析・コンソールログ監視をClaude Codeから直接実行できます。「コード修正→ブラウザ確認→再修正」という手動サイクルが、Claude Codeへの1回の指示でコード修正と画面検証を同時に完了する自動サイクルに変わります。**

「コードを直してはブラウザを開いて確認する、その繰り返しに時間を取られている」「レスポンシブ対応を各デバイスサイズで目視チェックするのが負担になっている」「Lighthouseのスコアは出るけれど、そこから何をどう直せばいいのか調査に時間がかかる」——。

Chrome DevTools MCP連携とは、Chrome DevTools Protocol（CDP）をMCPサーバー経由でClaude Codeに公開し、ブラウザの操作・検査・分析をAIが直接行えるようにする仕組みです。導入すると、目視での確認作業をAIに委任し、修正と検証を1つの指示で回せるようになります。

## この記事でわかること

この記事では、フロントエンド開発でUIデバッグやパフォーマンス最適化に取り組むエンジニアの方に向けて、連携の仕組みから設定手順、実務での活用パターンまでを順に整理しています。

- **Chrome DevTools MCPサーバーの仕組みと設定手順** — Chrome DevTools Protocolを介してブラウザ操作をAIに委任する基本構造と、接続までの具体的なコマンドがわかります。
- **スクリーンショット検証・パフォーマンス分析・フォームテストの3つの活用パターン** — ビジュアルリグレッション検証やパフォーマンス分析など、実務での活用を想定した指示文の書き方がわかります。
- **Hooks機能やGitHub連携と組み合わせた自動化の設計** — ファイル保存やPR作成をトリガーにブラウザ検証を自動実行する、仕組みで解決する考え方がわかります。
- **自社の開発フローに合わせたスモールスタートの進め方** — 全ページを一気に自動化するのではなく、どこから着手すべきかの優先順位の付け方がわかります。
- **セキュリティ上の注意点と向かないケース** — 本番環境での利用を避けるべき理由や、機密データの扱い方など、導入前に押さえておきたい制約がわかります。

最後まで読むと、Claude Code経由でブラウザ操作を自動化し、デバッグサイクルを自分のチームの開発フローに組み込めるようになります。

## Chrome DevTools MCP連携とは

Chrome DevTools MCP連携は、単なる「AIにブラウザを触らせる機能」ではなく、既存のブラウザ自動化の仕組みをClaude Codeの対話インターフェースに橋渡しする仕組みだと捉えると理解しやすくなります。PuppeteerなどのツールがCDPを内部で使っているのと同じ土台の上で、Claude Codeが自然言語の指示を受けてブラウザを操作します。

### Chrome DevTools Protocol（CDP）とは

Chrome DevTools Protocolは、Chromeブラウザの内部機能（DOM操作、ネットワーク監視、パフォーマンス計測、コンソールアクセスなど）をプログラムから操作するためのプロトコルです。

### MCPサーバーが果たす役割

Chrome DevTools MCPサーバーは、CDPをMCPの標準インターフェースに変換する役割を担います。Claude Codeは「このページのスクリーンショットを撮って」「コンソールのエラーログを確認して」といった自然言語の指示を受け取り、MCPサーバー経由でブラウザを操作します。MCPの基本概念については「[Claude Code × MCP連携ガイド](https://start-link.jp/hubspot-ai/ai/claude-code-practice/claude-code-mcp-integration)」で詳しく解説しています。

### Chrome DevTools MCPでできること

主な機能は以下の通りです。ページ遷移からパフォーマンス分析まで、通常はブラウザとDevToolsを手動で行き来しながら行っていた作業を、Claude Codeへの指示に置き換えられます。

| 機能 | 説明 | 主な用途 |
| --- | --- | --- |
| ページナビゲーション | URL指定でページ遷移・新規タブ作成 | テスト対象ページへの移動 |
| スクリーンショット | 画面全体またはビューポートの画像取得 | UI検証・ビジュアルリグレッション |
| DOM操作 | 要素のクリック・入力・ドラッグ | フォームテスト・UIインタラクション |
| コンソール監視 | console.log/error/warnの取得 | エラー検出・デバッグ情報確認 |
| ネットワーク監視 | HTTP/HTTPSリクエスト・レスポンスの取得 | API通信の検証・パフォーマンス確認 |
| パフォーマンス分析 | パフォーマンストレース取得・インサイト分析 | 表示速度・Core Web Vitals改善 |
| Lighthouse監査 | アクセシビリティ・SEO・ベストプラクティスの監査（パフォーマンスは対象外） | 画面の品質チェック |
| JavaScript実行 | 任意のスクリプトをページ上で実行 | データ取得・状態操作 |

## 基本的な使い方

設定自体はシンプルで、`claude mcp add`でMCPサーバーを追加するだけで、あとはClaude Codeへの自然言語の指示で操作を進められます。接続からエラー対応までの流れを順に見ていきます。

### Step 1: Chrome DevTools MCPサーバーの追加

Chrome DevTools MCPサーバーは、シェル（ターミナル）から`claude mcp add`コマンドで登録します。Claude Codeのセッション内の`/mcp`コマンドは、登録済みサーバーの状態確認や認証のためのもので、サーバーの追加には使いません。公式リポジトリのClaude Code向け手順は次のコマンドです。

```
claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest
```

`--scope user`を付けると、すべてのプロジェクトで使える設定として登録されます。プロジェクト単位でチームに共有したい場合は、プロジェクト直下の`.mcp.json`に次のように記述する方法もあります。

```
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest"]
    }
  }
}
```

コマンドで登録する方法と`.mcp.json`に書く方法の2つを、次の図にまとめました。

![Chrome DevTools MCPサーバーをclaude mcp addコマンドまたは.mcp.jsonで追加する手順](https://start-link.jp/hubfs/blog/screenshots/generated/gen_DD-24_mcp.png)

この設定のままであれば、Chromeを自分で起動する必要はありません。Claude CodeがMCPサーバーに接続しただけではChromeは起動せず、ページを開くなどブラウザを必要とするツールを初めて使ったときに、Chrome DevTools MCPサーバーが専用のプロフィールで新しいChromeを立ち上げ、そこを操作します。専用プロフィールは`$HOME/.cache/chrome-devtools-mcp/chrome-profile`に保存され、実行をまたいで再利用されます。普段使いのChromeのログイン状態や拡張機能とは分かれるため、検証用の環境として扱いやすい方式です。

### 既存のChromeに接続する場合

ログイン済みの状態を引き継ぎたいときや、サンドボックス内のMCPクライアントからサンドボックス外のChromeを操作したいときは、先にChromeを起動し、MCPサーバーをそこへ接続させる方式を選びます。公式には2通りあります。

1つ目は、Chrome 144以降で使える自動接続です。Chromeで`chrome://inspect/#remote-debugging`を開いてリモートデバッグを有効にし、`.mcp.json`のMCPサーバーの引数に`--autoConnect`を加えます。接続時にChrome側で許可を求めるダイアログが表示されます。

```
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["chrome-devtools-mcp@latest", "--autoConnect"]
    }
  }
}
```

2つ目は、リモートデバッグポートを使う手動接続です。`.mcp.json`のMCPサーバーの引数に`--browser-url`でChromeのURLを指定します。

```
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["chrome-devtools-mcp@latest", "--browser-url=http://127.0.0.1:9222"]
    }
  }
}
```

接続先のChromeは、既存のChromeをすべて終了してから、デバッグポートと非既定のユーザーデータディレクトリを指定して起動します。リモートデバッグポートを開くとき、Chromeは既定のユーザーデータディレクトリの使用を認めない仕様のため、`--user-data-dir`は必須です。

```
# macOSの場合
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-profile-stable

# リモートデバッグが有効か確認
curl http://127.0.0.1:9222/json/version
```

`--browser-url`のポート番号と、Chromeの`--remote-debugging-port`は同じ値にそろえます。リモートデバッグポートを開いている間は、同じマシン上の任意のアプリケーションがそのブラウザを操作できます。機密性の高いサイトを開いたまま使わないでください。

### Step 2: ページへのナビゲーションとスクリーンショット

接続が完了すると、Claude Codeへの指示でブラウザ操作を依頼できるようになります。

```
http://localhost:3000 を開いて、
トップページのスクリーンショットを撮って。
表示に問題がないか確認して。
```

Claude Codeはスクリーンショットの画像を分析し、レイアウト崩れ・テキストの切れ・画像の未表示などを検出できます。視覚的な確認作業をAIに委任することで、目視チェックの負担を減らせます。

### Step 3: コンソールログの確認とエラー対応

ブラウザのコンソールに出力されるログやエラーメッセージをClaude Codeが取得し、原因特定からコード修正までを一括で処理します。Slackに報告されたバグを起点にこの検証を走らせたい場合は、[Claude Code × Slack連携](https://start-link.jp/hubspot-ai/ai/claude-code-practice/claude-code-slack-integration)で連携フローを構築できます。

```
http://localhost:3000/dashboard を開いて、
コンソールに出ているエラーを全て確認して。
修正可能なエラーがあれば、該当するソースコードを修正して。
```

Claude Codeは、指定URLへのナビゲーション、コンソールのエラーメッセージの全件取得、スタックトレースからのソースファイル特定、該当箇所の修正、修正後の再読み込みによる解消確認、という一連の流れを実行します。ここで押さえておきたいのは、AIが行うのは「原因の切り分けと修正案の作成」までで、修正内容が業務要件に沿っているかどうかの最終確認は人が担うべき領域だという点です。大規模な仕様変更につながる修正や、影響範囲が広いコンポーネントの改修は、AIの提案をそのまま適用するのではなく、差分を確認してから反映することをおすすめします。

## 実務での活用パターン

Chrome DevTools連携の価値は、単発の機能としてではなく、日々の開発フローに組み込んで初めて実感しやすくなります。ここでは、ビジュアル確認・パフォーマンス改善・フォームテストという、フロントエンド開発で繰り返し発生する3つの作業を例に、Before/Afterで比較します。各パターンでは「従来の手動フロー」と「連携後のフロー」を対比したうえで、そのまま使える指示文の例を示します。どの工程がどのくらい圧縮されるかを見比べながら、自社の開発フローに近いパターンから取り入れてみてください。

### パターン1: ビジュアルリグレッション検証

CSSやコンポーネントの変更後に、UIの見た目が意図通りかをスクリーンショットで検証するパターンです。

| 項目 | Before（従来フロー） | After（Claude Code × Chrome DevTools連携） |
| --- | --- | --- |
| 作業内容 | コード修正→手動でブラウザを開き目視確認→レスポンシブを各デバイスサイズで確認→問題があれば修正して再確認 | 修正後の指示1回で、デスクトップ・タブレット・モバイルの3サイズを撮影し、レイアウト崩れを分析・修正まで実行 |
| ブラウザとの往復 | 複数回（修正→目視確認→再修正を繰り返す） | 1回（指示内で検証まで完了する） |

指示文の例は以下の通りです。

```
src/components/Header.tsx を修正した前提で、次の確認をお願いします:

1. http://localhost:3000 を開く
2. デスクトップ（1920×1080）でスクリーンショットを撮る
3. タブレット（768×1024）にリサイズしてスクリーンショットを撮る
4. モバイル（375×667）にリサイズしてスクリーンショットを撮る
5. 各サイズでレイアウト崩れがないか分析する
6. 問題があれば自動で修正して、再度スクリーンショットで確認する
```

Claude Codeはスクリーンショットの画像を直接分析できるため、「ボタンがはみ出している」「テキストが重なっている」「余白が不均一」といった視覚的な問題を検出し、CSSの修正まで行います。手動でのデバイスサイズ切り替えと目視確認が減ることで、修正のたびにエディタとブラウザを何度も往復する作業から解放されます。

### パターン2: パフォーマンス分析と最適化

パフォーマンストレースをClaude Codeから実行し、Core Web Vitalsの改善提案とコード修正を同時に行うパターンです。Chrome DevTools MCPの`lighthouse_audit`ツールはアクセシビリティ・SEO・ベストプラクティスなどを対象とし、パフォーマンスは対象外です。パフォーマンスの計測は`performance_start_trace`（トレースの開始）と`performance_analyze_insight`（インサイトの詳細分析）で行います。Lighthouseのパフォーマンススコアそのものが必要な場合は、Lighthouse CLIなど別の実行環境を用意する必要があります。

| 項目 | Before（従来フロー） | After（Claude Code × Chrome DevTools連携） |
| --- | --- | --- |
| 作業内容 | DevToolsを手動で開いてパフォーマンスを記録→結果を読み解いて改善ポイントを特定→修正方法を調査→修正して再計測 | トレースの取得から改善提案・コード修正・再計測までを1回の指示で実行 |
| 調査と修正の分断 | 計測結果の読解と修正方法の調査が別作業になる | 計測結果の解析からコード修正までが1つの指示で連続する |

指示文の例は以下の通りです。

```
http://localhost:3000 に対してパフォーマンストレースを取得して、
以下の項目について分析と改善を行って:

1. LCP（Largest Contentful Paint）の最適化
2. CLS（Cumulative Layout Shift）の改善
3. 不要なJavaScriptのバンドルサイズ削減

改善可能な項目はコードを直接修正して、
修正後に再度トレースを取得して改善を確認して。
```

Claude Codeは、トレースの結果とインサイトを構造的に解析し、画像のlazy loading追加・不要なimportの削除・CSS最適化といった具体的なコード修正を提案・実行します。アクセシビリティやSEOの観点を加えたいときは、同じ流れで`lighthouse_audit`による監査を追加できます。ただし、パフォーマンス改善の中には、CDNの見直しやサーバー構成の変更など、コード修正だけでは解決できない要因も含まれます。例えば、計測結果でサーバーの応答時間がボトルネックと示された場合、画像やJavaScriptの最適化ではなくインフラ側の見直しが必要になるケースがあります。結果を見たときに「フロントエンドのコードで直せる要因か」「インフラ・構成側の問題か」を最初に切り分けておくと、AIへの指示の出し方も変わってきます。AIが出した改善案をそのまま採用するのではなく、どこまでがフロントエンドの責任範囲かを人が切り分ける視点は残しておく必要があります。こうした取り組みの詳細は、[経営データの可視化](https://start-link.jp/service/claude-code/business-intelligence)や[コンテンツマーケティングの支援](https://start-link.jp/service/claude-code/content-marketing)のページでもご紹介しています。

### パターン3: フォーム入力テストの自動化

Webアプリのフォームに対して、さまざまなパターンの入力値を自動で試行し、バリデーションの動作を検証するパターンです。

| 項目 | Before（従来フロー） | After（Claude Code × Chrome DevTools連携） |
| --- | --- | --- |
| 作業内容 | テストケース設計→手動入力でバリデーション確認→エッジケースの手動入力→エラーメッセージの目視確認 | 正常系・必須チェック・形式チェック・境界値・特殊文字の5パターンを自動実行し、スクリーンショットで検証 |
| テストケースの実行単位 | 1ケースごとに手動で入力・確認を繰り返す | 5パターンを1回の指示にまとめて連続実行できる |

指示文の例は以下の通りです。

```
http://localhost:3000/contact のお問い合わせフォームに対して、
以下のテストケースを自動で実行して:

1. 正常系: 全フィールドに有効な値を入力して送信
2. 必須チェック: 各フィールドを空のまま送信
3. 形式チェック: メールアドレスに不正な形式を入力
4. 境界値: 各フィールドに最大文字数+1の文字列を入力
5. 特殊文字: XSS攻撃パターン（<script>alert('test')</script>）を入力

各ケースでスクリーンショットを撮り、
バリデーションメッセージが正しく表示されているか確認して。
問題があればコードを修正して。
```

## 他のブラウザ自動化ツールとの違い

### 従来のE2Eテストツールとの関係

Puppeteer、Seleniumなどの従来のブラウザ自動化ツールはいずれも、テストコードとして操作手順をあらかじめ記述しておくツールです。一方、Chrome DevTools MCP連携は、Claude Codeへの自然言語の指示をきっかけに、その場でブラウザ操作を組み立てて実行します。既存のE2Eテストの資産を置き換えるものではなく、コード修正の直後に「すぐ確認したい」という場面を補う役割、という位置づけです。

### Claude Code経由で使うメリットと向かないケース

Claude Code経由で使う大きなメリットのひとつは、コード修正とブラウザ確認を別のツールに切り替えずに、同じ対話の中で完結しやすい点です。一方で、CIパイプラインに組み込む網羅的な回帰テストや、決まったシナリオを毎回同じ手順で実行したいケースでは、テストコードとして資産化できる既存のE2Eテストツールが選択肢になりやすいと考えられます。両者は競合するものというより、開発中の即時確認はClaude Code×Chrome DevTools、リリース前の網羅的な検証は既存のE2Eテストツール、という役割分担で併用するのが現実的な選択肢のひとつです。

## 関連コマンドとの組み合わせ

Chrome DevTools連携は単体でも便利ですが、他の仕組みと組み合わせることで、目視確認への依存を減らし、チーム全体で再現できる形に仕組み化できます。

### Hooks機能との連携

Claude Codeの[Hooks機能](https://start-link.jp/hubspot-ai/ai/claude-code-practice/claude-code-hooks-automation)を使えば、Claude Codeがファイルを編集・書き込んだ直後（`PostToolUse`イベント）などをトリガーに、Chrome DevTools検証を促す処理を自動実行できます。2026年10月時点の設定は、イベント名の下に`matcher`（対象ツール）を置き、その中の`hooks`配列に`type`と`command`を書く構造です。

```
{
  "hooks": {
    "PostToolUse": [
      {
        "matcher": "Edit|Write",
        "hooks": [
          {
            "type": "command",
            "command": "./scripts/check-ui-after-edit.sh"
          }
        ]
      }
    ]
  }
}
```

`command`にはシェルコマンドを指定します。フックにはツール呼び出しの内容がJSONで標準入力に渡されるため、スクリプト側で編集されたファイルのパス（`tool_input.file_path`）を読み、`src/components/`配下のときだけ「スクリーンショットを撮って、変更箇所のUIを確認して」というメッセージを標準エラー出力に書いて終了コード2で終えると、その内容がClaudeに伝わります。コンポーネントファイルの編集をきっかけに、ブラウザの画面キャプチャを取得してUIに問題がないかチェックする運用にしやすくなります。「確認を忘れないようにする」という注意喚起ではなく、編集した時点で自動的に検証が走る仕組みにしておく方が、チーム内での定着度は上がりやすくなります。

### GitHub連携との組み合わせ

PRの作成時に、変更箇所のビフォー/アフターのスクリーンショットを自動で取得してPRの説明に添付する運用も可能です。

```
PRを作成する前に、以下を実行して:
1. mainブランチの画面をスクリーンショット
2. 現在のブランチの画面をスクリーンショット
3. 2枚を比較して変更点を説明
4. PRの説明にスクリーンショットと変更点の説明を含める
```

レビュアーがコードを読む前に見た目の変化を把握できるため、レビューの手戻りを減らす効果も期待できます。

### ネットワーク監視との組み合わせ

API通信の検証も、Chrome DevTools MCP連携で可能です。

```
http://localhost:3000/dashboard を開いて、
以下のネットワークリクエストを監視して:

1. /api/ で始まるリクエストを全て記録
2. レスポンスタイムが500ms以上のリクエストを特定
3. 4xx/5xxエラーが返っているリクエストを検出
4. 問題のあるAPIエンドポイントのバックエンドコードを確認・修正
```

フロントエンドの表示問題の原因がバックエンドにある場合でも、Chrome DevTools連携でネットワーク通信を可視化し、バックエンドのコード修正までClaude Codeが一括で対応します。なお、指示文に出てくる「500ms」という応答時間の閾値はあくまで一例です。対象システムのサービスレベルや画面の用途に合わせて、許容できる応答時間をあらかじめ決めてから指示に組み込んでください。

## 自社の開発フローに合わせた導入の進め方

Chrome DevTools連携をどこまで自動化するかは、チームの開発フローや使用しているフレームワーク、CI環境によって変わってきます。企業様によって最適な導入範囲は異なりますので、いきなり全ページ・全機能を自動化しようとせず、効果を実感しやすいところから広げていくアプローチをおすすめします。

### スモールスタートで始める導入ステップ

全てのページ・全ての検証項目を最初から自動化しようとすると、設定に時間がかかるだけでなく、チーム内での運用ルールが固まらないまま形骸化しやすくなります。実際に取り組む際は、次のような順序でスコープを広げていくと着手しやすくなります。

1. 開発頻度が高く、修正のたびに目視確認が発生しているページ（よく触るコンポーネントを含むダッシュボードやフォーム画面など）を1〜2つ選び、スクリーンショット取得の指示から試す
2. 手応えを感じた範囲で、パフォーマンストレースやフォーム入力テストなど目的別の指示文をドキュメント化し、他のメンバーも同じ指示文を再利用できるようにする
3. 効果が見えてきたコンポーネント単位で、Hooks機能によるファイル編集後の自動検証を導入する
4. PR作成時のビフォー/アフター比較まで自動化し、レビュー工程に組み込む

一気に全ページへ展開するのではなく、効果を実感しやすい範囲から段階的に広げていく方が、運用として無理なく定着しやすいと考えています。

### チームで運用を仕組み化するポイント

個々のエンジニアの意識や熟練度に頼るのではなく、Hooksでファイル編集後の検証を自動化したり、GitHub連携でPR作成時のスクリーンショット添付を標準化したりすることで、新しく加わったメンバーでも同じ品質のチェックを再現できるようになります。コード修正→ローカルでのブラウザ確認→Hooksによる自動検証→PR作成時のビフォー/アフター比較、という一連の流れを一気通貫でつなげておくと、確認作業が特定の人のスキルに依存しにくくなります。指示文自体をチームで共有・改善していく運用にしておくと、誰が担当してもチェックの粒度がそろいやすくなります。

## セキュリティと運用上の注意点

便利さの一方で、Chrome DevTools連携はブラウザの操作権限をAIに渡す仕組みでもあるため、運用上の制約は正直に共有しておく必要があります。

### リモートデバッグポートの管理

既存のChromeに`--browser-url`で接続する方式では、Chromeのリモートデバッグポート（本記事の例では9222）を開きます。公式の注意書きどおり、ポートが開いている間は、同じマシン上のどのアプリケーションもそのブラウザに接続して操作できます。ポートは`127.0.0.1`（ローカルホスト）に限定し、外部からのアクセスを許可しない設定にしてください。リモート環境やCI/CD環境で使用する場合は、ファイアウォールで適切にアクセス制御を行います。Chromeを`--user-data-dir`で分けた検証用プロフィールで起動すれば、普段のブラウジングのデータを操作対象から切り離せます。MCPサーバーに自動起動させる方式では、このポートを自分で開く必要はありません。

### 本番環境での使用は避ける

Chrome DevTools MCP連携は、開発環境・ステージング環境での利用を想定したツールです。本番環境のブラウザに接続してデバッグ操作を行うと、セキュリティ上のリスクが高くなるため避けることをおすすめします。本番環境のデバッグが必要な場合は、ログ・モニタリングツールを使用することをおすすめします。

### 機密データの取り扱い

スクリーンショットやDOM取得の結果に、顧客の個人情報やAPIキーなどの機密データが含まれる可能性があります。Claude Codeとの対話ログに機密データが残らないよう、テスト用のダミーデータを使用することをおすすめします。

## よくある質問

### Q1: Chrome DevTools MCPサーバーはChrome以外のブラウザでも使えますか？

公式にサポートされているのは、Google ChromeとChrome for Testingのみです。Edge・Brave・OperaなどのChromiumベースのブラウザは動作する可能性がありますが、公式は動作を保証しておらず、想定外の挙動が起きる場合があります。利用する場合は自己責任での検証が前提です。また、Safari（WebKit）やFirefox（Gecko）はChrome DevTools Protocol（CDP）に対応していないため、別途対応するMCPサーバーが必要です。

### Q2: ヘッドレスモード（画面表示なし）でも動作しますか？

はい、動作します。MCPサーバーにChromeを自動起動させる方式では、`.mcp.json`のサーバーの引数に`--headless`を加えます。CI/CD環境やリモートサーバーなど、ディスプレイがない環境で使うときの設定です。

```
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["chrome-devtools-mcp@latest", "--headless"]
    }
  }
}
```

ヘッドレスでも、ページ遷移・スクリーンショット・DOM操作・パフォーマンストレースなどのツールを利用できます。

### Q3: 複数のタブやウィンドウを同時に操作できますか？

はい、Chrome DevTools MCPサーバーは複数のページ（タブ）を管理できます。`new_page`でタブを作成し、`select_page`で操作対象を切り替え、`list_pages`で現在開いているページの一覧を取得できます。A/Bテストの2パターンを同時に開いてスクリーンショットを比較する、といった使い方が可能です。

### Q4: 既存のE2Eテストは置き換える必要がありますか？

置き換える必要はありません。CIパイプラインで毎回同じシナリオを回す網羅的なE2Eテストは、テストコードとして資産化できる既存のテストツールの方が適しています。Chrome DevTools連携は、開発中に「今直したところをすぐ確認したい」という場面を補う位置づけとして、既存のテスト資産と併用するのが現実的です。

## まとめ

Claude CodeとChrome DevToolsのMCP連携は、フロントエンド開発のデバッグサイクルを短縮する仕組みです。コード修正後のビジュアルリグレッション検証、パフォーマンストレースによる分析、フォーム入力テストの自動実行など、従来は手動で行っていた「ブラウザでの確認作業」をClaude Codeに委任できます。

押さえておきたいポイントは以下の通りです。

- 修正→確認→再修正というサイクルをClaude Codeへの指示の中で回せるため、ブラウザとの往復が減り、フロントエンドエンジニアは本質的な設計・実装に集中しやすくなります
- 導入の中心はChrome DevTools MCPサーバーの追加（`claude mcp add`コマンド1つ）のため、まずは開発中の1ページのスクリーンショット取得から試し、効果を感じられた範囲からHooksやGitHub連携へ段階的に広げていく進め方が取り組みやすいと考えています
- 個人の目視確認に頼るのではなく、Hooksでの自動検証やPR時のスクリーンショット比較を仕組み化しておくと、チームメンバーが変わっても同じ品質の確認を再現できます
- 本番環境での使用は避け、機密データはダミーデータに置き換えるなど、セキュリティ上の制約を踏まえた運用を心がけてください

最初の一歩として、次の3ステップから始めることをおすすめします。

1. シェルで`claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest`を実行してMCPサーバーを追加する（Chromeは、ブラウザを使うツールの初回実行時にサーバーが自動で起動します）
2. 開発中の1ページに対して、スクリーンショット取得とレイアウト確認をClaude Codeに指示して試してみる
3. 手応えを感じたら、よく修正するコンポーネントのビジュアルリグレッション検証やHooksとの連携に広げる

Claude Codeの全コマンド一覧は[Claude Codeチートシート](https://start-link.jp/hubspot-ai/ai/claude-code-practice/claude-code-cheatsheet)をご覧ください。AI活用の全体像は[AI活用完全ガイド](https://start-link.jp/hubspot-ai/ai)で解説しています。

CRMを活用した業務効率化やAIとの連携に関するご相談は、CRM特化型コンサルティングのHubSpotゴールドパートナーのStartLinkまでお気軽にお問い合わせください。

## あわせて読みたい

- [Claude Computer Useの使い方｜AIがPC画面を操作するデスクトップ自動化の実践ガイド](https://start-link.jp/hubspot-ai/ai/claude-code-practice/claude-code-computer-use)
- [Claude Coworkの使い方｜CLAUDE.mdの設計・スキル構築・MCP接続まで完全セットアップガイド](https://start-link.jp/hubspot-ai/ai/claude-code-practice/claude-cowork-setup-guide)
- [Claude Code × VS Code / JetBrains連携｜IDEとターミナルの最適な使い分け](https://start-link.jp/hubspot-ai/ai/claude-code-practice/claude-code-ide-integration)

記事の内容を、そのまま実務に落とし込みたい方向け

HubSpotゴールドパートナーのStartLinkが、HubSpot導入・AI活用・CRM整備・業務効率化までをまとめて支援しています。記事で気になったテーマを、そのまま相談ベースで整理できます。

[サービス概要を見る](https://start-link.jp/service/hubspot-ai) [無料で相談する](https://start-link.jp/contact)

## 次に読む

### [![](https://start-link.jp/hubfs/blog/screenshots/generated/gen_DD-61_fast_mode_model_support.png) Claude Codeのfast mode（/fast）｜対応モデル・料金・使いどころの判断基準](https://start-link.jp/hubspot-ai/ai/claude-code-practice/claude-code-fast-mode)

### [![](https://start-link.jp/hubfs/blog/screenshots/generated/gen_DD-60_agent_view_session_states.png) Claude Code agent viewの使い方｜全セッションを1画面で管理](https://start-link.jp/hubspot-ai/ai/claude-code-practice/claude-code-agent-view)

### [![](https://start-link.jp/hubfs/blog/screenshots/generated/gen_DD-58_goal_evaluation_loop.png) Claude Codeの/goalコマンド｜完了条件でAIを自律実行させる方法](https://start-link.jp/hubspot-ai/ai/claude-code-practice/claude-code-goal-command)

## あわせて読みたいAI実践ガイド

### [Setup Claude Coworkの使い方と初期設定 導入直後にやるべき設定、CLAUDE.md、スキル設計、運用の型をまとめています。](https://start-link.jp/hubspot-ai/ai/claude-code-practice/claude-cowork-setup-guide)

### [Team Claude Codeでチーム開発を効率化する方法 レビュー、権限管理、共有ルールまで踏み込んだ実践的なチーム利用ガイドです。](https://start-link.jp/hubspot-ai/ai/claude-code-practice/claude-code-team-development)

### [MCP Claude Code × MCP連携ガイド 社内システムとつなぎ、実業務でAIエージェントを動かす方法を整理しています。](https://start-link.jp/hubspot-ai/ai/claude-code-practice/claude-code-mcp-integration)

### [Service HubSpot × AIの支援サービス 導入設計から内製化、ワークフロー自動化までの支援内容を確認できます。](https://start-link.jp/service/hubspot-ai)

## 記事の内容を、そのまま実務に落とし込みたい方向け

[無料で相談する](https://start-link.jp/contact) [資料をダウンロード](https://start-link.jp/hubspot-ai/ai/claude-code-practice/claude-code-chrome-devtools#blog-download)

 株式会社StartLinkは、事業推進に関わる「販売促進」「DXによる業務効率化（ERP/CRM/SFA/MAの導入）」などのご相談を受け付けております。 サービスのプランについてのご相談/お見積もり依頼や、ノウハウのお問い合わせについては、[無料のお問い合わせページ](https://www.start-link.jp/contact)より、お気軽にご連絡くださいませ。

###### 関連キーワード:

[AI](https://start-link.jp/hubspot-ai/tag/ai) [生成AI](https://start-link.jp/hubspot-ai/tag/生成ai)

## サービス資料を無料DL

## 著者情報

![7-1](https://start-link.jp/hubfs/7-1.jpg)

### 今枝 / Imaeda

 株式会社StartLink 代表取締役。累計150社以上のHubSpotプロジェクト支援実績を持ち、Claude CodeやHubSpotを軸にしたAI活用支援・経営基盤AXのコンサルティング事業を展開。  
 HubSpotのトップパートナー企業や大手人材グループにて、エンタープライズCRM戦略策定・AI戦略ディレクションを経験した後、StartLinkを創業。現在はCRM×AIエージェントによる経営管理支援を専門とする。

[StartLink](https://start-link.jp/)

### Service

- [会社情報](https://start-link.jp/about)
- [サービス](https://start-link.jp/service)
- [プロダクト](https://start-link.jp/sync)
- [採用情報](https://start-link.jp/recruit)
- [コンサルタントの方へ](https://start-link.jp/consultant-platform)

### Contact

- [問い合わせ](https://start-link.jp/contact)
- [資料ダウンロード](https://start-link.jp/download/service)
- [Syncナレッジベース](https://start-link.jp/sync/knowledge-base)
- [個人情報保護方針](https://start-link.jp/privacy-policy)
- [個人情報取り扱い規定](https://start-link.jp/personal-information-processing-agreement)

(c) 2026 All Rights Reserved.

```json
{
  "@context" : "https://schema.org",
  "@type" : "BlogPosting",
  "author" : {
    "@type" : "Person",
    "name" : "今枝 拓海",
    "url" : "https://start-link.jp/hubspot-ai/author/imaeda"
  },
  "datePublished" : "2026-03-17T12:51:58.000Z",
  "headline" : "Claude Code Chrome デバッグ連携でWebアプリを効率化する方法",
  "image" : [ "https://start-link.jp/hubfs/blog/screenshots/generated/kv_claude-code-chrome-devtools.jpg" ],
  "mainEntityOfPage" : {
    "@id" : "https://start-link.jp/hubspot-ai/ai/claude-code-practice/claude-code-chrome-devtools",
    "@type" : "WebPage"
  },
  "publisher" : {
    "@type" : "Organization",
    "logo" : {
      "@type" : "ImageObject",
      "url" : "https://start-link.jp/hubfs/Start%20Link%20(1500%20x%20600%20px)%20(5)-1.png"
    },
    "name" : "株式会社StartLink"
  }
}
```

```json
{
  "@context" : "https://schema.org",
  "@type" : "HowTo",
  "name" : "基本的な使い方",
  "step" : [ {
    "@type" : "HowToStep",
    "name" : "Chrome DevTools MCPサーバーの追加",
    "position" : 1,
    "text" : "Chrome DevTools MCPサーバーは、シェル（ターミナル）からclaude mcp addコマンドで登録します。Claude Codeのセッション内の/mcpコマンドは、登録済みサーバーの状態確認や認証のためのもので、サーバーの追加には使いません。公式リポジトリのClaude Code向け手順は次のコマンドです。 --scope userを付けると、すべてのプロジェクトで使える設定として登録されます。プロジェクト単位でチームに共有したい場合は、プロジェクト直下の.mcp.jsonに次のように記述する方法もあります。 コマンドで登録する方法と.mcp.jsonに書く方法の2つを、次の図にまとめました。 この設定のままであれば、Chromeを自分で起動する必要はありません。Claude CodeがMCPサーバーに接続しただけではChromeは起動せず、ページを開くなどブラウザを必要とするツールを初めて使ったときに、Chrome DevTools MCPサーバーが専用のプロフィールで新しいChromeを立ち上げ、そこを操作します。専用プロフィールは$HOME/.cache/chrome-devtools-mcp/chrome-profileに保存され、実行をまたいで再利用されます。…"
  }, {
    "@type" : "HowToStep",
    "name" : "ページへのナビゲーションとスクリーンショット",
    "position" : 2,
    "text" : "接続が完了すると、Claude Codeへの指示でブラウザ操作を依頼できるようになります。 Claude Codeはスクリーンショットの画像を分析し、レイアウト崩れ・テキストの切れ・画像の未表示などを検出できます。視覚的な確認作業をAIに委任することで、目視チェックの負担を減らせます。"
  }, {
    "@type" : "HowToStep",
    "name" : "コンソールログの確認とエラー対応",
    "position" : 3,
    "text" : "ブラウザのコンソールに出力されるログやエラーメッセージをClaude Codeが取得し、原因特定からコード修正までを一括で処理します。Slackに報告されたバグを起点にこの検証を走らせたい場合は、Claude Code × Slack連携で連携フローを構築できます。 Claude Codeは、指定URLへのナビゲーション、コンソールのエラーメッセージの全件取得、スタックトレースからのソースファイル特定、該当箇所の修正、修正後の再読み込みによる解消確認、という一連の流れを実行します。ここで押さえておきたいのは、AIが行うのは「原因の切り分けと修正案の作成」までで、修正内容が業務要件に沿っているかどうかの最終確認は人が担うべき領域だという点です。大規模な仕様変更につながる修正や、影響範囲が広いコンポーネントの改修は、AIの提案をそのまま適用するのではなく、差分を確認してから反映することをおすすめします。"
  } ]
}
```

```json
{
  "@context" : "https://schema.org",
  "@type" : "FAQPage",
  "mainEntity" : [ {
    "@type" : "Question",
    "acceptedAnswer" : {
      "@type" : "Answer",
      "text" : "公式にサポートされているのは、Google ChromeとChrome for Testingのみです。Edge・Brave・OperaなどのChromiumベースのブラウザは動作する可能性がありますが、公式は動作を保証しておらず、想定外の挙動が起きる場合があります。利用する場合は自己責任での検証が前提です。また、Safari（WebKit）やFirefox（Gecko）はChrome DevTools Protocol（CDP）に対応していないため、別途対応するMCPサーバーが必要です。"
    },
    "name" : "Chrome DevTools MCPサーバーはChrome以外のブラウザでも使えますか？"
  }, {
    "@type" : "Question",
    "acceptedAnswer" : {
      "@type" : "Answer",
      "text" : "はい、動作します。MCPサーバーにChromeを自動起動させる方式では、.mcp.jsonのサーバーの引数に--headlessを加えます。CI/CD環境やリモートサーバーなど、ディスプレイがない環境で使うときの設定です。 ヘッドレスでも、ページ遷移・スクリーンショット・DOM操作・パフォーマンストレースなどのツールを利用できます。"
    },
    "name" : "ヘッドレスモード（画面表示なし）でも動作しますか？"
  }, {
    "@type" : "Question",
    "acceptedAnswer" : {
      "@type" : "Answer",
      "text" : "はい、Chrome DevTools MCPサーバーは複数のページ（タブ）を管理できます。new_pageでタブを作成し、select_pageで操作対象を切り替え、list_pagesで現在開いているページの一覧を取得できます。A/Bテストの2パターンを同時に開いてスクリーンショットを比較する、といった使い方が可能です。"
    },
    "name" : "複数のタブやウィンドウを同時に操作できますか？"
  }, {
    "@type" : "Question",
    "acceptedAnswer" : {
      "@type" : "Answer",
      "text" : "置き換える必要はありません。CIパイプラインで毎回同じシナリオを回す網羅的なE2Eテストは、テストコードとして資産化できる既存のテストツールの方が適しています。Chrome DevTools連携は、開発中に「今直したところをすぐ確認したい」という場面を補う位置づけとして、既存のテスト資産と併用するのが現実的です。"
    },
    "name" : "既存のE2Eテストは置き換える必要がありますか？"
  } ]
}
```

```json
{
  "@context" : "https://schema.org",
  "@id" : "https://start-link.jp/hubspot-ai/ai/claude-code-practice/claude-code-chrome-devtools#article",
  "@type" : "BlogPosting",
  "author" : {
    "@id" : "https://start-link.jp/#founder"
  },
  "dateModified" : "2026-10-24T04:15:25+09:00",
  "datePublished" : "2026-03-17T12:51:58+09:00",
  "headline" : "Claude Code Chrome デバッグ連携でWebアプリを効率化する方法",
  "image" : "https://start-link.jp/hubfs/blog/screenshots/generated/kv_claude-code-chrome-devtools.jpg",
  "isPartOf" : {
    "@id" : "https://start-link.jp/#website"
  },
  "mainEntityOfPage" : {
    "@id" : "https://start-link.jp/hubspot-ai/ai/claude-code-practice/claude-code-chrome-devtools",
    "@type" : "WebPage"
  },
  "publisher" : {
    "@id" : "https://start-link.jp/#organization"
  },
  "speakable" : {
    "@type" : "SpeakableSpecification",
    "cssSelector" : [ ".blog-section h2", ".blog-section p:first-of-type", ".blog-section blockquote" ]
  }
}
```

```json
{
  "@context" : "https://schema.org",
  "@type" : "BreadcrumbList",
  "itemListElement" : [ {
    "@type" : "ListItem",
    "item" : "https://start-link.jp",
    "name" : "ホーム",
    "position" : 1
  }, {
    "@type" : "ListItem",
    "item" : "https://start-link.jp/hubspot-ai",
    "name" : "ブログ",
    "position" : 2
  }, {
    "@type" : "ListItem",
    "item" : "https://start-link.jp/hubspot-ai/ai",
    "name" : "AI活用",
    "position" : 3
  }, {
    "@type" : "ListItem",
    "item" : "https://start-link.jp/hubspot-ai/ai/claude-code-practice",
    "name" : "Claude Code実践",
    "position" : 4
  }, {
    "@type" : "ListItem",
    "name" : "Claude Code Chrome デバッグ連携でWebアプリを効率化する方法",
    "position" : 5
  } ]
}
```

```json
{
  "@context" : "https://schema.org",
  "@id" : "https://start-link.jp/#organization",
  "@type" : "Organization",
  "address" : {
    "@type" : "PostalAddress",
    "addressCountry" : "JP",
    "addressLocality" : "中央区",
    "addressRegion" : "東京都",
    "postalCode" : "104-0061",
    "streetAddress" : "銀座1丁目12番4号 N&E BLD.6F"
  },
  "alternateName" : "StartLink Inc.",
  "award" : [ "HubSpot Gold Solutions Partner（HubSpotゴールドパートナー、2026年4月認定）" ],
  "contactPoint" : [ {
    "@type" : "ContactPoint",
    "availableLanguage" : [ "ja" ],
    "contactType" : "customer support",
    "url" : "https://start-link.jp/contact"
  }, {
    "@type" : "ContactPoint",
    "availableLanguage" : [ "ja", "en" ],
    "contactType" : "sales",
    "url" : "https://start-link.jp/contact"
  } ],
  "description" : "「AI × HubSpot」をコンセプトに掲げるHubSpotゴールドパートナー（Gold Solutions Partner、2026年4月認定）。HubSpotマーケットプレイスに自社アプリ（Sync for freee / Notion / Money Forward / Chatwork）を公開するアプリ開発企業であり、HubSpot/Salesforce知見とAI活用を組み合わせたCRM構築・移行・最適化・AIエージェント/PoC支援まで一貫して提供する。",
  "founder" : {
    "@id" : "https://start-link.jp/#founder",
    "@type" : "Person",
    "jobTitle" : "代表取締役",
    "name" : "今枝 拓海",
    "sameAs" : [ "https://x.com/ImaedaTakumii", "https://www.linkedin.com/in/takumi-imaeda/", "https://www.facebook.com/takumiIma" ]
  },
  "foundingDate" : "2024-09-04",
  "hasCredential" : {
    "@type" : "EducationalOccupationalCredential",
    "credentialCategory" : "certification",
    "name" : "HubSpot Gold Solutions Partner",
    "recognizedBy" : {
      "@type" : "Organization",
      "name" : "HubSpot, Inc.",
      "url" : "https://www.hubspot.com/"
    }
  },
  "image" : [ "https://start-link.jp/hubfs/startlink-ai-agent.jpg", "https://start-link.jp/hubfs/startlink-aiorg.jpg" ],
  "knowsAbout" : [ "HubSpot CRM", "HubSpot Implementation", "HubSpot導入支援", "CRM構築", "AI活用", "HubSpot連携アプリ開発", "Salesforce to HubSpot Migration", "Generative AI Integration", "AI Agent Development", "Revenue Operations", "Marketing Automation", "freee Integration", "Notion Integration", "Money Forward Integration" ],
  "legalName" : "株式会社StartLink",
  "logo" : "https://start-link.jp/hubfs/startlink-logo.png",
  "mainEntityOfPage" : "https://start-link.jp/",
  "memberOf" : {
    "@type" : "ProgramMembership",
    "hostingOrganization" : {
      "@type" : "Organization",
      "name" : "HubSpot, Inc.",
      "url" : "https://www.hubspot.com/"
    },
    "membershipNumber" : "Gold Tier",
    "programName" : "HubSpot Solutions Partner Program"
  },
  "name" : "株式会社StartLink",
  "sameAs" : [ "https://www.youtube.com/@startlink-hubspot", "https://x.com/ImaedaTakumii", "https://www.linkedin.com/in/takumi-imaeda/", "https://www.linkedin.com/company/108100307/", "https://www.facebook.com/takumiIma", "https://www.facebook.com/profile.php?id=61566874764985", "https://prtimes.jp/main/html/searchrlp/company_id/149669", "https://app.hubspot.com/ecosystem/46046172/marketplace/solutions/startlink" ],
  "taxID" : "8010001248134",
  "url" : "https://start-link.jp/"
}
```

```json
{
  "@context" : "https://schema.org",
  "@id" : "https://start-link.jp/#website",
  "@type" : "WebSite",
  "inLanguage" : "ja",
  "name" : "株式会社StartLink",
  "publisher" : {
    "@id" : "https://start-link.jp/#organization"
  },
  "url" : "https://start-link.jp/"
}
```

```json
{
  "@context" : "https://schema.org",
  "@id" : "https://start-link.jp/#service-hubspot",
  "@type" : "Service",
  "areaServed" : "JP",
  "category" : [ "CRM導入", "HubSpot" ],
  "description" : "150社以上の実績を持つHubSpotゴールドパートナーが、業務フローに合わせた設計から構築・本番稼働まで一貫支援。",
  "name" : "HubSpot導入・構築支援",
  "provider" : {
    "@id" : "https://start-link.jp/#organization"
  },
  "serviceType" : "HubSpot導入・構築支援",
  "url" : "https://start-link.jp/service/hubspot"
}
```

```json
{
  "@context" : "https://schema.org",
  "@id" : "https://start-link.jp/#service-hubspot-ai",
  "@type" : "Service",
  "areaServed" : "JP",
  "category" : [ "CRM最適化", "AI活用" ],
  "description" : "HubSpotを軸に業務要件に沿った設計改善とAI連携活用を包括支援。",
  "name" : "HubSpot AIコンサルティング",
  "provider" : {
    "@id" : "https://start-link.jp/#organization"
  },
  "serviceType" : "HubSpot AIコンサルティング",
  "url" : "https://start-link.jp/service/hubspot-ai"
}
```

```json
{
  "@context" : "https://schema.org",
  "@id" : "https://start-link.jp/#service-hubspot-training",
  "@type" : "Service",
  "areaServed" : "JP",
  "category" : [ "研修", "HubSpot" ],
  "description" : "HubSpotの概念・基本操作からAI活用ノウハウまで、社内浸透のための研修を提供。",
  "name" : "HubSpot研修・レクチャー支援",
  "provider" : {
    "@id" : "https://start-link.jp/#organization"
  },
  "serviceType" : "HubSpot研修・内製化支援",
  "url" : "https://start-link.jp/service/hubspot-ai/training"
}
```

```json
{
  "@context" : "https://schema.org",
  "@id" : "https://start-link.jp/#service-sf2hs-replace",
  "@type" : "Service",
  "areaServed" : "JP",
  "category" : [ "CRM移行", "データ移行" ],
  "description" : "Salesforce/HubSpot双方の思想とデータモデルを理解した移行設計とHubSpot側CRM開発を実行。",
  "name" : "SalesforceからHubSpotへのリプレイス支援",
  "provider" : {
    "@id" : "https://start-link.jp/#organization"
  },
  "serviceType" : "SalesforceからHubSpotへのリプレイス支援",
  "url" : "https://start-link.jp/service/salesforce-hubspot-replace"
}
```

```json
{
  "@context" : "https://schema.org",
  "@id" : "https://start-link.jp/#service-claude-code-bi",
  "@type" : "Service",
  "areaServed" : "JP",
  "category" : [ "AI活用", "経営管理" ],
  "description" : "複数システムのデータを統合し、毎朝のAIブリーフィングなど経営の意思決定を加速する仕組みを構築。",
  "name" : "Claude Codeによる経営データ活用支援",
  "provider" : {
    "@id" : "https://start-link.jp/#organization"
  },
  "serviceType" : "AI経営管理支援",
  "url" : "https://start-link.jp/service/claude-code/business-intelligence"
}
```

```json
{
  "@context" : "https://schema.org",
  "@id" : "https://start-link.jp/#service-claude-code-content",
  "@type" : "Service",
  "areaServed" : "JP",
  "category" : [ "コンテンツマーケティング", "AI活用" ],
  "description" : "キーワード戦略からSEO記事制作、CMS公開まで、AIを活用したコンテンツマーケティングを自動化。",
  "name" : "Claude Codeによるコンテンツマーケティング支援",
  "provider" : {
    "@id" : "https://start-link.jp/#organization"
  },
  "serviceType" : "AIコンテンツ制作支援",
  "url" : "https://start-link.jp/service/claude-code/content-marketing"
}
```

```json
{
  "@context" : "https://schema.org",
  "@id" : "https://start-link.jp/#product-sync-freee",
  "@type" : "SoftwareApplication",
  "applicationCategory" : "BusinessApplication",
  "author" : {
    "@id" : "https://start-link.jp/#organization"
  },
  "description" : "HubSpotとfreee会計・freee請求書をシームレスに連携。取引先の同期から請求書作成まで、バックオフィスの業務を自動化するHubSpotマーケットプレイスアプリ。",
  "featureList" : [ "freee取引先をHubSpotに自動同期", "HubSpotからfreee見積書・請求書を作成", "取引データをfreee会計に自動登録", "月次請求・更新処理に対応", "商品項目・品目・部門・タグ情報の連携" ],
  "installUrl" : "https://ecosystem.hubspot.com/marketplace/apps/sync-for-freee-bystartlink",
  "name" : "Sync for freee",
  "offers" : [ {
    "@type" : "Offer",
    "description" : "請求月5件・見積月20件まで",
    "name" : "Free",
    "price" : "0",
    "priceCurrency" : "JPY"
  }, {
    "@type" : "Offer",
    "billingIncrement" : "P1M",
    "description" : "請求月50件・見積月100件まで",
    "name" : "Professional",
    "price" : "4000",
    "priceCurrency" : "JPY"
  }, {
    "@type" : "Offer",
    "billingIncrement" : "P1M",
    "description" : "無制限",
    "name" : "Enterprise",
    "price" : "10000",
    "priceCurrency" : "JPY"
  } ],
  "operatingSystem" : "Web",
  "softwareHelp" : {
    "@type" : "WebPage",
    "url" : "https://start-link.jp/sync/knowledge-base/freee/basic-steps"
  },
  "url" : "https://start-link.jp/sync/freee"
}
```

```json
{
  "@context" : "https://schema.org",
  "@id" : "https://start-link.jp/#product-sync-notion",
  "@type" : "SoftwareApplication",
  "applicationCategory" : "BusinessApplication",
  "author" : {
    "@id" : "https://start-link.jp/#organization"
  },
  "description" : "HubSpotのCRMレコードとNotionのページ・データベースを接続。HubSpotの画面から離れずにNotionのすべてにアクセスできるHubSpotマーケットプレイスアプリ。",
  "featureList" : [ "CRMカードからNotionページの作成・閲覧・編集", "NotionデータベースをCRMタブにテーブル表示", "4つのワークフローアクションで自動化", "コンタクト・会社・取引・チケット・サービス・プロジェクト対応" ],
  "installUrl" : "https://ecosystem.hubspot.com/marketplace/listing/sync-for-notion-bystartlink",
  "name" : "Sync for Notion",
  "offers" : [ {
    "@type" : "Offer",
    "description" : "ページ・DB合計50件まで",
    "name" : "Free",
    "price" : "0",
    "priceCurrency" : "JPY"
  }, {
    "@type" : "Offer",
    "billingIncrement" : "P1M",
    "description" : "無制限",
    "name" : "Professional",
    "price" : "10000",
    "priceCurrency" : "JPY"
  } ],
  "operatingSystem" : "Web",
  "url" : "https://start-link.jp/sync/notion"
}
```

```json
{
  "@context" : "https://schema.org",
  "@id" : "https://start-link.jp/#product-sync-moneyforward",
  "@type" : "SoftwareApplication",
  "applicationCategory" : "BusinessApplication",
  "author" : {
    "@id" : "https://start-link.jp/#organization"
  },
  "description" : "HubSpotとマネーフォワード クラウドを連携。取引情報から見積書・請求書を自動作成し、取引先・品目の同期や継続請求に対応するHubSpot連携アプリ。",
  "featureList" : [ "取引（Deal）から見積書・請求書を自動作成", "会社情報とマネーフォワード取引先の同期", "商品項目・品目マスタの連携", "月次・固定回数の継続請求に対応（Professionalプラン以上）", "合算請求（Enterpriseプラン限定）", "前受請求（一括請求・月次計上）（Enterpriseプラン限定）", "原価登録（MF会計への仕訳登録）で案件別の原価・粗利を可視化（Enterpriseプラン限定）", "取引レコードにCRMカードで連携ステータスを表示" ],
  "installUrl" : "https://ecosystem.hubspot.com/ja/marketplace/listing/sync-for-moneyforward-bystartlink",
  "name" : "Sync for Money Forward",
  "offers" : [ {
    "@type" : "Offer",
    "description" : "請求月5件・見積月20件まで",
    "name" : "Free",
    "price" : "0",
    "priceCurrency" : "JPY"
  }, {
    "@type" : "Offer",
    "billingIncrement" : "P1M",
    "description" : "請求月50件・見積月100件まで",
    "name" : "Professional",
    "price" : "4000",
    "priceCurrency" : "JPY"
  }, {
    "@type" : "Offer",
    "billingIncrement" : "P1M",
    "description" : "無制限",
    "name" : "Enterprise",
    "price" : "10000",
    "priceCurrency" : "JPY"
  } ],
  "operatingSystem" : "Web",
  "url" : "https://start-link.jp/sync/moneyforward"
}
```

```json
{
  "@context" : "https://schema.org",
  "@id" : "https://start-link.jp/#product-sync-chatwork",
  "@type" : "SoftwareApplication",
  "applicationCategory" : "BusinessApplication",
  "author" : {
    "@id" : "https://start-link.jp/#organization"
  },
  "description" : "HubSpotとChatworkを連携。ワークフローからChatworkのルームへ通知を送り、CRMカード上で最新のやり取りの確認と返信ができ、紐付けたルームの新着メッセージをHubSpotのノートとして自動で記録するHubSpot連携アプリ。",
  "featureList" : [ "ワークフローアクション「Chatworkに通知」（取引・会社・コンタクト・チケット対応）", "送信先ルームIDとメッセージ本文にHubSpotのプロパティを差し込み", "取引・会社・コンタクトとChatworkルームの紐付け（全プラン無制限）", "CRMカードにルームの最新100件のメッセージを表示（Professionalプラン以上）", "CRMカードからChatworkへメッセージを送信（Professionalプラン以上）", "紐付けたルームの新着メッセージをHubSpotのノートへ自動記録（Enterpriseプラン限定）", "引用や装飾を、HubSpotのノートでも読みやすい見た目のまま記録", "OAuth接続とAPIトークン接続（SAML/SSO環境向け）に対応" ],
  "installUrl" : "https://ecosystem.hubspot.com/marketplace/listing/sync-for-chatwork-bystartlink",
  "name" : "Sync for Chatwork",
  "offers" : [ {
    "@type" : "Offer",
    "description" : "通知 月10件まで・ルーム紐付け無制限",
    "name" : "Free",
    "price" : "0",
    "priceCurrency" : "JPY"
  }, {
    "@type" : "Offer",
    "billingIncrement" : "P1M",
    "description" : "通知無制限・CRMカードで最新100件の表示とメッセージ送信",
    "name" : "Professional",
    "price" : "3000",
    "priceCurrency" : "JPY"
  }, {
    "@type" : "Offer",
    "billingIncrement" : "P1M",
    "description" : "Professionalの全機能＋メッセージ同期（30分ごと）",
    "name" : "Enterprise",
    "price" : "10000",
    "priceCurrency" : "JPY"
  } ],
  "operatingSystem" : "Web",
  "url" : "https://start-link.jp/sync/chatwork"
}
```