こんにちは。WebデザイナーのチワワDXです！
最近、開発現場でよく耳にするようになった「AI駆動開発」。「AIがコードを書いてくれる」という話は聞いたことがあっても、実際どこまでできるのかイメージしにくいですよね。
今回は『デザイン画像からHTML・CSSのコードを生成する』という実験をもとに、その手順や実際にやってみてわかった課題、改善のポイントや応用などをご紹介します！
もくじ
AIでコーディングをする環境は？
今回の検証は、vscodeのGitHub Copilot(モデルClaude Sonnet 4.6)の環境で行いました。画像の読み込みやエージェントモードで実際にファイルの生成まで行わせます。
GitHub Copilotの導入手順などは割愛しますが、以下の公式サイトを参考に導入してみてください。
実際にやってみた！
今回試した手順は大きく分けると以下のとおりです。
- デザイン画像を用意する
コーディングしたいWebページのデザイン画像（スクリーンショットや作成したモックアップ）を1枚用意します。 - AIツールに画像を読み込ませる
デザイン画像を指定して、AIツールに「このデザイン画像をHTML・CSSで実装してください」と指示します。 - コードが出力される
しばらく待つと、AIがデザイン画像を解析してHTML・CSSのコードを生成してくれます。 - ブラウザで確認する
出力されたコードをブラウザで表示し、デザイン画像と見比べながら確認します。
操作自体はシンプルで、難しいコマンド操作などは不要です。「まずやってみる」のハードルがかなり低いのが印象的ですね！
生成されたHTML・CSSのクオリティは？
結論からいうと、デザイン画像から得られたHTML・CSSコーディングの再現度は50点といった感じでした。「完璧なコードが一発で出る」と期待していた方には少し残念に思われるかもしれません。
ただ、ここで注目したいのは完成度よりもスタートの速さと品質向上のプロセスです。AIが叩き台を作ってくれることで、ゼロから書くより圧倒的にスムーズに作業が進みます。
HTML・CSSのコーディングだけでは終わらない！
実際には、画像1枚からHTML・CSSを生成するだけではありませんでした。実際のプロンプトの初稿は以下です。
ディレクトリにあるfull.pngの画像を読み込んでHTMLコーディングをお願いします。
HTMLコーディングの制約
１）Flocss設計
２）BEM記法
３）SASSCompilerでのコンパイル想定
４）Wordpressのカスタムテーマとして開発、構築
５）読み込む画像はトップページあわせてFLOCSS構造やBEM記法での記述なども同時に指示することで、AIモデルによりますが、コンポーネント化なども考慮した結果も同時に得られます。
コーディングしながらフロントエンドの設計環境が自然と整っていく——これがAIコーディングならではの、一石二鳥の魅力です。
デザインの再現精度を上げる改善点！
たった1枚のデザイン画像を共有しただけで、おおよその枠組みが完成しており、素晴らしいスタートダッシュを切ることができました。しかし、再現度としてはまだ50点といったところです。ここからどうやって100点に近付けるか、具体的な方法を検討しました。
まず、全体画像を「全貌」として渡しつつ、セクション単位（グローバルナビ・MV・お知らせエリアなど）に切り出した画像もあわせて渡す方法を試しました。
こうすることでAIのデザイン理解の助けとなり、コーディングでのデザインの再現性が向上しました！
また、画像を細かく分けたことで、AIへの指示の際に「MV.png」や「section1.png」と修正箇所をピンポイントで示しやすくなります。
さらに、AIが毎回全体の画像を読み込む必要がなくなるため、無駄な思考ループやプレミアムリクエストの消費を抑えられるのも大きなポイントですね！
やってみた感想
よかった点
- 初稿のコードがあっという間に出来上がるので、作業のスタートが圧倒的に早くなる
- レイアウトの繰り返しパターン（カード一覧、ヘッダーなど）で特に効果を実感
- 「こういう書き方もあるんだ」と、コードのアイデアの参考にもできる
気をつけたい点
- 複雑なアニメーションや特殊な仕様は、追加で指示を重ねるか手動での実装なども検討
- 画像からフォントのサイズや種類、オブジェクトの余白は相対的な解釈になるため再現度が低い
AIはあくまで「優秀なアシスタント」。最終的な品質を担保するのはエンジニア自身です。
まとめ
「画像1枚からHTML・CSSを生成する」AIコーディングを試してみて、スピードと手軽さに大きな可能性を感じました。一方で、エンジニアとして「何がよくて何を直すべきか」を判断する力が、これからますます重要になるとも感じています。
エフアンドエムネットでは、こうした最新技術を積極的に試しながら、より良いプロダクトづくりに取り組んでいます。
「新しい技術に挑戦したい」「チームで一緒に成長したい」という方は、ぜひ採用ページをご覧ください！