Claude Code × Chrome連携の設定方法と使い方｜Webサイトの動作確認を自動化してみた
Claude CodeでWebサイトを開発していると、「コードの修正はAIに任せられても、最後のブラウザ確認は自分でやっている」という場面がありませんか。
筆者も、SEO・AI検索の診断ツール「SEGO」の開発で、画面を開く、ボタンを押す、エラーを確認する、といった検証作業を繰り返していました。そこで2026年11月5日、Claude CodeとChrome拡張機能「Claude in Chrome」を連携し、公開中のSEGOのサイトを実際に確認させてみました。
結論から言うと、Chromeの操作から検証結果のレポート作成まで、Claude Codeから実行できました。一方で、初回設定では認証方式と起動方法でつまずきました。この記事では、実際に通った手順と失敗例をスクリーンショット付きでまとめます。
検証日：2026年11月5日
※この記事は上記の検証日時点の筆者の検証に基づいています。Claude Codeや拡張機能の仕様・画面表示は更新される可能性があるため、最新情報はAnthropicの公式ドキュメントもあわせて確認してください。
Contents
Claude in Chromeとは？Claude Codeとの違い
Claude Codeは、ターミナル（コマンドを入力して操作する黒い画面）からコードの読み取り・編集・実行ができる、Anthropic社の開発支援ツールです。一方のClaude in Chromeは、ブラウザ上でページ移動・クリック・入力・画面の確認などを行えるChrome拡張機能です。
両者を連携させると、Claude Codeからブラウザを操作できるようになります。公式ドキュメントでは、Webサイトの操作、フォーム入力、スクリーンショットの取得、コンソールログ（ブラウザが出すエラーや警告の記録）やネットワーク通信の確認などができると説明されています。Web開発では、次のような流れを目指せます。
実装 → Chromeで動作確認 → 問題箇所の特定 → コード修正 → 再確認
ただし、何でも無条件に実行させてよいわけではありません。公開・削除・送信・決済・管理画面の設定変更など、影響が大きい操作は人間が確認する前提で使います。
今回の検証環境と前提条件
今回の検証環境は以下のとおりです。
- macOS／Google Chrome
- Claude Code v2.1.318（検証時点）
- Claude Maxプランのアカウント
- Chrome拡張機能「Claude in Chrome」
- 検証対象：SEGOの公開サイト（https://sego.jp）
- 作業用フォルダ：
~/claude-chrome-test（検証専用に新規作成）
公式ドキュメント（2026年11月時点）では、主な前提条件として次の点が挙げられています。
- Google Chrome、Microsoft Edge、またはBraveなどのChromium系ブラウザ
- Claude in Chrome拡張機能のバージョン1.0.36以降
- Anthropicと直接契約したプラン（Pro・Max・Ultra・Team・Enterprise）
- Claude Code上で
/loginによりClaudeアカウントでサインインしていること
特に注意したいのが認証方式です。公式ドキュメントでは、APIキーなどで認証している場合、--chrome を付けて起動してもChrome連携は無効のままとされています。Amazon BedrockなどのサードパーティのAIプラットフォーム経由でも利用できません。また、WSL（Windows上のLinux環境）には対応していません。
設定手順①：Chrome拡張機能を追加する
まず、Chromeウェブストアから「Claude」拡張機能を追加します。提供元が claude.com になっていることを確認してから導入しましょう。追加後、拡張機能からClaudeアカウントにログインします。
拡張機能の設定画面では、Claudeに操作を許可したサイトを確認できます。Claude Codeから操作する場合も、サイトごとの許可は拡張機能側の設定が引き継がれます。最初からすべてのサイトで自由に操作できるよう許可する必要はありません。今回は検証に必要なサイトだけを対象にしました。
設定手順②：Claude Codeでサブスクリプションアカウントにログインする
次に、Claude Code側の認証を確認します。ターミナルでClaude Codeを起動し、/status を入力すると、現在のログイン状態を確認できます。ログインし直す場合は次のコマンドを入力します。
/loginログイン方式の選択肢が表示されるので、筆者は「Claude account with subscription」を選び、利用中のClaude Maxアカウントでログインしました。2つ目の「Anthropic Console account」はAPIの従量課金で使う方式で、前述のとおりChrome連携の対象外です。
なお、環境変数 ANTHROPIC_API_KEY が設定されていると、承認後はサブスクリプションよりAPIキーが優先されると公式ドキュメントに記載されています。業務でAPIキーを使っている環境では、既存の設定に影響しないよう、どの認証方式で動いているかを確認してから進めてください。
設定手順③：claude --chromeで起動して接続を確認する
既存の開発ファイルに影響を与えないよう、検証専用のフォルダを用意しました。
mkdir -p ~/claude-chrome-test
cd ~/claude-chrome-test
claude --version続いて、Chrome連携を有効にしてClaude Codeを起動します。
claude --chromeポイントは --chrome を付けて起動することです。起動後に /chrome と入力すると、接続状態の確認、権限の管理、拡張機能の再接続、接続するブラウザの選択ができます。最終的に次の表示になれば接続完了です。
Status: Enabled
Extension: Installed
One browser is connected:
Browser 1 macOS
毎回 --chrome を付けるのが手間な場合は、/chrome の画面で「Enabled by default」を選ぶと既定で有効にできます。ただし公式ドキュメントでは、ブラウザ操作用のツールが常に読み込まれるため、コンテキスト（AIが一度に扱う情報量）の消費が増えると説明されています。今回は必要なときだけ --chrome で起動する運用にしました。
実際につまずいた3つのポイントと解決方法
ここからは、検証当日に実際に起きた問題を時系列で紹介します。
1. API従量課金の表示になっており、ログインも期限切れだった
最初の状態では、Claude Codeの起動画面に「API Usage Billing」と表示され、/status で確認するとサブスクリプションのログインが期限切れになっていました。前述のとおり、Chrome連携はAPIキーでの認証では使えません。/login からサブスクリプションアカウントでログインし直すと、表示が「Claude Max」に変わりました。
ただし、この表示だけで全設定の状態が分かるわけではありません。接続できたかどうかは、最終的に /chrome の画面で確認するのが確実です。
2. /chromeが「Unknown command」になった
導入途中で /chrome を入力すると、次のメッセージが表示されました。
Unknown command: /chromeその後、Claude Codeを最新版に更新し、認証方式と起動方法を見直したうえで再試行すると、/chrome を使える状態になりました。このエラーの原因は環境によって異なる可能性があり、更新だけで必ず解決するとは限りません。まずは claude --version でバージョンを確認し、更新を試すのがよいでしょう。
3. 「Not enabled in this session」と表示された
次に、/chrome の画面で、拡張機能は検出されているのに連携が無効という状態になりました。
Status: Not enabled in this session
Extension: Installed「Reconnect extension（再接続）」を試しても、このセッションではブラウザ操作ツールを追加できないという案内が表示されました。これは、Claude Codeを --chrome なしで起動していたためです。
この場合は、いったんClaude Codeを終了し、Chrome連携を有効にして起動し直します。
/exitcd ~/claude-chrome-test
claude --chrome画面の案内にもあるとおり、claude --chrome --resume とすれば、直前の会話を選んで再開することもできます。起動し直した後、/chrome で「Status: Enabled」になっていることを確認しました。
実践：SEGOの公開サイトをClaude Codeから確認してみた
接続を確認したら、Claude Codeに次のように指示しました。今回はあくまで読み取り専用の確認で、フォーム送信やデータ変更をしないよう明示しています。
Claude in Chromeを使って https://sego.jp を開き、
トップページの表示、主要ナビゲーション、
JavaScriptのコンソールエラー、
PC表示での明らかなUI崩れを確認してください。
今回は読み取り専用です。
フォーム送信・データ変更・コード修正は行わず、
結果を日本語で報告してください。実行が始まると、Chromeの画面上部に「"Claude" started debugging this browser」という通知が表示されました。拡張機能がブラウザを操作するための機能を使っていることを示すChromeの通知で、エラーではありません。
また、Claudeが開いたタブは「Claude」という名前のタブグループにまとめられ、その中でSEGOのページが開かれていました。公式ドキュメントでも、Claudeが開いたタブはセッションに紐づくタブグループにまとめられると説明されています。
Claudeはトップページのスクロールに加えて、About・ブログ・ニュース・ゲームの各ページへの遷移、FAQの開閉、コンソールとネットワークの確認まで進めました。Claude Codeの表示では、この確認にかかった処理時間は約2分半でした。
Claude Codeから報告された確認結果
Claude Codeが作成したレポートの内容を、項目ごとに表にまとめました。スマートフォンでは、レポートの画像より先にこちらの表をご覧ください。
| 検証項目 | Claude Codeからの報告 |
|---|---|
| Chrome操作の成否 | 成功。新しいタブで確認を行い、使ったタブは確認後に閉じた |
| トップページ表示 | ヒーローからフッターまで、全セクションが正常に表示 |
| ヘッダーナビ | 使い方・FAQ・About・ブログ・ニュース・ゲーム、言語切替、「診断する」ボタンを確認 |
| ページ遷移 | /about・/blog・/news・/game がすべて正常に表示 |
| FAQアコーディオン | クリックで回答が開くことを確認 |
| フッター | サービス系リンク、SNS、プライバシーポリシー・利用規約・お問い合わせを確認 |
| JavaScriptコンソール | 確認したページでエラー・警告0件 |
| PC表示（約1,400px幅） | レイアウト崩れ・重なり・はみ出し・画像欠けは見当たらない |
| ネットワーク | HTML・CSS・JS・画像・APIなど自サイトのリクエストはすべて正常（200） |
| フォーム送信・データ変更 | 実施せず（診断フォームは存在確認のみ） |
以下は、Claude Codeが実際に出力したレポートの画面です。内容ごとに分けて掲載しています（画像はタップで拡大できます）。
コンテンツ表示上の改善候補も見つかった
レポートでは、正常に動作していることの確認に加えて、自動QAによってコンテンツ表示上の改善候補もいくつか発見できました。人間が目視で見落としがちな細かな表示の違いにも気づける点は、ブラウザQAを自動化する利点の1つだと感じました。
ただし、これらはClaudeが見つけた「調査候補」であり、原因や修正方針まで確定したものではありません。実際に修正するかどうかは、人間が内容を確認して優先度を判断します。
使って分かったメリットと注意点
今回いちばん価値を感じたのは、人間がスクリーンショットを1枚ずつ撮ってAIに渡す作業を減らせることです。ブラウザの操作から、コンソール・ネットワークの確認、結果のまとめまでをClaude Codeの中で完結できました。
一方で、次のような注意点もあります。
- ログイン状態の共有：公式ドキュメントによると、Claudeは新しいタブを開いて作業し、ブラウザのログイン状態を共有します。仕事用アカウントや機密情報を扱うサイトは、検証対象と分けて考えましょう。
- 操作を許可するサイト：サイトごとの許可は拡張機能の設定で管理します。最初は検証に必要なサイトだけに絞るのがおすすめです。
- 人間の確認が必要な場面：ログイン画面やCAPTCHA（ロボットでないことを確認する画像認証など）が出ると、Claudeは作業を止めて人間に対応を求めます。公開・削除・送信・課金などの操作も、人間の承認を前提にしましょう。
- 結果の範囲：「コンソールエラー0件」は今回確認したページと条件での結果です。サイト全体に不具合がないことを保証するものではありません。
- 利用量：ブラウザを何度も操作する検証は、Claudeの利用量を消費します。確認範囲を絞った小さなテストから始めると安心です。
今回実証できたこと・まだ検証していないこと
今回の検証で確認できた範囲を整理します。
| 区分 | 内容 |
|---|---|
| 実証できたこと | Claude CodeとChromeの接続、SEGO公開サイトの画面操作、コンソール・ネットワークの確認、QAレポートの作成 |
| まだ検証していないこと | 見つかった問題の自動修正と再検証、ログインが必要な画面の検証、スマートフォン幅での自動確認 |
つまり、今回実証したのはSEGOの公開サイトを対象にした、読み取り専用のブラウザQAまでです。コードの修正や本番環境への変更は行っていません。
まとめ｜Claude Code × Chromeでブラウザ確認をAIに任せる第一歩
Claude CodeとClaude in Chromeを接続することで、Webサイトの動作確認をAIに任せられる範囲が広がりました。今回の検証では、接続 → SEGOの画面操作 → コンソール・ネットワーク確認 → QAレポート作成までを確認できました。
設定でつまずいた場合は、次の3点を順番に確認すると切り分けしやすくなります。
- Chrome拡張機能がインストール・有効化されているか
/loginでサブスクリプションアカウントにログインしているか（APIキー認証になっていないか）claude --chromeで起動したセッションか
AIが書いたコードを、AI自身がブラウザで確かめる。この流れを実務でどこまで安定して回せるか、今後もSEGOの開発・品質改善の中で検証を続けていきます。今後は、キーワード順位計測ツール「SEGO Rank Tracker」など、新しい機能の画面確認にも同じブラウザQAの考え方を活用していく予定です。SEGO自身の実装を点検した記録は「自社AI診断ツールを実装監査して見つけた13箇所の数値不一致と修正記録」、Claude Codeによる業務自動化の事例は「フィリピンSEOイベント参加レポート」でも紹介しています。
なお、今回のChrome連携はSEGOの開発・検証工程で使ったもので、SEGOの診断機能に組み込まれているわけではありません。SEGOでは、URLを入力するだけでWebサイトのSEOとAI検索への対応状況を無料で診断できます。使い方は「SEGOの使い方」、診断で見るべき項目は「Webサイト診断で本当に見るべき30項目」で解説しています。
検証メモ：検証日（2026年11月5日）に筆者のmacOS環境で実施した設定・検証の記録をもとに作成。仕様の説明はAnthropicの公式ドキュメント「Use Claude Code with Chrome」「Authentication」（2026年11月時点）を参照しています。
この記事を書いた人
岡 拓馬(おか たくま)
外資系SEOスペシャリスト / SEGO開発者
約10年の国際SEOコンサルティング経験
航空自衛隊で航空機整備員として勤務した後、2015年にフリーランスのWebライター・SEOコンサルタントとして独立。以来、アジア各国を拠点に海外ノマドワーカーとして活動。フィリピンの外資系企業でSEOスペシャリストとして従事した後、約10年の国際SEOコンサルティング経験をもとにSEO×AI検索の診断ツール「SEGO」を開発。著書に『AI時代のテクニカルSEOの教科書』(Kindle)、Udemy講座『AI時代のコンテンツSEOの教科書』がある。
執筆プロセス：本記事はAI（Claude Sonnet）による下書きを、岡拓馬が一次データ追加・実例追記・文意確認を行ったうえで公開しています。内容の最終責任は筆者（岡拓馬）が負います。