【バイブコーディング】Google Antigravityを使って1時間でWebアプリを作成した話

こんにちは、にゃあこです！

突然ですが、みなさん、AI使ってますか？！

私がよく使っているのは、ChatGPT、ClaudeCode、Gemini、NotebookLM(最近Geminiと統合しましたが…）、Copilotです。（利用順）

そんな中、最近「Google Antigravityがすごい……！」という噂を聞きました。

これの何がすごいかというと…

ファイルにアクセスして直にソースコードを書き換えてくれるんです…

すごっっ。しかもそれ、課金なしでデフォルトでやってくれます。（トークン上限はあります）

今までだと、例えばChatGPTでコードを生成したら、それを自分でソースコードに貼り付けたり、必要に応じてディレクトリ名を書き換えたりしなければなりませんでした。

バイブコーディングをしたことがある方ならわかると思うんですが、
生成されたコードの挿入箇所が分からなかったり、貼り付けた時にインデントを間違えたり……
そんなささやかな手間が多くて地味にめんどくさかったです。

でも、Antigravityなら自分でディレクトリに行ってソースを書いてくれるので、そんな手間もないんですよね！

今回は私が開発したWebアプリを例に、そんなAntigravityのすごさをお伝えしたいと思います

制作物：「こころをほぐすガチャ」

こちらは、「コーピング」のアイデアをガチャ方式のランダムで提案するWebアプリです。

コーピングとは、ストレス解消のために行うちょっとしたケアや行動のことで、下記のようなものが当てはまります。

• 白湯を飲む
• 深呼吸をする
• ガムを噛む

「なんかリラックスしたいけど、方法が思い浮かばないな～」という時にガチャを回して、出てきたものを一つ実行！
そんな感じで、休憩のためのアイデアを提案してくれるアプリです。

サービス概要

画面中央の「ガチャをまわす」ボタンを押すと…

このように、リラックスのアイデアがひとつ出てきます！

時々、そのリラックスのためにおすすめの商品がAmazonから紹介されることがあります。

この紹介料と、現在申請中のGoogleAdsesnseで、サーバーやドメイン代分ぐらい回収できればいいな…という緩めの収益化をしております。

利用技術

フロントエンド

• HTML5
• CSS3

データ

• JavaScript (React 18)

UIのコンポーネント化（ヘッダー、フィルター、ガチャマシン、結果カード等）や抽選ロジックなどに利用しています。

アニメーション

• CSS Keyframes & Transform: ガチャや結果モーダルのPopアニメーション
• canvas-confetti (JSライブラリ): ガチャ結果が出た瞬間に画面全体を彩る「お祝いの紙吹雪」演出(下記）

実際に試していただくとわかりやすいかもしれません。

制作過程を公開！

それでは実際に、私がどのようにしてAntigravityでWebアプリを作っていったのか、制作レポを公開いたします！

①作りたいものと実装方法の確認：3分

まずは初手で、作りたいものと実装方法を一緒に考えてもらうことに。

すると、こんな雑なプロンプトに対して、9秒で回答が（笑）

一番下の「Implementation Plan」は、クリックすると右側に詳細が表示されます。

どうでしょうか？　かなり細かく要件定義をすり合わせてくれていますよね。

そう、Antigravityのすごいところは、実装前にあいまいな点はしっかりと確認してくれるところなのです…！

ChatGPTやGemini、Copilotなどでは、プロンプトに注意しないとAIが勘違いして先走ってしまい、自分が意図していない成果物が出来上がってしまうことが多々ありました。

Antigravityは「確認」の動作をしっかりと入れてくれるため、これを防止することができます。

ディレクトリ構成まで確認してくれるなんてすばらしい…！

Antigravityから提案された要件定義を見て、一部指示を出して、Proceed（承認）で開発スタート！ここまでわずか3分。

途中で何回か作業の承認ボタンをいれないといけなかったのは若干手間でしたが、（ディレクトリにアクセスするタイミングなどで一応同意を取ってくれているのでしょうか？）勝手にいろいろ実行されるよりは安心でした。

②ほぼ完成！：5分

5分ほど待つと、Antigravityが作業を終了して、成果物を出してきました。

実はもうこの1回でかなり完成形に近い状態で出てきました…。

ランダムでデータを表示するだけのシンプルな動作のWebアプリなので、ログイン認証など複雑な実装がないから完成が早い！！

③微調整：20分～30分

実装してみると思ったところと少し違ったかも、、と思った点をぼちぼち修正していきました。

例えば、コーピングリストの「ジャンル」の絞り込みボタン（カテゴリ）が上に来ていたのですが（これは私が最初に指示しました）、これが思ったよりも行数が膨らみました。
デスクトップだと大丈夫なのですが、スマホで表示した時に、メインであるガチャの絵がスクロールしないと出てこなくなっちゃったので、カテゴリを下に移動しました。

もちろんバイブコーディングで。

ちょっとした文字や表現の修正は、自分でHTML開いてやったりとかもしました。

ここまでなんと30分ぐらい。おそるべしAntigravity…！

④サーバーにアップロード：30分

最後に、サーバーにアップロードし、Webアプリをリリースしました！

この30分はほとんどドメインの反映時間です。実質的な作業は、FTPで開発ファイルをアップロードするだけ！

なんて楽ちんなんだ…！

⑤データのチェック・補充：数時間程度

これはサーバーにアップロードする前に先にやっとけよ！！という話なんですが、
ガチャを自分で回していると、時々意味の分からないコーピングが出てくることに気付きました（笑）

また、Amazonアソシエイトの商品紹介が提案したコーピングとは全く関係ないものになっていたり…。

それを目検でチェックしなおしたり、商品を正しいものに修正する作業に数時間程度要しました。

まあ、どうせアップしたばかりでは検索でもほとんど来ないですし、このWebアプリが正常に動かないことによって困る人は恐らくこの世に一人たりともいないため…（笑）
アニメを見ながらぽちぽちゆっくり作業しました。

どんなに爆速開発できるようになっても、肝心のコンテンツには、きちんと人間の目を入れるのが吉ですね。（教訓！）

感想：生成AIで「何を作るか」に重きを置く時代へ

この記事で言いたいのは「Antigravityはすごいぞ！！」なんですが、それ以上に、開発のハードルがかなり下がっていることを実感しました。

ほとんどプログラミングをしたことがない人でも、ディレクトリの構成からやってくれるAntigravityがいたら、細かい部分を理解できていなくても何となく（それこそVibes）で開発ができてしまいます。

趣味で生成AIを補助輪のように利用して作る分には、大変ハッピーな時代が来たと言えますよね！

……が、収益化するにおいては、もはや実装技術（「どう作るか」）では殆どサービスの差がつかなくなってしまっているので、「何を作るか」という、サービスの目的で差別化する必要があるわけです。

今回私がコンテンツまでAIにデータ作成させて失敗したと感じたのはこの部分です。（笑）

やはりコンテンツは人間ありきなので、この部分は生成AIで手抜きをしないでいきたいですね。
じゃないと、目的がはっきりしないサービスばかりを生産していくことになると思います。

この反省を生かして、「何を作ったら面白いかな」「便利かな」というのに重きを置いて、ちまちま暇な時にバイブコーディングをしてみています。

反省を生かして開発したもの

罫線を自分の好きな長さでコピペできるサービス

メール署名に飾り罫線を使うことが多いのですが、長さがぴったりのものをネット上で見つけるのが難しいため。

AIが生成した文章を人間らしくリライトするツール

AIが生成した文章は単調になりがちで、不自然になってしまうことが多々あります。
そのため、AIが生成した文章を、人間らしい文章にリライトするプロンプトをGeminiに噛ませて、再度文章を生成するツールを作成しました。

WebサービスにAIを噛ませる練習をしたかったこともあり、作成してみました。APIは無料枠を作成しているため、同一IPからの1日上限は10回までと設定しております。

最後に：Antigravity使うなら Google AI Proで！

いや～楽しいですね、バイブコーディング！

今、私はAntigravityを全力で活用するために、Google AI Pro（月2,900円)に入っています！

もともとNotebookLMを勉強でかなり使っていたので、月額725円のAI Plusを使っていました。
が、Antigravityのクレジット優遇があるのが、AI Pro以上のプランなんですね～。

月額2,900円…。サブスクの中ではまあまあな値段だと思いますが、GoogleのAIサービス全般に課金特典があるので、まったく損した気にはなりません！！　私はもともと別で課金してたので恩恵がないのですが、Youtubeまでカバーしてます。最高だ！！

今はコンテンツに重きを置いた中規模なサービスを一つ開発しています。

皆様もぜひ、よきバイブコーディングライフを送ってくださいね！