Geminiで画面UIをDrawioで作れるか試してみた
1. はじめに
Geminiに、Drawioで画面UIを描かせてみた。
先日、Figma Configありましたね。Figma Makeやばいなと思いました。
とはいえ、Figmaのライセンス費用はそれなりにします。普段はDrawio使うことが多いです。
別件で開発中のアプリケーションで、意外にもきれいなUI出してきたので、実験してみるかと思った次第です。
これをGeminiが作成したのはびっくりしました。ちなみに私はインフラ寄りの人間なので、デザインの能力はありません。
以下、比べて検証します。ときおり出力にCanvas使ってます。
- 画面要素を伝えていくスタイル
- Geminiとアプリの要件定義をしてからUI作っていくスタイル
※半分お遊びなので、多少の雑さ加減は目をつぶってください。
2. 検証内容
検証1: 画面イメージからDrawio XMLを生成
ラフな画面イメージや既存のUIデザインのスクリーンショットから作らせる。
要件を決めていないわけではないが、何やりますというくらいにしか決まっていない。
コード: 画面イメージからDrawio XMLを生成する際のGeminiとのやり取り
検証2: 要件定義からUI設計、Drawio XMLを生成
アプリケーションの要件をGeminiに入力し、会話で要件定義をしていく。要件を大方決めきったら、さあUI行こうかというところである。設計しろという声はいったん置いておく。これは実験なんで。
コード: 要件定義からUI設計を行う際のGeminiとのやり取り
3. 結果と考察
- 検証1はUIや指示を読み取っても、なかなか理解せず、変えましたと言っても、変わったんだか変わっていないんだかよくわからない状態が続いた。となると、正直、最初の一発以降は手でやってしまった方が早い。
- 検証2は、要件を整理することで、各画面の項目が整理されることが前提になってくるので、割と意図が伝わりやすい。
- 両者にとっての共通は、drawioが200行あたりまで行くとファイルフォーマットの崩れやすいのと、一回、変にこけると戻りづらい。
- とはいえ、検証2でテーブルを書いてくれたのは正直ポイントが高い。drawioのテーブルは意外と書くのが手間だったりする。
4. 所感
- 検証2にしてもこれが実用的かといわれると最初のたたき台になれるかどうかというところだろう。
- 凝りだすと、手でやった方がいいとかそうなるとは思われるが、最初何もない状態で書いていくのは骨が折れるので、スタートにはいいと思われる。
- 結果的にGeminiと要件定義を詰められるので、曖昧な構想のまま進めるよりも内容が詰まっているのも大きいかもしれない。
- Figma Makeも来ているが、そんな金あるかというところが大半なので、drawioをGeminiに書いてもらうのは意外とありなのではないか。
おまけ
- Figma Makeの威力を考えると、Figma Makeのプロンプト作らせた方が精度はよさそう。
- Drawio挟まずに、さっさとHTML書かせた方がよかったかもしれない。