【1万ブクマ超】未経験Vibe Codingの正解は？Antigravity×Claude Codeでアプリ開発してみた検証記録

こんにちは、れん学長です。（2026年1月9日時点の情報です）

今、X（Twitter）で「未経験から始めるバイブコーディング」という記事が1万ブックマークを超えてバズり散らかしていますよね。
「プログラミング未経験でもAIに丸投げすればアプリが作れる」なんて、夢のような話。

正直、「またまた、そんなにうまくいくの？」「環境構築とかで絶対詰むでしょ」と思ったことはありませんか？

私も半信半疑でした。
そこで今回、話題の「Antigravity (Gemini) × Claude Code」という黄金連携を使って、実際にアプリ開発をガチ検証してみました。

基礎編やインストール方法は前回の記事を参考にしてください↓

結論から言うと……本当に「丸投げ」で、一発でアプリが完成してしまいました。
しかも、ただのコード生成ではなく、「私が欲しかった機能」が完璧に実装された状態で、です。

この記事では、私が人柱となって踏み抜いた「初心者が詰まりそうなポイント」や、実際の「丸投げ」の手順を余すことなく公開します。

なぜ今、「Vibe Coding」が重要なのか？

「Vibe Coding（バイブコーディング）」とは、細かいコードを書くのではなく、AIと「ノリ（Vibe）」を共有しながら、対話だけで開発を進める新しいスタイルです。

これまでの開発は、「まず言語を勉強して、環境構築をして、エラーと戦って……」と、作り始めるまでのハードルが高すぎました。
しかし、このVibe Codingなら、「こういうのが欲しい！」という「ワガママ」さえあれば、あとはAIが形にしてくれます。

特に今回の方法は、徹底的に「お財布への優しさ」と「初心者への易しさ」に特化しているのが特徴です。

使用ツール：Antigravity × Claude Codeの「黄金連携」とは？

今回の検証で使ったのは、2つのAIの役割分担です。

1. 司令塔：Antigravity (Gemini)

   • GoogleのAI開発環境。無料で使えます。

   • 彼には「相談役」になってもらい、完璧な「実装計画書」を作ってもらいます。

2. 現場監督：Claude Code

   • Anthropicの最新コーディングAI。VS Codeの拡張機能として導入しました。

   • 優秀ですが利用料（トークン）が高いので、「実装（コードを書くこと）」だけに集中させます。

この「相談は無料のGeminiでじっくり、作業は有料のClaudeでサクッと」という体制が、お財布に優しい理由なんですね。

【実践】「丸投げ」でアプリを作ってみた

今回、実験台として「YouTubeのサムネイルをNoteの見出しサイズにリサイズするアプリ」を作ってみました。

私の悩みとして、YouTube用のサムネイル（16:9）をNoteにそのまま貼ると、微妙にサイズが合わずに上下が切れたりするんですよね。
いちいちCanvaを開くのも面倒くさい……。

そこで、以下の3ステップで開発を依頼してみました。

Step 1: Geminiに「ワガママ」を伝える（仕様決め）

まず、Antigravity（Gemini）にこう伝えます。
「YouTubeのサムネイルをNoteのサイズに変更するようなアプリを作りたいです」

すると、Geminiが気を利かせすぎて「YouTubeのURLを入力したらサムネイルを自動取得して……」とか提案してきたんですよね。
いや、そこまでは求めてないよ、と。

なので修正しました。
「YouTubeのURLからではなくて、普通にYouTube用に作成したサムネイル画像（16:9のやつ）を渡すので、それを変換してくれたらいいです」
「あと、上下をカットするやり方だと元々の部分が切れちゃうのはよくないので、むしろ上下に余白を入れるとか、自然な感じで欠けないように工夫してください」

そうしたら、Geminiがこう返してきました。
「余白の処理ですが、単なる黒幕ではなく、元画像を拡大して背景に配置し、ぼかし効果をかけることで見切れを防ぎます。音楽番組の縦長動画の背景のようなイメージです」

おお、すごい。私が思いつかなかった解決策を提案してくれました。これがAIとの「壁打ち」の醍醐味ですよね。

Step 2: 「実装計画書」を作ってもらう

Geminiに「Claude Codeが読んで実行できる形式で、実装計画書（implementation_plan.md）を書いて」と指示します。

するとGeminiは、specsフォルダを作成し、その中に実装計画書を書いてくれました。
「specs」というのは「specifications（仕様書）」のことで、設計書や要件定義書を入れておく場所らしいです。こういう知識も教えてくれるんですね。

ちなみに、Geminiが「Noteの画像サイズ」を調べてくれたんですが、2024年時点の情報を参照していたので、私も自分で検索して「1280×670で合ってるな」と確認しました。AIの情報は鵜呑みにせず、ファクトチェックは大事ですね。

Step 3: Claudeに「丸投げ」する

計画書ができたら、あとは現場監督のClaude Codeに引き継ぎます。

面白いのは、Gemini自身がClaude Code用の推奨プロンプトまで作ってくれたこと。
「このプロンプトをClaude Codeに入力してください」と提案してくれたので、それをそのままコピペしました。

「specs/implementation_plan.md を読み込んで、記載されている手順に従い、Nextアプリケーションの実装からビルドまで行ってください」

するとClaudeが動き出しました。「実装計画を確認しました。Next.jsのアプリケーションを実装していきます。タスクを整理してから進めます」と。

実装計画をしっかり立てたおかげか、特に何も聞かれずにどんどん進んでいくんですよね。
プロジェクトの初期化、不要ファイルの削除、CSSの初期化、画像処理ユーティリティの実装……全部勝手にやってくれます。

ただ、ちょっと動作が重くて「遅いな……すごく遅い」と心配になる場面もありました。（原因については後述します）

待つこと約20分。「実装完了しました」のメッセージ。
ターミナルで `npm run dev` を実行してブラウザを開いてみると……。

一発で完璧に動作するアプリが完成していました。

画像をドラッグ＆ドロップすると、プレビューが表示されて、サイドに元画像と似たような色がぼかした感じで入ってる。
ダウンロードしてNoteの記事編集画面に入れてみたら……「あ、完璧ですね」と思わず声が出ちゃいました。

使ってわかったメリット・デメリット

実際に試して感じたリアルな感想です。

ここが良かった！

• 知識ゼロでも形になる: 「ドラッグ＆ドロップ」や「リサイズ」といった機能名さえ知っていれば作れます。

• 一発成功の精度: Geminiが作った設計図が優秀おかげか、エラーが出ずに一発で動きました。

• お財布に優しい: 試行錯誤の部分をGeminiに任せるので、Claudeの高いトークンを浪費しません。

ここは注意！

動作が重かった（環境要因の検証）:
今回、実装完了まで少し時間がかかり、動作が重い場面がありました。原因として以下の3つが考えられました。
1. PCのスペック: ブラウザやNotionなどを同時に開いていて、メモリ/CPUがカツカツだった（私のせいです）。
2. Claude Codeの混雑: ちょうどClaude Code 2.1のリリース直後で人気すぎてサーバー側が混み合っていた可能性。
3. 拡張機能のオーバーヘッド: Antigravity内の「VS Code拡張機能版」だったため、素のターミナル版（CLI）より処理が重かった可能性。

もしこれが「拡張機能だから」だとしたら、「ガッツリ開発」をするならCLI版をターミナルで動かすのが正解かもしれません。このあたりは引き続き検証していきます。

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

この「丸投げ」の衝撃と、実際にアプリが一瞬で動く様子は、記事だけでは伝えきれません。
特に、「ぼかし背景」が一発で実装された瞬間は必見です。

検証の全貌を動画にまとめましたので、ぜひ実際の動きを確認してみてください。
「あ、これなら自分にもできそう」ときっと思えるはずです。

▶️ 動画はこちら：【未経験Vibe Coding】Antigravity×Claude Codeが最強すぎた！AIに「丸投げ」でアプリ開発検証

まとめ：Vibe Codingを試す価値はあるのか？

Vibe Codingを試す価値はあるのか――それはそうでしょうね。

だって実際、私は最近こんなアプリを作ってしまいましたから。

• ビジネスダッシュボード: 案件の進捗や売上を一目で把握できる管理画面

• 資産管理ダッシュボード: 金融資産の推移を可視化するツール

• タスク管理アプリ: 日々のやることリストを整理するシンプルなアプリ

• 請求書生成ツール: クライアント向けの請求書をサクッと作成

• AI利用状況トラッカー: どのAIツールをどれくらい使っているか管理するダッシュボード

どれも自分でコードは1行も書いていません。
「こういうのが欲しい」と伝えて、AIに丸投げしただけ。
（途中で対話は必要ですが。）

自分の手が10本、20本に増えたような感覚。
この快感を一度味わうと、もう元には戻れません。

ぜひあなたも、最初の「ワガママ」をAIにぶつけてみてください。
きっと、想像以上のものが返ってくるはずです。

【完全版】コピペだけで動かせる完全再現キット作りました👇️

この記事が役に立ったら、いいねやフォローで応援してもらえると嬉しいです。
ではまた次回！れん学長でした！

#AI #VibeCoding #Antigravity #ClaudeCode #自動化 #生産性向上 #AIツール #プログラミング未経験