ChatGPTやClaude、CursorなどのAIツールを活用することで、以前よりも短時間で試作品（プロトタイプ）を作れるようになりました。

実際に画面が動き、機能も試せるため、企画や検証のスピードは大きく向上しています。

しかし、その試作品を「実際に社内で使えるシステム」や「長く運用できるWebシステム」へ発展させようとしたとき、新たな課題に直面するケースも少なくありません。

今回は、企業内で開発が進められていたWebGLシミュレーターを、継続開発できる形へ整理した事例をご紹介します。

AIで作った試作品、そのまま本番運用できますか？

今回ご相談いただいたのは、企業内で進められていたWebGLシミュレーター開発でした。

もともとの担当者が異動となり、プロジェクトは新しい担当者へ引き継がれていました。

新しい担当者はAIを積極的に活用し、必要な機能を試作しながら開発を進めていました。

実際に画面は動き、機能も少しずつ増えていましたが、

• AIで作成したコードを既存システムへ組み込めない
• コード全体の構成が把握しづらい
• Three.jsで表現したい内容が実現できない
• 今後どのように機能追加すればよいか分からない

といった課題を抱え、ご相談いただきました。

AIによって「作る」ことはできても、「育てる」ことには別の難しさがあります。

担当者変更でWebGL開発が止まる理由

担当者が変わること自体は、どの企業でも起こり得ます。

問題になるのは、「誰が見ても理解できる構成になっているか」
という点です。

試作品では動作を優先するため、「今動けば良い」というコードになることも珍しくありません。

しかし、

• 機能が増える
• 担当者が変わる
• 外部の開発会社が参加する

といったタイミングで、コードの役割やデータの流れが分からなくなり、開発スピードは急激に落ちてしまいます。

まず必要なのは、新しい機能を追加することではなく、現在の状態を整理することでした。

AIで作ったコードを整理し、既存システムへ統合

AgWORKSでは、まず既存コードを調査し、「どこで何を行っているのか」を整理するところから着手しました。
その上で、

• AIで試作されたコードの役割を整理
• 既存システムへ組み込める形へ再構成
• 重複処理の整理
• バグフィックス

を行いました。

AIが生成したコードをすべて作り直すのではなく、使える部分は活かしながら、全体設計へ合わせて整理していきました。

試作品を資産として活かすことも、大切な開発の一つだと考えています。

Three.jsの制約にとらわれず、実現方法から考え直す

開発を進める中では、Three.jsの一般的な実装方法では難しい表現もありました。

そのため、「Three.jsでどう作るか」ではなく、「どのような体験を実現したいか」
という視点から構成を見直しました。

ライブラリの制約を前提に考えるのではなく、目的に合わせて設計を工夫することで、必要な表現を実現しています。

技術を選ぶことよりも、目的を実現する方法を考えることを重視しています。

アーキテクチャ図と設計図を整備し、継続開発できる構成へ

コードが整理できた後は、開発内容を可視化しました。

• アーキテクチャ図
• システム構成図
• 機能構成
• データの流れ

を整理し、「誰が見ても理解できる状態」を目指しました。

これにより、担当者が変わっても、新しい開発会社が参加しても、どこへ機能追加すれば良いのかが分かる状態になりました。

AI時代だからこそ、「長く使える設計」が重要になる

AIを活用すれば、試作品や新しいアイデアを素早く形にできます。これは非常に大きなメリットです。

一方で、企業で実際に使うシステムには、

• 保守
• 拡張
• 引き継ぎ
• 運用
• パフォーマンス

など、試作品では見えにくい課題があります。

今回のプロジェクトでも、私たちが行ったのは「ゼロから作り直すこと」ではありません。

AIで生まれた成果を活かしながら、整理し、設計し、長く育てられるシステムへ昇華させることでした。

AIによって「作る」ことは以前より身近になりました。

だからこそ、これからは「長く使える形へ育てること」が、より重要になっていくと私たちは考えています。