・
「AIがコーディングしてくれるようになったものの、結局出てくるのは"AIっぽい"UIばかり…」
「Figmaのデザインを忠実に再現させるための指示が大変…」
デザインの現場では、AI活用への期待が高まる一方で、実務ではまだ使いこなせないという悩みも多く聞かれます特に、チャットツールやメールに散らばる修正指示の確認や、手戻りによる工数増加は、多くのチームで日常的に起きています。
そこで注目されているのが「MCP」です。MCPは、AIがFigmaやデータベースなど普段使っているツールを“安全に・正確に”操作できるようにするための接続装置のようなもの。
これまでAIが苦手としてきた「外部ツールを扱う作業」を代わりに橋渡ししてくれる存在です！
この記事では、MCPがデザイナーの業務をどう変えるのか、お勧めのサーバーや選ぶポイントをふくめ、実際に使ってみた感想などをわかりやすく紹介します。読み終えるころには、あなたのチームのデザインプロセスを劇的に効率化するヒントが見つかるはずです。
MCPという単語は聞いたことあるし、便利そうなのはわかっているけどいまいちハッキリと何なのかわかっていない方もいるでしょう。
そんな方に向けて、MCPとは何なのか？どういう活躍が期待できるのか？をお伝えします。
MCPとはModel Context Protocolの略で、MCPをひと言でいうと、AIと外部ツール（Figma、Slack、各種DBなど）を安全に繋ぐための共通翻訳機です。
また、 MCPは、Anthropic社が主導して策定したオープンな技術標準です。
AIが外部ツールを安全に扱うための共通仕様として設計され、OpenAIなど複数のモデルで採用が進んでいます。標準化されたプロトコルのため、今後は対応ツールやエコシステムの広がりも見込まれています。
これまでAIは膨大な知識を持つ“賢い脳”で調べたり考えたりすることは得意でしたが、外部ツールを直接操作する“手足”は持っていませんでした。MCPという共通のルールに従って作られたMCPを導入することで、AIは初めてデザインツールを触ったり、データベースを検索したりといった具体的な作業を実行できるようになります。
たとえば、AIアシスタントに「このFigmaのデザインをコード化して」と依頼すると、AIがMCPを通じてFigmaのデータを読み取り、HTMLやReactのコードまで自動生成できるようになります。これにより、開発者との連携が滑らかになり、デザイン資産も効果的に活かせます。
MCPはAIに“手足”を与える技術ですが、近年はこれをAIエージェントと組み合わせることで、より高度な自動化も実現しやすくなりました。
AIエージェントとは、あらかじめ設定された役割に応じてタスクを自律的に実行する仕組みです。
これにより、たとえば
このように、単なるツール操作を超えた自律的なワークフローも構築できます。
MCPが手足、AIエージェントが“頭脳の役割を担うことで、デザイナーの業務を飛躍的に効率化できる未来がすでに始まっています。
まずは一覧から見てみましょう。
では、このおすすめのMCP～自分はどれを選んだらいいのか？抑えるべきポイントを解説します。
MCPの導入を検討する際、特にデザイナーが押さえておくべき判断基準を3つご紹介します。
簡単にまとめると以下の通りです
では詳しく見ていきましょう！
最も重要なのは、チームで日常的に使っているFigmaやNotion、Slackなどのツールと連携できるかです。
例えば、Figmaのデザインをコード化したいなら「Figma MCP」、社内のナレッジをAIに参照させたいなら「Notion MCP」が候補になります。目的から逆算して、必要な連携先を洗い出しましょう。
MCPは外部ツールへのアクセスを可能にするため、セキュリティは非常に重要です。
誰が、どのデータに、どこまでアクセスできるのかを細かく制御できる仕組みがあるかを確認しましょう。
機密情報や個人情報を含むプロジェクトを扱う場合は、認証や権限設定が不適切だと情報漏洩に繋がるリスクも念頭に置く必要があります。
MCPは多くがオープンソースで提供されていますが、実際の運用にはサーバー構築・保守・セキュリティ対策といった技術的コストが発生します。また、連携する外部サービスによってはAPI利用料や有料プランが必要になる場合もあり、想定以上にランニングコストがかかるケースもあります。
まずは小規模なプロジェクトで試し、 チームの技術力・運用体制・利用サービスの料金体系を踏まえて段階的に導入するのがおすすめです。
抑えるべきポイントがわかったら、次は具体的にどんな人にどのMCPがおすすめか解説していきます！
デザイナーがMCPを使う理由は一つではありません。
「デザインを正確に実装へ渡したい」「UIの品質を保ちたい」「チームのナレッジを整理したい」「データ構造を踏まえてエンジニアと齟齬なく進めたい」など、プロジェクトごとに課題は異なります。
そこで、目的ごとに最も効果を発揮するMCPを厳選し、それぞれの場面でどう役立つのかをわかりやすく解説します。
目的に合ったサーバーを選ぶことで、デザイン業務の効率化が一段と進むでしょう！
【一言でいうとどんなツール？】
Figma MCP（Model Context Protocol for Figma）は、ChatGPTがFigmaやFigJamと直接連携し、デザイン情報の取得・ノード構造の把握・スクリーンショット生成・FigJamでの図作成を安全に実行できるようにする公式MCPです。
デザインレビューや資料作成をAIで効率化できるのが特徴です。
【主な特徴】
また、Figmaのデザイン変数を解析し、ブランドガイドラインのドラフトを自動生成できる「Framelink MCP for Figma」のような拡張も登場しています。
配色・タイポグラフィ・余白スケールなどを自動で整理してくれるため、デザインシステム運用やブランド統一を担当するデザイナーにとってより実務に直結した活用が可能になります。
【ここがポイント】
Figmaファイルの構造をAIに取り込ませるだけで、レビューや仕様整理が一気に楽になります。特にFigJam上でワイヤーフローや状態遷移図を自動生成できる点は、資料作成の効率化に大きく貢献します。
完全なUIコード変換までは範囲外ですが、デザイン意図の整理や文章化といった“デザイナーの思考補助”として非常に役立ちます。
【こんな人におすすめ】
【一言でいうとどんなツール？】
実ブラウザの操作や表示検証をAIに任せられるMCP。 UIの崩れやパフォーマンス問題を、ChatGPTが再現・分析するための“ブラウザ操作レイヤーです。
【主な特徴】
【ここがポイント】
実ブラウザで画面を再現してくれるため、「ローカルでは気づけなかった微妙なズレ」や「特定環境でだけ起きるレイアウト破綻」を早い段階で発見できます。
Playwright MCPで画面キャプチャを取り、AIにレビューさせることで、主観に頼らない指摘が得られるのも利点です。
一方、Chrome DevTools MCPは Node.js v22 以上が必須など、導入時にやや環境準備が必要です。
【こんな人におすすめ】
【一言でいうとどんなツール？】
Notion MCPは、ChatGPTがNotionワークスペースと安全に連携し、 ページ内容の取得・検索・作成・更新を自動化できるMCPです。 バラバラな情報をAIが整理し、ドキュメント化までサポートしてくれます。
【主な特徴】
【ここがポイント】
散在しがちな情報を「あとでまとめる」必要がなくなり、日々の会話やメモをAIがそのままNotionドキュメントへ変換してくれます。作業スピードを落とさずにナレッジ化が進むため、情報の属人化防止にも効果的です。ただし、参照範囲はアクセス権限に依存するため、ワークスペース全体に読み取り権限を付与する際は慎重な運用が必要です。
【こんな人におすすめ】
【一言でいうとどんなツール？】
Supabase MCPは、ChatGPTがSupabaseデータベースと安全に接続し、スキーマの取得・データの読み書き・クエリ実行を行えるようにするMCPです。 実データを理解しながらコード生成や仕様確認を行えるため、デザイナーとエンジニア間の齟齬を減らせます。
【主な特徴】
【ここがポイント】
デザイナーが直接触る機会は多くないものの、FigmaのUIと実際のデータ構造をAIが照らし合わせてくれるため、エンジニアへの引き渡しで起こりがちな認識違いを減らせます。
特に、UIをAIに生成させる際にSupabase MCPを組み合わせると、実データに基づいたコード提案が得られ、手戻りが少なくなります。一方で、開発環境と本番環境のキー管理など、セキュリティ設定は慎重に行う必要があります。
【こんな人におすすめ】
ここでは、もっともイメージしやすい活用例として、<span class="mark-yellow">Figmaで作ったLP（ランディングページ）のデザインから、Webページの“元となるコード”をAIに作ってもらえるかを検証してみます。</span >
「コード」と聞くと難しく感じるかもしれませんが、今回の目的はあくまで “デザインをもとに、AIにページの土台を自動で作らせる”という部分だけです。
Figmaで作成したLPのデザイン（特定フレーム）を読み込み、AI IDE（AIを使えるコードエディタ）に指示を出して、HTMLとTailwind CSS という形式のWebページの“たたき台”コードを作ってもらいます。
これにより、よくある 「AIが作るUIはなんか違う…」というズレを解消し、デザイナーが作った本来のデザインに近い形で、実装の第一歩を一気に進められることが期待できます
AI IDE側のチャットには、Figma MCPで対象フレームを指定したうえで、次のようなプロンプトを投げます。
Figma: [LPURL] フレームを読み込み、HTMLとTailwind CSSを使用して忠実に再現せよ。 画像アセットは指定パスを参照し、a11y/レスポンシブ対応を行うこと。
ここで言っている内容を簡単にすると
といった基本ルールをまとめた指示文です。
今回の検証では、以下の条件をそろえています。
あくまで「実務の初期実装フェーズでそのまま使えるか？」という観点で評価しています。
Figma MCPの特徴に合わせて、次の3つの観点でチェックします。
① デザインの忠実性
→ Figmaで作った見た目が、そのままブラウザでも再現されているか？文字の大きさ、余白、色、レイアウトなどが崩れていないかを確認します。
②画像アセットの扱い
→ 画像が正しいパス（場所）で表示されているか？デザインに使われている画像が、ページ上でも問題なく表示されるかをチェックします。
③Tailwind CSSの利用の適切さ
→ AIが生成したコードが整理整頓されていて、後から編集しやすいか？Tailwind CSSのクラス（見た目の設定）が過剰だったり、ムダが多いと困るので、そのあたりをチェックします。
では、実際に検証を進めていきましょう！
まず、AI IDEにFigma MCPを追加し、FigmaのデザインをAIが読み取れる状態を作ります。
設定と聞くと難しそうに見えますが、やることは「Figmaのデータを読んでいいですよ」と許可を渡すだけです。
APIキーを貼り付けて接続すると、AI IDE 上からFigmaのフレームが呼び出せるようになります。
今回使用するAI IDEはCursorです。使用するPCに合わせたものをダウンロードしましょう。
すでにCursorを使用している方は次の設定に進みます。
