POINT
MCPは、外部ツールと直接つなぐ仕組み
MCP（Model Context Protocol）とは、ClaudeCodeが外部のツールやサービスと直接やり取りするための仕組みです。FigmaやNotion、GitHubといったサービスに、ClaudeCode自身がアクセスできるようになります。
イメージ「ClaudeCodeが代わりにFigmaを開いて、デザインデータを取得してくれる」ような動きだと考えると分かりやすいです。
MCPなし／あり
手作業の橋渡しが、不要になる
これまでは、ClaudeCodeと外部ツールの間を人が手作業でつないでいました。MCPを使うと、その橋渡しをClaudeCode自身が行います。
MCPなし手動でのコピーが挟まる
ClaudeCode
→
手動でコピー
→
Figma・Notion・GitHub
MCPあり直接アクセスできる
ClaudeCode
→
直接アクセス
→
Figma・Notion・GitHub
用途で選ぶ
デザイナーが使いたいMCP
代表的なMCPを、デザイナーの仕事に引きつけて整理します。まずはどんなツールとつなげるのかを把握しておきましょう。
| MCP | できること |
|---|---|
| Figma MCP | FigmaのデザインデータをClaudeが直接読む |
| Notion MCP | Notionのページ・データベースを操作する |
| GitHub MCP | プルリクエストの確認・コード操作を自動化する |
| Slack MCP | Slackのメッセージを読む・送る |
注目
Figma MCPが最も実用的
数あるMCPの中でも、Figma MCPはデザイナーにとって最も実用的です。デザインとコーディングの橋渡しを、ClaudeCodeが直接担ってくれます。
- FigmaのデザインカンプをClaudeCodeが直接参照してコーディングできる
- コンポーネントの仕様をAIが自動で読み取る
- デザインとコードのズレを自動でチェックする
つまり実用的に使えると、「デザインカンプを画像で渡す」よりはるかに精度が上がるのがポイントです。
概要だけ押さえる
設定方法のおおまかな流れ
細かい設定は各MCPの公式ドキュメントに従いますが、全体像として次の２つの入り口があると覚えておけば十分です。
- VSCodeの設定ファイルに追記する（.vscode/mcp.json などに、使いたいMCPサーバーの情報を追加する。詳細は各MCPの公式ドキュメントを参照）
- Claude.aiのWebインターフェースから接続する（設定 → Connected Apps から、一部のMCPツールを簡単に接続できる）
まずはここでは「MCPで外部ツールとつなげる」という考え方をつかめればOK。必要になったMCPから、公式ドキュメントを見て設定していきましょう。
ノーコードサロン