イケてるUIを実現したくて
生成AIはUIの美学を理解できるかという検証をしたところ、結局は人間側で実現したいUIを言葉で伝える必要があるという結論になりました。
が、それだとセンスのあるUIを言語化する必要があり、手詰まり感があったのですが、その"センスのあるUI"とやらを生成AIで画像生成し、それを参考に使ってみたらどうなるか、という検証をしてみたのがこの検証記事になります。
以前の検証記事と同様にチケット管理Webページを作らせてみたのですが、最終的にできたのが↓です。
なんだかグッとそれっぽくなった気がします。
なお利用しているのは、
- gpt-image-1.5 （画像生成）
- GitHub Copilot Agent Mode + Opus 4.5 (Webページ作成）
になります。
というわけで以下手順です。
1. 画像生成AIに期待する画像をつくってもらう
gpt-image-1.5を使って、以下のプロンプトで画像を生成します。
最先端のおしゃれなチケット管理システム(Single Page App) のポータル画面
そうするとこんな画像が生成されました。
なんかいい感じです。もっともここで色々プロンプトを加えることでもっと自分好みにすることもできますし、そもそもポンチ絵を描いて、それをもとに画像を生成させることもできますが、今回はこの画像を利用していきます。
2. Opus4.5に画像イメージを参考にして、Webページを実装してもらう
SvelteKit(SSG)でTODO管理のWebページを作ること、参考イメージ画像を利用することを伝えます。
この図にあるsampleui.pngが1.でつくった画像にあたります。
そうすると以下を実装してきました。
うーん、それっぽい感じです。けどちょっと元画像とは違います。
もちろんこれはこれでいいのですが、折角なので、元画像にもっと近づけてもらいます。
というわけで完成したのが冒頭に貼ってあるこのページ画面になります。
画像に寄せてもらった結果当初あった3件のデータとか、期待される動きなんかはそれ以上の画面要素ができていますが、とても良い感じです。（一部文字が飛び出ていたりしますけど）
AIにUIも作ってもらうために
元々UIはうまく言語化することが非常に難しい領域でした。一方で画像生成AIの精度が上がっているため、期待する画面イメージをAIで作成し、それを参考イメージとしてAIに実装してもらう方法はかなりアリなんじゃないかなと思います。
やはりAIはいきなり完成物、というよりは、完成イメージをベースに少しづつ近づけていく、という方法が良いですね