Googleの強力なAI開発環境「Antigravity 2.0」。今回は新しく選択可能になった高性能モデル Gemini 3.7 Flash (High) を使って、本格的な「リスニング＆ディクテーション英語学習Webアプリ」をゼロから作ってみました！
完成品：
DictaFlow「リスニング＆ディクテーション英語学習Webアプリ」（2026/12/18まで有効）
Sentence Shooter「シューティング英語学習アプリ」（2026/12/18まで有効）
実は今回、「週次リセット前に余っていた無料枠を使い切ろう！」 と思って色々と指示を出していたのですが……驚くほど使用枠が減らず、残り50%程度の状態から本格アプリの完全構築、そしてこの記事の執筆まで余裕で完走 してしまいました！
本記事では、Gemini 3.7 Flash (High) の特徴や、対話形式で要件を詰めてくれる /grill-me コマンド の活用法、実際の開発の流れを分かりやすく紹介します。
💡 Antigravity 2.0 の導入や無料枠の活用法についてはこちら！
Antigravity 2.0 の基本的なセットアップやWindows 11での使い方、無料枠を賢く使うコツについては、以下の記事で詳しく解説しています。まだインストールしていない方はぜひ合わせてご覧ください！
👉 Google Antigravity2.0を無料でWindows11で使ってみた！無料枠で高機能モデルを賢く使うコツ | イチゲ ブログ
アプリの公開はXREAを使ってます。
そもそも「Gemini 3.7 Flash (High)」とは？その特徴と凄さ
Antigravity 2.0 で選択できる Gemini 3.7 Flash (High) は、Googleの最新ハイブリッド推論モデルです。
🌟 主な3つの特徴
- 「Flashの超高速さ」×「Pro並みの深い思考力（Thinking）」
従来のFlashモデルのような爆速レスポンスを維持しながら、内部で「High（高深度）」の推論・思考プロセスを実行。複数ファイルの連携や複雑なロジックも一発で破綻なく設計できます。 - 圧倒的なトークン（使用枠）の高コスパ・低消費
大型モデル（Proなど）だとすぐに無料枠を使い果たしてしまいがちですが、3.7 Flashは非常に効率的なトークン設計になっており、同じ作業量でも枠の消費が驚くほど緩やかです。 - 的確なデバッグ力とコード理解
「キーボードが動かない」といった短いエラー報告からでも、JavaScriptのイベント伝播や日本語IME（全角入力）の競合を即座に見抜く高い洞察力を持っています。
実体験：無料枠残り50％からでもアプリ開発＋記事執筆まで余裕だった！
Antigravityの無料利用枠は約1週間でリセットされます（※詳細は過去記事参照）。
リセット直前、「せっかくの無料枠が余っているから使い切ろう！」と思い、残り50%ほどの状態から以下を一気に実行しました：
/grill-meによる要件定義インタビュー- アプリ全体の設計図（
implementation_plan.md）作成 - 全6ファイル（HTML/CSS/JavaScript）の一括コード生成
- バグ調査と即時修正（IME対応・フォーカス修正）
- このWordPressブログ記事の執筆
- アイキャッチ画像作成
- もう1個、英語学習アプリ作成、デバック途中でようやく使い切った。
これだけ大規模なやり取りとコード生成を行ったにもかかわらず、使用枠はまだまだ余裕があり、「えっ、こんなに使ったのに全然減ってない！？」と驚愕しました。 無料枠で開発を楽しみたい個人ブロガーやプログラマーにとって、最強の選択肢と言えます。(しかし、デバッグ修正は結構消耗が激しい。)
開発の流れ①：/grill-me で要件をAIから逆インタビュー！
今回は最初から細かい仕様プロンプトを書くのではなく、Antigravityのスラッシュコマンド /grill-me を活用しました。
/grill-me 英語学習アプリをhtmlで作りたい。これだけをチャットに入力すると、Gemini 3.7 Flash (High) が選択式の質問（モーダル）を1問ずつ投げかけてくれます。
AIと詰めた仕様一覧
- 学習形式: リスニング＆ディクテーション（聞き取り＆書き取り）
- 入力方式: キーボードタイピング（1文字ずつのスロット判定＋ヒント機能）
- 音声再生: Web Speech API（再生速度 0.7x〜1.2x、リピート、米/英アクセント切替）
- 教材管理: 日常・ビジネス・重要構文・旅行のプリセット＋カスタム英文登録（一括インポート対応）
- 学習モード: 1文字ずつ判定する「練習モード」＋ 全文提出して差分採点する「テストモード」
- 構成:
dictation-app/フォルダ内に HTML/CSS/JS をモジュール分割
質問にクリックで答えていくだけで、プログラミング前の設計が完璧に完了します。
開発の流れ②：設計図の承認と爆速コード生成
要件が確定すると、AIが implementation_plan.md（実装計画書） を画面右側に提示してくれます。
ファイル構成や差分アルゴリズム（LCS）、Web Audio APIによるシンセ効果音の設計を確認し、「Proceed」 を1クリック。
Gemini 3.7 Flash (High) が以下のファイルを瞬く間に自動生成してくれました：
index.html：モダンなオーディオプレイヤー風UIstyle.css：洗練されたダークテーマ＆レスポンシブデザインsentences.js：カテゴリ別・解説付きのプリセット英文データaudio.js：音声合成＆Web Audioシンセ音コントローラーstorage.js：LocalStorage による進捗・苦手・カスタム管理app.js：タイピング判定・Word-by-Word差分採点ロジック
開発の流れ③：「キーボード入力できない」トラブルを一瞬で神デバッグ
完成した index.html をダブルクリックで起動して試したところ、練習モードでキーボード入力が反応しない問題が発生しました。
そこで、チャットで一言だけ送信：
キーボード入力できませんすると、Gemini 3.7 Flash (High) がコードを自動精査し、わずか数秒で解決策を提示：
🐛 原因
タイピング用の隠し <input> 要素にフォーカスが当たった際、全体キーイベントが「通常のフォーム入力中」と誤判定して処理を return してしまっていたこと。
🔧 施された修正
- 練習モードのフォーカス除外ロジックを修正
- 日本語入力（IME）がONのままでも自動で半角英字に変換（NFKC正規化） して判定する処理を追加
- 画面のどこをクリックしても即座にタイピング可能になるようフォーカス制御を強化
ブラウザをリロードしたところ、日本語入力ONのままでもスムーズにタイピングできるようになり、完璧に動作しました！
まだ、バグはありますが今回は、アプリはついでに作ったのでデバッグはまじめにやってません。
まとめ：Gemini 3.7 Flash (High) は無料枠ユーザーの救世主！
今回、Antigravity 2.0 で Gemini 3.7 Flash (High) を使ってみて感じたポイントです：
- 無料枠の消費が驚くほど少ない（残り50％でもアプリ開発＋記事作成まで余裕）
- Flashならではの高速レスポンスと、High推論による破綻のないコード生成
/grill-meによる対話型設計で、プロンプトに悩む時間がゼロに- 一言のエラー報告から本質的な原因（イベントやIME処理）を見抜くデバッグ力
完全オフライン・インストール不要でサクサク動く本格英語学習アプリが、驚くほど短時間で完成しました。
📌 Antigravity 2.0 の始め方・無料枠のコツ
Antigravity 2.0 の導入手順や、無料枠を無駄にせず高機能モデルを賢く使い倒すテクニックについては、ぜひこちらの記事をご覧ください！
👉 Google Antigravity2.0を無料でWindows11で使ってみた！無料枠で高機能モデルを賢く使うコツ | イチゲ ブログ
この記事を書いたイチゲを応援する（質問でもokです）
Vプリカでのお支払いがおすすめです。
