Claude Codeは、MCP（Model Context Protocol）を通じてFigma・WordPress・Chrome DevTools・Notionなどの外部ツールと公式に連携できます。このページは、CodeQuest.workのMCP連携ガイドをツール別に整理した一覧ハブです。接続コマンド・認証方式・できることを早見表で比較し、目的に合うガイドへ最短で案内します。
MCP連携は便利な一方で、ツールごとに接続方式（リモートHTTP・ローカルstdio）も認証（OAuth・Basic・認証なし）も条件（プラン・バージョン）もバラバラです。個別記事を渡り歩く前に、まず全体像を1枚で把握できるようにこのページを用意しました。
各ガイドはいずれも、公式ドキュメント・公式リポジトリの一次情報（2026年7月確認）だけを根拠に、接続手順から実践ワークフロー、旧仕様との違いまでを検証して書いています。
対応ツール早見表
まずは4ツールの比較です。いずれも各社の公式MCPサーバー（またはWordPress公式プラグイン）を使う、公式ルートの連携です。
| ツール | 公式サーバー | 接続・認証 | 主な用途 | ガイド |
|---|---|---|---|---|
| Figma | Dev Mode MCPサーバー（リモート mcp.figma.com） | HTTP＋OAuth | デザイン→React+Tailwind等のコード化 | 連携方法を見る |
| WordPress | MCP Adapterプラグイン（WP6.9+のAbilities API） | HTTP＋Basic認証（アプリケーションパスワード） | サイト操作・コンテンツ運用の自動化 | 連携方法を見る |
| Chrome DevTools | chrome-devtools-mcp（Google公式・npx起動） | stdio・認証不要 | ブラウザ実測・LCP改善・デバッグ | 連携方法を見る |
| Notion | Notion MCP（リモート mcp.notion.com） | HTTP＋OAuth | 仕様書・タスク・議事録の読み書き | 連携方法を見る |
Figma：デザインをコードにする
Figma公式のDev Mode MCPサーバーを接続すると、FigmaのフレームをClaude Codeが直接読み取り、レイアウト・色・タイポグラフィを反映した実装コード（デフォルトはReact＋Tailwind）を生成できます。対象はフレームのリンク（Copy link to selection）で渡すのが基本です。詳細はFigmaとClaude Codeを連携する方法で解説しています。
- 向いている人：デザインカンプからのコーディングを高速化したいフロントエンド実務者
- 注意点：実用にはFigmaのDev/Fullシートが必要。旧仕様（get_code・デスクトップ必須）の解説記事に注意
WordPress：サイト操作をAIに任せる
WordPress 6.9でコアに入ったAbilities APIと公式MCP Adapterプラグインで、Claude CodeがWordPressサイトの機能を発見・実行できます。wp-cli・REST APIという代替経路も含めた3経路の使い分けと、AIに渡す権限を絞るセキュリティ設計まで、WordPressとClaude Codeを連携する方法で解説しています。
- 向いている人：WordPressサイトの記事運用・保守をAIエージェント化したい制作者
- 注意点：旧Automattic製wordpress-mcpは非推奨（アーカイブ済み）。認証はBasic（Bearerではない）
Chrome DevTools：ブラウザ実測をAIに任せる
Google公式のchrome-devtools-mcpは、4ツールの中で唯一、認証なし・コマンド1行で使い始められます。パフォーマンストレースによるLCP改善、コンソール・ネットワークの実測デバッグなど、「AIが書いたコードをAI自身がブラウザで検証する」ループが作れます。手順はChrome DevTools MCPの使い方で解説しています。
- 向いている人：表示速度改善・バグ調査を実測ベースで回したいWeb制作者全般（最初の1本にもおすすめ）
- 注意点：ブラウザ内容はAIに露出する。機密情報を扱うセッションには接続しない
Notion：仕様書・タスクを開発コンテキストにする
Notion公式のリモートMCPをOAuthで接続すると、Notionに置いた仕様書・タスクDB・議事録をClaude Codeが読み書きできます。「仕様書を読ませて実装→タスクDBに完了を書き戻す」という開発ワークフローの組み方は、NotionとClaude Codeを連携する方法で解説しています。
- 向いている人：開発ドキュメントの正本をNotionで管理しているチーム・個人開発者
- 注意点：AIには接続ユーザーの見えるページが全部見える。横断検索等の一部機能はプラン・Notion AI依存
どれから始めるべきか
迷ったら、導入コストの低い順に試すのがおすすめです。
- Chrome DevTools：認証不要・無料・コマンド1行。MCP連携の体験としても最短
- Notion：OAuth認可のみ。すでにNotionで開発情報を管理しているなら即効果が出る
- Figma：Dev/Fullシートの条件はあるが、デザイン→コードの時短効果が大きい
- WordPress：サイト側の準備（プラグイン・権限設計）が要るぶん、運用自動化の効果は最大級
MCPそのものの仕組み（サーバーの種類・scope・設定ファイル・自作方法）から理解したい方は、先にClaude CodeのMCP・Hooks・Skills活用ガイドを読むと、この後の各ガイドの理解が速くなります。
全ツール共通の注意点
どのツールでも共通して押さえるべき原則は次の3つです。
- 権限は最小から：MCP接続はおおむね「接続ユーザーの権限をAIが継承する」設計。専用アカウント・最小権限・読み取り優先で始める
- 登録コマンドはセッションの外で：claude mcp add は通常のターミナルで実行し、Claude Codeを再起動して /mcp で接続を確認する
- 古い記事は仕様変更を疑う：MCP周りは変化が速く、ツール名・認証方式・推奨サーバーが1年で入れ替わった例が複数ある。一次情報の確認日をチェックする
Claude CodeのMCP連携に関するFAQ
Q. MCPとは何ですか？
MCP（Model Context Protocol）は、AIアシスタントが外部ツール・データソースと安全にやり取りするための共通プロトコルです。ツール側がMCPサーバーを公開し、Claude CodeなどのMCPクライアントがそれに接続して機能を呼び出す、という共通の型で連携します。
Q. 複数のMCPサーバーを同時に接続できますか？
できます。Figma・Notion・Chrome DevToolsを同時に登録し、「Notionの仕様書を読み、Figmaのデザインを実装し、ブラウザで実測検証する」という複数ツール横断のワークフローも組めます。接続数が増えるほど権限管理の重要性も上がる点だけ注意してください。
Q. 連携は無料で使えますか？
ツールによります。Chrome DevTools MCPは無料（OSS）、WordPressのMCP Adapterも無料プラグインです。FigmaはMCP自体がベータ無料でも実用にはDev/Fullシートが必要、Notionは機能ごとにプラン・Notion AI条件があります。詳細は各ガイドの事前準備の章を確認してください。
Q. セキュリティで最低限守るべきことは何ですか？
「AIは接続に使ったアカウントの権限をそのまま持つ」前提で設計することです。専用ユーザー・最小権限・読み取り優先で始め、書き込みや公開などの不可逆な操作は人間の承認を挟む運用にすると、どのツールでも安全に使えます。
Q. 対応ツールは今後も増えますか？
増える見込みです。MCPは業界標準として採用が広がっており、公式MCPサーバーを公開するツールは増え続けています。当サイトでも実務価値の高いツールから順次ガイドを追加し、このページの一覧を更新していきます。
まとめ
Claude CodeのMCP連携は、「AIにコードを書かせる」から「AIがデザイン・サイト・ブラウザ・ドキュメントを横断して仕事を進める」への入り口です。認証不要のChrome DevToolsで体験を掴み、自分の実務の正本があるツール（Figma・WordPress・Notion）へ広げていくのが、遠回りのない導入順です。
各ガイドはこちらから。