非エンジニアにもおすすめ！我流Vibe-Coding手法でバスケ練習アプリを作った話

まえがき

どうも、最近毎晩バスケの練習に励んでいる Xu です。

最近ニュースサイトや SNS を開けば至るときに生成 AI の話が飛び交ってますよね。

Skills や MCP が標準化されてきたことにより、ただ質問について回答するだけでなく、AI Agent によって精度が高く、品質が保証されたアプリをインフラごと生成することがごく普通の世界になって焦りを覚えている方も多いかなと思います。

AI を使った開発において、最も効率がよく AI をワーカーとして活用でき、人間がまだまだ生き残れる分野といえば、マネジメントの分野かと思います。
複数の AI を活用し、人間のエンジニアやデザイナーを管理するように、並行してプロジェクトを進める Vibe-Coding 手法を、PdM や PjM にちなんで、AIM と勝手に読んでます。

• AIM: AI Manager

AIM の進め方

今回はバスケの練習記録アプリを作った例で説明させていただきます。

コミュニケーション相手が AI と言えども、少なくとも現在人間が築き上げてきた経験から、ウォーターフォール開発,アジャイル開発、プロトタイプ開発などが開発手法として考えられます。

この中で、ウォーターフォール型とアジャイル型を複合した手法を選択しました。
メリットとしては、最初から欲しい物をイメージできている状態で、段階を踏んでゴールに向けて線状に進むことにより、仕様変更やロールバックに柔軟に対応しつつ、最低限の指示で AI がレールから外れないように制御することができるかと思います。

まずは区切り方を考える

機能、レイヤー、または画面ごとに作りたいプロダクトを区切り、それぞれを 1 パーツとして考え、パーツごとに作り、組み合わせて行きます。
一回の質問では 1 パーツしか実現しません。

今回は作業と機能ごときに区切り、具体的には：

• 設計段階：
  • 仕様固め
  • 設計書作成
  • 各画面の最低限表示可能なデモ UI 作成
• 機能実装段階：
  • ハリボテ UI の表示
  • 画面の切り替え機能
  • ホスティングし、アクセス可能にする
  • 練習データの入力
  • 試合データの入力
  • 練習データの処理及び反映
  • 試合データの処理及び反映
  • データの永続化
  • 既存機能の調整
  • AI コーチング機能
  • その他の追加機能
  • 全体調整

この流れは、ウォーターフォールの中にアジャイルを埋め込む形式です。
機能の実装段階ではまだ実際の運用場面での使用方法を考えず、全体ができてから調整していく形です。

これを実現するには、まずは開発工程をどのような区切り方をするかを考える必要があります。
本来工数はプロジェクトの推進方針やスケジュール作成において大きな考慮要素であるはずでしたが、作業員が全員 AI だと話が違ってきます。

仮にクリーンアーキテクチャのように、レイヤーごとに区切り、同じ工程をレイヤーごとに繰り返すような設計原則でも、AI ならばすぐに工程を完了してくれます。

なので、ここで最初に人間が考えるべきことは作りたいプロダクトに応じて、どのような区切り方をするのが最適かを考えるのが大事です。

今回採用する AI

相変わらず可能な限り費用をかけずに、各種サービスの無料枠でやっていきたいので、サービスや技術選定に違和感を感じる方もいるかもですが、どうかご理解を。

• 仕様決め相談役 AI：ChatGPT
• デザイナー AI：Canva AI
• コーディング AI：ClaudeChat

あくまで個人的使用感を元にした選定ですが、言語理解とアーキテクチャ設計力で総合点が高い ChatGPT はコーディングというより質問や相談、ドキュメント生成が向いており、デザインでは Canva が最も満足がいくものを生成してくれました。
ClaudeChat は Skills の実装によりかなりコーディングにおいて強くなり、後述する AI 版社内競馬制の勝者でした。

ここまでの上流設計が難しいと感じる方：

千住Meetup! は学生、異業種社会人、デザイナー、PM、ジュニアエンジニアから第一線のシニアエンジニアまで集まる活気がある勉強会・交流会を主催しております。
ぜひご質問とともに交流に参加して見てください。
一般論を返すだけの AI が持ちわせていない知見を得ることも...！

実装例

ここからは実際に今回のアプリ Basketball Tracker ができるまでの実装手順を紹介していきます。

1. ChatGPT で設計書を作成

• まずはやりたいことを伝え、相談をしながら複数の設計案を出してもらう

ざっくり希望する動作と、どのような機能と実現方法を用いるかを聞く

Prompt

バスケの練習内容（練習メニュー、時間など）を記録し、動画や写真をアップロードするとAIが過不足を分析してくれるようなアプリを作りたい
アイディアをいくつか提示し、UIのイメージ図も添付してください
それぞれどのような機能と実現方法を用いるかも提示してください

複数の提案と詳細の中から最も満足が行くものを探す
もしもなければ更に追加機能を伝え、設計案をまとめて出してもらう

ベスト生成結果例

• 具体的に UI の設計を深ぼって行く

各画面設計案を具体的に提示してください

• 設計書を作成

prompt

考えた結果、このようにしたいです
使用言語：TypeScript
UI：

• ナビゲーション： ホーム ダッシュボード 練習 試合 解析 記録
• ホームタブ：
  今日のメニュー
  1 ドリブル 15分
  2 ミドルシュート 50本
  3 3P 30本 [開始] ボタン
• ダッシュボードタブ：
  今日の練習時間
  練習バランス (シュート、ドリブル、ムーブなどの割合グラフ)
  AIによる評価コメント欄
  [記録]ボタン [分析] ボタン
  練習パネル：項目名 練習時間 [追加] ボタン
  [AI分析] ボタン
  AIによる評価コメント欄
• 試合タブ：
  出場時間　〜分
  シュート本数　〜本
  シュート成功率　パーセンテージ
  アシスト　アシスト数
  ブロック　ブロック数
  リバウンド　リバウンド数
  スティール　スティール数
  パスミス　パスミス数
  プレイミス　プレイミス数
• 解析タブ：
  [動画分析] ボタン
  [写真分析] ボタン
  AIによる評価コメント欄
• 成長パネル
  シュート成功率
  パーセンテージ変化表
  練習時間
  週/時間グラフ
  AI に作成させるために必要な設計書を Markdown 形式で生成してください

この時点では、まだ使用するAIコネクターやデータの永続化方法などは決めず、ある程度の自由度を残して今後の調整で機能追加と仕様変更を行います
まずは形があるものを作るのがアジャイルの基本です

生成結果

🏀 AI Basketball Training App 設計書
1. 概要

バスケットボールの練習・試合・動画を記録し、
AIがプレイヤーの成長や課題を分析するWebアプリ。

主な目的

練習メニューの管理

試合スタッツの記録

動画・写真のAI分析

成長データの可視化

AIによる練習改善提案

2. 技術スタック

フロントエンド・バックエンド
TypeScript

使用サービス
AI分析

AI分析は Cloud Functions 経由で実行

候補

OpenAI API
Claude API
Gemini API

動画解析

MediaPipe Pose
3. アプリ画面構成

ナビゲーション

Home
Dashboard
Practice
Game
Analysis
Growth
4. 画面仕様
・・・

2. Canva AI でデモUIを生成してもらい、大体満足できるものを生成し、保存する

prompt

バスケの練習内容（練習メニュー、時間など）を記録し、動画や写真をアップロードすると AI が練習の過不足を分析してくれるようなアプリを作りたい
添付した設計書をもとに、サンプル UI を生成してください
{設計書.md}

生成結果

3. ClaudeChat でアプリを生成

prompt

この設計書とデモUIをもとに、バスケの練習記録・AIコーチングアプリを作成してください
{設計書.md} {Demo.html}

生成結果

このように、最低限ハリボテ UI を表示できる Vite-React アプリが作れます。
この段階ではまだタブの切り替え以上にの操作可能な要素はありません。

4. 継続して調整と機能追加を行う

• まずは UI 調整
  今後画面や機能が増えると UI の調整がどんどん難しくなって行き、どう頑張っても治らないこともある。
  なので今のうちに災の種を潰しておく。

  prompt

  頂いたコードを配置できました、動作確認したら、スマホで確認した際に横幅が長かったり短かったりしてます
  全体の幅をスマホの最大横幅に固定してください

  スマホで見た際に、ブラウザーの下のバーで一部隠れてしまいます
  下にPaddingを加えて少し余地をつくるか、他にもっとスマートな回避方法あるならそちらで修正してください

• 次に最低限データを操作できるようにする

  prompt

  ハリボテの部分を削除し、実際に localstorage にデータを保存して動けるようにしてください
  DemoやUIだけでなく、実際にデプロイしたらすぐに動くものにしてください

  ここでまずはサンプルデータを取り除き、データ追加機能、データ加工機能、グラフ表示機能に問題がないかを確認
  動作がそもそも想定してたものと違っていたらこれ以上継続すると後々困ります。

• 一回実際に使用する
  知らなくて考慮できてなかった部分もありますが、スマホで使用する際、画面がロックすると JavaScript の時間記録が止まってしまう特性があるようなので、もしもグラフ通りに読み取ったらこの練習量を 4 分で終わせる超人を生み出してました。
  
  
  prompt

  練習開始しているときに、スマホの画面がロックされると時間の記録が止まってしまう事象が発生してます
  画面ロックしても動くようにしてください

• やはりあとから練習メニューをあとから変更できるようにしたり、既存データをエクスポートして元データを削除したい
  prompt

  更に入力したメニューを編集・調整できるようにしたい

  データをCSVまたはPDFで出力したいです

• ついに AI 機能の実装

  prompt

  AI機能について、管理画面の最上部にAPIキー入力欄を追加して、その入力されたユーザーのAPIからコールするようにしてください

  無課金税なので、まずはローカル LLM で AI 周りの機能の可用性確認

  同じように、横並べで Ollama を使ったローカル LLM 利用バージョンも作成してください

5. 複数 AI による社内競馬制

実は今回のコーディング段階において、最初はローカル Agent を使って、複数 AI 同士を同一ディレクトリーで、同じプロジェクトを 1 から作っていただき、もっといいアプローチがないかお互いをカンニングしながら最も想像していたものに近い ClaudeChat 版を正式版としました。

参考：

• vibe-local
  https://github.com/ochyai/vibe-local

この制度自体は悪名高きテンセントが Wechat などを開発する際に使用した労働者にとって最悪の社内競争手法であり、複数チームを隔離して全く同じものを作らせ、最終的に発表で最も評価が高かった成果物を正式的にプロジェクトとして本格的に進めて行きます。
労働の価値が認められるのは 1 チームなので、その他はただのかませ犬ポジションだと考えると可哀想ですが、AI に人権はないので、いくらでも搾取できます。

あとがき

このように、八割 AI を操作するだけで実際に本番運用できる小型のプロジェクトが完成しました。
結局ストレージを安く用意できなさそうなので、画像やビデオの分析は一旦やめました。
個人開発で恐らくかなりの頻度で発生するこのような急な仕様変更にも柔軟に対応できるのがこの手法のメリットだと思ってます。
ぜひみなさんもこの手法をお試しいただき、フィードバックや改善案をコメント欄で教えていただけると幸いです。