HTMLコーディングにAIは有用か？

HTMLコーディングにAIはどこまで有用か？
デザインからHTMLコードが生成できるといった情報を聞いたりしていたので、
こりゃすごいことになっているのでは！？と思い試してみました。

※本記事はCodexとFigmaを利用して試しています。

デザインデータからコード生成を試す

これができたら・・・、もうHTMLコーダーいらんよね？っていう禁忌な予感。

手法はいくつかあって下記に大別できそうです。

• デザインからHTMLコード生成（Figmaなど）　<=　今回これ
• 画像データからHTMLコード生成

早速、試してみました・・・・。

デザインから生成（Figmaなど）を試す

Codexエディターを利用しつつFigma MCP機能を利用して試しています。
※CodexはOpenAIが開発したプログラミングに特化したAIモデル/エージェントです。
※FigmaMCPはこちら参考

それでは、添付のようなFigmaファイルで試してみます。

命令：「（FigmaのURL）からXXXページのHTMLを生成して」だけです。
大分荒っぽいですが、さてどうなるか・・・。

すると以下のように！
みため結構いけてる！

多少の崩れはありますが、微調整で済みそうな予感。
このとき、index.htmlとstyle.cssのみ生成されています。

画像などは「https://www.figma.com/api/mcp/asset/〜〜〜」などから画像が読み込まれているようです。
cssなどもscssなどにすればもっと管理しやすそう。

このあたりは「ファイルをローカルに配置」など命令してあげれば解決しそう。

↓レスポンシブ時の見た目

総じて悪くない見た目ではあるが。

HTMLコードもなにも言わずともh1などマークアップしてくれている。

すごいな〜という印象。

が、そうも甘くいかなかった話し

AIにまかせて崩れなどを取ろうとするのですが、何度やってもうまくいかず・・・。
崩れたりを繰り返すうちに組んだほうが早いんじゃね？という結論に。

結局プロンプトを繰り返してるうちに、HTMLコーディングしてるのと同じぐらいの時間がかかりました。（トホホ

実用面でのオススメ利用

• 粗々のマークアップに利用
• CSSや画像などの命名規則は命令をしておく（スネークケースにするとか、アイコンはicon01などにするだとか）

↓

• 細かい調整は抽出して部分的に命令する。（ざっくりやらせない）
• マークアップの問題やSEO的な不具合などを粗々出させる

↓

• 結局細かいところは自分で調整！（笑

これだけでも結構時短になりそうです！

注意

既存ファイルがあるサイトで行なう際に既存ファイルに影響してしまう場合があるので
プロンプトで牽制しておく必要があります。
「新しいファイルを生成して」など
そうしないと既存ページなどを壊す恐れがあるので注意です。