Claude Codeによるブラウザ自動化：実践2026年ガイド

このツール分野は動きが速いため、実行する前に agent-browser skills get core --full と npx …@latest で最新のコマンドを確認してください。

Claude Codeによるブラウザ自動化とは？

Claude Codeによるブラウザ自動化とは、すべてを手動でクリックしていく代わりに、CLI、MCPサーバー、または拡張機能を通じて、Claude Codeエージェントに実際のブラウザを操作させること（ナビゲート、クリック、フォーム入力、DOMやコンソールの読み取り、スクリーンショット撮影、データ抽出）を意味します。 端的に言えば、これは AIがブラウザを操作する ということです。やりたいことを平易な英語で伝えるだけで、Claude Codeがそれをウェブ操作に変換し、あなたの代わりに実行します。

開発者にこれが必要な理由は何でしょうか。いくつかの実際の場面があります。ログインフローのE2Eテストを実行する、フォームに入力して送信しバリデーションを確認する、コンポーネントを作った直後にUIを検証する、あるいはデータテーブルをスクレイピングして照合する、といったものです。かつてはPlaywrightやPuppeteerのスクリプトを手で書いていましたが、今ではClaude Codeがそれらの操作を自ら組み立てて実行し、結果（コンソールログ、DOM構造）を読み取って、何か壊れたときには自分で修正できます。

このツール群が初めての方は、まず Claude Codeとは何か から始めて、エージェントとパーミッションの考え方に慣れておくとよいでしょう。ブラウザ自動化は、あなたの代わりに行動する権限をAIに与えることと直結しているからです。

Claude Codeがブラウザを操作する4つの方法（適切なツールを選ぶ）

最も紛らわしいのは、ルートが4つある一方で、各ツールのドキュメントがそれらを横並びで比較していないことです。最初から正しく選べるように、手早い見取り図を示します。4つのうち3つは MCP（Model Context Protocol） に依存しています。これはClaude Codeが外部ツールに接続するために使う標準プロトコルです。

ルート4は独立したセクションを設けるだけの深さがあります。すぐ下をご覧ください。

ほとんどの開発者にとって、agent-browser は妥当なデフォルトです。軽量でトークン効率がよく、Playwrightスタック全体を引き込むことなく長時間動作します。続く3つのセクションで、インストールと使い方を掘り下げます。Playwright MCPは claude mcp add playwright npx @playwright/mcp@latest で手早く追加でき、Chrome DevTools MCPは claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest で追加できます（microsoft/playwright-mcp と ChromeDevTools/chrome-devtools-mcp のREADMEに基づく、2026年8月確認）。

Claude Code向けのagent-browserのインストール

セットアップは手早く済みます。agent-browser はvercel-labsによるオープンソースのCLIで、以下の手順は2026年8月9日に実機で確認したものです。

# 1. Install the CLI globally
npm install -g agent-browser

# 2. Download the Chromium that agent-browser drives
agent-browser install
# On Linux, if system libraries are missing:
agent-browser install --with-deps

# 3. Confirm the install worked
agent-browser --version

# 4. Load the core workflow set for Claude Code
agent-browser skills get core
# For the full command reference:
agent-browser skills get core --full

ステップ4はワークフローの説明を読み込み、Claude Codeが適切な文脈で agent-browser を呼び出せるようにします。最後に、パーミッション設定で許可ツール Bash(agent-browser:*) を宣言して、Claude Codeがコマンドを実行できるようにしましょう。そうしないと実行のたびに手動で承認する必要があります。あとから agent-browser upgrade で更新できます。

手順を追って：Claude Codeによるブラウザ自動化

以下の4つのステップが基本の作業ループです。中心となる考え方は、スナップショットを取って各要素の @eN 参照を取得し、その参照を通じて操作する ということです。長くて壊れやすいCSSセレクタを書く代わりに、です。

ステップ1 - ページを開いてスナップショットを取る

agent-browser open https://example.com
agent-browser snapshot -i

snapshot -i は、各インタラクティブ要素に @e1、@e2 などの短い参照を付けたアクセシビリティツリーを返します。各スナップショットはわずか約280文字（Playwright MCPの8K以上に対して）なので、Claude Codeは素早く読み取り、消費トークンもわずかです。これこそが、エージェントがコンテキストを溢れさせることなく、多くのステップを連続してつなげられる理由です。

ステップ2 - クリック、フォーム入力、ナビゲート

# Fill the email field (ref taken from the snapshot)
agent-browser fill @e3 "[email protected]"
# Click the login button
agent-browser click @e7

常に最新のスナップショットの参照を使って操作してください。正直な注意点として、@eN 参照は現在のレンダリングに紐づいています。ページの状態が変わったら（タブを切り替える、モーダルを開く、リロードする）、新しいスナップショットを取り直してください。古い参照が誤った要素を指すようになっている可能性があるためです。

ステップ3 - スクリーンショットとデータ抽出（スクレイピング）

# Save an image of the current state for a visual check
agent-browser screenshot result.png
# Take a snapshot to extract DOM structure and text
agent-browser snapshot -i

スナップショットから、Claude Codeはコンテンツ（たとえば商品リストや価格表）を読み取って要約し、ターミナル上でそのままJSONやMarkdownの表にできます。

ステップ4 - セルフチェックのループ（作る、検証する、デバッグする）

ここが最も価値のある部分であり、他のガイドが一文で触れるだけの部分でもあります。流れはこうです。あなたがターミナルで作り、Claude Codeがブラウザを開いて結果を検証し、コンソールとDOMを読み取り、何か問題があれば自分で修正して再実行します。具体的には：

1. Claude Codeがコードを編集し、開発サーバーを起動します。
2. agent-browser open http://localhost:3000 で、たった今作ったUIを開きます。
3. agent-browser snapshot -i で期待した要素が表示されたことを確認し、コンソールを読んで実行時エラーを捉えます。
4. 何かおかしければ、Claude Codeがコードを編集し、ページをリロードして、UIが正しくなるまで繰り返します。

このループこそが、「AIがコードを書く」を「AIが実際のブラウザで自分のコードを検証する」に変えるものです。

実例：デモサイトにログインしてUIを検証する

デモのタスクはこうです。デモサイトにログインし、ダッシュボードに正しいユーザー名が表示されることを確認します。これを、本格的なE2Eテストへ拡張できるテンプレートとして使ってください。

# Plain-English request you send to Claude Code:
# "Open the demo login page, sign in with the test account,
# then check that the dashboard shows the right name."

agent-browser open https://practice.expandtesting.com/login
agent-browser snapshot -i # get refs for the input fields + button
agent-browser fill @e2 "practice"
agent-browser fill @e3 "SuperSecretPassword!"
agent-browser click @e4 # the Login button
agent-browser snapshot -i # confirm you reached the secure page

使い勝手についての正直な感想として、fillやclickのステップは単純なフォームでは概ねスムーズに動きます。つまずきやすいのは ページが変わった後に参照が古くなる ことです。Loginをクリックすると、セキュアなページは新しいDOMになるため、検証の前にもう一度 snapshot -i を実行する必要があります。ログインページの参照を使い回さないでください。captchaや二要素認証のあるサイトでは、agent-browser単体では不十分で、そこで実際のログイン済みセッションが必要になります（下記の chrome-profile のセクションを参照）。

クラウドとCI/CDで実行する（ローカルのブラウザ不要）

CIパイプラインの中や、Chromeのないマシンで実行する場合は、ローカルへのChromiumのインストールを省き、代わりにagent-browserをクラウドブラウザに向けます。

# Browserbase: set the environment variables, then add the provider with -p
export BROWSERBASE_API_KEY=...
export BROWSERBASE_PROJECT_ID=...
agent-browser -p browserbase open https://example.com

Browserbaseのほかに、agent-browserは一時的な環境向けにAWS Bedrock AgentCoreとVercel Sandboxもサポートしています。実行中のセッション（セッション、ログ）を観察するために、agent-browserはポート 4848 にオブザーバビリティのダッシュボードを備えています。これは、開発マシンで手動実行するだけでなく、ブラウザテストを自動化パイプラインへ移すための土台です。

agent-browser対chrome-profile：実際のChromeが必要なのはいつ？

重要な判断はこれです。そのタスクは実際のログイン済みセッションとCookieを必要とするか、しないか。

要するに、既定では agent-browser を使い、実際のログイン済みセッションをどうしても借りる必要があるときだけ chrome-profile に切り替えます。実際のアカウント上で動作するため、リスクが高くなるからです。

Chrome内で直接ライブデバッグ：--chrome、/chrome

これは上の表のうちの4番目の方法で、独立したセクションに値するだけの深さがあります。agent-browser、Playwright MCP、Chrome DevTools MCP はいずれも使い捨てのCDP制御ブラウザを操作しますが、それらとは異なり、ネイティブのChrome統合は「Claude in Chrome」拡張機能を介して あなたの実際のChrome の中で動作し、（ヘッドレスではなく）目に見えるタブを開き、あなたの実際のログイン済みセッションを使います。これは別製品ではなく、CLIやVS Codeを拡張機能に接続する、Claude Codeのネイティブ機能です。

claude --chrome で起動します。初回は、サイトのパーミッションの仕組みを説明する一度きりのダイアログが表示されます。Enterキーで続行してください。毎セッションでフラグを渡す手間を省くには、/chrome を実行して「Enabled by default（既定で有効）」を選びます。トレードオフは、ブラウザツールが読み込まれたままになるため毎セッションで余分なコンテキストコストがかかることなので、頻繁に使う場合のみ有効にしてください。/chrome は、接続状態の確認、サイトのパーミッション管理、拡張機能の再接続、複数のブラウザが接続されている場合の使用ブラウザの選択にも使います（ブラウザの選択にはClaude Code v2.1.154以降が必要です）。

平易な英語のプロンプト例（ドキュメント自身の例に倣ったもの）：

Go to code.claude.com/docs, click on the search box,
type "hooks", and tell me what results appear

ドキュメントには8つの機能グループが挙げられていますが、開発者にとって最も関連性が高いのは次の3つです：

• ライブデバッグ - コンソールのエラーやDOMの状態を直接読み取り、その原因となったコードをそのまま修正します。これはコーディングのワークフローにおいて最も有用な機能であり、今回の改訂前の記事では完全に見落とされていました。
• デザイン検証 - FigmaのモックからUIを作り、それをブラウザで開いて一致するか確認します。
• 認証済みのウェブアプリ - Gmail、Google Docs、Notion、あるいはすでにログイン済みの社内アプリ内で、APIコネクタを設定することなく作業できます。
• そのほかにも含まれます：ウェブアプリのテスト（フォームのバリデーション、ビジュアルリグレッション）、構造化データの抽出、繰り返しタスクの自動化、ファイルアップロード（10MB上限、node_modules 内のような複数のハードリンクを持つファイルは拒否、v2.1.211以降が必要）、そしてセッションを共有可能なGIFとして記録すること。

プランモードの安全性： プランモードでは、読み取り専用の呼び出し（read_page、get_page_text、find、コンソール／ネットワークの読み取り、スクリーンショットの撮影）は確認なしで実行されますが、状態を変更する呼び出し（クリック、入力、ナビゲーション、タブ／ウィンドウの管理、GIF録画）は引き続き承認を求められます。

実例：「壊れたログインフォームをデバッグする」 - localhost:3000 を開き、Claude Codeに不正なデータでフォームを送信させ、コンソールに出てくる内容を読み取り、その原因となったコードの修正案を出させます。ここでは特別なCLI構文は不要で、上の2つのプロンプトと同じスタイルの、平易な英語のリクエストだけで済みます。

近道 - AgentKitにはak-agent-browserスキルが同梱されている

各ツールを自分で立ち上げて設定するのが面倒なら、近道があります。AgentKit のバンドル（Engineer Kit）には、関連する2つのスキルがまとまっています。ak-agent-browser（内部でagent-browser CLIをラップしています）と ak-chrome-profile です。平易な英語のリクエストを入力するだけで実行され、フラグを覚える必要はありません。

名称についての注記： ここでいう「AgentKit」は、ak CLIを使う agentkit.best のClaude Code向けキットを指しており、OpenAIの「AgentKit」製品では ありません。また agent-browser は、このスキルの内部にあるオープンソースのCLI（vercel-labs）です。

これは便利な近道であって必須ではありません。上のセクションで示したとおり、agent-browser を無料でそのまま使うことももちろんできます。

よくあるエラーとその直し方

AIにブラウザを任せるときに安全を保つ

ブラウザの制御をAIに委ねると、現実的な攻撃対象領域が生まれます。プロンプトインジェクション - ウェブページ上の悪意あるコンテンツが、あなたが意図しないことをエージェントにさせるよう仕向けるものです。AnthropicがClaude for Chromeを発表した際によれば、防御を追加した後、プロンプトインジェクションの攻撃成功率は 23.6%から11.2%へ 低下し、ブラウザ特有の一種の攻撃については、同社のチャレンジセットで 35.7%から0%へ 低下しました（claude.com/blog/claude-for-chrome、2025年8月）。

安全に自動化するための実践的な原則：

• パーミッションはグローバルにではなく、サイトごとに付与する。
• リスクの高い操作の前には確認を必須にする：公開、メール送信、データ共有、支払い。
• 機微なデータや重要なアカウントを保持するページで、エージェントが独断で行動することを避ける。
• ログインが不要なタスクには使い捨てのブラウザ（agent-browser）を優先し、実際のセッション（chrome-profile）はどうしても必要なときだけ使う。

ネイティブのChrome統合では、上記の「操作ごとにパーミッションを付与する」という原則は単なる一般論ではありません。プランモードはまさにその仕組みを強制します。読み取り専用の呼び出しは自由に実行され、状態を変更する呼び出しは常に確認を要します（詳細は上の --chrome／/chrome のセクションを参照）。

よくある質問（FAQ）

agent-browserとPlaywright MCPはどちらが良い？

必要なものによります。agent-browser はコンパクトなスナップショット（約280文字、Playwright MCPの8K以上に対して）のおかげで軽量かつトークン効率がよく、長時間の自律的な実行に向いています。Playwright MCPは、すでにPlaywrightエコシステムを知っていて、多くのツール（ネットワーク、ストレージ、PDF）をすぐに使いたい場合に強力です。ほとんどの開発者にとっては、agent-browser が無難なデフォルトです。

Playwrightを知っている必要はある？

いいえ。agent-browser はPlaywrightやPuppeteerの上に作られてはいません。平易な英語でリクエストし、スナップショットの @eN 参照を通じて操作するので、Playwrightのスクリプトを手で書く必要はありません。

ヘッドレス／CIで実行できる？

はい。CIやローカルのブラウザがないマシンでは、agent-browserをBrowserbase（agent-browser -p browserbase open …）、AWS Bedrock AgentCore、またはVercel Sandboxのようなクラウドブラウザに向けます。

すでにログイン済みのページを自動化できる？

はい、ただし実際のログイン済みセッションとCookieを借りるには chrome-profile を使うべきです。agent-browser は既定で使い捨てのブラウザを走らせます。これは実際のアカウントが不要なときには正しい選択です。

AIにブラウザを任せても安全？

プロンプトインジェクションのリスクはありますが、管理可能です。パーミッションはサイトごとに付与し、リスクの高い操作の前には確認し、機微なページは避けましょう。ベンダー各社も攻撃成功率を大きく下げる防御を追加しています（安全性のセクションを参照）。

AgentKitにはこのスキルが含まれている？

はい。AgentKitのバンドル（Engineer Kit）には ak-agent-browser と ak-chrome-profile のスキルが同梱されており、手動での設定を省けます。これは任意の近道であって、agent-browserを使うための必須要件ではありません。

--chrome は比較表の「Claude for Chrome」とどう違う？

同じ拡張機能です。--chrome はCLIから統合を有効にするフラグ（あるいは /chrome を実行して既定で有効にします）で、表の「Claude for Chrome」は、拡張機能を指すときのこの同じ機能の別名にすぎません。

Chrome統合はBedrockやVertex経由で動く？

いいえ。直接契約のAnthropicアカウント（/login でサインイン）が必要で、Bedrock、Google CloudのAgent Platform、Microsoft Foundryのようなサードパーティのプロバイダー経由では利用できません。会社がこれらのいずれか経由でのみClaudeを利用している場合、Chrome機能には別途 claude.ai アカウントが必要です。

まとめと次のステップ

既定では agent-browser を使いましょう。軽量でトークン効率がよく、テスト、フォーム入力、スクレイピングにおいて自律的に十分うまく動きます。実際のログイン済みセッションが必要なときだけ chrome-profile に切り替え、パフォーマンスを計測する必要があるときはChrome DevTools MCPを検討し、コーディング中のライブデバッグ／検証だけが必要でヘッドレスやCIが不要なら、--chrome が最速の近道です。拡張機能以外に何もインストールする必要はありません。その下にあるプロトコル層を理解するには、MCPとは何か を読み進めてください。Claude Code向けに自分のツールを作るには、Claude Code用のMCPサーバーの作り方 をご覧ください。