Figma MCPでAIコーディングのデザイン再現度はどう変わる？
生成AIを使ってWebサイトを実装する際、デザインのスクリーンショットをAIに渡してコードを生成する方法があります。手軽に試せる一方で、「見た目は似ているものの、サイズや余白、フォントなどが微妙に違う」ということも少なくありません。
こうしたズレが起こる理由の一つは、AIに渡している情報の違いにあります。
スクリーンショットでは、AIが画像を見ながらデザインを読み取る必要があります。それに対して、Figmaが提供するMCPサーバー（Figma MCP server）を利用すると、Figmaが持っているデザイン情報をAIから参照できるため、画像だけを渡した場合よりも、実装に必要な情報を正確に伝えやすくなります。
なお、MCPとは「Model Context Protocol」の略で、AIとツール間でコンテキスト（文脈情報）をやり取りするための標準的な仕組みを指します。Figma MCPは、このプロトコルを通じてFigma上のデザイン情報をAIに渡すための仕組みです。
今回は、スクリーンショットを使ったAIコーディングとFigma MCPを使った方法の違いを、実際の活用を踏まえて整理します。
目次
スクリーンショットでは、AIがデザインを「推測」している
スクリーンショットをAIに渡してコーディングさせる場合、AIが受け取るのは基本的に「画像として見えている情報」です。
たとえば、以下のような情報は、画像だけでは正確には分かりません。
- この文字は何のフォントなのか
- 文字サイズはいくつなのか
- 要素同士の間隔は何pxなのか
- 線の太さはいくつなのか
- マウスオーバー時にどのような状態になるのか
そのためAIは、画像から見た目を判断して「おそらくこのくらいだろう」と補いながらコードを生成します。
GPT-4oやClaude 3.5 Sonnetなど、最新のマルチモーダルモデルでは画像認識の精度も高く、スクリーンショットからかなり近い画面を生成できるケースも報告されています。それでも、元デザインと比較するとサイズや色、フォントなどに差が出ることがあります。
ここで問題になるのは、コードそのものが生成できるかどうかではありません。
生成後に人がデザインと照合し、細かなズレを修正する作業がどれだけ残るかです。
Figma MCPでは、デザインが持つ情報をAIに渡せる
Figma MCPを利用すると、AIが画像から推測するだけでなく、Figma上に設定されたデザイン情報を直接参照できるようになります。
具体的には、Figma MCPはFigmaのDev Mode APIなどを通じて、レイヤー構造、Auto Layoutの設定値、カラースタイル、テキストスタイル、コンポーネント情報といった設計データをJSON形式でAIに提供する仕組みです。これにより、AIは単なる画像ではなく、画面を構成するための具体的な数値や構造情報をもとに実装できるようになります。
Figma上のデザインは単なる画像ではありません。文字の種類やサイズ、要素間の距離など、画面を構成するための情報を持っています。
Figma MCPを介してAIからその情報を参照できるようにすると、「画像を見て推測する」のではなく、「Figmaに設定されている情報をもとに実装する」ことが可能になります。
たとえば、画面上では同じように見える余白でも、スクリーンショットの場合はAIが画像のピクセル情報から視覚的に推定するしかありません。一方、Figmaから情報を取得できれば、要素間の距離を具体的な数値として扱えます。
この違いは、一つひとつを見ると小さく感じるかもしれません。
しかし、ページ全体を実装する場合には、文字サイズ、余白、線幅、状態変化などの小さな差が積み重なります。AIコーディングの後に発生する調整作業を減らすうえで、元データを参照できることには大きな意味があります。
AIの性能だけでなく「何を渡すか」が重要になる
AIコーディングというと、どのモデルやツールを使うかに目が向きがちです。
しかし実際の制作フローでは、AIそのものの性能だけでなく、AIにどのような情報を渡せるかも結果を大きく左右します。
スクリーンショットしかなければ、AIは画像から判断するしかありません。一方、Figmaのレイヤーツリーやスタイル値、コンポーネント構成といった構造化された設計情報を直接参照できれば、その情報を実装に利用できます。
つまり、AIコーディングの精度を上げるためには、「より性能の高いAIを使う」だけでなく、「AIが判断しやすい情報を用意する」という視点も必要です。
これはFigmaに限った話ではありません。
既存のHTMLやCSS、プロジェクト固有のルールなども含め、AIに何をコンテキストとして与えるかによって、生成されるコードの品質は変わります。
Figmaを使う案件では、MCPまで含めた制作フローを考える
Figmaで作ったデザインを、そのままAIに参照させてコーディングにつなげる方法も、今後は現実的な選択肢になってきます。
これまでの制作工程は、「デザインを作る → エンジニアが確認する → コーディングする」という流れが基本でした。
そこにAIが加わることで、「Figmaでデザインする → AIがFigmaの情報を参照する → コードを生成する → 人が確認・調整する」という流れを組めるようになります。
もちろん、Figma MCPを導入すればすべて自動化できるわけではありません。生成されたコードがプロジェクトのルールに合っているか、レスポンシブ表示や動作に問題がないかといった確認は必要です。
それでも、AIがデザインを理解するための情報を増やせれば、人が後から修正する範囲を減らせる可能性があります。
AIコーディングを業務に取り入れる際は、「どのAIを使うか」だけではなく、デザインから実装までの情報の受け渡し方そのものを見直してみることが重要です。
※本記事の情報は執筆時点のものです。Figma MCPは機能やステータス（ベータ提供を含む）が更新される可能性があるため、最新の情報はFigma公式ドキュメントをご確認ください。
よくある質問（FAQ）
Q. スクリーンショットからのAIコーディングでは不十分なのでしょうか？
用途によります。簡単なプロトタイプや、参考画面から大まかなレイアウトを作りたい場合には、スクリーンショットでも十分役立ちます。一方、Figma上のデザインをできるだけ正確に実装したい場合には、元のデザイン情報を参照できる方法の方が調整作業を減らしやすくなります。
Q. Figma MCPを使えば、そのまま完成コードを作れますか？
必ずしもそうとは限りません。デザイン情報を正確にAIへ渡しやすくなる一方、プロジェクト固有の実装ルールや動作、レスポンシブ対応などは別途確認する必要があります。
Q. AIコーディングの精度を高めるには何が重要ですか？
AIモデルの性能に加えて、「AIが実装に必要な情報へアクセスできる状態を作ること」が重要です。Figmaのデザイン情報だけでなく、既存コードやプロジェクト固有のルールなど、必要なコンテキストをどう渡すかまで含めて制作フローを設計する必要があります。
LYZONが提供するWebサービス
Webに関するお悩みは、まずLYZONへ
構築・運用・AIまで、Webに関わる課題をワンストップで対応。まず何ができるかをご覧ください。
2017年にWebデザイナーとしてLYZONに入社。
現在はアートディレクターとしても活動中。
