【第1話】バスケ未経験のパパがAIと作った、スタッツ分析アプリの最初の一歩

「シュート確率の記録がほしいなぁ……」

2025年のシーズン前、肌寒さの残る2月の体育館。
娘が所属するミニバスチームのヘッドコーチがポツリと漏らしたこの一言が、すべての始まりでした。

私はバスケットボール未経験です。ルールこそ子どもの応援を通じて覚えたものの、フォーメーションも戦術も専門的なことは何もわかりません。
しかし、仕事で日常的にデータを扱っていたこともあり、ふと思ったのです。

「娘の成長をしっかり記録したい。そして何より、仕事と両立しながらボランティアで子どもたちを熱心に指導してくださるコーチ陣の力になりたい。専門知識がなくても、データ分析ならコーチの『右腕』になれるのではないか？」

この思いつきから始まった挑戦は、やがてAIとの出会いを経て、現在では月額980円の商用Webサービス「IBA Dashboard」へと結実することになります。

今回はその第1話として、Excelの限界と格闘した日々から、Claudeの無料枠で作った1枚のHTMLモック、そしてモダンなWebフレームワーク（Next.js）へ移植するまでの熱狂の記録をお届けします。

1. 試合動画を巻き戻す夜中。Excel手入力の限界とタイポの山

最初の一歩は、泥臭い手作業でした。
保護者が交代で撮影している試合動画を持ち帰り、自宅のPCで一時停止と巻き戻しを繰り返しながら、ノートに正の字を書いていく作業です。

・誰がシュートを打ったか（Make / Miss）
・リバウンドを誰が拾ったか（オフェンス / ディフェンス）
・ターンオーバー（ミス）は誰から起きたか

これらをExcelに転記し、FG%（フィールドゴール成功率）や得点ランキングを計算してコーチに共有し始めました。
コーチからは「すごく助かる！客観的な数字があると指導がしやすい」と喜んでいただけたものの、すぐに大きな壁にぶつかります。

・作業負担の限界: 1試合の動画を分析するのに2時間以上かかる。
・タイポ（入力ミス）の連鎖: 手動集計のため、合計得点と公式スコアシートの点数が合わず、原因究明に夜中まで悩まされる。
・「数字」が「指導」に直結しないもどかしさ: 「FG%が30%でした」と伝えても、「では次にどう練習を変えればいいのか」という戦術的なインサイトまでは導き出せない。

「もっと入力が直感的で、集計が自動化されていて、パッと見て勝因・敗因がわかる仕組みを作れないだろうか？」

2. スプレッドシートの大改修と、72試合を支えたオフェンスフロー図

2025年の年末年始、休暇をすべて注ぎ込んでスプレッドシートの大改修に着手しました。
Geminiに相談しながら、試合情報、ラインナップ、個人スタッツ、相手チームスタッツを管理するシートを設計。さらに、単に数字を並べるだけでなく、現代バスケで重要視される「4 Factors（勝敗を分ける4大指標）」やポゼッション効率（PPP）を自動算出するダッシュボード画面を作り上げました。

その中でも特にこだわったのが、オフェンスフローの可視化（サンキーダイアグラム）です。
「攻撃がどのように始まり、誰の手を経て、シュートで終わったのか、あるいはミス（TO）で終わったのか」を視覚的な分岐図として描く仕組みです。

外部の有償ツールを使えば簡単ですが、チームの誰もがアクセスできるスプレッドシート単体で完結させたかったため、以下のハックを実装しました。

・GAS（Google Apps Script）とQuickChart APIの連携: スプレッドシート内の集計データを整形し、QuickChart APIへリクエストを投げてダイアグラム画像を動的生成。
・onEditトリガーによる完全自動描画: セルで「試合ID」をプルダウンから選択すると、スクリプトが自動実行され、数秒で該当試合の画像がシート上に差し替わる。
・自動クリーンアップ: 以前の古い画像をシート内から自動検索して削除し、枠線ピッタリ（OverGridImage）に新しい画像を再配置。

このスプレッドシートによるダッシュボードは、チームに大きな変革をもたらしました。
2025年シーズン全72試合を記録し、6月のまさかの予選敗退や12月のライバルチームへの完敗という悔しい経験を、客観的なデータに基づいて週明けミーティングで徹底分析。
迎えた翌年3月の主要大会では、準決勝で因縁のライバルにリベンジし、決勝でも完勝して見事優勝を勝ち取ることができたのです。

3. 「これ、Webアプリにできるかも？」Claude無料枠での5時間耐久モックアップ

スプレッドシートの運用は大成功を収めましたが、次第に次の課題が見えてきました。

「コーチにPDFで共有したりGoogleサイトに貼ったりしているけれど、スマホで開くと重いし、毎回PDFを開き直すのは現場で不便ではないか？」

体育館のベンチや移動中の車内で、サクサクと直感的に操作できる専用Webアプリが欲しい。
そう思っていたある日、Claude（Anthropic）の無料枠を触っていた際、「スプレッドシートの構造を渡せば、Web画面のコードを書いてもらえるのではないか？」と閃いたのです。

プログラミングの深い専門知識はありませんでしたが、頭の中にある「理想の画面構成」を日本語でClaudeにぶつけてみました。

「暗い体育館でもギラつかず、プロツールのような高級感があるダークテーマにしたい」
「半透明のすりガラスのようなパネル（ガラスモーフィズム）で、勝利はイエロー、敗北はパープルで一目でわかるようにしたい」

Claudeの無料枠には「メッセージ上限に達すると5時間待たされる」という厳しい制限があります。
制限が解除される時間をアラームでセットし、プロンプトを投げ、コードを修正してもらう日々。
そうして出来上がったのが、たった1枚のHTMLファイルでした。

データは固定値（モック）のダミーでしたが、ブラウザで開いた瞬間、目の前に現れた美しい画面に鳥肌が立ちました。
「これだ。この画面が、チームの生きたデータと繋がってスマホで動いたら、絶対に指導が変わる」

4. モックからNext.jsへ。AIエージェントAntigravityとの出会いと本格移植

「1枚のHTMLモック」から「本物のWebサービス」へ。
ここで最大の転機が訪れました。Googleが開発した次世代AIエージェント「Antigravity」との出会いです。

Antigravityは、単にコードの断片を出力するだけでなく、プロジェクト全体のファイル構成を把握し、ターミナルコマンドの実行やエラーの自動修正まで並走してくれる強力な開発パートナーでした。

私は最初の大きな決断を下します。
「Claudeで作った1枚のHTMLを捨て、モダンなWebフレームワークであるNext.js（React / TypeScript / Tailwind CSS）へ本格移植する」

HTML1枚では、将来的に試合の切り替えや複数ページへの遷移、認証機能などを組み込む際に必ず破綻します。
Next.jsのコンポーネント指向を取り入れることで、以下のような本格的な土台を一気に構築していきました。

・コンポーネント分割: ヘッダー、試合サマリー、4 Factorsパネル、選手ボックススコアなどを独立したパーツとして再設計。
・Tailwind CSSによるデザインシステム: `glass-panel` と名付けた半透明のすりガラス風スタイルを共通クラス化し、UI全体の一貫性を確保。
・動的ルーティングの整備: 将来的にチームIDや試合IDごとにURLを切り替えられる設計。

AIと対話しながらコードがリアルタイムに組み上がっていく感覚は、まさに「バイブコーディング（Vibe Coding）」そのものでした。
深夜の自室で、自分が思い描いた理想のバスケ分析アプリが、プロのWebサービスと同じ構造で形作られていく興奮に、眠気など完全に吹き飛んでいました。

5. まとめ ＆ 次回予告

バスケ未経験の父親が、娘のチームのためにExcelを叩き始めたあの日から、AIとの二人三脚によって「本物のWebアプリケーション」への第一歩を踏み出しました。

画面の骨組みは完成しました。しかし、Webアプリとして命を吹き込むためには、「生きたデータ」を流し込まなければなりません。
一般的なWebアプリなら高価なクラウドデータベースを契約するところですが、私たちが選んだのは、現場のコーチや保護者がすでに使い倒していた「Googleスプレッドシート」でした。

次回は、スプレッドシートをそのままWebアプリの最強バックエンドDBとして直結させた、泥臭くも賢いアーキテクチャの全貌をお話しします。

次回：第2話「スプレッドシートを最強のDBへ。Next.jsとSheets APIの黄金連携」
どうぞお楽しみに！

バスケットボール分析ツール「IBA Dashboard」

「高価な専用機材や自動トラッキングがなくても、手元のデータから勝敗を分ける本質（Insight）を抽出する」
小中高・アマチュアチームの指導現場に特化したデータ分析SaaSです。

・料金プラン: 月額980円（税込） / 年額9,800円（税込・2ヶ月分お得）
・無料体験: 最大3試合まで全機能を無料体験可能（登録後すぐにお試しいただけます）
・公式Webアプリ（無料デモ）: https://app.iba-analytics.com
・特定商取引法に基づく表記: https://app.iba-analytics.com/tokushoho
・お問い合わせ・チーム導入相談: `support@iba-analytics.com` または X（@iba_analytics）のDMまでお気軽にどうぞ！