自動化のアイデア

・

2025-12-16

デザイナー必見！MCPサーバーでデザイン業務を高速化するおすすめ活用術

Natsumi Watanabe

✍️そもそもMCPって何？基本からおさらい！
【デザイナー向け】おすすめのMCP一覧とおさえるべきポイント解説
✅【目的別5選】デザイナーがつかうべきMCPはどれ？
🤔デザイナーにおすすめのMCPを使ってみた
🖊️まとめ

AI時代にデザイナーの生産性を爆発させる「MCPサーバー」とは？

「AIがコーディングしてくれるようになったものの、結局出てくるのは"AIっぽい"UIばかり…」
「Figmaのデザインを忠実に再現させるための指示が大変…」

デザインの現場では、AI活用への期待が高まる一方で、実務ではまだ使いこなせないという悩みも多く聞かれます

特に、チャットツールやメールに散らばる修正指示の確認や、手戻りによる工数増加は、多くのチームで日常的に起きています。
そこで注目されているのが「MCP」です。MCPは、AIがFigmaやデータベースなど普段使っているツールを“安全に・正確に”操作できるようにするための接続装置のようなもの。

これまでAIが苦手としてきた「外部ツールを扱う作業」を代わりに橋渡ししてくれる存在です！

この記事では、MCPがデザイナーの業務をどう変えるのか、お勧めのサーバーや選ぶポイントをふくめ、実際に使ってみた感想などをわかりやすく紹介します。

読み終えるころには、あなたのチームのデザインプロセスを劇的に効率化するヒントが見つかるはずです。

✍️そもそもMCPって何？基本からおさらい！

MCPという単語は聞いたことあるし、便利そうなのはわかっているけどいまいちハッキリと何なのかわかっていない方もいるでしょう。

そんな方に向けて、MCPとは何なのか？どういう活躍が期待できるのか？をお伝えします。

【MCPの基本】AIに「手足」を与える技術

MCPとはModel Context Protocolの略で、MCPをひと言でいうと、AIと外部ツール（Figma、Slack、各種DBなど）を安全に繋ぐための共通翻訳機です。
また、 MCPは、Anthropic社が主導して策定したオープンな技術標準です。
AIが外部ツールを安全に扱うための共通仕様として設計され、OpenAIなど複数のモデルで採用が進んでいます。標準化されたプロトコルのため、今後は対応ツールやエコシステムの広がりも見込まれています。

これまでAIは膨大な知識を持つ“賢い脳”で調べたり考えたりすることは得意でしたが、外部ツールを直接操作する“手足”は持っていませんでした。MCPという共通のルールに従って作られたMCPを導入することで、AIは初めてデザインツールを触ったり、データベースを検索したりといった具体的な作業を実行できるようになります。

たとえば、AIアシスタントに「このFigmaのデザインをコード化して」と依頼すると、AIがMCPを通じてFigmaのデータを読み取り、HTMLやReactのコードまで自動生成できるようになります。これにより、開発者との連携が滑らかになり、デザイン資産も効果的に活かせます。

【基本+α】AIエージェントとの組み合わせがMCPの真価を引き出す

MCPはAIに“手足”を与える技術ですが、近年はこれをAIエージェントと組み合わせることで、より高度な自動化も実現しやすくなりました。

AIエージェントとは、あらかじめ設定された役割に応じてタスクを自律的に実行する仕組みです。
これにより、たとえば

Figmaの画面をPlaywright MCPで読み込み、UIデザイナー役のエージェントが余白・コントラスト・文言の改善点を指摘する
Slackや議事録から情報を集め、 Notion MCPでオンボーディング資料のドラフトを自動生成する
Supabase MCPと連携し、実データを元にUIの仕様や設計ミスを自動で発見する

このように、単なるツール操作を超えた自律的なワークフローも構築できます。
MCPが手足、AIエージェントが“頭脳の役割を担うことで、デザイナーの業務を飛躍的に効率化できる未来がすでに始まっています。

【デザイナー向け】おすすめのMCP一覧とおさえるべきポイント解説

つぎに、抑えるべきポイントを考慮したうえでデザイナーにおすすめのMCPの簡単な情報一覧をご紹介します！

まずは一覧から見てみましょう。

では、このおすすめのMCP～自分はどれを選んだらいいのか？抑えるべきポイントを解説します。

MCPを選ぶうえで抑えるべきポイントは？

MCPの導入を検討する際、特にデザイナーが押さえておくべき判断基準を3つご紹介します。
簡単にまとめると以下の通りです

連携したいデザインツールに対応しているか
セキュリティは担保されているか
チームの技術力と運用コストは見合っているか

では詳しく見ていきましょう！

ポイント1. 連携したいデザインツールに対応しているか

最も重要なのは、チームで日常的に使っているFigmaやNotion、Slackなどのツールと連携できるかです。

例えば、Figmaのデザインをコード化したいなら「Figma MCP」、社内のナレッジをAIに参照させたいなら「Notion MCP」が候補になります。目的から逆算して、必要な連携先を洗い出しましょう。

ポイント2. セキュリティは担保されているか

MCPは外部ツールへのアクセスを可能にするため、セキュリティは非常に重要です。

誰が、どのデータに、どこまでアクセスできるのかを細かく制御できる仕組みがあるかを確認しましょう。

機密情報や個人情報を含むプロジェクトを扱う場合は、認証や権限設定が不適切だと情報漏洩に繋がるリスクも念頭に置く必要があります。

ポイント3. チームの技術力と運用コストは見合っているか

MCPは多くがオープンソースで提供されていますが、実際の運用にはサーバー構築・保守・セキュリティ対策といった技術的コストが発生します。また、連携する外部サービスによってはAPI利用料や有料プランが必要になる場合もあり、想定以上にランニングコストがかかるケースもあります。

まずは小規模なプロジェクトで試し、チームの技術力・運用体制・利用サービスの料金体系を踏まえて段階的に導入するのがおすすめです。

抑えるべきポイントがわかったら、次は具体的にどんな人にどのMCPがおすすめか解説していきます！

✅【目的別5選】デザイナーがつかうべきMCPはどれ？

デザイナーがMCPを使う理由は一つではありません。

「デザインを正確に実装へ渡したい」「UIの品質を保ちたい」「チームのナレッジを整理したい」「データ構造を踏まえてエンジニアと齟齬なく進めたい」など、プロジェクトごとに課題は異なります。

そこで、目的ごとに最も効果を発揮するMCPを厳選し、それぞれの場面でどう役立つのかをわかりやすく解説します。

目的に合ったサーバーを選ぶことで、デザイン業務の効率化が一段と進むでしょう！

【Figma MCP】デザイン実装をスムーズにし、"AIっぽさ"をなくす

【一言でいうとどんなツール？】

Figma MCP（Model Context Protocol for Figma）は、ChatGPTがFigmaやFigJamと直接連携し、デザイン情報の取得・ノード構造の把握・スクリーンショット生成・FigJamでの図作成を安全に実行できるようにする公式MCPです。
デザインレビューや資料作成をAIで効率化できるのが特徴です。

【主な特徴】

Figmaのフレームやノード構造を読み取り、ChatGPTが内容を理解できる形式で取得（レイアウト構造・テキスト情報・階層など）
指定フレームのスクリーンショット生成 → 資料作成やレビューの自動化に役立つ
FigJamへの図表生成（フローチャート・シーケンス図・ガントチャートなど） → 要件整理や仕様の初期案をAIに書かせることが可能
UI解析やコード提案にも活用できる（※コード生成はAI側の能力）

また、Figmaのデザイン変数を解析し、ブランドガイドラインのドラフトを自動生成できる「Framelink MCP for Figma」のような拡張も登場しています。

配色・タイポグラフィ・余白スケールなどを自動で整理してくれるため、デザインシステム運用やブランド統一を担当するデザイナーにとってより実務に直結した活用が可能になります。

【ここがポイント】

Figmaファイルの構造をAIに取り込ませるだけで、レビューや仕様整理が一気に楽になります。特にFigJam上でワイヤーフローや状態遷移図を自動生成できる点は、資料作成の効率化に大きく貢献します。

完全なUIコード変換までは範囲外ですが、デザイン意図の整理や文章化といった“デザイナーの思考補助”として非常に役立ちます。

【こんな人におすすめ】

Figmaの構造をAIに理解させて仕様書・要件整理を効率化したいデザイナーやPM
FigJamでフローチャートや画面遷移図をすばやく作成したい企画職
UI情報をAIに渡し、コードの骨組み提案を受けたいフロントエンドエンジニア

【Playwright MCP / Chrome DevTools MCP】UI品質を高め、手戻りを減らすための検証基盤

【一言でいうとどんなツール？】

実ブラウザの操作や表示検証をAIに任せられるMCP。 UIの崩れやパフォーマンス問題を、ChatGPTが再現・分析するための“ブラウザ操作レイヤーです。

【主な特徴】

Playwright MCP：ページ遷移・クリック・入力などの自動操作、スクリーンショット取得
Chrome DevTools MCP：LCP/CLS/TTFBなどのパフォーマンス指標の取得
取得した画面や計測値をもとに、AIがUI改善提案（余白・文言・コントラスト等）を生成

【ここがポイント】

実ブラウザで画面を再現してくれるため、「ローカルでは気づけなかった微妙なズレ」や「特定環境でだけ起きるレイアウト破綻」を早い段階で発見できます。

Playwright MCPで画面キャプチャを取り、AIにレビューさせることで、主観に頼らない指摘が得られるのも利点です。

一方、Chrome DevTools MCPは Node.js v22 以上が必須など、導入時にやや環境準備が必要です。

【こんな人におすすめ】

リリース前のUIチェックに時間を取られているUI/UXデザイナー
Webページのパフォーマンスを数値で把握し、改善優先度を決めたいディレクター

【Notion MCP】散らばった情報を整理し、ナレッジを自然に積み上げる仕組みをつくる

【一言でいうとどんなツール？】

Notion MCPは、ChatGPTがNotionワークスペースと安全に連携し、ページ内容の取得・検索・作成・更新を自動化できるMCPです。バラバラな情報をAIが整理し、ドキュメント化までサポートしてくれます。

【主な特徴】

Notionのページやデータベースを読み取り、内容をAIが理解しやすい形式で
Slackの会話ログや議事録を基に、手順書・FAQ・ドキュメントの下書きを自動生成
最新のNotionドキュメントを参照し、常に最新情報に基づいた回答を生成
オンボーディング資料やプロジェクトナレッジの体系化を効率化

【ここがポイント】

散在しがちな情報を「あとでまとめる」必要がなくなり、日々の会話やメモをAIがそのままNotionドキュメントへ変換してくれます。作業スピードを落とさずにナレッジ化が進むため、情報の属人化防止にも効果的です。ただし、参照範囲はアクセス権限に依存するため、ワークスペース全体に読み取り権限を付与する際は慎重な運用が必要です。

【こんな人におすすめ】

ドキュメント作成に時間がかかっているチーム
情報が個人に偏りがちな環境を改善したいマネージャー
Slackや会議メモを自動で「資産化」したい現場メンバー

【Supabase MCP】エンジニアとの連携をスムーズにし、実装とのズレを防ぐ

【一言でいうとどんなツール？】

Supabase MCPは、ChatGPTがSupabaseデータベースと安全に接続し、スキーマの取得・データの読み書き・クエリ実行を行えるようにするMCPです。実データを理解しながらコード生成や仕様確認を行えるため、デザイナーとエンジニア間の齟齬を減らせます。

【主な特徴】

データベースのスキーマ（テーブル・カラム情報）を取得し、AIが実データ構造を把握
存在しないカラム参照など、仕様と実装の不整合を早期に発見
デザイン上のモックと実データのズレをなくし、実装しやすい情報設計に寄与
必要に応じてデータの読み取り・更新まで自動化（※権限設定に依存）

【ここがポイント】

デザイナーが直接触る機会は多くないものの、FigmaのUIと実際のデータ構造をAIが照らし合わせてくれるため、エンジニアへの引き渡しで起こりがちな認識違いを減らせます。

特に、UIをAIに生成させる際にSupabase MCPを組み合わせると、実データに基づいたコード提案が得られ、手戻りが少なくなります。一方で、開発環境と本番環境のキー管理など、セキュリティ設定は慎重に行う必要があります。

【こんな人におすすめ】

エンジニアとのコミュニケーションコストを削減したいデザイナー
デザインモックと実装の乖離に悩んでいる開発チーム
データ構造を踏まえたUI検討を行いたいプロダクトチーム

🤔デザイナーにおすすめのMCPを使ってみた

ここでは、もっともイメージしやすい活用例として、Figmaで作ったLP（ランディングページ）のデザインから、Webページの“元となるコード”をAIに作ってもらえるかを検証してみます。</span >
「コード」と聞くと難しく感じるかもしれませんが、今回の目的はあくまで “デザインをもとに、AIにページの土台を自動で作らせる”という部分だけです。

【想定シナリオ】

<span class="mark-yellow">Figmaで作成したLPのデザイン（特定フレーム）を読み込み、AI IDE（AIを使えるコードエディタ）に指示を出して、HTMLとTailwind CSS という形式のWebページの“たたき台”コードを作ってもらいます。

これにより、よくある「AIが作るUIはなんか違う…」というズレを解消し、デザイナーが作った本来のデザインに近い形で、実装の第一歩を一気に進められることが期待できます。

【検証で使用したプロンプト】

AI IDE側のチャットには、Figma MCPで対象フレームを指定したうえで、次のようなプロンプトを投げます。

 Figma: [LPURL] フレームを読み込み、HTMLとTailwind CSSを使用して忠実に再現せよ。
画像アセットは指定パスを参照し、a11y/レスポンシブ対応を行うこと。

ここで言っている内容を簡単にすると

どのデザインを使うのか（Figmaの「LP/トップページ」フレーム）
どんな形式でコードにするか（HTML＋Tailwind CSS）
画像の扱い方（画像ファイルの場所を正しく指定する）
誰でも使いやすい作りにすること（アクセシビリティ：a11y）
スマホでも PC でも見やすい作りにすること（レスポンシブ対応）

といった基本ルールをまとめた指示文です。

【検証環境と前提条件】

今回の検証では、以下の条件をそろえています。

Figma MCP：FigmaとAIをつなぐ仕組み。無料で使える範囲でOK。
AI IDE：AIに作業してもらえるコードエディタ。チャットで指示を出せるツール。（例：CursorやCodeiumなど）
Figmaファイル：検証用に作ったLPデザインのフレームをあらかじめ準備。
Figma MCP Server：AI IDEがFigmaのデザインを読めるように“接続設定”を行う。

あくまで「実務の初期実装フェーズでそのまま使えるか？」という観点で評価しています。

【チェックする検証項目】

Figma MCPの特徴に合わせて、次の3つの観点でチェックします。

① デザインの忠実性
→ Figmaで作った見た目が、そのままブラウザでも再現されているか？文字の大きさ、余白、色、レイアウトなどが崩れていないかを確認します。

②画像アセットの扱い
→ 画像が正しいパス（場所）で表示されているか？デザインに使われている画像が、ページ上でも問題なく表示されるかをチェックします。

③Tailwind CSSの利用の適切さ
→ AIが生成したコードが整理整頓されていて、後から編集しやすいか？Tailwind CSSのクラス（見た目の設定）が過剰だったり、ムダが多いと困るので、そのあたりをチェックします。

では、実際に検証を進めていきましょう！

【実際に検証してみた】

まず、AI IDEにFigma MCPを追加し、FigmaのデザインをAIが読み取れる状態を作ります。

設定と聞くと難しそうに見えますが、やることは「Figmaのデータを読んでいいですよ」と許可を渡すだけです。

APIキーを貼り付けて接続すると、AI IDE 上からFigmaのフレームが呼び出せるようになります。

STEP1：AI IDE (Cursor) の導入

今回使用するAI IDEはCursorです。使用するPCに合わせたものをダウンロードしましょう。
すでにCursorを使用している方は次の設定に進みます。

使用許可や保存先を設定してインストールを進めます。
Cursorには無料版と有料版があり、無料版でも利用可能ですが、高性能なAIモデルを使用できるプレミアムリクエストは月50回までという制限があります。

インストールができたら、アカウントを作成します。今回はGoogleアカウントで連携してみました！

アカウントを作成すると、データシェアについての同意を求められます。
このデータ共有は任意で、後からいつでもオフにできます。個人情報が勝手に共有されることはないので、安心して同意して進めて大丈夫です。

無事インストールが完了したら、Cursorの設定画面からFigmaMCPを追加します。

STEP2. Figma MCPの接続設定

Figma MCPのセットアップは、比較的簡単に行うことができます。設定方法は時期によって変わることもありますが、今回は一番シンプルなAPIキーを使用したものをご紹介します。

まずは、Figmaにログインしたら左上のアイコンをクリックして、設定画面から「セキュリティ」を選択します。

開いたウィンドウを下までスクロールすると「個人アクセストークン」の欄があるので、そこから「新規トークンを作成」してください。

Scopeはfile_content:readとlibrary_assets:readを選択しておきましょう。

※生成したトークンは一度しか表示されないので、大切に保存してください！！

つぎにCursorでFigma MCPを使えるようにします。このためにはNode.jsが必要なのでこちらも準備しておきましょう。インストールするだけで設定は不要です！

インストールは特に難しくないので、使用しているPCに合ったものを選択してください。

ここまできたら、あとはCursorでMCPを有効化させるだけです。

最初にFigmaのLP画像コードを保存するためのフォルダを作っておきましょう。作成場所と名前は問いません。今回はデスクトップに「Figma cursor連携用」とわかりやすく作りました。

作成したフォルダをCursorで開きます。アプリ上部のバーから「フォルダを開く」で進めることができます。

次がとても大事です！作成したフォルダを開いたら1つ目のファイル（直下のファイル）を作成し「mcp.json」としてください。これでフォルダ内で使用するMCPを指定することができます。

作成したフォルダ（mcp.json）をクリックするとコードを入力出来る画面がアプリ中央にでます。そこに以下をペーストしてください。ここで使用するトークンは有効期限内であることを確認しましょう。

 
{
  "mcpServers": {
    "Figma MCP": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp",
        "--figma-api-key={取得したFigmaのAPIトークン}",
 "--file-key=Figmaのファイルキー",
        "--stdio"
      ]
    }
  }
}

設定ができたら、保存をしてCursorを終了→再起動させましょう。Tools＆MCPで下のようにトグルがONになっていれば設定完了です。

STEP3.Figmaで作成したLPをコード化

ではFigmaに用意しておいたLPを使って検証を始めていきましょう。
念のためですが、上記の設定がうまくいっているとFigmaの画面の左側にCursorのMCPが反映されています！

FigmaからLP画面を選択（左上のHomeをクリックすると全選択になります）して、右クリック「選択範囲へのリンクをコピー」するか、右上の「共有」からURLを取得します。

コピーすると「https://www.figma.com/file/～」というURLが取得できます。万が一上記のどちらの方法でも「https://www.figma.com/design/～」というURLしか取得できない場合はdesignをfileに書きかえればOKです！

URLが取得できたらcircusを開いていよいよ指示を出しましょう！フォルダ内に新規ファイルを作成してから、右上のボタンからチャットの欄を呼び出し以下のプロンプトを入力します。

 Figma: 【取得したURL】フレームを読み込み、HTMLとTailwind CSSを使用して忠実に再現せよ。
画像アセットは指定パスを参照し、a11y/レスポンシブ対応を行うこと。

うまくいくと、指示通りにコードが出力されます！

出力されたものを画面真ん中の部分にすべてコピー＆ペーストして保存しておきましょう。

すると、あらかじめ作成しておいたフォルダにファイルが作成されます。この際にファイル名が「○○.html」になっているか確認してください。なっていない方は、ここで変更しておきましょう。

ここまできたら、あとはChromeでファイルの表示を確認するだけです。Chromeのページを開いたらファイルをドラッグ＆ドロップしてください。

LPが表示されれば検証完了です！

【検証結果・感想】

前述の通り、検証結果を以下の3点で確認します。
① デザインの忠実性
→ Figmaで作った見た目が、そのままブラウザでも再現されているか？文字の大きさ、余白、色、レイアウトなどが崩れていないかを確認します。

以下の画像を参考にお伝えしていきます。

【Figma画像】

【コードを読み込んだ画像】

①デザインの忠実性

Figmaデザインと生成コードを比較すると、一見「雰囲気は近い」ものの、細部では再現しきれていない部分が目立ちます。文字サイズや行間の違いにより、カード全体の密度が変わり、Figmaの軽やかな印象が損なわれています。

また、アイコンの配置や余白バランスも微妙に異なり、UI全体のリズムが変わってしまっています。

デザイナーの意図を忠実に汲み取るレベルにはまだ達しておらず、「デザイン通りに見せるためには追加の微調整が必須」というのが今回の検証結果です。

②画像アセットの扱い

アイコンは表示されているものの、Figmaに比べてわずかに縮小されている、発色が弱く見えるなど、視覚的な存在感に差が出ています。特にブランド性や世界観を重視するUIでは、この“小さな違和感”が積み重なると品質の低下につながります。また、アイコンの位置合わせも完全一致ではなく、数ピクセルのズレが見られます。実務レベルでは許容しづらい誤差のため、画像アセットの扱いはまだ人間による最終調整が不可欠だと言えます。

③ Tailwind CSSの使い方

AIが生成したTailwindのクラス構成は、一応動作するものの、実務で使うには整理不足の印象です。見た目が近づくように場当たり的にクラスを重ねており、似たコンポーネントでもクラス指定が統一されていません。そのため、後からデザイン調整を行う場合、どのクラスが何に影響しているのか追いづらく、保守性は高くありません。

また、Figmaのスペーシングルール（8pxグリッドなど）が正しく反映されていない部分も見られます。実際のプロダクション品質には、手動でのリファクタリングが前提となります。

検証してみた感想

事前準備の設定でつまずいたところはいくつかあったものの、比較的スムーズに進めることができました。事前準備が終わってからは、画像URLをコピーしてCurosrで指示を出すだけでコード生成までは体感1,2分といったところでとても速かったことに驚きました！

生成されたものはレンダリングや使用されている画像にやや不備がみられ、デザイナーがつくったものをそのまま再現できているとは言えないものでした。

ですが、シンプルなものであれば正確にコード化できたり、プロンプトの修正で結果に改善がみられるとの口コミもありました。

どちらにしても、最初からコード化するよりも生成されたものを微修正しながら進めていくほうが大幅にデザイナーの仕事は効率化できるなと感じました。

🖊️まとめ

今回の検証を通して、MCPは「デザイン作業を置き換える道具」というより、デザイナーの負担を減らす“実務アシスタント”として非常に頼れる存在だと感じました。Figma MCPとCursorを組み合わせれば、LPデザインのコード化まで短時間で進められ、細部の調整だけに集中できます。

また、Figma MCPだけでなく、Playwright MCP・Notion MCP・Supabase MCPなどを併用することで、レビューやUI検証、ドキュメント整理、データ構造の確認まで幅広い作業をサポートしてくれます。どれもノーコードで使えるものが多く、専門知識が少なくても無理なく導入できる点も魅力です。

まずは日々の業務で負担を感じている部分から、小さく取り入れてみるのがおすすめです。MCPを上手に活用することで、創造的な作業に使える時間がぐっと増えていくはずです。

また、Yoomでは、コードを使わずにFigmaと連携して作成したファイルの定期的バックアップが叶うテンプレートなどが用意されています。