Geminiで画面UIをDrawioで作れるか試してみた

1. はじめに

Geminiに、Drawioで画面UIを描かせてみた。

先日、Figma Configありましたね。Figma Makeやばいなと思いました。
とはいえ、Figmaのライセンス費用はそれなりにします。普段はDrawio使うことが多いです。

別件で開発中のアプリケーションで、意外にもきれいなUI出してきたので、実験してみるかと思った次第です。
これをGeminiが作成したのはびっくりしました。ちなみに私はインフラ寄りの人間なので、デザインの能力はありません。

以下、比べて検証します。ときおり出力にCanvas使ってます。

※半分お遊びなので、多少の雑さ加減は目をつぶってください。

ラフな画面イメージや既存のUIデザインのスクリーンショットから作らせる。
要件を決めていないわけではないが、何やりますというくらいにしか決まっていない。

アプリケーションの要件をGeminiに入力し、会話で要件定義をしていく。要件を大方決めきったら、さあUI行こうかというところである。設計しろという声はいったん置いておく。これは実験なんで。

検証1はUIや指示を読み取っても、なかなか理解せず、変えましたと言っても、変わったんだか変わっていないんだかよくわからない状態が続いた。となると、正直、最初の一発以降は手でやってしまった方が早い。
検証2は、要件を整理することで、各画面の項目が整理されることが前提になってくるので、割と意図が伝わりやすい。
両者にとっての共通は、drawioが200行あたりまで行くとファイルフォーマットの崩れやすいのと、一回、変にこけると戻りづらい。
とはいえ、検証2でテーブルを書いてくれたのは正直ポイントが高い。drawioのテーブルは意外と書くのが手間だったりする。