Figmaのデザインを、そのままコードへ。AIエージェントで「デザイン実装」の工数を圧縮する

制作会社・デザイン会社向け。Figma から HTML / CSS への実装工程を、AIエージェントの自動ループでどこまで圧縮できるか。SamoX が実際に使っている手法と、その適用範囲をまとめます。

デザイン制作の現場で、いま一番時間を食っている工程

LP やコーポレートサイトの制作では、Figma で作られたデザインを HTML / CSS に起こす工程が必ず発生します。このうち、もっとも時間がかかるのが「デザイン通りに px を詰める」作業です。

要素の位置を1px単位で合わせ、ブラウザでスクリーンショットを撮り、デザインと見比べ、またコードを直す——。一つひとつは小さな調整ですが、積み重なると無視できない工数になります。クリエイティブな判断ではなく、ほぼ目視と手作業の往復で消えていく時間です。

SamoX は受託で Figma からの実装を行う立場として、この工程を AIエージェントに任せる仕組みを構築しました。本記事では、その考え方と、どこまでが自動化に向くのかを整理します。

アプローチ：正解画像との「差分」を、機械的にゼロへ近づける

採用したのは、正解画像とのピクセル差分を収束させる自動ループという考え方です。手順はシンプルです。

1. 完成イメージ（Figma のスクリーンショット）を「正解画像」として渡す
2. AIエージェントがコードを実装し、ブラウザで開いてスクリーンショットを撮る
3. 正解画像と自分の出力を重ね、ズレている箇所を差分として可視化する
4. 差分の位置と量を見て、コードを修正する
5. 差がなくなるまで 2〜4 を自走で繰り返す

人が判断していた「合っている / ずれている」を、目視ではなく差分の数値に置き換えるのがポイントです。これにより、修正の根拠が定量化され、収束したかどうかを機械的に判定できます。

重いコード生成機能を、あえて使わない理由

Figma にはデザインからコードを自動生成する機能もありますが、SamoX ではこれを主軸に置いていません。理由は明確で、デザイナーのレイヤー構成が整理されていないと、生成されるコードが崩れるからです。

代わりに採っているのは、「Figma からは座標・サイズ・カラーコードといった軽い情報だけを正確に取り、見た目の一致は画像差分で詰める」という方針です。この割り切りには実務上の利点があります。

• デザインデータの状態に左右されにくい：レイヤーが整理されていなくても、正解画像が1枚あれば動く
• 崩れの原因が追いやすい：生成コードのブラックボックスに依存しない
• 入力のハードルが低い：極端な話、スクリーンショット1枚から始められる

「何で実装するか」より「組み合わせ方」に本質がある、という設計判断です。

仕組みの全体像

司令塔となる AIエージェント（Claude Code）が、必要なツールを使い分けながらループを回します。

人が関与するのは3箇所だけに絞っています。①最初の依頼（正解画像と出力先を渡す）②スコープ確認に1〜2問答える ③最後の承認。ループの内側はエージェントが回し、何度直しても改善しないなど判断が必要な場面でのみ、人にエスカレーションする設計です。

実証：練習用LPでの結果

海外のサンプルLPを題材に、ヒーロー領域とクライアントロゴの並びを、Figma のスクリーンショット1枚とロゴ素材だけから再現させました。

• 主要要素の位置は、正解とほぼ一致（±0px）まで収束
• 収束を早めた最大の要因は、派手なテクニックではなく「正解画像の幅とブラウザの表示幅を揃える」こと
• この1点を徹底するだけで、やり直し回数が 12回 → 4回、差分量も 7割以上 減少

「正解と実装を同じ条件で比較する」という前提を整えるだけで、収束効率が大きく変わることが確認できました。

適用範囲と限界：どこまで任せ、どこは人が見るか

この手法は万能ではありません。向いている領域とそうでない領域を明確に分けることが、実務で使ううえで重要です。

向いていること

• 静的な見た目の再現（LP・セクション単位の実装）
• デザイン通りに位置・サイズ・色を合わせる工程

人の判断を残すこと

• フォントの微細な詰め、イラストの差、デザインの意図の汲み取り（±0〜5px には寄るが「完全同一」ではない）
• 何を作るかというデザインそのもの、アクセシビリティ、ブランドの判断
• 複雑なアプリの操作や、状態による出し分けを伴う画面（これは別の設計領域）

加えて、AIエージェントに広い権限を与えすぎないための制御（ハーネス）は前提条件です。触れる操作を絞り、外部への送信や重要な操作は人の承認を介す。便利さの裏でリスクも大きくなるため、ここは必ず設計に含めます。

導入効果：コーダーの時間が、設計と判断に戻る

この仕組みで変わるのは「コーダーが不要になる」ことではありません。手で px を合わせていた時間が、設計・品質・顧客との対話に戻ることです。

単純な突き合わせ作業を自動化することで、実装担当者は本来注力すべき判断にリソースを割けるようになります。納期と工数の圧縮は結果としてついてきますが、本質は「人の時間の使い方が変わる」ことにあります。

AIは作業を速く・正確にする仕組みであり、判断と最終責任は人に残る。SamoX はこの前提のもとで、デザイン制作の現場に AIエージェントを組み込む支援を行っています。

デザイン → 実装の自動化について相談する

「自社の制作フローに組み込めるか」「どの工程から任せられるか」など、具体的な相談を受け付けています。お気軽にお問い合わせください。

SamoX代表 福元

弊社ではAI×システム開発を行っております。
AI活用支援から複雑なシステム開発まで幅広く対応可能です。
お困りごとがあれば、お気軽にお問い合わせください。

無料相談はこちら