Google Antigravity完全ガイド：AIがブラウザを「見て」開発する新時代のIDE

Gemini 3 Pro Powered

Google Antigravityで
「無重力」開発体験を

AIがブラウザを操作し、動画を見てコードを書く。Googleの新IDEがもたらす「Agent-first」な開発フローを完全解説。

TypeScriptReactVite

🎥 今回の参考動画はこちら ▼

Table of Contents

1. Google Antigravityとは？ - AIが「同僚」になる日

こんにちは、OKIHIROです。今回は、Googleが満を持してリリースした新世代の統合開発環境（IDE）、Google Antigravityについて解説します。これまでのAIコーディングツール（CursorやWindsurfなど）と一線を画すのは、その「Agent-first（エージェントファースト）」な設計思想です。

Antigravityの最大の特徴は、AIが単なるコード補完ツールではなく、ブラウザやターミナルを自律的に操作できる「エージェント」として振る舞う点にあります。特に専用のChrome拡張機能と連携することで、開発中のWebアプリをAIが直接「視認」し、クリックやスクロールを行いながらデバッグや機能追加を行う様子は、まさに未来の開発体験と言えるでしょう。

2. 必要な準備と環境構築

Antigravityの真価を発揮するためには、本体のインストールに加えてブラウザ連携のセットアップが必須です。

2-1. Antigravity Editorのインストール

まず、公式サイト（antigravity.google）からインストーラーをダウンロードします。Windows、macOS、Linuxに対応しており、ベースはVS Codeのフォークであるため、既存のVS Codeユーザーなら違和感なく移行できます。

2-2. Antigravity Browser Extensionの導入

ここが最も重要なポイントです。AIにブラウザの制御権を渡すために、Antigravity Browser ExtensionをChromeにインストールします。

この拡張機能により、Antigravity上のAIエージェントは以下のことが可能になります。

開いているタブのDOM構造の解析
画面のスクリーンショットや動画の撮影
クリックやスクロールなどのブラウザ操作
コンソールエラーの検知

動画内でも語られていますが、これがこのツールの「The Sauce（秘伝のタレ）」であり、これなしではAntigravityはただのエディタです。必ずインストールしましょう。

3. 実践：AIエージェントとアプリを作る

では、実際にReactアプリを作成しながら、そのワークフローを体験してみましょう。今回はGemini 3 Pro (Low) モデルを使用します。

3-1. プロンプト一発で環境構築

まずは空のプロジェクトを開き、以下のプロンプトを入力します。

create a typescript react app and give it a simple landing page

すると、エージェントは自動的に計画を立て、npm create vite@latest コマンドを実行し、必要なパッケージのインストールから開発サーバーの起動までを自律的に行います。私たちはただ、完了を待つだけです。

3-2. 「画面を見て」修正する（Vibe Coding）

ここからが本番です。立ち上がったローカルサーバー（http://localhost:5173）をブラウザで開きます。デザインがイマイチだと感じたら、ブラウザ拡張機能を有効にした状態で、エディタからこう指示します。

hey make this look better

エージェントはブラウザの画面をスクリーンショットとして撮影し、視覚情報を分析します。「背景が寂しい」「ボタンの配置が悪い」といった人間的な感覚（Vibe）を理解し、CSSやコンポーネントを修正してくれます。修正案はGitのDiffのように表示され、Accept ボタン一つで適用可能です。

4. 応用：「動画」で指示を出す

Antigravityのさらに強力な機能が、Screen Recording（画面録画）による指示出しです。

静止画では伝わりにくいインタラクションや、複数のページにまたがるフローを修正したい場合、ブラウザ操作を録画してAIに渡すことができます。例えば、「スクロールした時のヘッダーの動きがおかしいから直して」といった指示も、動画を見せることで一発で伝わります。

ワークフローの例

Antigravity上で「録画モード」を開始。
ブラウザで実際に操作を行い、修正したい箇所や追加したい挙動を実演する。
録画を終了し、「この動画のように動くコンポーネントを追加して」と指示。

動画では、この機能を使って「Testimonials（お客様の声）」セクションを追加するデモが行われています。AIは動画内のUIデザインを読み取り、それに近いデザインのコード（Glassmorphismなど）を生成しました。

5. まとめ

Google Antigravityは、コードを書く時間よりも「どんな体験を作りたいか」をAIに伝える時間を重要視するツールです。特にブラウザ拡張機能との連携による視覚的なデバッグと開発は、今後のWeb開発のスタンダードになる可能性を秘めています。

まだベータ版特有のバグや動作の重さはありますが、Googleのエコシステム（Chrome, Gemini, Project IDX）が統合された時の破壊力は計り知れません。ぜひ今のうちに触って、AIを「同僚」にする感覚を掴んでおきましょう。

【免責事項】本記事は、AI技術を用いて作成された部分を含みます。公開時点の情報に基づいていますが、AIの仕様変更やサービスの更新により、内容が現状と異なる場合があります。最新の情報は公式サイト等でご確認ください。