MCP 2026年に導入する価値のあるデザイナー向けサーバー

MCPはチャットボットをツールユーザーへと変革します。これが実現すれば、AIはもはや単なる手品ではなくなります。もしあなたがこれまでFigmaファイルのスクリーンショットをClaudeに貼り付けて、表示されている内容を説明していたとしたら、今すぐにでもより優れたアーキテクチャが利用可能で、設定に20分かかるだけで済みます。

MCPとは何か（専門用語なしで）

anthropic.comで発表をご覧ください。

モデルコンテキストプロトコルは、2024年後半に公開されたオープンスタンダードAnthropicで、AIクライアントが統一されたインターフェースを通して外部ツールと通信できるようにします。AI統合におけるUSBのようなものと考えてください。プラグの形状は1つで、接続できるデバイスは無限です。

MCPが登場する以前は、AIモデルに接続したいツールはそれぞれ、共通の契約なしに独自の統合を構築する必要がありました。 MCP以降、1つのサーバーを構築するツールは、MCP互換のホストであればどれでも動作します。

接続の両側は、ホスト（Claudeデスクトップ、カーソル、Replit、またはその他のMCP対応クライアント）とサーバー（ツール、データソース、またはアクションを公開する小さなプログラム）です。

AIがサーバーを呼び出します。サーバーが処理を実行します。結果が返されます。あなたは中間処理に関与しません。

デザイナーが「モデルコンテキスト」という名前を冠したプロトコルに注目すべき理由

手動ブリッジングは、MCPが排除する負担です。Figmaファイルのスクリーンショットをチャットウィンドウに貼り付けるたびに、MCPサーバーの役割を手作業で行っています。この負担は、セッションごと、毎週積み重なっていきます。

MCPは、デザイナーが実際に使用するツールにおいて、この負担を排除します。

• デザインファイル
• コンポーネントライブラリ
• バージョン管理
• プロジェクト管理
• ブラウザ

これらのツールが連携されると、デザイナーのためのAIのストーリーは「思考を支援するAI」から「既存のスタック内で動作するAI」へと変わります。この違いは単なる漸進的なものではありません。委任すべき対象そのものが変わるのです。

現在のAI設計ワークフローツールの状況は、既存アプリの外側に取り付けられたアドオンがほとんどです。MCPは、アプリ内部に組み込まれる最初のアーキテクチャパターンです。

最初にインストールすべき5つのMCPサーバー

以下のランキングは、ブランド認知度ではなく、実際のデザイナーにとっての現実的な日々の価値に基づいています。

| ランキング | サーバー | 機能 | インストールの手間 |

|------|--------|----------------------|----------------|

| 1 | Figma MCP | ライブファイルデータ（コンポーネント、スタイル、レイヤー、バリアント）を読み込む | 低 |

| 2 |ファイルシステム MCP | ローカルファイルの読み書き：アセット、エクスポート、仕様書 | 低 |

| 3 | GitHub MCP | ブランチ、プルリクエスト、課題、コード検索 | 低 |

| 4 | Notion MCP | プロジェクトドキュメント、概要、デザインシステムノート | 中 |

| 5 | ブラウザ自動化 MCP | スクリーンショット、ライブページ検査 | 中 |

Linear は、チームがデザインチケットをそこで管理している場合、このリストに含めるべきです。そうでない場合は、Notion を削除し、Linear を 4 位に置き換えてください。残りのランキングは、チームの規模やツールの選択に関係なく適用されます。

FigmaのMCPサーバー：Claudeでできること

figma.comのローンチ記事をご覧ください。

Figmaは2025年に開発モードのMCPサーバーを出荷しました。ファイルを指定すると、Claudeはコピー不要でファイルから直接読み込むことができます。

• コンポーネント名
• スタイルトークン
• レイヤー構造
• バリアントプロパティ
• デザイン仕様

「ボタンコンポーネントはどのトークンを使用していますか？」と尋ねると、Claudeはクリップボードではなく、ファイルを直接読み込みます。

実用的なメリットは、ハンドオフです。開発者が正しく理解できるかどうかわからない仕様書の代わりに、開発者にはClaudeセッションが提供され、Figma MCPが接続され、関連するフレームが選択されます。Claudeはコンポーネントを読み込み、実際のトークンに対してコードを書き込み、不一致をリアルタイムで検出します。

Figma ウィーブは、Claudeを介して共同ファイル編集を可能にすることで、これをさらに発展させます。Figma MCPサーバーは、これらすべてを可能にする基盤です。AIが認識できないものは自動化できません。

ファイルシステムとGitHub：アセットとバージョン管理の組み合わせ

ファイルシステムMCPサーバーは、このリストの中で最も過小評価されている機能です。Claudeは、指定したローカルディレクトリへの直接的な読み書きアクセスが可能になります。つまり、アセットのエクスポート、デザインシステムドキュメント、仕様ファイル、アイコンセットなどをコピー＆ペーストせずにクエリできるようになります。

具体的なワークフロー：フレームをローカルのアセットフォルダにエクスポートし、ClaudeにローカルのMarkdownファイルで定義されたデザインシステムトークンとの照合を依頼します。Claudeは両方を読み取ります。口頭での説明に基づく推測ではなく、実際の差分が得られます。

GitHub MCP は、ハンドオフ側のループを閉じます。Claude がリポジトリを読み込み、ブランチを作成し、プルリクエストにコメントできるようになると、AI がライブコンポーネントコードを Figma 仕様と比較し、逸脱を検出できるレビュー ループが構築されます。これこそが、2026 年に注目すべき AI 支援型 QA の姿です。

Notion と Linear: デザインとチーム間のループを閉じる

デザイナーは孤立して作業しているわけではありません。ブリーフは Notion から届き、チケットは Linear で管理されます。

AI アシスタントがこれらを認識できない場合、手動での橋渡し作業に戻ってしまいます。ブリーフをコピーして貼り付け、毎回最初からコンテキストを説明し直す必要があります。

Notion MCP は、Claude にワークスペースへの読み取り/書き込みアクセス権を付与します。手順は以下のとおりです。

1. Claude は、Notion ページからブリーフを取得します。

2. ブリーフの内容に基づいて、デザインの根拠をドラフトします。

3. 根拠を同じページに書き戻します。

コマンドは1つだけで、コンテキストの切り替えは一切不要です。

チームがチケットで作業を追跡している場合は、Linear MCP の方が高速です。手順は以下のとおりです。

1. チケットとそのリンクされたファイルを読みます。

2. ステータスを「レビュー中」に更新します。

3. デザインの決定事項をコメントとして追加します。

既にAIエージェントパターンで作業している場合、構築中のセッションからLinearチケットを閉じることは、実際に時間を節約できます。

ブラウザ自動化MCP：スクリーンショットが必要な場合（雰囲気チェックではなく）

ブラウザ自動化サーバー（PlaywrightMCPが現在最も安定したオプション）を使用すると、ClaudeでURLを開き、スクリーンショットを撮り、DOMを検査できます。デザイナーにとって、これはブラウザを手動で開いて目視確認することなく、納品された成果物の視覚的な品質保証（QA）を可能にすることを意味します。

Claudeに、価格ページのヒーローセクションが承認された間隔仕様に合致しているかどうかを確認させます。ブラウザとMCPの連携フローは以下のとおりです。

1. ClaudeがURLを開きます。

2. 指定されたビューポートでスクリーンショットを撮ります。

3. アクセス権を与えた仕様（ファイルシステムまたはNotion MCP）と比較します。

4. 不一致箇所をインラインで報告します。

ピクセル単位での完璧なチェックではありませんが、従来の方法よりもはるかに高速です。

同様のパターンは競合調査にも適用できます。Claudeに、競合他社のランディングページ3つをスクリーンショットして情報階層を比較させます。以前は半日かかっていた作業ですが、ブラウザ自動化ツールMCPを使えば5分で完了します。

MCP デスクトップとカーソルでのセットアップ

cursor.comでライブ配信をご覧ください。

Claude デスクトップとカーソルは同じ設定形式を使用します。Mac では、Claude デスクトップの設定ファイルは ~/Library/Application Support/Claude/claude_desktop_config.json にあります。カーソルは独自の設定パネルに保存しますが、同じ JSON 形式を受け入れます。

パスのプレースホルダーを実際のディレクトリとトークンに置き換えてから、ホストを再起動してください。

{ "mcpServers": { "filesystem": { "command": "npx", "args": ["-y", "@modelcontextprotocol/server-filesystem", "/Users/yourname/Desktop", "/Users/yourname/Documents"] }, "github": { "command": "npx", "args": ["-y", "@modelcontextprotocol/server-github"], "env": { "GITHUB_PERSONAL_ACCESS_TOKEN": "your_token_here" } }, "figma": { "command": "npx", "args": ["-y", "figma-developer-mcp", "--figma-api-key", "your_figma_token_here"] }, "notion": { "command": "npx", "args": ["-y", "@notionhq/notion-mcp-server"], "env": { "OPENAPI_MCP_HEADERS": "{\"Authorization\": \"Bearer your_notion_token\"}" } }, "playwright": { "command": "npx", "args": ["-y", "@playwright/mcp"] } } }

接続が確立されると、サーバーは Claude のツールパネルに表示されます。再起動後もサーバーが表示されない場合は、以下のデバッグセクションにチェックリストがあります。

既存のツールに統合された、AI ネイティブなデザインワークフローを、後付けではなく、組み込みたいですか？ Brainyがデザインと出荷を行っています。

MCP がサイレントエラーを起こした場合：デバッグチェックリスト

MCP サーバーは、目に見えるエラーメッセージを表示するよりも、サイレントエラーを起こすことの方が多いです。サーバーが表示されない場合や、コマンドが何も返さない場合は、再インストールする前に、このリストを確認してください。

• Node.js はバージョン 18 以上です (node --version)
• 設定ファイルは有効な JSON 形式です (カンマが欠落していると、ファイル全体が警告なしに破損します)
• API トークンには正しいスコープが設定されています (Figma は読み取りアクセス、GitHub はリポジトリアクセスが必要です)
• 設定ファイル内のファイルシステムパスは、実際にディスク上に存在します
• Claude デスクトップは、単に閉じただけでなく、完全に終了して再起動されました
• 設定ファイルに重複するサーバー名はありません (JSON 内の重複キーは、警告なしに最後のキーが優先されます)
• ~/Library/Logs/Claude/ にある Claude デスクトップのログでプロセスエラーを確認してください

カーソルの設定パネルに MCP 接続ステータスインジケーターが表示されます。赤色はサーバープロセスの起動に失敗したことを示します。これはほぼ間違いなくNodeのバージョン不一致または無効なファイルパスが原因です。

よくある質問

MCPサーバーはプラグインではありません

プラグインは特定のアプリケーション向けに構築された、ファーストパーティ製の統合機能です。MCPサーバーは、MCP互換ホストであればどれでも呼び出せる汎用ツールです。1つのサーバーは、Claudeデスクトップ、カーソル、リプリットで変更なしで動作します。プラグインはこのような境界を越えません。

MCPサーバーを使用するにはコードを書く必要がありますか？

いいえ。この記事で紹介するサーバーはすべてnpx経由でインストールでき、コードを記述する必要はありません。JSON設定ファイルを編集し、関連するアプリケーションからAPIトークンを生成する必要があります。これはコピー＆ペースト作業であり、プログラミングではありません。

MCPはClaude専用ですか？

MCPはAnthropicから始まりましたが、仕様はオープンです。Cursorが採用し、Replitがサポートを追加、GitHubのMCPサーバーはどのホストでも動作します。エコシステムは、どのベンダーのロードマップよりも速いペースで拡大しています。

MCPサーバーは私のFigmaファイルに書き込むことができますか？

Figma MCP サーバーは現在読み取り専用です。ファイルシステム MCP は、書き込み可能なディレクトリを指定すれば書き込みが可能です。GitHub MCP はブランチの作成とコメントの追加が可能です。重要なものを接続する前に、各サーバーのドキュメントを確認してください。

Figma ファイルデータはマシンから外部に送信されますか？

Claude が MCP サーバーを介して Figma ファイルを読み取ると、データは Claude の推論 API を経由します。クライアント作業を接続する前に、Anthropic のデータ使用ポリシーを確認してください。MCP サーバープロセスはローカルで実行されます。データはClaudeのエンドポイントに送信され、第三者を経由しません。

MCPサーバーがセッション中にダウンした場合、どうなりますか？

Claudeはそのツールへのアクセスを失いますが、セッションは継続されます。そのサーバーへのツール呼び出しは、Claudeチャットに表示されるエラーを返します。会話やその他の接続されたサーバーには影響はありません。

より大きなパターン：あなたが普段使っているツールにAIが組み込まれる

replit.comでライブ配信をご覧ください。

即座の表面デザインにおける会話は、常に同じ壁にぶつかります。AIはあなたが知っていることを理解していないのです。あなたのファイル、チケット、アセットライブラリ、バージョン履歴を見ることができません。あなたはAIと作業する代わりに、セッションの半分をAIへの説明に費やしています。

MCPは、その壁に対するアーキテクチャ上の解決策です。サーバーはまだ新しく、設定も一部不十分な箇所があり、生産性を発揮できる1時間前にセットアップに1時間かかるでしょう。しかし、この一度限りのコストで、AIがツールの外部でユーザーが設定を待つのではなく、ツール内部に組み込まれたワークフローを実現できます。

Claude Code デザイナー向けは、このパターンの論理的な拡張です。AIがファイルを読み込み、ツール上で動作するようになれば、AIアシスタントとAIコラボレーターの境界線は曖昧になり、提供できる製品やサービスの種類も変化します。

MCPは、その実現を可能にする基盤です。一度インストールすれば、あとはあなたが橋渡し役を務める必要はありません。