ROUTE E QUEST 0 🎯 開発体験の入口

バイブコーディング体験 — プロレス台本ジェネレーター

コードを1行も書かずに、AIとの対話だけでアプリを作る。作ったその場で自分が使うところまでをゴールにする。

🏁
このQuestのゴール

Google AI Studio のビルドモードでプロレス台本ジェネレーターアプリを作り、実際に台本を1本生成するところまで完走する。所要時間の目安: 60〜90分

進め方

1

まず Claude に相談する — 構想を固める

いきなりビルドモードに「アプリ作って」と投げるのは非推奨。まず AI チャットに相談して、作りたいものの構想を整理してから臨む。Claude Web または Grok（どちらも無料）が使える。Google AI Studio の最新仕様についてはGrokの方が情報が新しい場合があるのでおすすめ。

💬 Claude への最初の一言（例）

「プロレスの台本を自動生成するWebアプリを作りたい。Google AI Studio のビルドモードで作る予定。まずは構想を一緒に固めたい。どんな機能が必要か、入力・出力の設計から考えてほしい。」

💡 コツ

いきなり「プロンプトを作って」は慣れてから。最初は「こういうものを作りたい、まず構想を整理したい」という入り方が正解。対話を繰り返してアイデアを深める。

2

Google AI Studio ビルドモードにアクセス

ブラウザで以下にアクセスする。Googleアカウントでログイン済みであればすぐに使える。

Google AI Studio ビルドモードのトップ画面

「Build your ideas with Gemini」— チャット欄に作りたいものを説明するだけでアプリが生成される

3

モデルを選択する（右上の設定アイコン）

右上の歯車アイコンから Advanced settings を開くと、使用モデルを選択できる。

Advanced settings - モデル選択
⭐ Gemini 3.1 Pro Preview

アプリの骨格を作るときに使う。精度が高い分、無料枠だと制限に当たりやすい。

⚡ Gemini 3 Flash Preview

細かい調整・微修正に使う。速くて制限に当たりにくい。慣れてきたらこちらメイン。

💡 推奨の使い分け

骨格作り → Pro、微調整 → Flash。無料枠でProが制限に当たったらFlashに切り替える。

4

Framework は React のままでOK

Framework選択 - React / Next.js / Angular

Frameworkの選択肢が3つあるが、今は気にしなくていい。

React デフォルト。UIを部品（コンポーネント）単位で作るJavaScriptの仕組み。最初はこれで固定でOK。
Next.js Reactの上位版。サーバー処理が必要なアプリ向け。今は不要。
Angular Googleが作った別の仕組み。今は不要。

「Reactって何？」と気にしなくていい。AIが全部書いてくれる。あなたは「何を作りたいか」を伝えるだけ。

5

有料APIキーの設定（任意）

有料APIキーの設定画面

「Free requests」と表示されているところの歯車から、有料APIキーを設定できる。設定すると制限を気にせず開発できる。

最初は無料枠で十分。制限に当たりはじめたら、APIキーの取得を検討する（別途セッションで対応）。

6

音声入力を使う（推奨）

チャット欄の左にあるマイクアイコンから音声入力ができる。思いつくままに話せるので、テキスト入力より速く・自然に指示を出せる。基本は音声入力推奨。

💡 音声入力のコツ

長い説明も話すだけでOK。「えーっと」とか入っても問題ない。AIが意図を読み取ってくれる。

7

調整の鉄則 — ダウンロード → Antigravity → Studio

アプリの動きを細かく直したいとき、ビルドモード上でダイレクトに指示するよりも、一度コードをダウンロードしてClaudeに見せてから指示を作ってもらう方が精度が上がる。

① DL
上部の「Code」タブを選択 → 右上に表示されるダウンロードアイコン（↓）をクリックしてコードを取得する
② AI
ダウンロードしたコードを AI に渡して「〇〇を直したい。ビルドモードに送る指示を作って」と依頼する
⭐ 最善：Antigravity × Claude Opus 4.6 — Quest 0-1 以降に導入。フォルダごとそのまま渡せる。
次点：Antigravity × Gemini 3.1 Pro High — 同じく Antigravity 内のモデル切り替えで使用可。
※ Claude Web はファイル数制限があり、複数ファイルで落ちるコードには不向き。
③ Studio
Antigravity が作ったプロンプトをビルドモードのチャットに貼って実行する

このループを繰り返すことで、ビルドモード単体よりはるかに高品質なアプリに育てられる。

📋 コピペ用：プロ仕様の開発プロンプト

慣れてきたら、以下のプロンプトをそのまま ビルドモード のチャット欄に貼って使える。ペルソナ・UI・出力フォーマットまで全部込みの完全版。

【アプリ名】プロレス台本ジェネレーター 以下の仕様でReactアプリを作ってください。 ■ 目的 プロレスの試合情報を入力すると、YouTube用の台本を自動生成するツール。 Advanced settings の System instructions にペルソナを設定すること。 ■ 入力フォーム（左パネル） 1. 対戦カード（例：棚橋弘至 vs 内藤哲也） 2. 団体名（新日本プロレス / NOAH / DDT / AEW など） 3. イベント名・会場（例：東京ドーム大会） 4. 試合結果（勝者・決め技） 5. 補足メモ（注目シーン・観客の反応・伏線など）自由入力 6. 台本タイプ：ショート60秒 / 長尺5〜8分 / 両方　のセレクト 7. トーン：熱血実況 / 冷静分析 / ファン感情爆発　のセレクト ■ 出力フォーマット（右パネル） 【ショート台本（60秒）】 ・冒頭フック（3秒）：視聴者の目を止める一言 ・本題（50秒）：試合の山場・感情ポイント ・CTA（7秒）：チャンネル登録・コメント誘導 【長尺台本（5〜8分）】 ・冒頭フック → 選手/試合の背景説明 → 試合ハイライト → 考察・個人見解 → CTA ■ System Instructions（ペルソナ設定） あなたはプロレス歴20年以上の深いファン。団体の歴史・選手のキャリア・ ストーリーラインの文脈を熟知している。語り口は「プロレスを知らない人にも 伝わるが、玄人が聞いても唸る」レベルを目指す。AI感を排除し、個人の感情・ 主観・こだわりが滲む台本を書く。ヒール/ベビーフェイス、ブック（台本）、 ジョブなどの業界用語を自然に使う。 ■ UI要件 ・ダーク系デザイン（背景 #0f172a、アクセントカラー #be123c の赤） ・台本の横にワンクリックコピーボタンを設置 ・「台本を生成する」ボタンは赤いプロレスらしいデザイン ・レスポンシブ対応（スマホでも使えること）
💡 使い方のヒント

このプロンプトをそのまま貼るのではなく、まず Claude と対話して自分好みにカスタマイズしてから使うのがベスト。「補足メモの入力欄を大きくしたい」「出力後に自動でコピーされるようにしたい」など、要望を加えていくと自分専用ツールになる。

🤼 実際に作ってみよう

以下の手順で「プロレス台本ジェネレーター」を作る。

  1. Claude Web に「プロレス台本を生成するWebアプリの構想を一緒に考えたい」と投げる
  2. 対話しながら、入力項目・出力フォーマット・ペルソナ設定を固める
  3. 「このアイデアをGoogle AI Studio ビルドモードに最初に送るプロンプトを作って」と依頼する
  4. 受け取ったプロンプトを aistudio.google.com/apps のチャット欄に貼る
  5. 生成されたアプリで実際にプロレス台本を1本作ってみる ← ゴール

詰まったら、エラー画面や現状のスクショをチャットに貼って報告してください。一緒に解決します。

🚀 この先に広がる可能性

ビルドモードでの開発感覚をつかむと、アイデアさえあればあらゆるツールを自分で作れるようになる。繰り返す作業・面倒なタスクは、自分専用のアプリに置き換えていける。

STEP UP ①
あらゆる業務・趣味をアプリ化する。台本生成に限らず、情報収集・文章生成・データ整理・SNS投稿など、繰り返すタスクはすべてツールにできる。
STEP UP ②
作ったツールのロジックを Antigravity / Claude Code のスキルに転用する。ビルドモードで固めたプロンプト設計・入出力の仕様は、そのまま Antigravity のスキル開発の設計図になる。React コードをそのまま動かすのではなく、ロジックを Python スクリプト等に移植してスキル化することで、自動化パイプラインへの組み込みが可能になる。
WEB の強み
Webアプリはビジュアルを確認しながら使える。Antigravity や Claude Code はターミナル操作が中心のため、画面を見ながらインタラクティブに動かすツールは苦手。入力フォーム・リアルタイムプレビュー・ボタン操作が必要なツールは、Build Mode で作った Webアプリの方が圧倒的に使いやすい。用途に応じてWebアプリ ↔ スキル を使い分けるのが正解。

Quest 0 完走！次は動画化へ

次のステップでは、作った台本を動かす最短ルートを体験します。

Quest 0.5 へ進む →