Figma MCPとの接続は簡単だった。でも、本当に難しかったのはその後。｜AI実験ノート Vol.15

Figmaで作ったデザインを、そのままWebサイトへ実装したい。

Web制作をしていると、一度はそう思ったことがあるかもしれません。

今回、その実験を実際のクライアント案件で試してみました。

なお、制作中の案件のため、デザインや完成画面は掲載できません。

この記事では画面ではなく、実際にAIとやり取りしながら感じたことや、制作の過程で気付いたことを中心にまとめます。

Figmaを、そのままコードにしたかった

これまで、FigmaのデザインをWebサイトへ実装するときは、コーダーが画面を見ながら一つずつ確認していました。

画像のサイズ。

余白。

文字の位置。

PC版とスマートフォン版の違い。

細かな部分まで確認しながら、少しずつコードへ落とし込んでいきます。

今回使ったFigma MCPでは、AIがFigmaのデザインを直接確認できます。

「それなら、デザインをそのままコードにできるのではないか。」

そんな期待を持って、実際の案件で試してみることにしました。

MCPとの接続は、拍子抜けするほど簡単だった

以前、Illustrator MCPを試したときは、設定にも少し苦労しました。

そのため、今回もある程度準備が必要だろうと思っていました。

ところが実際は、とてもあっさり終わりました。

Codexへ

「Figma MCPを使って、このデザインをコーディングしてください。」

と伝え、FigmaのURLを渡しただけです。

必要な接続や設定はCodexが進め、すぐにコーディングが始まりました。

「もう、こんなに簡単につながるんだ。」

そこは素直に驚きました。

画面はできた。でも、少し違った

最初の実装は想像以上によくできていました。

レイアウトも大まかな構成も合っています。

「これはもう完成なのでは？」

最初はそう思いました。

でも、Figmaと並べて見比べると、少しずつ違いが見えてきます。

例えば、

• 写真のサイズや切り抜き位置が違う
• ロゴが文字へ置き換わっている
• アイコンが似た別のものになっている
• PC版は近いのに、スマートフォン版の構成が違う
• 余白や位置に細かなズレがある

普段Web制作に関わらない人なら、十分近く見えるかもしれません。

でも、仕事として見ると気になる差でした。

「何となく違う。」

その違和感に気付けるかどうか。

そこは、これまで積み重ねてきた制作経験が自然と働いていたように思います。

Figmaを見られることと、正しく理解することは違った

CodexはFigmaの内容を確認できます。

でも、それは必ずしもデザインの意図まで理解している、ということではありませんでした。

例えば、素材をすべて取得しきる前に実装を始めてしまうことがありました。

レイヤー名から用途を推測して組み立てているように見える場面もありました。

似た素材で代用していると思われるケースもありました。

もちろん、本当にそう判断していたのかは分かりません。

ただ、実装結果を見ると、そのような可能性が考えられました。

AIは「見えている」ことはできます。

でも、「何を意図したデザインなのか」を理解することとは少し違う。

今回、一番実感したことの一つでした。

PCを縮めれば、スマートフォンになるわけではない

今回のデザインでは、PC版とスマートフォン版が別々に設計されていました。

スマートフォンだけで使う画像。

表示順の違い。

余白の取り方。

PC版をそのまま縮めても再現できない部分がいくつもありました。

AIは効率よく実装するため、PC版を基準にレスポンシブ化しようとしていたように見えます。

しかし今回は、それでは正解になりません。

PC版も。

スマートフォン版も。

それぞれ別の完成形として確認する必要がありました。

一番効いたのは、スクリーンショットへの赤字だった

最初は文章だけで修正をお願いしていました。

「写真をもう少し大きくしてください。」

「余白を少し狭くしてください。」

「ロゴを左へ寄せてください。」

もちろん、それでも修正は進みます。

でも、一番伝わった方法は別にありました。

実装画面のスクリーンショットへ、直接赤字を書くことです。

丸で囲む。

矢印を引く。

修正したい場所へ、一言だけ添える。

普段、デザイナーやコーダーへ修正を返すときとまったく同じ方法でした。

AIには特別なプロンプトが必要なのだと思っていました。

でも実際には、人へ仕事をお願いするときと同じように、丁寧に伝えることが一番効果的でした。

その瞬間、

「AIへのディレクションも、人へのディレクションと本質は変わらない。」

そんな気付きがありました。

ChatGPTに、Codexの勘違いを考えてもらった

修正を重ねるうちに、あることを試してみました。

Codexが作った実装を、今度はChatGPTにも見てもらったのです。

ただし、

「どこが違う？」

とは聞きませんでした。

代わりに、

「Codexは、Figmaをどう解釈して、この実装にしたと思う？」

と相談しました。

するとChatGPTは、

「固定したCSSの枠を優先した可能性があります。」

「PC版を基準にスマートフォン版を組み立てた可能性があります。」

「素材を取得できず、近い素材を代用した可能性があります。」

というように、実装の違いではなく、その理由を可能性として整理してくれました。

その内容を参考にしながら、改善指示を作り、もう一度Codexへ戻します。

Codexが実装する。

ChatGPTが解釈のズレを整理する。

私は完成度を判断する。

自然とそんな役割分担ができていました。

問題は、AIの能力だけではなかった

最初は、

「AIの再現力がまだ足りないんだ。」

そう思っていました。

でも、振り返ると問題はそれだけではありませんでした。

素材をすべて確認してから実装を始める。

PC版とスマートフォン版を別々に確認する。

分からない素材は勝手に置き換えない。

Figmaと実装を同じ画面幅で比較する。

初稿のあとに必ずレビューする。

どれも、制作現場では当たり前に行っていることです。

AIだから特別な工程が必要だったわけではありません。

普段の仕事で大切にしている確認やレビューが、そのままAIにも必要だっただけでした。

AI時代でも、腕を磨くことからは解放されなかった

AIによって、コーディングは驚くほど速くなりました。

以前なら何時間もかかっていた作業が、短時間で形になります。

でも、完成度を高めていたのはAIだけではありませんでした。

違いに気付く。

原因を考える。

どこまで直せば完成なのか判断する。

その部分には、これまで積み重ねてきた制作経験が必要でした。

AIのおかげで単純作業は減りました。

その代わり、人は「より良くする仕事」に時間を使えるようになります。

腕を磨くことから解放されたわけではありませんでした。

でも、その腕を発揮できる場面は、これからもっと増えていくのかもしれません。

MCPは、魔法ではなかった

Figma MCPとの接続は、本当に簡単でした。

URLを渡すだけで、AIがコードを書き始めます。

そこだけを見ると、まるで魔法のようです。

ただし、完成度は自動では上がりませんでした。

確認する。

比較する。

赤字で戻す。

分からないことを勝手に判断させない。

人へ仕事をお願いするときに大切だったことは、AI相手でも変わりませんでした。

AIには特別な仕事の教え方が必要なのだと思っていました。

でも実際は、人へ丁寧に仕事を伝える力が、そのままAIにも必要だったのです。

今回分かったことは、次回も使える手順として残すことにしました。

その話は、次の実験ノートで書こうと思います。

AIによって仕事のスピードは大きく変わりました。

でも、良い仕事を作るために大切なことは、あまり変わっていなかったのかもしれません。

---

追記（2026.07.15）

記事を公開したあと、今回の実装データをプロのコーダーにも見てもらいました。

手応えは感じていましたが、想像していた以上に前向きな評価をもらえました。

「コード自体は問題ありません。あとは、AIと最初にどんなルールを共有するかですね。」

例えば、

• レイアウトの基本ルール
• クラスごとの役割
• 背景画像やボタンなど共通パーツの動き

こうした「見えない部分」のルールをあらかじめAIと共有しておけば、さらに精度は上げられそうだという話でした。

一方で、文字サイズや余白、色など、見た目のデザインはFigmaから読み取れるので、無理にルール化する必要はないとのことです。

さらに話を聞く中で、もう一つ気付きがありました。

AIへ指示を出すだけでなく、Figma側もAIが理解しやすいデータを作ることが大切かもしれない、ということです。

これまでは「人が見やすいFigma」を意識していました。

でもこれからは、「AIにも分かりやすいFigma」という考え方も必要になるのかもしれません。

今回の記事では、レビューを通して品質を高める過程を書きました。

そこへ今回の話を加えると、

「良い初稿を作るためのルール作り」と、「完成度を高めるためのレビュー」。

その両方がそろって、AIを実務で活用できるのだと感じました。

次は、この考え方を実際の案件で試してみようと思います。

また、Figmaだけでなく、Illustratorで作ったWebデザインをMCP経由でどこまでコーディングできるのかも、今後の実験テーマとして挑戦する予定です。