自分でやるのめんどくさいからAIにデザインカンプのコーディングを丸投げしたい
こんにちは、Etaです。Figmaなどで共有されたデザインカンプを「そのまま正確にHTML/CSSで再現する」という作業、慣れていても普通に面倒です。
CSSのプロパティとかいまだに覚えられないですしもはや覚える気がないと言っても過言ではない。
「これ、もうAIが勝手にやってくれないかな」
ってドラえ〇んに頼るノリで考えるわけです。
まずは画像を渡してみた
最初に試したのは、デザインカンプをスクリーンショットとしてAIに渡し、
「これと同じものをHTML/CSSで書いて」
みたいな依頼をする方法でした。
しかし、画像ではレイアウトの意味や階層・役割までは認識できないようで、生成されるコードは実装として成立しませんでした。
書きながら試してから既に半年くらい経過してることに気づきました。当時は構造も雰囲気も掴めていなそうってレベルでしたが、いまのLLMならもうちょっと頑張ってくれるかな？
とりあえずこの時点で、「画像ベースは無理筋」という結論になりました。
SVGを渡してみたら精度が上がった
次に試したのが、SVGとしてデザイン要素を渡す方法です。
SVGは画像とは違い、構造や座標、フォント情報がテキストで保持されています。
AIからすると「見た目」ではなく「構造」ごと理解できるため、生成されるコードの精度が一気に上がりました。
- HTMLの構造
- CSSのレイアウト
- 文字情報
- 位置関係の再現
このあたりがようやく「実務で使えるかな」というレベルになりました。
この時点で、AIを実装工程に組み込む現実味が出てきました。
SVGで渡すやり方は再利用プロンプト化していまでもちょくちょく利用してます。
完成コードの確認は MCP を試した
生成されたコードをそのまま信じてリリースするわけにはいかないので、当然確認作業が必要です。
ちょうどその頃、Chrome DevTools MCP が実装された時期と重なったため、せっかくなので採用しました。
Playwright MCP も併用しながら、画面の状態をAIに読ませ、DOMやスクリーンショットの取得を行いました。
- DOM取得
- エラーチェック
- スクリーンショット生成
- 要素の存在チェック
などは問題なく行えました。
しかし、一点重要な問題が残りました。
“デザイン差”は判断できない。
要素同士の相対位置や余白バランスは、まだ人間側の目と判断が必要でした。
最終的にわかったこと
今回の試行錯誤で結論が見えてきました。
- AIに最初のコードを書かせるのは大いにアリ
- ただし、丸投げではなく“あとで調整する前提”が必要
- 最後の品質調整はまだ人間の役割
そして補足として、今回のケースは既存サイトへの追加画面だったため、既存のCSSルールが干渉してレイアウトが崩れる場面もありました。
この点も含め、**「仕上げ工程は避けられない」**というのが現状です。
まとめ
AIにデザインカンプのコーディングを丸投げしたい――そう思って始めた取り組みでしたが、現時点では以下の理解に落ち着きました。
AIは実装を代わりにやる存在ではなく、実装の初速を爆速にするツール。
ゼロから全部手で組むより圧倒的に早くなる一方、
**「微調整」「既存設計への合わせ込み」「整合性チェック」**はまだ人間側の仕事です。
ですが、技術の進化スピードを考えると、
「デザイン渡したら勝手に完了」という未来は、そこまで遠くないようにも感じています。
その日が来るまでは、うまく役割分担しながら付き合っていこうと思います。
Discussion