Zenn
🌟

【3日で開発】Google AI StudioでAIにアプリを作らせてわかったこと

に公開
AI
frontend
生成 AI
Gemini
Google AI Studio
tech

⏱ どれくらいで作れたの？

今回のアプリはGoogle AI Studioとやり取りしながら3日で開発しました。アイデア出しから実装、3D表示、デプロイまでをAIと対話しながら進めたプロセスは非常に学びが多く、「AIにアプリを作らせるとはどういうことか？」を実感できました。

🙋‍♂️ 推奨する読者層

  • AIでアプリを作ってみたい人
  • デザインよりも機能を優先してプロトタイピングを素早く回したい人
  • AIとの協働開発に興味があるエンジニア

🧪 作ったもの：パフォーマンスの隊形を可視化できる「Formation Forge」

私は男子新体操という競技に取り組んでおり、日頃からフォーメーション（隊形）の設計や確認を行っています。既存のフォーメーション可視化アプリも使っていましたが、多くが2D表示のみで、実際に観客席から見たときの隊形の立体感や奥行きがイメージしづらいことに課題を感じていました。

そこで今回、3D表示にも対応したフォーメーション可視化アプリを自作することにしました。これが「Formation Forge」です。

このアプリ「Formation Forge」は、男子新体操やダンスのフォーメーション（立ち位置や隊形）を簡単にデザインし、2Dおよび3Dで視覚的に確認できるツールです。

🎭 このアプリでできること

🧩 隊形の設計と管理

  • パフォーマンス単位で管理：複数の演目（例：Opening, Chorusなど）を登録可能
  • 各パフォーマンスに複数のフォーメーションを作成し、名前の設定・複製・並び替え・削除ができる
  • ステージ上のダンサーを直感的に配置：ドラッグ＆ドロップで並べ、色や名前（または番号）を割り当てられる

👀 表示とプレビュー

  • 2D表示（真上視点）
  • 3D表示（客席視点）
  • トランジションアニメーション：フォーメーションの移動を順番に表示

⚙️ その他機能

  • ステージ比率のカスタマイズ
  • ダークモード対応
  • ローカルストレージ保存

🔗 アプリURL: https://formation-forge.vercel.app/

🔗 GitHub: https://github.com/mrkmtkm/formation-forge

🔧 使用した技術スタック

  • フロントエンド: React + TypeScript
  • 3D表示: Three.js
  • デプロイ: Vercel
  • 開発支援: Google AI Studio（コード生成・修正）

🛠 アプリに盛り込んだ工夫

  • 3Dでの隊形表示：客席視点での3D表示により、実際のステージ上での見え方を意識しながらフォーメーションを確認できます。カメラ操作（スワイプ）も可能にし、より直感的に角度を変えて確認できるようにしました。
  • 2Dと3D間の座標調整：2Dビューと3Dビューで座標系が異なるため、左右反転やステージサイズのズレなど、見た目の違和感が発生しました。これに気づいたタイミングで一つ一つの問題を調整し、最終的に両ビューで自然な表示になるよう改善しました。

📝 Google AI Studioを使ってみた感想とやりとりのコツ

🤖 設計は人間が主導すべき

UI構成や状態管理、Reactコンポーネントの骨組みは驚くほど手早く出してくれます。ただし、アプリの設計や構成の整合性を保つためには人間の判断が不可欠でした。

🧠 修正依頼は成功するとは限らない

AIに「バグを直してください」だけ伝えても、うまく動かないことも多かったです。「なぜそのバグが起きているのかを調べてください」と指示すると原因を特定してくれることもありましたが、うまくいかないこともありました。

♻️ 長いやりとりは文脈が崩れることも

文脈が長くなりすぎるとAIが過去の指示を読めなくなったり、おかしな返信をしてきたりすることもありました。そのため、チャットをリセットして新しく挙動を切り出すと、正確な出力に戻ることも多かったです。

🔍 Google AI Studioとのやりとりのコツとプロンプト例

Google AI Studioでの開発では、プロンプトの書き方ややり取りの工夫が精度に大きく影響しました。ここでは、実際にやり取りする中で見えてきたコツや、成功・失敗したプロンプト例を紹介します。

💡 コツ1：手段ではなく目的を伝える

CSSで3D表現をしようとしたところ、何度試しても意図通りにいきませんでした。 このとき、「Three.js を使って WebGL で客席から見たような 3D 表示にしてください」と目的を明確に伝えたところ、Three.js を使った3Dステージを一発で実装してくれました。

NGな例

CSSで客席から見たような3D表示をお願いします

成功したプロンプト例

Three.js を使って WebGL で、客席から見たような 3D 表示にしてください

💡 コツ2：複雑な修正は段階的に依頼する

複雑な問題は一気に依頼するのではなく、段階的に切り分けてプロンプトを出すことで、AIがうまく対応できる確率が上がります。

実際に「フォーメーションが削除できない」という問題では、以下のように依頼の順序を工夫しました：

  1. 「フォーメーションが削除できません。原因を調べてください」
  2. 「原因がわかったと思うので、それを元に修正してください」
  3. それでも治らなかったら、「フォーメーション削除ができないのですがどこに問題があると思いますか？」などと聞き目星をつける
  4. 「フォーメーション処理の流れを教えて」と聞き、問題箇所があるか探す
  5. window.confirm を使っていて、プレビューでは動作しないかもしれないという考察の元、「window.confirm を使用しないで実装して」とお願いし、修正することで削除が動くようになった

このように、調査・仮説・検証のステップを分けて対話することで、AIがより的確に対応してくれることがわかりました。

💡 コツ3：チャットのリセットは最終手段

長いやり取りになると、AIが過去の文脈を見失い始めることがあります。精度が落ちてきたと感じたらチャットをリセットして再スタートするのも効果的でした。

✅ まとめ

Google AI Studioを活用して、実質3日間で一通り動くアプリを完成させることができました。

すべてをAIに任せきりにするというより、人間が課題や目的を明確にし、適切なプロンプトを出しながら共同作業することが、AI開発の成功の鍵だと感じました。

AIとのペア開発は、時間の節約以上に、考え方のトレーニングにもなります。「なぜ動かないのか」「どう修正すればいいか」を相手に説明する力が、結果的に自分の理解を深めてくれました。

これからAIを使って開発してみたい人にとって、Google AI Studioは非常に良い出発点になると思います。

Discussion