claude ブラウザ操作 mcp｜設定手順と失敗しない使い方
ClaudeにWebページの確認やフォーム入力を任せたいのに、MCPをどこへ登録すればよいか迷っていませんか。ブラウザ版Claudeを使うことと、Claudeからブラウザを動かすことは別の話です。この記事では、Claude CodeでPlaywright MCPを接続する流れを中心に、Desktopとの違い、最初の指示例、接続後につまずきやすい点を整理します。
Claudeのブラウザ操作は、Claude CodeにPlaywright MCPを登録し、接続と操作対象のページを確認して始められます。Web版のコネクタ設定とは区別し、閲覧から小さく試すことで、クリック・入力・画面確認を段階的に任せることができる。
目次 (8)
Claudeのブラウザ操作とMCPの関係
MCPはClaudeと外部ツールをつなぐための接続規格です。MCP自体にブラウザのクリック機能があるわけではなく、ブラウザを操作するMCPサーバーを用意し、その道具をClaudeから呼び出します。
今回取り上げるのはMicrosoftが公開するPlaywright MCPです。ページの構造を読み取りながら操作する方式を採用しており、リンクや入力欄を対象にした作業に使えます。まず「指定URLを開き、見出しを確認する」程度の小さな作業を試すと、接続とページの認識を切り分けやすくなります。
記事を読むだけなら検索やURL取得で足りる場合があります。入力後に表示が変わる画面や、選択項目に応じて結果が変わるフォームでは、ブラウザ操作を選ぶ意味があります。
Claude Code・Desktop・Web版のどこに接続するか
同じ「ClaudeとMCP」でも、設定する場所を間違えると操作を始められません。
| 利用環境 | 接続の考え方 | 今回の用途との関係 |
|---|---|---|
| Claude Code | ローカルで起動するMCPをCLIから登録 | 開発中の画面確認を含むブラウザ操作の入口 |
| Claude Desktop | アプリの拡張機能やローカルMCP設定を利用 | チャットから対応ツールを呼ぶ入口 |
| Claude Web版 | 対応コネクタからサービスへ接続 | PCのローカル起動コマンドを登録する手順とは別 |
Claude Codeの登録方法はAnthropicのMCP接続ドキュメント、Desktopの拡張機能はローカルMCPサーバーの公式案内で確認できます。
なお、会話内で外部サービスの画面を表示するインタラクティブコネクタも、任意のWebサイトを巡回するブラウザとは異なります。連携先の機能を会話内で使う仕組みとして理解すると、目的の違いが明確になります。出典：インタラクティブコネクタの公式説明
Playwright MCPをClaude Codeへ登録する手順
先にClaude CodeとNode.jsを用意します。Playwright MCPの公開要件はNode.js 18以上ですが、新規導入ではサポート中のLTS版を選び、実際の要件を公式READMEで確認してください。
接続から最初の操作まで
-
ターミナルで実行環境を確認する。
claude --version、node --version、npx --versionを実行し、各コマンドが見つかることを確かめます。 -
使う作業フォルダでMCPを登録する。 次のコマンドは、このプロジェクトだけで個人利用するローカルスコープの例です。
claude mcp add playwright -- npx -y @playwright/mcp@latest -
登録内容と接続を確認する。
claude mcp listとclaude mcp get playwrightを実行します。登録できたことと、サーバーが接続できたことを分けて確認してください。 -
Claude Codeで操作を依頼する。
claudeを起動し、/mcpで状態を確認してから、公開ページの閲覧を依頼します。ツール実行の確認が出たら、対象と操作内容を読んで判断します。 -
結果を人の目で照合する。 開いたURL、取得した見出し、スクリーンショットの内容が依頼と一致するか確認し、次の操作へ進みます。
複数プロジェクトから個人的に使うなら、登録時に--scope userを指定します。チームと設定を共有する--scope projectでは、プロジェクトルートの.mcp.jsonが対象になります。用途に応じて一つを選び、同名の定義を重ねない方が確認しやすくなります。
コマンドの--はClaude側のオプションと、MCPサーバーの起動コマンドを区切る記号です。出典：Claude CodeのMCP設定とスコープ
最初に試すブラウザ操作の指示例
最初から「このサイトの作業を全部やって」と頼むと、成功の基準が曖昧になります。対象URL、行う操作、結果の形式、止まる位置を具体的に伝えましょう。
Playwright MCPで https://example.com を開いてください。
ページタイトルと最初の見出しを確認し、スクリーンショットを取得してください。
別サイトへの移動やフォーム送信は行わず、確認結果を報告してください。
フォームへの入力はテスト環境から始めます。「名前欄へテスト太郎と入力し、確認画面まで進む。最終送信の前で停止する」と頼めば、確認位置を共有できます。期待する表示と、表示されない場合の停止条件も添えてください。
完了報告には「操作したページ」「操作後の表示」「残った問題」を求めてください。Claudeの返答だけで成功と決めず、実際の画面や保存された結果を見ることが大切です。
ログイン状態とブラウザの選び方
MCPから開くブラウザに、普段使っているブラウザのログイン状態がそのまま引き継がれるとは限りません。操作できないときは、ページの問題に見えても、別のプロファイルで開いている可能性があります。
Playwright MCPにはブラウザの指定、分離したセッション、既存ブラウザへの接続といった選択肢があります。通常の導入と既存セッションへの接続は、設定を分けて考えましょう。出典：Playwright MCPの設定・プロファイル説明
テスト用アカウントで対象画面と権限を確認しましょう。例えば一覧を見るだけの検証に、管理者権限を持つアカウントは必要ありません。
ログイン済みページを扱うなら、スクリーンショットに氏名やメールアドレスが含まれることもあります。共有前に保存内容を確認し、認証情報を本文やプロンプトへ貼り付けないようにしてください。ログインを済ませた後も、意図したアカウントであるか画面で確認します。
接続できない・ブラウザが起動しないときの確認順
登録コマンドを何度も追加する前に、どこまで動いているかを整理します。問題を「コマンド」「MCP接続」「ブラウザ起動」「対象ページ」の四つに分けると、次に見る場所が決まります。
- 基本コマンドを確認する。
nodeやnpxが見つからなければ、インストールとPATHを見直します。インストール後にターミナルを開き直すことも確認します。 - 登録したフォルダとスコープを確認する。 別のフォルダからClaude Codeを起動している場合、ローカル設定が見えないことがあります。
- MCPの状態を確認する。
claude mcp get playwrightや/mcpに出るエラーを確認し、サーバーが接続できない段階でページ操作を繰り返さないようにします。 - 起動時のエラーを確認する。 ブラウザが不足しているというエラーなら、その環境に必要なインストール案内に従います。ネットワークやプロキシによる取得失敗も区別します。
- 公開ページで比較する。 公開ページは開けるのに業務画面だけ失敗するなら、ログイン、アクセス権、ページの読み込み状態を確認します。
エラーを相談するときは、OS、バージョン、登録コマンド、接続状態を添えます。ログからトークンや個人情報を除き、設定ファイルを丸ごと共有しないようにします。
MCPで任せる範囲を決めて使う
ブラウザ操作を実務へ広げるときは、ページを読む作業、入力する作業、外部へ送信する作業を区切って評価します。閲覧が成功しても、同じ指示で送信まで正しく進むとは限りません。
初回の作業では、許可するサイトと止まる条件を明示します。「指定ドメイン内で確認し、ログイン要求や予想外の画面が出たら停止する」と伝えると、操作結果を見ながら範囲を広げられます。公開・購入・削除が伴う場合は、実行直前の確認位置も決めておきます。
MCP全体の選定は用途別MCPサーバーの選び方、Chrome拡張を使う方法はClaude in Chromeの使い方も参考になります。
