【1万ブクマ超】Vibe Coding完全再現キット｜Antigravity × Claude Codeをコピペで動かす

過去に購入いただいた方、ありがとうございました。資料室の入口として無料開放しました。（2026年6月4日）

こんにちは、れん学長です。

「Vibe Codingやりたい！」
「Antigravity × Claude Codeの黄金連携、動画見てすごいと思ったけど、いざ自分でやろうとすると……どこからコピペすればいいの？」

そんな声をいただいたので、再現セットを作りました。

この記事は、私がYouTubeやNote記事で使っているプロンプト・手順・詰まりポイントを、1ページにまとめたコピペパックです。

ちなみにこの手法、元ネタはXで1万ブックマーク超えでバズり散らかした記事なんですよね。
私もYouTubeで解説したら評判が良くて、「プロンプトまとめてほしい！」という声をたくさんいただきました。

👉 元のバズ記事：

正直、無料記事にもプロンプトは書いてあるんですよね。
でも「あっちこっち探すのが面倒」「動画のどこで言ってたっけ」ってなりがちじゃないですか。

そこで、「とりあえずこれをコピペして、この順番でやれば動く」という形に整理しました。

🎬 動画で全体像を見たい方へ
「読むより見た方が早い！」という方は、こちらの動画で全行程を解説しています。
実際の操作画面を見ながら進めたい方はぜひ。

なぜ今、Claude Codeなのか？

今、Claude Codeがめちゃくちゃ来てます。

精度が高くて、一発でアプリが作れちゃう。私も最近はClaude Codeでアプリを作ることが増えてきました。

でも、いきなり黒い画面のターミナル（CLI版）から始めるのは正直ハードルが高いですよね。
黒い画面にコマンドを打つなんて、プログラミング未経験者にとっては「無理ゲー」に見えるかもしれません。

そこでおすすめなのが、Antigravityの中でClaude Codeを動かすという方法。

AntigravityはVS Codeベースの開発環境なので、ターミナルを直接触らなくても、ボタン操作でClaude Codeが使えます。
プログラミング未経験者が最初のステップを踏むには、これが一番入りやすいと思っています。

まず、このページの使い方（最短3ステップ）

• STEP1：下の「最小版」プロンプトをコピペ（Gemini → Claude Codeの順）

• STEP2：チェックリスト通りに実行（迷ったらここに戻る）

• STEP3：詰まったら「詰まりTop5」を見る（だいたいここで解決します）

この記事のレベル感

Vibe Codingには大きく3つのステップがあります。

A. 初心者：まずは動けばOK（最短で成功体験）
→ おすすめ：Google AI Studio の Build
→ この再現セット：○（コピペで動かすならOK）

B. 慣れてきた：自分用の自動化ツールを作りたい
→ おすすめ：Antigravity だけで自作
→ この再現セット：◎（一番ハマる）

C. ちゃんと開発寄り：未経験でも「開発っぽく」やりたい
→ おすすめ：Antigravity × Claude Code
→ この再現セット：◎（最小版＋分岐テンプレを使う）

この記事は C. ちゃんと開発寄りに対応した再現セットです。

「未経験だけど、ちゃんとした開発フローで進めたい」
「AIに丸投げでアプリを完成させたい」
そんな方に向いています。

ただし、初心者でも「コピペで動かす」が目的なら全然OKです。
チェックリスト通りにやれば通るように作ってあります。

👉 3つのレベルの詳細は「結論だけ：今おすすめのAIツール」記事で解説しています

この記事で何ができるようになるか

• AIに丸投げでアプリが完成する（コードは1行も書かない）

• 「相談はGemini、実装はClaude」の分業フローが身につく

• 詰まりポイントを事前に回避できる

成功判定（ここまで行けばOK）

• Geminiが「実装計画ファイル」を作ってくれた

• Claude Codeがその計画を読んで、実装を完了した

• 作ったアプリがブラウザで動いた

基礎から知りたい人へ

「Antigravityって何？」「Claude Codeのインストール方法は？」
そういった基礎は、無料記事で丁寧に解説しています。

まずそちらを読んでから、この再現セットに戻ってくると理解が深まりますよ。

 基礎編👇️

この記事でできること

YouTube動画「Antigravity × Claude Codeの黄金連携」で使ったプロンプト・手順・詰まりポイントを、1ページにまとめてあります。

所要時間

• 最短：30分（環境構築済みの場合）

• 通常：60分（ゼロからの場合）

前提条件（検証環境）

• 検証環境：Mac

• インターネット接続

• Claude Proアカウント（推奨）

• Antigravity（インストール可能な状態）

※この記事はMacで検証しています。Windows/Linuxでも動作しますが、画面やショートカットキーが若干異なる場合があります（例：Macの⌘はWindowsではCtrl）。

このセットで手に入るもの

✅ コピペ一式（そのまま使えるプロンプト）
✅ チェックリスト形式の手順
✅ 詰まりTop5と回避策
✅ 用途別分岐テンプレ（速度UP / 品質UP / 構成UP）
✅ 更新ログ（ツール仕様変更への追随）

おさらい：Vibe Codingとは？（30秒でわかる）

「そもそもVibe Codingって何？」という方向けに、サクッと説明しますね。

• Vibe Coding：AIと「ノリ（Vibe）」で会話しながら開発するスタイル。コードは書かない。

• Antigravity：Googleが作った「AIネイティブな開発環境」。Geminiが内蔵されていて、無料枠が多い。

• Claude Code：Anthropic社のコーディングAI。実装力が圧倒的だけど、クレジット消費が激しい。

今回の「黄金連携」のポイントは、この2つを「分業」させることです。

なぜこの組み合わせが最強なのか

これは無料記事でも書いたことですが、大事なのでサクッとおさらいしますね。

ポイントは「AIの分業」です。

• Gemini（Antigravity）= 脳（プランニング）。相談役。無料枠が多め。

• Claude Code = 手（実装）。超優秀だけど、クレジット消費が激しい。

で、よくある失敗が「Claude Codeに相談しちゃう」こと。
相談してるだけでクレジットがどんどん溶けていくんですよね。私も何度も泣きました。

だから、「相談はGeminiでじっくり、作業はClaudeでサクッと」。
この分業を徹底するのが、お財布にも心にも優しい開発フローなんです。

サンプル：最小プロンプト（抜粋）

実際のプロンプトはどんな感じか、雰囲気だけお見せしますね。

Geminiへの指示（抜粋）

ポイントは「あなたはコードを書かないで」と明示すること。
これを入れないと、Geminiがコードまで書き始めちゃうんですよね。

🔒 資料室メンバー限定コンテンツのご案内

ここから先は、資料室メンバー限定で「そのまま再現できる形」に整理した完全版です。

✅ コピペ全文（そのまま使えるプロンプト）
✅ チェックリスト（迷わず進める手順）
✅ 詰まりTop5と回避策
✅ 用途別テンプレ（速度UP / 品質UP / 構成UP）
✅ よくある質問（Q&A）

こんな疑問にも丁寧に回答しています：

• 「Antigravity内蔵のClaudeとClaude Codeは何が違うの？」

• 「ターミナルって何？苦手でも大丈夫？」

• 「Claude Codeを使うにはどのプラン（Free/Pro/Max）が必要？」

▶ 資料室メンバーシップに参加する（初月無料）👇️

※この記事は単体購入（¥2,980）も可能ですが、
資料室メンバーなら「この記事を含むメンバー限定記事（過去分含む）」が読めます。

👉 まず全体像（何が読めるか）を見てから決めたい方はこちら
【完全ガイド】れん学長のAI資料室へようこそ

0. 環境構築編（まずはここから）

プロンプトをコピペする前に、まず環境を整えましょう。

0-1. Antigravityのインストール

1. Antigravity公式サイトからダウンロード

2. インストーラーを実行して起動確認

💡 AntigravityはGoogleが開発した「AIネイティブな開発環境」です。VS Codeをベースにしているので、使ったことがある方は違和感なく使えます。

0-2. Claude Code拡張機能の有効化

Antigravityには「拡張機能（Extension）」としてClaude Codeを追加できます。
ターミナルが苦手な方でも、これでGUI操作でClaude Codeを使えるようになります。

有効化の手順（Mac）：

1. Antigravityを起動

2. ⌘ + Shift + P を押してコマンドパレットを開く

3. 「Extensions: Install Extensions」と入力してEnter

4. 検索ボックスに「Claude Code」と入力

5. 表示された拡張機能「Claude Code for VS Code」をインストール

6. Antigravityを再起動

✅ 成功すると、ファイルを開いた状態で、右上に「スパーク（私はウニって呼んでる）」アイコンが表示されます。

参考：VS CodeでClaude Codeを使用するには

0-3. Claudeアカウントでログイン

Claude Code拡張機能からログインします。

💡 Claude Codeを使うにはどのプランが必要？（2026/01時点）

• Free（無料）：❓ 基本的にはフル機能は使えない

• Pro（$20/月）：✅ フルアクセス（推奨）

• Max（$100〜200/月）：✅ Pro + 高い利用上限

※2026/01時点の私の検証では、Claude Codeは基本「Pro以上」または「Claude Console（PAYG）」での利用が前提です。
プランや上限は変更されることがあるので、最新は公式案内も確認してください。

👉 まずはPro（$20/月）から始めることをおすすめします。

📖 詳しく知りたい方へ：環境構築の詳細や「なぜこの組み合わせが最強なのか」は、無料記事で丁寧に解説しています。
👉 基礎編：Antigravity × Claude Codeの黄金連携を試してみた

1. コピペ一式

💡 おすすめの進め方：まずは「1-1. 最小版」を試してください。これでほとんどのケースはいけます。うまくいかないときだけ「1-2. うまくいかないとき」を参照してください。

1-1. 最小版（とにかく動かす）

まずは「これだけでいい」という最小構成から。

💡 これは1万ブクマ超えのバズ記事で紹介されていた方法そのままです。シンプルですが、正直これで結構いけます。慣れたらこれだけで十分という人も多いです。

(1) Gemini（Antigravity）へのプロンプト

役割：軍師（プランナー）
モード：Gemini 3 Pro (High) を推奨

[ここにあなたの作りたいアプリの説明]

詳細な実装計画（日本語）を含む新しいフォルダを作成してください。
後でClaude Codeがそれを読み、コードを書き、実行する。

※重要：あなたはコードを書かないでください。タスクと実装計画を作成するだけです。

具体例：サムネ変換アプリを作ったとき

私が実際に使った「アプリの説明」はこんな感じでした：

すると、Geminiが気を利かせすぎて……

とか提案してきたんですよね。いや、そこまでは求めてないよ、と。

なので修正しました：

そうしたら、Geminiがこう返してきました：

おお、すごい。私が思いつかなかった解決策を提案してくれました。
こうやって「ワガママ」を伝えて、AIと壁打ちしながら仕様を詰めていくのがVibe Codingの醍醐味なんですよね。

ポイント：参考になる画像やスクショ、資料があれば一緒に渡すと精度が上がります。
「こんなイメージで」と伝える感じですね。

(2) Claude Code へのプロンプト

役割：現場監督（実行者）
インターフェース：ターミナル（claude コマンド）または Antigravity の拡張機能

💡 ターミナルって何？：黒い画面に文字を打ち込んでPCを操作する方法です。Macなら「ターミナル」アプリ、Windowsなら「コマンドプロンプト」がそれにあたります。苦手な方はAntigravityの拡張機能版を使えばOKです。

[作成されたフォルダ名]を見てください。
そこに実装計画があります。読んで理解し、実行してください。

これだけです。シンプルでしょ？

フォルダ名のところは実際に指示書が作成されたフォルダ名を入力してください。

するとClaude Codeが動き出します。
「実装計画を確認しました。実装していきます」と言いながら、プロジェクトの初期化、ファイルの作成、コードの実装……全部勝手にやってくれます。

途中で「フォルダを作成しますか?」みたいなことを英語で聞かれるので、その時は「Yes」をポチッと押してください。

待つこと数分程度。「実装完了しました」のメッセージが出たら、次のステップへ。

(3) 動作確認（ブラウザで見てみる）

Claude Codeが「実装完了」と言ったら、実際に動くか確認してみましょう。

確認手順：

1. Claude Codeに「起動コマンドを教えて」と聞く

2. 必要であれば、Claudeが教えてくれたコマンドをターミナルで実行
   （例）$ npm run dev

3. ブラウザで `http://localhost:3000` など指示があったURLにアクセス

4. 動作確認

   • サムネ変換アプリの場合：画像をドラッグ＆ドロップ → 変換されるか確認

   • 他のアプリの場合：実装計画に書いてある「完了確認方法」を試す

💡 `npm run dev` はWebアプリを「開発モード」で起動するコマンドです。アプリによっては `python app.py` や `go run main.go` など違うコマンドになることもあります。わからなければClaude Codeに聞けばOKです。

実際に動いた瞬間の感動は、やってみないとわからない。
私もサムネ変換アプリが一発で動いた時は、思わず「あ、完璧ですね」と声が出ちゃいました。

👉 実際の検証の詳細は 実践編：未経験Vibe Codingの正解はこれだ！ で公開しています。

1-2. うまくいかないとき

最小版でうまくいかない場合、以下を試してみてください。

症状1：Geminiが余計な提案をしてくる
→ 「シンプルにしてください」「そこまでは不要です」と伝えて軌道修正する。上の具体例のように、ワガママを言ってOKです。

症状2：Claude Codeがファイルを見つけられない
→ フォルダ名を明示的に指定する（例：「specs/implementation_plan.md を確認して」）

症状3：エラーが出て実装が止まる
→ Claude Codeに「エラーの原因を特定して修正してください」と追加指示する。大抵は自己修正してくれます。

💡 それでも解決しない場合は「3. 詰まりTop5と回避策」を確認してください。

2. チェックリスト形式の手順

「何をどの順番でやればいいか」を迷わないように、チェックリストにしました。

環境構築チェックリスト（確認用）

※詳細な手順は「0. 環境構築編」を参照してください。

• [ ] Antigravityをインストールして起動できる

• [ ] Claude Code拡張機能を有効化した（⌘+Shift+P → Extensions）

• [ ] Claude のProプランでログインできた

• [ ] 右ペインでGeminiが使える状態になっている

実行編

• [ ] Antigravityで新しいプロジェクトフォルダを開く

• [ ] 右ペイン（Gemini 3 Pro (High)）を開く

• [ ] Geminiに「最小版プロンプト」を入力

• [ ] 指示書（例：specs/implementation_plan.md） が作成されたか確認

• [ ] Claude Code を起動（拡張機能 or ターミナル）

• [ ] Claude Codeに「最小版プロンプト」を入力

• [ ] 実装完了まで進める（所要時間の目安：数分〜20分程度）

• [ ] 起動コマンド（例：npm run dev）で動作確認

• [ ] ブラウザ等で動作を確認

3. 詰まりTop5と回避策

私が実際に詰まったポイントと、その回避策をまとめました。
ここを押さえておくと、かなりスムーズに進むはずです。

詰まり1：Claude Codeが重い・遅い

症状：実装がなかなか進まない、待ち時間が長い

原因（可能性）：

• PCのスペック不足（メモリ/CPU）

• Claude Codeサーバーの混雑

• Antigravity上で動く拡張機能版は動作が重くなりやすい（ターミナル版より処理が多いため）

回避策：

• 不要なアプリやブラウザタブを閉じる

• 混雑時間帯（日本時間の夜）を避ける

• 拡張機能版ではなく、ターミナル版（CLI）を使う

詰まり2：Geminiがコードを書き始める

症状：計画だけ作ってほしいのに、コードまで書いてくる

原因：

• プロンプトの「コードを書くな」指示が弱い

回避策：

• 「※重要：あなたはコードを書かないでください」を必ず入れる

• 「計画だけです」「タスクと実装計画を作成するだけ」と強調する

詰まり3：Claude Codeが計画書を読んでくれない

症状：「ファイルが見つかりません」と言われる

原因：

• ファイルパスの指定ミス

• フォルダを開いていない

回避策：

• フォルダ名を明示的に指定する（例："/Users/shelty/app/specs/implementation_plan.md を確認して"）

• Antigravityでプロジェクトフォルダを開いた状態で実行する

詰まり4：実装途中でエラーが出る

症状：依存関係のエラー、ビルドエラーなど

原因：

• 環境の問題（Node.jsのバージョンなど）

• 依存パッケージの競合

回避策：

• Claude Codeに「エラーを確認して修正してください」と追加指示

• 「エラーの原因を特定して、対処してください」と伝える

• 大抵はClaude Codeが自己修正してくれます

詰まり5：完成したアプリが動かない

症状：ブラウザを開いても何も表示されない

原因：

• ビルドが完了していない

• サーバーが起動していない

回避策：

• ターミナルで npm run dev を明示的に実行

• 「localhost:3000」などにアクセスして確認

• Claude Codeに「動作確認まで行って」と指示しておく

4. 用途別分岐テンプレ

「何を優先するか」によって、プロンプトを調整すると効率が上がります。

A. 速度UP重視（とにかく早く動かしたい）

Geminiへの追加指示：

シンプルで最小限の構成にしてください。
高度な機能やエラーハンドリングは後回しでOKです。
まず動くものを作ることを優先してください。

Claude Codeへの追加指示：

まず最小限で動くものを作ってください。
細かい調整は後で行います。

B. 品質UP重視（エラーを減らしたい）

Geminiへの追加指示：

エラーハンドリングを含めた堅牢な設計にしてください。
各ステップの後にテスト・確認ポイントを入れてください。

Claude Codeへの追加指示：

各ステップ完了後にテストを実行してください。
エラーが出たら必ず修正してから次に進んでください。
コードにはコメントを入れてください。

C. 構成UP重視（他の人にも使わせたい）

Geminiへの追加指示：

他の人が読んでも理解できるドキュメントを作成してください。
README.mdに使い方を書いてください。

Claude Codeへの追加指示：

実装後、README.mdを作成してください。
使い方、前提条件、起動方法を含めてください。

5. よくある質問（Q&A）

Q：Antigravity内蔵のClaudeとClaude Codeは何が違うの？

A：どちらもエージェント的に動けますが、「最適化の度合い」が違います。

💡 エージェント的な動きって何？：
AIが自分で考えて、ファイルを作ったり、コマンドを実行したり、タスクを進めてくれること。「チャットで答えを返すだけ」じゃなくて、実際に手を動かしてくれるんです。

まず前提として、Antigravityはエージェントファーストのプラットフォームなので、右ペインのGemini/Claudeもエージェント的な動きができます。

じゃあClaude Codeは何が違うの？というと、「コーディングに特化して最適化されている」という点です。

• Antigravity右ペインのGemini/Claude：汎用エージェント。計画立案、相談、ファイル操作など幅広くこなせる。

• Claude Code（拡張機能 or CLI）：コーディング特化エージェント。ターミナル操作、ファイル編集、Git操作、長時間タスクなどが深く最適化されている。

例えるなら、「なんでもできる優秀なアシスタント」と「ソフトウェア開発に特化した熟練エンジニア」の違いです。

Claude CodeはClaude Agent SDKというフレームワークの上で動いていて、コーディングに必要な環境（ハーネス）が整っています。
この「ハーネス（Harness）」というのは、乗馬でいう「手綱」みたいなイメージ。
AIを安全にコントロールして、長時間のタスクでも安定して作業させるための仕組みですね。

だから、同じClaudeでも、「汎用エージェントとして動くClaude」と「コーディング特化環境で動くClaude Code」では、開発作業における動きの洗練度が違うんです。

より安全に、より精度高く、より自律的に開発を進めてくれる。これがClaude Codeを使う最大のメリットです。

さらに、相談役にはGemini（無料）、実行者にはClaude Code（Pro以上推奨）を使い分けることで、「コーディング特化エンジニアを、お財布に優しく使い倒せる」という構成ができあがります。

👉 さらにClaude Codeを使いこなしたい方は、こちらの記事もご覧ください：
【非エンジニア必見】Claude Codeに入れるべき「安全装置」プラグインClaude Harnessが凄かった

Q：Gemini 3 Pro (High) ってどこで選ぶの？

A：Antigravityの右ペインで選べます。

1. Antigravityを起動して、右ペイン（AIチャット）を開く

2. チャットエリアの下部にモデル選択のドロップダウンがある

3. 「Gemini 3 Pro」を選択し、さらに「High」を選ぶ

💡 「High」はより高精度なモードです。計画立案など重要な場面で使うと良いです。簡単な質問なら「Low」でもOK。

Q：Node.jsのインストールは必要？

A：必要になることが多いですが、Claude Codeに任せてOKです。

Webアプリを作る場合、Node.jsが必要になることが多いです。
ただし、インストールされていない場合はClaude Codeが教えてくれるので、事前に準備しなくても大丈夫です。

「Node.jsがインストールされていません」と言われたら、Claude Codeに「インストール方法を教えて」と聞けば、手順を教えてくれます。

6. 更新ログ

ツールの仕様が変わったり、新しい詰まりポイントが見つかったりしたら、ここに追記していきます。

v1.0（2026-01-11）

• 初版公開

• 基礎編・実践編の内容を統合

• 詰まりTop5を整理

今後の予定

• Claude Code 2.x への対応状況を確認次第追記

• 新しい詰まりポイントが出たら追加

• 読者からの質問で多かったものを反映

関連リンク

無料記事（概念・考え方・実践の詳細を知りたい方へ）

• 基礎編：Antigravity × Claude Codeの黄金連携を試してみた
  https://note.com/renkon40/n/n50c15a2e7a24

• 実践編：未経験Vibe Codingの正解はこれだ！
  https://note.com/renkon40/n/n68da1f15f06c

• Claude Harness編：Claude Codeに入れるべき「安全装置」プラグイン
  https://note.com/renkon40/n/n6ac12dc242eb

YouTube動画

• 基礎解説：【1万ブクマ超】Antigravity x Claude Code最強技を深堀り！
  https://youtu.be/YKKJPnEom2U

• 実践検証：【未経験Vibe Coding】最強連携を徹底検証！
  https://youtu.be/BIuewxcuSFo

• 再現キット解説：この記事の内容を動画で全解説！
  https://youtu.be/coOiWRNAfvc

🎬 動画で操作画面をチェック！

「記事だけじゃイメージ湧かない」「実際の画面を見たい」という方は、こちらの動画で全行程を実演しています。

Geminiへの指示出しから、Claude Codeが動き出す瞬間、アプリが完成するまで。
読むより見た方が早いかもしれません。

▶️ 動画はこちら：

最後に

正直、Vibe Codingって「やるまでが怖い」んですよね。
ターミナルとか、AIへの指示とか、なんか難しそうじゃないですか。

でも、一回動かしてみると「え、こんなに簡単なの？」ってなります。

このセットを使って、まずは「最小版」でいいので動かしてみてください。
動いた瞬間、たぶん世界がちょっと変わると思います。

詰まったら、詰まりTop5を確認。
それでもダメなら、コメントで教えてください。
このセットに追記していきますので。

ではでは、良いVibe Codingライフを！
れん学長でした。

📚 メンバーシップについて

この記事は「れん学長のAI資料室」メンバー限定コンテンツです。

メンバーシップでは、この記事のような再現セットやコピペパック、他にも実践的なAI活用のノウハウを随時追加しています。

👉 メンバーシップの詳細はこちら：
【完全ガイド】れん学長のAI資料室へようこそ

毎月25-28日頃に「資料室だより」を掲示板に投稿しています。今月の追加・アップデート情報をまとめてチェックできます。

#Antigravity #ClaudeCode #VibeCoding #再現セット #AI開発 #プログラミング未経験