📚 はじめに

この記事はGeminiを使ってHTMLワイヤーからHTMLタグを書けるのだろうかという好奇心から実験した履歴です。

⚙ 使ったもの

Gemini PRO （2.5PRO）

スプレッドシートで作ったワイヤーです。
この画像をHTMLにしてもらうようGeminiにお願いします。

See the Pen Gemini_1 by sakaguchii (@sakaguchii) on CodePen.

<nav>, <p>も判別して書き起こしてくれていますね

imgのsrcや、ページ内リンクも足してみます

See the Pen Gemini_2 by sakaguchii (@sakaguchii) on CodePen.

アンカーリンク（<a>タグ）が機能するように、リンク先の要素にid属性を追加しています。 と言ってくれているようにワイヤーになかったidをよしなに付与してくれました。

See the Pen Gemini_3 by sakaguchii (@sakaguchii) on CodePen.

flexで組むために必要な要素を追加して段組みを実装してくれました。

今回使ったバージョンは2.5PROでしたが、2.5Flashで実行した場合はPROと比べて

のような違いが見られました。よしなに対応してくれると良い場面もありますが、悪く言えば指示を逸脱しているとも捉えられるのでそういった意味ではPROのほうがより忠実に再現してくれるという印象です。ただし、Flashの場合でも厳密に指示をすればより忠実な再現に近づいてくれそうでした。

Geminiでどこまで出来るか？という好奇心から始まった実験でしたが、HTML設計として作成したワイヤーを流し込んでコーディングのベースにするには申し分ない精度でした。
正直いまだに手探りな状態ですが、うまい付き合い方を探っていきたいです。