【Gemini × Google Antigravity】フットサル戦術ボードを作って公開した話

はじめに

Googleの生成AIツール「Antigravity」が話題になっていて、何か作ろうと思い立ちました。

どうせなら自分が好きなフットサルに関連する何かをやろうと思い、戦術ボードを作ってみることにしました。

フットサルの戦術ボードの既存アプリは「初期配置の設定が面倒」「動きに合わせてテロップで説明を入れたい」という点で不便だと思っていたので、それらを解決したwebアプリを開発しました。

本記事では、開発の経緯、AIを活用した具体的なワークフロー、そして実際に使用したプロンプトや技術構成についてまとめます。

作成したもの

Futsal Tactic Board
https://aiueoriku.github.io/futsal-tactic-board/

主な機能

• 戦術盤の操作: 選手やボールのドラッグ＆ドロップ
• 初期配置自動化: 定石（3-1, パワープレー）の自動配置
• アニメーション作成: 開始位置と終了位置を指定した線形移動
• 動画保存: ブラウザ上で動きをレンダリングし、動画(MP4)として保存
• テロップ機能: 動きに合わせて説明文を表示

開発フロー：Gemini を PM、Antigravity をエンジニアにする

以下のような役割分担を行いました。

1. 人間（私）: おおまかなやりたいことを伝える、最終的なUI微調整
2. Gemini: 要件定義、技術選定、Antigravityへの指示出し（プロンプト作成）
3. Antigravity: コーディング、Git操作

具体的な手順

1. 要件出し: 実装したい機能をGeminiに投げる。
2. プロンプト変換: Geminiに「Antigravityに入力するための詳細なプロンプト」を出力させる。
3. 実装: Antigravityにプロンプトを投げてコードを生成させる。
4. 微調整: 生成されたものの見た目や挙動をチェックし、細かい修正を行う。
5. デプロイ: GitHub Actionsを利用して自動公開。

これを機能単位（コート描画 → 選手配置 → アニメーション → 動画保存）で繰り返しました。

意識したこと：機能を小分けにする

いきなり「戦術ボードを作って」と投げると、修正が困難な巨大なコードが生成されてしまいます。そのため、機能を最小単位に分割して、順番に実装させることを徹底しました。

実際にGeminiと作成したプロンプトの変遷

Phase 1: 基本表示と初期配置

⚽ 第一段階: 基本表示と初期配置の自動決定

1. コートの表示:
   • 公式規定に基づくフットサルコートの俯瞰（トップダウン）図を描画する。
   • コートは木目調の茶色でお願い
   • 必須要素：タッチライン、ゴールライン、ペナルティエリア、PKマーク、第2PKマーク、センターサークル、交代ゾーン。
2. 要素の配置:
   • 自チーム選手（5人）と相手チーム選手（5人）、ボールを表示する。
   • 選手の識別:
     • フィールドプレイヤーは背番号を1から4とする。
     • ゴールキーパーは識別名をGKとする。
   • 色の識別:
     • 自チームと相手チームを区別する色を付与する。
     • ゴールキーパー（GK）は、フィールドプレイヤーとは異なる識別色を付与する。
3. 戦術選択と初期配置の自動化:
   • 以下の戦術を選択するためのUIを実装する。
     • CK（コーナーキック）、自陣KI、敵陣KI、パワープレー、定位置攻撃（3-1）、定位置攻撃（4-0）
   • 選択された戦術に基づき、自チームと相手チームの初期配置をコート上に自動で表示する。
4. デフォルト/自由配置モード:
   • 戦術が選択されていない場合、またはリセットされた場合、選手とボールは自由にドラッグ＆ドロップで移動・配置可能とする。

🎥 第二段階: 動きの再現と動画保存（線形アニメーション）

1. 移動の定義（線形アニメーション）:
   • 選手およびボールについて、コート上の開始位置と終了位置を指定し、その間を直線的（線形）かつ一定速度で移動するアニメーションを定義できるようにする。
2. タイムライン/シーケンス制御:
   • 定義された動きを管理し、再生、一時停止、速度調整が可能なタイムラインまたはコマ送り制御を実装する。
3. 動画のエクスポート:
   • 設定したアニメーションを再生し、その過程を動画ファイル（MP4またはGIFを推奨）としてエクスポート・保存する機能を提供する。

💬 第三段階: 説明文の追加、動画の完成、共有

1. 説明文の同期:
   • アニメーションの特定のタイミングに合わせて、説明文や**指示（テロップ）**を追加できる機能を実装する。
   • 例：「1番をブロック」「相手の2番が前に出てきたらコンテ」
2. 説明文付き動画のエクスポート:
   • テロップが動きと同期して表示される、最終的な戦術説明動画を保存する機能を提供する。

技術スタックと構成

生成されたコードはモダンで「サーバー代ゼロ・完全ブラウザ完結」を実現する構成になっていました。

フロントエンド

• React (v18): コンポーネントベースでの開発。
• Vite: 高速なビルドツール。
• Konva.js (react-konva): Canvas操作ライブラリ。選手やボールのドラッグ＆ドロップ、アニメーション描画に使用。
• FFmpeg.wasm: ここがポイントです。 動画のエンコードをサーバーではなく、ユーザーのブラウザ上でWebAssemblyを使って実行しています。これによりバックエンドサーバーが不要になりました。

ディレクトリ構成

react-prototype/
├── src/
│   ├── components/
│   │   ├── Court.jsx        # コート描画
│   │   ├── Player.jsx       # 選手（ドラッグ可能）
│   │   ├── Ball.jsx         # ボール
│   │   ├── AnnotationEditor.jsx # テロップ編集
│   │   └── ...
│   ├── utils/
│   │   └── constants.js     # 定数定義
│   ├── App.jsx
│   └── main.jsx
├── public/
│   └── ffmpeg/              # WASMファイル等
└── vite.config.js

インフラ・自動化

• GitHub Pages: 静的ホスティング。
• GitHub Actions: .github/workflows/deploy.yml を設定し、main ブランチに push されたら自動でビルド＆デプロイされるパイプラインを構築しました。

反省点と学び

失敗したこと

当初は自分が触ったことのある「Vanilla JS (HTML/CSS/JSのみ)」で開発しようとしました。しかし、状態管理やCanvasの操作が複雑になりすぎて断念しました。「使用する技術スタックも含めて最初にAIと相談するべきだった」というのが最大の反省点です。結果的にReactなどのフレームワークを使ったほうが、AIにとってもコード生成の精度が高かったです。

実際にやってみて感じたこと

1. 微調整は人間が早い: 「ここのマージンをあと2pxずらして」のような細かい指示をプロンプトで書くより、自分でコードを見て直したほうが圧倒的に早いです。
2. コード理解は必須: あそびで作るならAI任せで良いですが、エラーが出た時や複雑な仕様を追加する際は、生成されたコードを読める知識がないと詰みます。
3. Antigravityの自律性: 設定次第ですが、AIが勝手に git push や rebase までやってくるのは便利である反面、少し恐怖も感じました（笑）。

今後の展望

スマートフォンでも動かせるようにレスポンシブデザインにしたいです。また、UIもまだまだ直感的ではないため、時間に余裕が出来たら改良したいです。

おわりに

生成AIツールを組み合わせることで、個人開発のスピード感は劇的に向上しました。特に「要件定義（Gemini）」と「実装（Antigravity）」を分ける手法は、手戻りを減らす上で非常に有効でした。

フットサルの戦術ボードをお探しの方、あるいはAIを使った開発に興味がある方は、ぜひリポジトリを覗いてみてください。