※本レポートは、2025年9月に開催された発表内容をもとに作成されています。
- 会社/サービス概要
- はじめに
- 技術フォーカス：MCP
- ハンズオンの内容紹介
- 第1回／第2回：Figma × MCPで高速プロトタイピング
- 第3回：仕様書・ドキュメントが関わる部分とデザイン〜開発のフローを通してみる
- 学びと工夫
- まとめ
登壇者はこの方
篠崎真由美
パーソルキャリア株式会社
UI/UXデザイナー
2022年2月よりパーソルキャリア株式会社に入社し、doda法人向け統合プラットフォーム「doda CONNECT」の新規企画領域でUIUXデザインを担当。これまではWeb/UIUXデザインを中心に、スタートアップ・新規事業開発現場で一人目のデザイナーをしたり、SIerでの法人向けデザイン導入支援などに従事してきました。
篠崎：パーソルキャリア株式会社 プロダクト&マーケティング事業本部クライアントプロダクト本部 テクノロジー統括部 クライアントサービスデザイン部のUIUXデザイナーをしております。篠崎と申します。
2022年2月にパーソルキャリアへ中途入社し、現在はdoda法人顧客向けプロダクトdoda CONNECTの新規企画領域でUI/UXを担当しています。
本日は、『不確実性の時代にみんなで試したFigma × MCP × Cursor ハンズオン「遠くに行きたいならみんなでいけ」の実践』というタイトルで発表させていただきます。
会社/サービス概要
弊社では、人材紹介サービス、求人メディアの運営、転職・就職支援、採用・経営支援、副業・兼業・フリーランス支援サービスの提供を行っています。
パーソルキャリアというとdodaをイメージされる方が多いと思いますが、転職・就職支援だけでなく、採用支援から副業、フリーランス支援まで、「はたらく」に関するサービスを幅広く提供しています。
はじめに
生成AIでUI/UXフェーズを加速させたい、が
皆さんご存知の通り、生成AIはすごい勢いで進化しています。新しいトレンドのトピックスもキャッチアップしにくい状況ですが、例えば今FigmaでもAdobeでも、UIデザインに関する生成を行うツールがどんどん出てきています。
これらを活用すれば、UI/UXフェーズを爆速にできるのではないかという期待は高まりつつあります。しかし結論を言うと、今現状「これがあればなんとかなりそう」というツールは、デザイナー視点から言うとあまりないと感じています。
出力形式が「単発」で終わっているとはつまり
生成AIの出力形式が単発で終わっているということは、以下のような問題があります。
デザイナーが直面する2つのしんどさ
こんな状況でデザイナーが直面するしんどさが2つあります。
心理的なしんどさ：孤独→不透明→焦りの連鎖
- 自分の手元だけで試すしかなく、課題感や成果を周囲と共有しにくい
- ツール多すぎ＆技術進展爆速で周りがどこまで進んでるのか見えない
- 進展がないまま置いていかれる不安
制度的なしんどさ
- まだセキュリティ面や安全管理が未整備の新しい技術を導入するには、手続きやリードタイムが長い
- コンプラ意識やリテラシーが高いほど、実践で試しにくい
例えば、高水準のセキュリティ対策つき上位プランでないと利用承認がおりないといった制約があります。
2025年6月、Figmaが公式でMCPサーバー提供はじめたぞ
ちょうどこの頃、Ubieさんやサイバーエージェントなどで、デザインシステムとMCPの取り組みが話題になっていました。実際、周りのデザイナーも「これやってみたいよね」と話題になっていました。
そのときに、慣れ親しんだFigmaの公式が提供するものだったら、もしかしたらデザイナーからも何かできるんじゃないのかなという期待を持ちました。
技術フォーカス：MCP
焦点技術＝MCP（Model Context Protocol）とは？
MCPとは、「AIアプリと外部システムをつなぐ標準プロトコル」と公式で説明されています。情報を標準化された形でやり取りできる仕組みです。
AIがデータやツールと連携して、もっといろんなことができるようになりそうという仕組みで、「AIにとってのUSBポート」のようなものと表現されることがあります。これだったらもしかしたらワークフローに組み込めるようになるのではないかと感じました。
MCPが解決してくれそうな課題
この仕組みは、デザインの構造設計に基づいたコード生成を実現してくれます。
Figmaで作成したデザインをMCPサーバーが構造データとして受け取って、その構造に基づいてCursorなどのAIエージェントがコードとして生成してくれます。
今までも、StorybookやStyle Dictionaryを活用してコードコンポーネントとしての一貫化は実現できました。しかし、それが今度はFigma上のデザインリソースから一気通貫で連携できる、デザイナー側としてもエンジニアに対して手渡ししなければならなかった部分が自動化できるというところに期待を感じています。
ハンズオンの内容紹介
こうした期待もあって、まずは社内でやってみようということで、ハンズオン企画を実施することにしました。
ハンズオンの内容と特徴
ハンズオンのテーマは「Figma × MCP × CursorでUI実装体験」です。
内容は、AIエディタのCursorを使って、FigmaデモのMCPを起点にして、環境設定付きでデザインから高速プロトタイピングやドキュメント駆動をやってみようというものです。
- 主にデザイナー向け
- 実践的なハンズオン形式
- MCP連携に焦点を当てる
- 環境設定から一緒にやっていく
といったところが特徴です。
ハンズオンの開催概要
ハンズオン自体は全3回で、合計6回ほど開催しています。のべ52名の方に参加いただきました。
第1回／第2回：Figma × MCPで高速プロトタイピング
目的とゴール
このハンズオンの目的は、自分で手を動かして生成AI × UIのメンタルモデルを作ることです。「AIとUIってこういうことか！」ということがわかることを目指しました。
第1回は、「とにかく動かす」ことがゴールでした。1人でも完走できたら、全員クリア。「やってみたら、なんかいけそう」の感覚を掴むことを目標としました。
第2回は、「次に中身の話」として、Figma上のデザインがMCP経由でコードになるか理解することがゴールでした。「ここの定義を汲み取って、こんな感じでコードにしてきたんだ」という感覚を掴むことを目標としました。
事前準備しっかり
開催にあたり、セットアップ手順書を作って事前配布し、必要なアプリケーションの設定は完了してもらいました。
例えばデザイナーは意外とターミナルを使う機会がないので、実際一回ターミナルを起動してみようというところからやっています。できる人は、GitやNode.js、npmの初回セットアップは先にやっといてねとお願いしました。
当日の流れ（60分）
当日のハンズオンは、以下のような流れで60分で進めました。
当日の内容を説明したあと、セットアップを指差し確認をしながら参加者全員で行いました。パソコンのセットアップ、Cursorのセットアップ、ローカルの開発プロジェクト（Reactのベースのものを使用）も作成し、CursorでのAIチャットがちゃんと動くかの確認もしました。Cursorは割と動かないことがあったため、その確認も行いました。
FigmaデモのMCPはデスクトップアプリを有効にするものだったので、そういうところもみんなで学びながら一緒にやりました。そして、FigmaでのデザインをCursorで実装するまでを、完了状態を確認しながら一つ一つ進めていく60分でした。
第1回の結果
全員がCursorでAIコーディング（Reactベース）を試す環境を整えることができました。
左側がハンズオンで使ったFigmaのデザインとプロンプトの例になっています。右側が参加者の出力結果の例になっています。
このときちょうどGoodPatchさんがSPARKLE DESIGNを発表されていたので、せっかくだからということで、その中のモーダルコンポーネントを例に使わせていただきました。
第3回：仕様書・ドキュメントが関わる部分とデザイン〜開発のフローを通してみる
第3回はドキュメント駆動体験
調整を重ねたものの、生成途中で停止したり、画像も直接貼ってもくれなかったりしましたが、「デザインと開発実装がドキュメントで連動するってどういうこと？」という興味が湧いたため、第3回をやってみることにしました。
仕様書・ドキュメントが関わる部分とデザイン〜開発のフローを通してみる
第3回で試したフローイメージは以下の通りです。
Figma上のデザインから、ドキュメント（スタイルガイドや画面設計書を想定）を生成して、それをもとにIssueを作る。そしてUI実装していくという一連の流れです。
具体的な部分
具体的にどのようなドキュメントを生成したかをご紹介します。
上図の左側にあるのがスタイルガイドのイメージです。Figma上にあるVariableやデザイントークンなどのデザイン要素を配置しておいて、それをMarkdown形式のスタイルガイドにします。
今サンプルで載せているのは、スタイルガイドをこういうフォーマットで出してねとお願いするためのサンプルのフォーマットになっています。
右側が画面設計書になっています。これもFigma上に置いてる画面のデザインから画面設計書を出力して、例えば画面ID、対象端末はこれです、目的はこれ、設計書の構成はこんな感じ、情報設計はこう、というのが出力されるようなフォーマットにしています。
これらのドキュメントを元にして、実装計画やUI実装につなげていくという流れになっています。できればCursorから、今度GitHubに対して直接Issueを立てていくというのもやりたかったのですが、そこまではできなかったので、代用としてローカルに一緒にMarkdownファイルを生成するということで、この時は代用していました。
当日の流れ（60分）
第3回も60分でやっています。
これも1回目と同様で、ここの出力結果って人間見ていくよね、ここは人間によるレビューが必要だよね、ここのタイミングで誰かと合意形成するよね、というところを共有したりもしていました。
第3回の結果
参加者全員が設計書やIssue生成に成功しました。「これだったらもしかして仕様要件管理できるんじゃない？」という感想が多く出ました。
左側は実際に生成されたスタイルガイドと画面設計書（Markdown）のキャプチャです。小さいので読めないかもしれませんが、定義されたトークンや画面の構造が、フォーマットに従って出力されています。
右側が実装結果です。設計書に基づいたUI実装結果なんですが、これは人によってばらつきがあって、画像はどうしても出してもくれなかったりしたのですが、「ドキュメントからもコード作るんだね」という可能性を感じていただけたような内容になっています。
学びと工夫
全3回 参加者アンケートの結果
参加者にアンケートを取ったところ、5段階で満足度4.6、理解度4.2という高い評価をいただきました。（対象：ハンズオン参加者、取得期間：2025/06/18〜08/25、回答数：36件、回答率：70.48%）
「一人だったらちょっとやりたいって思ったけど無理だったけど、こういう場があったからなんとか一緒にできた」という好意的なものが多かったです。1時間を無駄にしたと言われないように必死だったので、この結果を見て安心しました。
目的達成のために工夫したところ
工夫したところとして、とにかく1時間でここまでできるんだという体験ができるような設計にしたということになります。
ステップを刻んで短時間でゴールを切れるようにするというところ、実際にこうできるというところまで行きたかったので、実は専門知識を持った、いわゆるエンジニアの方々だけを巻き込んで、サポートしてもらっています。
エンジニアの方にローカルデバッグスターターキットを作ってもらったり、当日環境設定はどうしても個別サポートが必要になってくるので、そういうところを個別に1on1で設定していただくような、そういうところにも積極的に入ってもらったりしました。
あとは、Cursorとか新しいものを使うというところもあったので、セキュリティリスクがどの辺にあるかのような洗い直しもセキュリティの担当者に相談したりしていました。
成果とつまずき
成果の部分は同じことの繰り返しなので省略します。
つまずきポイントはいくつかありました。
- 環境設定：どうしても個別対応が必要で、パソコンのバージョンや、Cursorは結構その時はバージョンの更新が激しくて、ちょっとずれただけで全然違う結果になる、動かないなどがあったので、この辺は当日サポート窓口としてエンジニアの方が活躍していただけたことで解決することができました。
- プロンプト：「こういう感じの例で入れてみてください」という感じで、参加者は同じようなプロンプトを入れていたんですけど、同じプロンプトを入れても出力結果が異なるというのは、AIならではのばらつきでした。これはむしろ面白かったところです。
- 参加者のフロントエンドスキル：デザイナーはコードを書いたことある人がいれば、全く書かないという人もいるので、前提の知識のところで理解度や進捗は差が出ました。
- Cursorの不安定な挙動：Figmaの読み取り、昨日はできてたんだけど、今日はなんかできない、という不安定な挙動があり、どうにもならなかったところがあります。
まとめ
導入で挙げた課題、乗り越えられた
導入でデザイナーが直面する2つのしんどさを挙げましたが、これらを以下のように乗り越えました。
心理的な壁は、一人でやって孤独になるよりも、ためす場を作るということをしました。
制度的な壁は、周囲の協力者の専門スキルをふんだんに活用して、安心して試せるハンズオンな場を作ることで乗り越えました。
今回のハンズオンでやったこと4つ
たったこれだけですが、タイミングよく多くの参加者を巻き込むことができて、有意義な時間を過ごすことができました。
▼▼ ぜひ他登壇者の発表レポートもご覧ください！
