MCPで道具を増やす(Figma連携など)

この章でわかること: MCPという仕組みで、Claude Code に「外部ツールを使う力」を 足す方法。Figma連携やブラウザ操作など、イメージ通りのものを早く作るのに役立ちます。

発展的な内容です

MCPは便利ですが、設定や認証が必要で、最初の一歩としては必須ではありません。 「もっと効率化したい」と思ったときに読めばOKです。

MCPって何?

MCP(Model Context Protocol)は、AIツールと外部サービスをつなぐ共通の規格です。 これを使うと、Claude Code が Figma・ブラウザ・各種サービスを直接使えるように なります。プラグイン/スキルが「進め方」を足すのに対し、MCPは「使える道具」を 足すイメージです。

イメージ通りを早く作るのに効くMCP

MCP	できること	役立つ場面
Figma(公式)	デザインの構造データを読み取る	デザイン → 画面を正確に起こす
ブラウザ操作(Playwright等)	作った画面を実際に開いて操作・撮影	「ちゃんと動くか」を自動で確認

ノート

ここでの狙いは「コードの品質管理」ではなく、頭の中のイメージを素早く形にすること。 上の2つはその方向で特に相性が良い道具です。他にも色々あるので、必要に応じて 「○○できるMCPはある?」とClaude Codeに聞いて探すのも手です。

追加のしかた(概略)

MCPサーバーは、Claude Code に追加して有効化して使います。

• コマンドなら claude mcp add ... で追加し、/mcp で管理
• デスクトップ版でも設定からMCPサーバーを追加できます

具体的な追加手順や接続情報(トークンなど)はサービスごとに違い、更新も早いため、 公式ガイドの最新手順を確認するか、Claude Code に「このMCPを追加する手順を教えて」と 頼むのが確実です。

認証情報の扱いに注意

MCPの接続にトークンやキーを使う場合があります。これも秘密情報です。 APIキーの危険性と同じく、コードに直書きせず安全に管理しましょう。

なぜ大事か

デザイン素材の渡し方(画像・ブランド素材の渡し方)の延長として、 MCPは「Claudeが自分の道具を直接触れる」段階に進む手段です。使いこなせると、 デザイン→実装→確認のサイクルがさらに速く、正確になります。

参考リンク(情報ソース)

• Model Context Protocol(MCP)公式: https://modelcontextprotocol.io
• Claude Code の MCP ドキュメント: https://code.claude.com/docs/en/mcp
• Figma(公式サイト): https://www.figma.com