バドミントン ミス記録（試作版）

バドミントンの試合動画を見ながら、ラリーが終わった場面を記録するWebアプリ。 コート図のどこで「得点」や「ミス」が起きたかを点で表示し、記録を押すと動画のその場面から再生できる。

公開URL: https://badminton-analyzer-delta.vercel.app

作った背景

中学生のバドミントンクラブでコーチをしています。言葉で説明しても選手に伝わっているか分からず、自分の見立てが合っているかにも自信が持てないことがありました。試合の動画を使って、選手と一緒に「どこで、どんなミスが起きているか」を客観的に確かめられるようにしたいと考え、作り始めました。

開発の進め方

エンジニアではない私が、Claude Code に要望を伝え、動作を確認しては修正を頼む形で作っています。

できること

• 動画を選んで再生：手元の試合動画を選ぶと、ブラウザの中だけで再生する（動画はサーバーに送られない）
• コート図をタップして記録：動画を一時停止してコート図（シングルス・手前側の半面）をタップすると、次の内容を記録できる
  • ショットの種類（クリア・スマッシュ・カット・ドロップ・プッシュ・ドライブ・ピン・ロブ・アタックロブ・フェイント・その他）
  • 結果（得点・ミス）
  • ミスの種類（ネット・アウト・その他）※結果が「ミス」のときだけ
• コート図に点で表示：得点は青、ミスは赤の点で、記録した位置に表示する
• 記録一覧から動画へ：一覧の記録を押すと、動画のその時間に移動して再生する
• 記録の保存：記録はブラウザ内（localStorage）に保存されるので、ページを閉じても残る

使い方

1. 「動画を選ぶ」から試合動画を選ぶ
2. ラリーが終わった場面で動画を一時停止する
3. コート図の、打った位置をタップする
4. ショットの種類・結果・ミスの種類を選んで「保存」

使っている技術

• HTML / CSS / JavaScript（index.html 1ファイル）
• Vercel（公開）

ローカルで動かす

index.html をブラウザで開くだけで動く。

今後やりたいこと

• ミスの多い場所をコート図の上に色で表示する
• 試合ごと・選手ごとに記録を比べられるようにする
• 姿勢推定の技術で、動画から選手の動いた道すじを自動で表示する