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のアウトプットをそのまま使うのではなく、実際のビジネスで使えるプロダクトへ

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

関連記事

AIで作ったデザインやUIを実際のシステムへ落とし込むには、品質や設計も重要になります。こちらの記事もぜひご覧ください。

▶ AIで作ったコードはそのまま使える？実運用で見直した5つのポイント

▶ AIで作った試作品、そのまま本番運用できますか？WebGLシミュレーターを継続開発できる形へ整理した事例

▶ 担当者が退職して初めて気付いた。システムは「作ること」より「運用設計」が重要でした

AIで作ったUI・WebGL開発をご検討の方へ

AgWORKSでは、AIで作成したイメージや試作品を、実際に業務で利用できるWebシステムへ開発しています。

• WebGL・Three.jsを活用したシステム開発
• 業務システムとの連携
• 保守・運用を見据えた設計
• 試作品（PoC）から本番開発まで対応

▶ WebGL開発について

▶ お問い合わせ

ChatGPT、Claude、Cursorなどを活用すれば、以前では考えられないスピードでコードを書けるようになりました。

画面が動き、必要な機能も実装できるため、そのまま本番環境へ公開したくなることもあるでしょう。

実際、AIが生成したコードは十分実用的なケースも増えています。

しかし、企業で長く使うWebシステムやWebGLアプリケーションでは、「動くこと」と「運用できること」は少し意味が異なります。

今回は、AgWORKSがAIで作られたコードを実運用へ組み込む際に確認しているポイントをご紹介します。

AIで作ったコードは本番運用できる？

結論から言えば、
「ケースによります。」
AIは優秀なコードを書いてくれます。

一方で、システム全体との整合性までは考慮されていないこともあります。

実際の開発では、コードそのものより、
「システム全体の中でどう動くか」
を見ることが重要になります。

① コードの役割は明確になっているか

AIへ何度も指示を出して開発すると、似たような処理が複数存在したり、どこで何を行っているのか分かりにくくなることがあります。

例えば、

• 同じ処理が複数ある
• 共通化できる
• 名前だけでは役割が分からない

といった状態です。
まずは役割を整理することで、今後の保守が大きく変わります。

② システム全体へ組み込める構成になっているか

AIは一つの機能を作ることは得意です。
しかし、複数の機能を長く運用するシステムとして設計することは別の視点になります。例えば、

• データの流れ
• 他機能との関係
• エラー時の処理
• 状態管理

なども含めて確認します。

③ 将来の機能追加を考えた設計になっているか

企業向けシステムでは、「完成」がゴールではありません。

運用が始まると、新しい要望が必ず出てきます。

そのとき、「簡単に追加できる構成」なのか、「毎回大きく修正しなければならない構成」なのかで、開発コストは大きく変わります。

④ バグだけではなく、運用も考えられているか

試作品では気にならなかったことも、実際の運用では重要になります。
例えば、

• エラー発生時の表示
• ログ
• 管理画面
• 権限管理
• データ更新

などです。「正常に動く」だけではなく、「問題が起きても運用できる」状態を目指します。

⑤ 次の担当者が理解できる状態になっているか

意外と見落とされがちなのが、引き継ぎです。
担当者が異動したり、外部の開発会社へ依頼したりすることは珍しくありません。
そのため、

• 設計資料
• アーキテクチャ図
• データ構成
• 機能一覧

などを整理し、誰が見ても理解できる状態を作ることも重要です。

これは、長く使えるシステムづくりには欠かせない工程だと考えています。

AIが作ったコードを「使える資産」にする

AIによって、コードを書くこと自体のハードルは大きく下がりました。

その一方で、企業のシステム開発では、コードを書くこと以上に、整理し、設計し、運用できる形へ整えることが重要になります。

AgWORKSでは、AIで作られたコードを否定するのではなく、その成果を活かしながら、長く使えるシステムへ整理・統合することを大切にしています。

AI時代だからこそ、
「コードを書くこと」ではなく、「コードを育てられること」が、これからの開発ではより重要になっていくと考えています。

関連記事

AIが生成したコードは開発を加速させますが、本番運用では設計や保守性も重要になります。こちらの記事もおすすめです。

▶ AIが描いた3DCG UIを、本当に動くWebアプリへ

▶ AIで作った試作品、そのまま本番運用できますか？WebGLシミュレーターを継続開発できる形へ整理した事例

▶ 担当者が退職して初めて気付いた。システムは「作ること」より「運用設計」が重要でした

AIで作ったUI・WebGL開発をご検討の方へ

AgWORKSでは、AIで作成したイメージや試作品を、実際に業務で利用できるWebシステムへ開発しています。

• WebGL・Three.jsを活用したシステム開発
• 業務システムとの連携
• 保守・運用を見据えた設計
• 試作品（PoC）から本番開発まで対応

▶ WebGL開発について

▶ お問い合わせ

「システムは完成した。」

多くのプロジェクトでは、ここがゴールのように思われます。

しかし実際には、システムは公開されたその日から運用が始まります。

今回は、実際の開発・保守の中で経験した出来事をもとに、「運用設計」の重要性についてお話しします。

企業名やシステムの詳細は控えますが、多くの企業でも起こり得る内容です。

システムは問題なく動いていました

ある企業では、社内で利用するWebシステムが運用されていました。

担当者と相談を重ねながら、ご要望に合わせて機能を実装し、必要な運用方法も含めてシステムを構築しました。

システム自体は安定して稼働し、日々の業務にも活用されていました。

開発としては、大きな問題はありませんでした。

担当者の退職で状況が一変

しばらくして、その担当者が退職されました。

ここで初めて問題が表面化します。

担当者が日常的に行っていた運用や管理が、十分に引き継がれていなかったのです。

例えば、

• どの管理画面を使うのか
• 誰が何を管理するのか
• 定期的に行う作業は何か
• セキュリティ維持のための運用手順
• 管理権限をどのように管理しているか

これらが社内で共有されていませんでした。

システムは正常に動いているにもかかわらず、「誰も安心して運用できない」という状態になってしまったのです。

問題はシステムではなく「運用設計」でした

このとき私たちが感じたのは、問題はシステムそのものではなかった
ということです。

システムは設計どおりに動いていました。
しかし、

「誰が、どのように運用するか」

という設計が組織の中で十分に引き継がれていなかったため、担当者の退職と同時に運用が止まりかけてしまいました。

これは、どんなに優れたシステムでも起こり得ることです。

セキュリティは機能だけでは守れません

「セキュリティ」というと、不正アクセス対策や脆弱性対策を思い浮かべる方が多いかもしれません。

もちろん、それらは重要です。しかし企業のシステムでは、適切に運用され続けること
も同じくらい重要です。

例えば、

• 不要になったアカウントを削除する
• 管理者権限を適切に管理する
• パスワードや認証情報を更新する
• ソフトウェアを定期的にアップデートする

これらはシステムが自動で判断してくれるものではありません。

日々の運用があって初めて、セキュリティは維持されます。

つまり、セキュリティは「機能」と「運用」の両方で成り立っているのです。

AgWORKSが考える「長く使えるシステム」

AgWORKSでは、システムは完成して終わりではないと考えています。
長く安心して使い続けるためには、

• 運用フローの整理
• 権限管理の明確化
• 担当者変更を想定した設計
• システム構成図やアーキテクチャ図の整備
• 必要に応じた運用マニュアルの作成

といった「運用できる仕組み」まで含めて考えることが重要です。

担当者が変わっても、外部の開発会社が加わっても、状況を把握しながら開発や運用を続けられること。

それが、私たちの考える「長く使えるシステム」です。

AI時代だからこそ、運用設計はさらに重要になる

最近では、AIを活用して短期間でシステムや試作品を作れるようになりました。

開発スピードは大きく向上しています。

しかし、AIが作ってくれるのは主に「システム」です。
一方で、

• 誰が運用するのか
• どう引き継ぐのか
• セキュリティをどう維持するのか
• 担当者が変わっても継続できるのか

といった運用設計は、企業ごとの業務や体制に合わせて考える必要があります。

だからこそ、AI時代になった今も、「運用を見据えた設計」の価値は変わりません。

むしろ、システムを素早く作れるようになったからこそ、その後の運用をどう設計するかが、これまで以上に重要になっていると私たちは考えています。

関連記事

運用しやすいシステムは、開発段階からの設計が重要です。AIを活用した開発についても、こちらの記事で詳しく紹介しています。

▶ AIが描いた3DCG UIを、本当に動くWebアプリへ

▶ AIで作ったコードはそのまま使える？実運用で見直した5つのポイント

▶ AIで作った試作品、そのまま本番運用できますか？WebGLシミュレーターを継続開発できる形へ整理した事例

AIで作ったUI・WebGL開発をご検討の方へ

AgWORKSでは、AIで作成したイメージや試作品を、実際に業務で利用できるWebシステムへ開発しています。

• WebGL・Three.jsを活用したシステム開発
• 業務システムとの連携
• 保守・運用を見据えた設計
• 試作品（PoC）から本番開発まで対応

▶ WebGL開発について

▶ お問い合わせ

最大½の費用が補助されます。

IT導入支援事業者・ITツール検索
https://it-shien.smrj.go.jp/search/
ツール名「だれでもショールーム」にて検索ください。

ウェブに簡単に3Dバーチャルショールームが導入できる「だれでもショールーム」。

プログラム開発は一切不要、ウェブから使える専用ダッシュボードから画像、動画、3Dデータをアップロードして、必要な情報を入力するだけで、3Dバーチャルショールームが作れます。
IT導入支援補助金は「だれでもショールーム」のラージプランにて申請いただけます。

速く、簡単に、3Dバーチャルショールームを作りたい方、この機会に是非ご検討ください。

申請について詳しくはIT導入支援「補助対象について」
https://it-shien.smrj.go.jp/applicant/subsidy/normal/
こちらをご覧ください。

最大½の費用が補助されます。

IT導入支援事業者・ITツール検索
https://it-shien.smrj.go.jp/search/
ツール名「だれでもシミュレータ」にて検索ください。

ウェブに簡単に3D見積シミュレータや3Dコンフィギュレータが導入できる「だれでもシミュレータ」。

プログラム開発は一切不要、ウェブから使える専用ダッシュボードからobj形式の3Dデータをアップロードして、必要な情報を入力するだけで、3D見積シミュレータ・3Dコンフィギュレータが作れます。
すでに3DCGソフトの「blender」「3dsMAX」、3DCADソフトの「sketch up」「Rhinoceros」などお使いならすぐに導入可能です。

今回採択されたのは「だれでもシミュレータ」のラージプラン。

速く、大量に、Web用に3Dを作りたい方、ぜひご相談ください。

申請について詳しくはIT導入支援「補助対象について」
https://it-shien.smrj.go.jp/applicant/subsidy/normal/
こちらをご覧ください。

弊社で長年、開発してきたWeb3Dのウォークスルー。

ゲーム機など、専用のコントローラーではない、「マウス」や「タッチ操作」が入力インターフェースになるPCやスマホ・タブレットの場合、どうすればストレスなく操作できるか。
常に最適解を求めて開発しています。

例えば衝突判定。

立体空間の移動を制限する「衝突判定」は必要か。

例えばゲームなら壁が抜けられなくても、その不便さ自体がルールとなり、それを抜けていく、越えていく楽しさを提供します。
が、3Dウェブとして、3Dコンテンツとして考えたらどうだろうか。
壁、という障害は、それこそウェブ閲覧からの「離脱」要因になってしまわないだろうか。
とも考えられるのです。

「少しでも多くの人に見てもらう」そのためのコンテンツであれば、「見る」操作に障害は少ないほうがいい。

「3D空間として認識できる」ことはWeb3Dのバーチャルギャラリー、バーチャルショールームとして最大限の特徴だから、「壁」という存在は必須。

が、それを避ける操作に失敗しても「自分が思った通りのところに進むことができる」「操作時に混乱しない」といった空間であれば「3D空間として認識」しながらも「操作にストレスを与えない」ということを実現できるのではないかと考えます。

マウスのスクロールホイール

3D空間をウェブサイトを見るように、画面をスクロールするように、移動（閲覧）できたらストレスがないのでは？

その考えのもと、バーチャルショールーム開発では、マウスホイールの前後で、ウェブサイトをスクロールするように前後移動できる様、実装しています。

ウェブページ内で上下にスクロール移動し、コンテンツを見るように、3D空間内でも展示してあるコンテンツを、スクロールホイールで前後移動。自由に閲覧できます。

「3Dのバーチャル空間」であると同時に「3Dウェブサイト」とも呼べる操作感を提供します。

タッチデバイスのピンチイン/アウト

スマホで、タブレットで、もっと詳細を見たい時、二本指で広げる操作をピンチアウト、日本指でつまむ操作をピンチインと言います。

もっと見たい時・大きく見たい時（前に進みたい時）に、スマホで画面を拡大する。
もっと全体を見たい時（後ろに下がりたい時）にスマホで画面を縮小する。

スマホで拡大・縮小する感覚で前後移動できます。

.
.
.

「3D空間でコンテンツをみる」ユニークさと、「操作のスムーズさ」を両立。
そんなバーチャル空間作りをこれからも進めてまいります。

AgWORKS開発のUI/UXを体験ください

バーチャルショールームデモ
https://3d-showroom.net/?uid=AgWORKS&n=1

バーチャルショールームサービス
だれでもショールーム
https://daredemo-sr.com/

こんにちは。代表の増本です。

弊社で開発した、WEB3Dでフィールドを自由に動き回れるバーチャルミュージアム、「花王こども環境絵画ミュージアム」が公開されました。

https://www.kao.com/jp/painting-virtual-museum/

今回、非常に重要だったのが「操作性」。

「この操作方は？」
「このターゲットならこうあるべきでは？」
「こんなふうに操作して欲しい」
「これじゃ思うように動かせない」
「それならこれでどうだろう？」

そんなやり取りを、関係各位、ご担当者様と何度も繰り返し、
「誰でも気持ちよく操作できる。その世界に入って行ける」
そんなギャラリーを完成させる事ができました。

フィールドを360°パノラマで眺めながら矢印タップで移動。
ストレスのない操作ができます。

しかし、各人が思う「動かしやすさ」。PCやスマホ、タブレットの操作の慣れ、改めて千差万別、いろんな方がいらっしゃると痛感…。
その中で、最大公約数的に、どんな操作なら広く、誰にでも自由に使ってもらえるだろう。
関係したみなさんの意見、どれも貴重でした。

操作の気持ちいいWEB3Dコンテンツは、自分で操作していても楽しいです。
これからもそんな開発進めてゆきたい！そう思える案件でした。

新年、あけましておめでとうございます。

数年前、建築家フランク・ゲーリーの展示会で知った言葉。
「自分自身であること、他の誰にもなろうとしないこと」

2020年、大事にしたいと思っている言葉です。

自分自身と、社員それぞれのチカラ、会社の持つチカラで、私たちなりで出来る事、やるべき事と、きちんと向き合い、磨き上げ、着実に進めて行く。
そんな1年にしたいと思っています。

そしてもうひとつ、これまでと認識を変えてみようと思う部分もあります。

昨年は考えすぎる、思いすぎる事が裏目に出る、そんな経験から、ちょっとドライになっていた、シビアになり過ぎていたと気づけた年でした。
今の会社なら、自分なら、その考えすぎ、思いすぎを、気遣いや感謝の気持ちに変えてプラスに出来る。
空振りだっていい。その思いを遠慮無く、仕事にぶつけて行く、今年はそんな1年にしたいと考えています。

「みえない価値、まだそこにないサービス、 私たちなら引き出せるかも」

見せなくても、想像できる。その先のストーリーをイメージできる。
そんなクリエィティブを目指して参ります。

2020年もAgWORKSをどうぞよろしくお願いします。

こんにちは。代表の増本修二です。

玉樹 真一郎 著
「ついやってしまう」体験のつくりかた 人を動かす「直感・驚き・物語」のしくみ

をやっと読みました。

ユーザーがそのボタン、UIをみたときに「○○するのかな？」と、思う気持ちをアフォーダンス。
そのアフォーダンスを伝えるために特化したデザインをシグニファイアと言います。

そういや「チコちゃんにしかられる」でもやってましたね。

「飾れば飾るほど一番大切なアフォーダンスを伝えるためのシグニファイアが覆い隠される」
「デザイナーはあらゆる虚飾を排除面白そうだと思わせる事すら捨て去る」

「良さ・正しさ」を伝えるよりも、まずは商品やサービスとの関わり方が直感的にわかる事を優先する。
大事だなって再認識です。

そんな事を考えながら、

アフォーダンスとシグニファイアについての簡単なデモ
http://www.ag-works.com/demo/interaction_cube.html

作ってみました。お時間あれば是非。

今日は採用ウェブサイトについて書きます。

私のは高校生の息子がいるのですが、夏休みはどんな大学を目指すか、オープンキャンパス巡りにも付き合いました。

息子の通う高校では、どの大学を目指すか、本当に自分のやりたいこと、興味が持てる、その世界で突き抜けられる様な、そんな大学選びを推奨しています。

そのため、早い時期からテーマを決めた研究や、そのプレゼン体験を授業に取り入れています。

自分の好きな分野を深く学べる大学はどこか？その大学のブランドではなく、真に学べる学部、研究室で選ぶ。

大学受験も大きく変わり、受験のための勉強ではなく、その行きたい大学に、行きたい学部でどれだけ学びたい、と言う熱意があるか、それを推し量る受験になってきている様です。

本当に学びたいことを学ぶため、学生が大学を選ぶ。
本当に学びたいと思っている学生を大学が選ぶ。

この流れ、私はとても良いと感じています。

さて、この流れで気になるのは、「では、大学を出た後はどうやって自分の好きな世界に進むのだろう」という事。

いくら好きな研究が大学で出来たとしても、卒業後、進むその世界がどんなものか、わからなければ、本当に正しい大学選びができたとはいえないのではないか、そう感じるのです。

それを知ることができれば更に良い大学選びができる。

ではそれを知るためには？

そうです。ここで重要なのが、企業の採用ウェブサイトだと思うのです。

その企業が社会にとってどの様な形で貢献しているか、サスティナブルな社会づくりを考えているかのメッセージ。
どう言った大学で何を学び、どんな経験を経てその企業に進んでいるのか、と言った新入社員の声。
その企業や業界で長く活躍し、どの様にキャリアを積んでいったのかを語るベテラン社員の声など。

これからの人生を大学受験というタイミングから考え始める高校生と、それを見守り、一緒に考えていくであろう保護者にとって、大学選びとその先の人生を選ぶための非常に重要なコンテンツ、採用ウェブサイト。

就職活動をしている大学生、大学院生だけでなく、こう言ったステークホルダーにとっても、非常に重要なコンテンツだと、言えるのではないでしょうか。

ではその重要なコンテンツをどう作ってゆくか？
それはまた次回の記事にてお話したいと思います。

ーーーー弊社制作のウェブサイトいくつかご紹介ーーー

日立グローバルライフソリューション採用ウェブサイト

JALUX採用ウェブサイト

トラベルスタンダードジャパン採用ウェブサイト

リサーチアンドソリューション採用ウェブサイト

その他、採用サイト実績は下記よりご覧いただけます。

エージーワークス これまでの実績：採用ウェブサイト制作
http://www.ag-works.com/tag/recruit/