画面のプロトタイプをAIで作成・提示して、顧客ともイメージ確認できた。
次はこれを画面仕様書に落として、エンジニアに渡したい。
そんなときに今までなら、画面イメージを見ながら、一生懸命draw.ioファイルに落としていました。
ただいまなら、生成AIに頼めば、draw.ioファイル（でインポートできるXML）も作成してくれるはず。
ということで試してみました。
プロンプト
あなたはdraw.ioという描画ツールで読み込めるXMLファイルを作成することはできますか？
添付の画面イメージの画像をdraw.ioファイルで編集可能な形にしたいと考えています。
画面イメージを読み込んで、draw.ioファイルのXMLを出力してください。
試したAI
- ChatGPT 4o
- ChatGPT o4-mini
- ChatGPT 4.5
- ChatGTP o3
- gemini 2.5 Pro
- genspark super agent
ChatGPT 4o
作成された draw.io ファイルを読み込んでみました。
色などは反映していませんが、なかなかの再現度でした。
ChatGPT o4-mini
生成されたXMLファイルをコピーして、draw.io拡張子で保存。
それをdraw.ioで読み込んでみました。
文字の色は少し再現されていました。表の罫線はなさそうでした。
ChatGPT4.5
生成されたXMLファイルをコピーして、draw.io拡張子で保存。
それをdraw.ioで読み込んでみました。
ChatGPT4.5は推論などが得意そうなので、draw.ioファイル生成はあまり得意じゃないかもしれないですね。
ChatGPT o3
最後エラーメッセージ出ていますが、XMLファイル生成は問題なくされたので、そのXMLを保存、draw.ioファイルで読み込んでみました。
ちょっと横長ですが、かなり再現度高いですね。
gemini 2.5 Pro
会社ではGoogle workspaceを契約してもらっているので、geminiにも試してもらいました。
生成されたXMLをコピーして、ファイル保存。draw.ioで読み込みました。
下記のエラーが発生してしまいました。
生成されたファイルの中身を見てみたところ、コメント文が以下のように記載されてました。
{/* ヘッダー */}
<mxCell id="header-title" value="AI分析・アクションレポート" style="text;html=1;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=20;fontStyle=1;" vertex="1" parent="1">
<mxGeometry x="40" y="40" width="400" height="30" as="geometry" />
</mxCell>
こちらを指摘して、再生成してもらいました。
再度読み込むと下記です。
コメントミスはあったけど、再現度高い！！
gemini 2.5 Proにはコメントだけ最初に指示出せばいいかな。
genspark super agent
最近、スライド作成でお世話になっている gensparkにも作成してみてもらいました。
gensparkはわざわざHTML画面も生成してくれました。
XMLをコピーして、ファイル保存。draw.ioで読み込みました。
こちらも再現度高いいですね。
右下のページ表示が抜けちゃったぐらい。
ちなみにHTML画面で「draw.ioを開く」をクリックすると、ブラウザ上でdraw.ioを開いてくれました。XMLは読み込んでくれないので、手動でインポートする必要があります。
また1回出力したHTMLからのコピーでは気に入らなかったのか、XMLでも再出力していました。こちらを同じくコピー・保存して読み込んでみたところ、下記の通りでした。
今後は右下のページ表示も再現しているようでした。
表のタイトル部分もこちらのほうが再現度は高そうです。
まとめ
いかがでしたでしょうか？
draw.ioのXML出力はすべての生成AIでできましたが、出力精度は様々でした。
| 生成AI | 生成時間 | draw.io作成可否 | 再現度 |
|---|---|---|---|
| ChatGPT 4o | 普通 | ✅ | 高（色以外の要素を再現） |
| ChatGPT o4-mini | 普通 | ✅ | 中（文字色のみ再現、罫線なし） |
| ChatGPT 4.5 | 普通 | ✅ | 低（基本的な要素のみ） |
| ChatGPT o3 | 遅め（2分以上） | ✅ | 高（横長だが再現度高い） |
| gemini 2.5 Pro | 普通 | ✅ | かなり高い（コメントミス修正後は非常に高い再現度） |
| genspark super agent | 遅め（2分以上） | ✅ | かなり高い（2回目の出力で完全な再現） |
今のところ（2025/5/3現在）は、gemini 2.5 Proが出力までの時間、再現性の高さで採用したいなと思いました。それぞれの用途に合わせて、うまく使い分けしていきたいですね。
ここまで読んでいただき、ありがとうございました。