AIが描いた3DCG UIを、本当に動くWebアプリへ。制作会社と一緒に形にした開発の話

AIの画像生成ツールを使えば、以前では考えられなかったようなUIデザインやコンセプトイメージを短時間で作れるようになりました。

今回ご紹介するのは、制作会社様がAIを活用して提案した人体3Dモデルを使ったカルテアプリを、実際に操作できるWebシステムへ落とし込んだ開発事例です。

企業名や詳細な画面は公開できませんが、AIで生まれたアイデアを「実際に使える形」にするまで、どのような課題があり、どのような考え方で実装したのかをご紹介します。

AIで生まれたのは「完成品」ではなく「理想のイメージ」

制作会社様から共有いただいたデザインには、AIで生成した人体の3Dイメージが組み込まれていました。

提案段階では十分な完成度でしたが、それはあくまで2Dのデザインイメージです。
実際のシステムとして考えると、

• 人体を自由に回転できる
• 部位ごとに情報を表示する
• バックエンドのデータと連携する
• タブレットでも快適に動く

といった要件を満たす必要がありました。
つまり、「見せるためのデザイン」を、「使うためのUI」へ変換する工程が必要だったのです。

AgWORKSでは「AIのイメージ」をWebGL向けに再構築

まず行ったのは、AIのイメージをそのまま使うのではなく、WebGLで快適に動作する人体3Dモデルへ最適化することでした。

見た目を近づけるだけではなく、

• 描画負荷
• モデル構造
• アニメーション
• データとの連携

まで考慮して設計しています。
AIが作ったイメージを「再現」するのではなく、「実際に動く形へ設計し直す」というアプローチです。

UIは「静止画」から「操作できる体験」へ

AIが生成したUIは、美しいビジュアルとして完成していました。

しかし、実際のアプリケーションでは、

• ボタンを押したときの反応
• 情報の表示切り替え
• 部位選択
• アニメーション

など、多くのインタラクションが必要になります。

デザインの印象を維持しながら、Webアプリとして自然に操作できるUIへ実装しました。

API連携により、実際のシステムと接続

画面は見た目だけでは成立しません。

バックエンドのカルテシステムとAPIで連携し、JSON形式で取得したデータを人体モデルやUIへ反映する仕組みを構築しました。

これにより、デザインモックではなく、実際の業務データを扱うアプリケーションとして利用できる状態になりました。

デザインを比較・検証できる仕組みも用意

開発では、「完成した画面を一つ作る」ことだけが目的ではありません。

複数のデザイン案やカラーバリエーションを比較しながら検討できる仕組みも実装しました。

これにより、制作会社様・クライアント様双方で完成イメージを確認しながら調整を進められる環境を提供しています。

WebGLだから実現できた、高解像度画像の書き出し

開発の途中で、新たな要望もありました。

イベントで使用する大型パネル用に、高解像度の画像を書き出したいというものです。

通常、このような用途ではCGソフトで再レンダリングするケースもありますが、レンダリングには時間がかかります。

そこで、WebGLビューアから解像度を指定してPNGを書き出せる機能を実装しました。

その結果、デザイン確認だけでなく、印刷用素材の作成までWebブラウザ上で完結できるようになり、制作フローの効率化にもつながりました。

これはAIとは直接関係ありませんが、「実際の現場で役立つ仕組み」を追加することで、プロジェクト全体の価値を高められた一例です。

AIで終わらせず、「実際に使えるシステム」にするために

AIは、企画やデザインのスピードを大きく変えました。

一方で、AIが生み出すのは、多くの場合「アイデア」や「完成イメージ」です。それを、

• 実際に操作できるUIへ落とし込み、
• バックエンドと連携し、
• 複数のデバイスで安定して動作させ、
• 開発や制作の現場でも活用できる仕組みへ育てる。

この最後の工程こそ、私たちAgWORKSが大切にしている開発領域です。

AIのアウトプットをそのまま使うのではなく、実際のビジネスで使えるプロダクトへ

上げること。それが、このプロジェクトで私たちが担った役割でした。