Claude Codeを使い始めると、「MCPサーバーを追加します」と書かれた説明に出会います。
MCPとは何なのか、何をつなぐものなのか。
自分は、FigmaのデザインをClaude Codeから読み取るために、Figma MCPを使っています。
公式ドキュメントと一緒に、MCPの基本をまとめます。
先に結論です。
MCPは、AIアプリを、外部のデータやツールにつなぐための共通の規格です。
共通の方式で接続できます。実際につなぐには、サーバーごとの設定や認証が必要です。
MCPって、結局なにをするもの？
AIが、外のツールやデータを使えるようにする、共通のつなぎ口だよ。
MCPとは？AIアプリと外部をつなぐ、共通の規格
MCPは、Model Context Protocolの略です。
公式の説明によると、AIアプリケーションを外部のシステムにつなぐための、オープンソースの標準です。
公式は、MCPをUSB-Cのポートにたとえています。
USB-Cが、電子機器をつなぐ標準的な方法を提供するように、MCPは、AIアプリを外部のシステムにつなぐ標準的な方法を提供する、と説明されています。
つなげる先は、たとえば次のようなものです。
- データ(ローカルのファイル、データベースなど)
- ツール(検索エンジン、計算機など)
- ワークフロー(専用のプロンプトなど)
どんなときに出てくる？
MCPが出てくる場面は、たとえば3つです。
- Claude Codeに、デザインツールやノートアプリなどの外部サービスを使わせたいとき
- AIの設定ファイルや拡張の説明に、「MCPサーバー」が出てきたとき
- 自分で作った機能を、AIから呼べるようにしたいとき(サーバーを作る側)
公式には、Figmaのデザインを使ってClaude Codeがウェブアプリを作る例も挙げられています。
クライアントとサーバーの役割
MCPには、2つの立場があります。
- MCPクライアント：つなぐ側のAIアプリ(Claude Codeなど)
- MCPサーバー：つなぎ先の機能をAIに渡す側(FigmaやNotionに接続するもの)
「サーバー」と書いてありますが、必ずしもどこかの遠いサーバーとは限りません。
Claude Codeの公式ドキュメントでは、つなぎ方(トランスポート)として、リモートのサービス向けのhttpと、自分のパソコン上で動くプロセス向けのstdioが説明されています。
Claude Codeに追加するには
Claude Codeの公式ドキュメントによると、MCPサーバーの追加は、claude mcp addコマンドで行います。
リモートのサービスにつなぐ例は、こうです。
claude mcp add --transport http notion https://mcp.notion.com/mcp追加したあとは、claude mcp listで、登録したサーバーと接続状態を確認できます。
Claude Codeの中で/mcpを実行しても、接続状態が見られます。
追加した設定は、どこに保存されるの？
スコープで決まるよ。3つあって、使い分けられるんだ。
3つのスコープ
公式の説明では、設定の保存先と共有範囲は、スコープで決まります。
local(既定)：今のプロジェクトだけで使う。チームには共有されないproject：今のプロジェクトだけで使う。プロジェクトルートの.mcp.jsonに保存され、バージョン管理を通じてチームと共有できるuser：自分のすべてのプロジェクトで使う。チームには共有されない
指定は--scope(または-s)で行います。
自分はこう使ってます
FigmaのデザインをClaude Codeから読む
本業のWeb制作の案件で、Figmaのデザインをもとに、Claude CodeとFigma MCPを使ってコーディングを進めました。
デザインカンプの数値(余白やフォントサイズ)を目視で拾う手間が減って、初速が上がった実感があります。
実践した内容は、Figma MCP×Claude Codeでコーディングしてみた実践レポートにまとめています。
AIに任せて、危なくないの？
つなぐ先を選ぶのが大事だよ。公式も、信頼できるサーバーだけを使うよう書いてる。
つなぐ前に確認していること
Claude Codeの公式ドキュメントには、MCPのセキュリティについて、次の注意が書かれています。
- 信頼できるサーバーだけを接続する。外部のコンテンツを取得するサーバーは、プロンプトインジェクションのリスクをもたらす可能性がある
- 第三者が作ったサーバーは、提供元と実装内容を確認してから追加する。接続したサーバーのツールは、Claudeがデータやシステムに対して操作できる範囲を広げる
- 認証情報は、コマンドや設定ファイルに平文で書かず、環境変数や安全な保管先を使う
MCPでつなぐと、AIができることが増えます。
そのぶん、つなぐ前の確認が大事です。
MCPでハマった例
Figma MCPで画像を書き出したら、子の画像が親フレームの範囲で切れて、背景色まで焼き込まれたことがあります。
原因は特定できていませんが、一時ページに複製して書き出して解決しました。
詳しくは、Figma MCPで画像を書き出したら、親フレームで切れて背景色まで焼き込まれたに書いています。
迷ったときの確認ポイント
- つなぎたいサービスが、MCPサーバーを公式に提供しているかを確認する
- リモートのサービスなら
http、自分のパソコン上のプロセスならstdioが目安。使うサーバーの公式手順を確認して追加する - チームで共有するなら
project、自分だけならlocalかuserを選ぶ - 追加したら、
claude mcp listか/mcpで、接続できているかを確認する
あわせて知っておきたい用語
- ターミナル
- 文字のコマンドでMacを操作するアプリ。詳しくはこちら。
- プロンプトインジェクション
- AIが読み込む外部の文章に、AIへの指示を紛れ込ませる攻撃。外部のコンテンツを取得するMCPサーバーでは注意が必要。
- トランスポート
- MCPのクライアントとサーバーがやり取りする方式。リモート向けの
httpと、ローカルプロセス向けのstdioがある。 - スコープ
- MCPの設定の保存先と共有範囲。
local・project・userの3つ。
