【MCPとは】AI時代の規格？基礎を把握して、ClaudeCodeとChromeを連携してみよう

「このままコーダーで、3年後も食べていけるだろうか？」
AIが進化するほど、手を動かすだけの作業者の単価は下がり続けます。これからのWeb制作で生き残るのは、AIに指示を出す「司令塔」側に回った人だけです。

14日間で「作業者」から「AI Webディレクター」へ転身する集中プラン『10倍速 AIワークフロー マスタープラン』を公開中です。プロの個別メンタリング＆8日間の全額返金保証付き。

（先着限定、5月31日まで）

» 「司令塔」側に回る14日間プランを見る

前回の記事では、Claude CodeのCLI版をインストールして、ターミナルからも使えるようになりました。「なぜわざわざターミナルが必要なの？」と思っていた方も多かったかもしれません。

その答えがこの記事にあります。
ターミナルからClaude Codeを使えるようにしておくと、VSCode拡張機能のチャット画面だけでは実現できなかった「外部アプリとの連携」が可能になります。この仕組みが「MCP」です。今回はMCPの概念を理解したうえで、Chrome連携を実際に体験してみましょう。

• MCPとは
• MCPとは何か？ 規格としての意味
• MCPのイメージ・できること
• MCPの接続方法は2種類ある
• ChromeをClaudeCodeにつないでみよう
• Claude用拡張機能をChromeに追加
• CLIを起動して、Chromeに接続する
• 実際にファイルの修正・変更を行う

MCPとは

MCPとは何か？ 規格としての意味

MCPとは「Model Context Protocol（モデル・コンテキスト・プロトコル）」の略で、AIと外部のアプリやサービスをつなぐための共通規格です。

「プロトコル」とは、複数のシステムが通信するための決まりごとのこと。
たとえばインターネットには「https」というプロトコルがあり、メーカーや機種を問わず世界中のコンピューターが同じルールで情報を送り合えるようになっています。

MCPもこれと同じ発想です。
外部ツール側が「こういう操作ができます」とMCPのルールに沿って情報を公開し、Claude CodeなどのAIはそのルールに従って接続・操作します。MCPは双方が同じ言語で話せるようにするための規格です。

また、MCPはAnthropicだけの独自仕様ではなく、OpenAI・Google・Microsoftなど主要なAI企業も採用する業界共通の標準規格です。一度仕組みを理解しておくと、Claude Code以外のAIツールにも広く応用できる知識になります。

MCPのイメージ・できること

MPCの定義を簡単に説明しましたが、これだけではピンとこないですよね。

パソコンをイメージしてみてください。
パソコン単体でも文章を書いたり、計算したりできますが、プリンターをつなげば印刷ができ、Webカメラをつなげばビデオ通話ができるようになりますよね。MCPは、この機器をつなぐためのUSBケーブルのような役割を果たす、と考えるとイメージしやすいと思います。

Claude CodeもMCP経由でさまざまな外部ツールを接続することで、できることが広がります。たとえばこんなことが可能になります。

• Chromeと接続
  → ブラウザの画面を見ながらデバッグ
• Google ドライブと接続
  → ドキュメントやスプレッドシートの内容を参照しながら作業
• Slackと接続
  → 作業の進捗や完了をチャンネルに自動で通知
• Obsidianと接続
  → ノートの内容を参照しながら作業
• Notionと接続
  → 仕様書やメモを読み取りながらコードを生成
• Figmaと接続
  → デザインデータを読み取ってコードに変換

MCPの接続方法は2種類ある

パソコンを外部機器とつなぐときは、USBケーブルを差し込む、ドライバをインストールする、など手順が必要ですよね。 MCPを使用する場合も同様に、Claude Codeと外部ツールの用意が必要です。

• Claude Code側：MCPサーバーを登録するコマンドを実行
• 外部ツール側：拡張機能のインストールやMCP許可設定

こうしたMCPの接続・設定方法は、使うサービスによって異なります。
ClaudeCode側で必要な操作な、大きく以下２パターンです。

1. Anthropic公式の組み込み機能（コマンド不要）

Anthropicが公式に対応しているサービスでは、専用の拡張機能をインストールするだけで使えるものがあります。

代表例がChrome連携です。
「Claude in Chrome」拡張機能を入れてログインするだけで、MCPサーバー登録なしに接続できます。

2. サードパーティのMCPサーバー（コマンドで登録）

Notion・Slack・Figmaなど、外部サービスのMCPを追加するときは、CLIのコマンドでMCPサーバーを登録する必要があります。

claude mcp add サービス名等

サービス名部分は連動したいアプリ・サービスによって変わります。

接続済みMCPの確認

チャット画面で以下を入力すると、現在接続されているMCPの一覧を確認できます。

/mcp

ChromeをClaudeCodeにつないでみよう

MCPの仕組みがイメージできたら、まずコマンド不要で試せるChrome連携から体験してみましょう。

以前、こちらの記事では Chrome 拡張機能のClaude（Claude in Chrome）を使ってデバッグする方法を紹介しました。今回は MCP で接続することで、ブラウザの表示確認からファイルの修正まで、Claude Code が一貫して行えるようになります。

Claude用拡張機能をChromeに追加

まず Chrome 側の準備を確認します。
拡張機能がClaude（Claude in Chrome）インストールされ、Claudeの有料プラン（Pro以上）のアカウントでログインされているかを確認してください。

拡張機能のインストール・ログイン方法はClaudとGoogle Chromeを連携して「原因がわからない」「修正できない」を無くそうで詳しく紹介しています。まだインスト―スされていない方は、こちらの記事を参考に拡張機能インストールとClaudeアカウントでのログインを行ってください。

CLIを起動して、Chromeに接続する

Chrome 拡張機能の準備ができたら、VSCode のターミナルから接続を行います。
前回の記事でインストールした CLI 版 Claude Code を使います。

1. ClaudeCode CLIを起動する

VSCode の上部メニューから、もしくはショートカットキーでターミナルを開いてください。

ターミナルに以下を入力して Claude Code を起動します。

claude

2. ブラウザの起動をお願いする

起動したら、プロンプトの入力欄に「ブラウザの表示を確認しながら、デバックのサポートをしてほしい」という旨をそのまま打ち込みます。

お願いしたいことのみ入力しもClaudeが自動的にブラウザ接続を試みてくれる場合もありますが、以下のように指定すると確実です。

GoogleChromeでブラウザの表示を見ながら、デバックのサポートをしてほしいです。
MCPタブグループを作成して、http://edbase.local/company/ を参照してくれますか？

※参照してほしいURLは、ご自身のローカルWordPressや、live serverのものに置き換えてください。

GoogleChromeでClaude（MCP）というタブが開かれた、新しいウィンドウが起動します。
同時に、指定したサイトでClaudeが操作を行って良いか、確認のウィンドウが表示されます。
ローカル環境のWordPress（Local等のアドレス）であれば、「常にアクションを許可する」を選択しても問題ありません。

アクションが許可されると、プロンプトで指定したページが開きます。
今回のデモの場合だとhttp://edbase.local/company/ です。

少し待つと、ClaudeCodeCLI（ターミナル側）に概要を把握したというような旨が表示されます。

これで、VSCode側から、ページの確認・修正の依頼ができるようになりました。

実際にファイルの修正・変更を行う

ターミナル側でページの確認が出来たという表示が出たら、そのままチャットで進めていけばOKです。

今回は大きなエラーが無いので、スマホ幅でのナビゲーション修正を依頼してみます。
入力欄に以下の内容を入力して、Enterキーで送信しました。

スマホ幅でのヘッダーメニューを開いた際に、通常コンテンツとの境界がわかりにくいと考えています。
メニュー展開時には通常コンテンツに黒い半透明のオーバーレイを追加するなど、メニューとコンテンツの境界をユーザーの視覚的にわかりやすく表現できますか？

VScode拡張機能のチャットとは少し見た目が違いますが、ファイルを変更しても良いか確認が出ます。 変更箇所を確認してYesを選ぶと、ファイルを修正してくれます。

Chromeと連携したことで、実際にChromeを操作して動作確認までしてくれるようになります。

ただ、見た目のチェックに関しては…人間、Webデザイナー/コーダーのOKラインとは差があります。デモで試した場合は、以下のようにメニュー部分だけが浮き上がった表示にされてしまいました。

こういう場合は、追加で指示を送って調整してもらいましょう。
もちろん「原因は分かる。Claude（AI）にどう指示するか考える方が面倒」という場合は、自分で直しても良いです。

開く・閉じるのボタンなどもオーバレイの後ろに入ってしまっていてわかりにくいです。
ヘッダー部分全体をオーバーレイよりも前面に表示させ、展開したメニューと一体化して見えるようにしてください。
スクリーンショットを取って、見え方を確認しながら進めてください。

↓

Chrome拡張機能Claude単体との違い

以前ご紹介したChrome拡張機能Claudeのみの場合は「Chromeのサイドパネルでチャットして修正箇所発見、コードは自分でを直す」という流れでした。

今回行ったClaudeCodeからの起動（MCP 経由）では、原因の特定から修正の実行まで Claude Code が一貫して担ってくれます。「どこを直せばいいか教えてもらう」から、一段階パワーアップした使い方と言えます。

補足：/mcpコマンドについて

冒頭で「現在接続されているMCPの一覧は/mcpコマンドで確認できる」とご紹介しました。
しかし、Chrome連携時に、VSCode拡張機能のチャット画面から /mcp を確認すると、接続されているMCPが表示されず「No MCP servers configured.」となります。

これはバグではなく、Chrome連携がCLI専用の仕組みを使っているためです。
今回のChrome連携は、CLIがChromeと直接やりとりする専用ルートを通っています。VSCode拡張機能のチャットはこのルートを参照できないので、「接続なし」と見えてしまいます。

少しイレギュラーですが、今のところChrome連携はCLI（ターミナル）から使うものと割り切っておいてください（拡張機能の更新等により、変わる場合もあります）。

次回紹介する多機能アプリNotionを使って、MCPサーバーを登録して接続する方法をご紹介します。
こちらの場合はVSCode拡張機能のチャットからも確認・利用ができます。Slackなど主要アプリの大半もこちらの仕組みで設定しますので、ぜひMCPサーバー設定編もご確認ください。

吉田 光利

Skillhub代表 & Edbase代表

教育者&起業家です。今は教育テック系のSkillhubとEdbase（エドベース）という会社をやっています。強みはビジネス構築からデザイン、プログラミング、サーバー構築までひと通できることです。著書に「起業のWeb技術」日本実業出版社があります。