AIを使ったUIの作り方

スポンサーリンク

 UIを作るのはめんどくさいので、AIがUIを作れるようなレンダラーを作成しました。

 URL: https://github.com/tibiccbarusu/JSON-UI-Workbench

 ※書き込み権限は誰にも与えていないので基本は安全ですが、万が一のことを考えて、このレンダラーを使う前に必ず悪意のあるコードが追加されていないか確認してください。(最低限AIには確認させてください)

 これを使えば、例えばこんなのが作れます。

%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2026-09-25-044530.png

 ↑検証用に作成したUIです。FormUIを改造しています。

%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2026-09-28-182432.png

 ↑ピアノ風UIです。実際に鍵盤も叩けますし、音も出ます。あと、自動で演奏もしてくれます。

%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2026-10-01-020229.png

 ↑4×4作業台風UIです。普通の作業台とまったく同じではないですが、ちゃんと動作します。

 ※いずれも1回のチャットで完全に動くものができたわけではありません。(大体数回~数十回はチャットしている)

 使い方に関しては、レンダラーのURLをAIに渡してアドオン製作を依頼すればいいだけです。

 1度試してみた例↓

%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2026-10-07-001652.png

 ↑質は微妙かもしれませんが、プレビューを見るとなんとなくは形になっています。

%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2026-10-07-001222.jpg

 ↑ちょっとずれたりしているので、修正が必要でした。

%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2026-10-07-001716.png
%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2026-10-07-001832.jpg

 ↑座標の所はまだ問題がありますが、一応これだけで使えるようにはなっています。

 今までも別にAIがUIを作ること自体はできましたが、プレビューする手段がなかったため、見た目がめちゃくちゃだったりバグだらけだったりで。

 ですが、このレンダラーを使えば1発で完全に成功するまではいかなくても、1回目で既に形にはなるぐらいの精度になります。

 もしUIを作る必要があれば、ぜひこれを使ってみてください。

 最後に、注意事項として、このレンダラーはPocketUIは非対応で、すなわちスマホ・タブレット非対応になります。(Switch系やPS系は未確認ですが、多分対応していると思われます)

 このレンダラーを使ってUIを作成して配布したい場合は、スマホ・タブレット非対応にするか、別途スマホ・タブレット対応になるように修正する必要があるので、その点はご了承ください。

スポンサーリンク
※投稿記事に含まれるファイルやリンクにより発生した被害についてクラフターズコロニーは責任を取りません
投稿通報

コメント

コメント通報

通報するにはログインする必要があります