はじめに
Google が 2025-11-18（米国時間）に発表した AI エディタ、「Antigravity」を使って、実際に「AIチャットアプリ」を開発してみました。
本記事では、拡張機能である Antigravity Browser Extension を利用した体験も踏まえて簡潔にまとめています。
Chrome拡張機能を利用したUI修正のデモ動画
Google Antigravity とは何か
Google が 2025-11-18（米国時間）に発表した、エージェントファースト（agent-first）の開発プラットフォームです。
開発者が直接コードを書く “従来の IDE” ではなく、AI エージェントを指揮・監督し、エージェントが自律的に「計画 → 実装 →検証」までを遂行する新たなワークフローを実現しています。
主な特徴
-
エージェントファースト開発体験
開発者は“指示”を出すだけで、エージェントが計画を立て、コードを記述・実行・検証します。エディタ・ターミナル・ブラウザを横断してタスクを自律的に遂行する点が特徴です。 -
マネージャービューとエディタビュー
「マネージャービュー」では、複数ワークスペース・複数エージェントを一元管理し、各エージェントの進行状況や成果物を俯瞰できます。
「エディタビュー」では、従来のコード編集画面に近い操作感の中で、エージェントとの対話や修正も行えます。 -
作業の可視化（Artifacts）
エージェントが生成する「タスクリスト」「実装プラン」「スクリーンショット／録画」「コード差分」などの成果物を自動で保存・表示。開発者は作業の履歴や検証を容易に確認でき、信頼性の高い “検証可能な成果物” を得られます。
詳細は「Antigravity」を参照ください。
実践
1.インストール/起動
Antigravity は 公式サイト からダウンロードできます。諸々の設定をして起動。VSCode のフォークなので見慣れた画面構成です。
Model は下記から選択可能です。 もちろん、Gemini 3 も利用できます。
Conversation Mode では、以下の2つのモードを切り替えることができます。
- Planning: 複雑なタスクや調査、共同作業向け。実行前に計画を立てます。
- Fast: シンプルなタスク向け。直接タスクを実行し、素早く完了させます。
2.「Open Agent Manager」から「Agent Manager」を起動
Antigravity には複数エージェントや複数ワークスペースを束ねて管理できる「Agent Manager」が存在します。
ここから新規プロジェクトを開始したり、別ワークスペースのタスク状況を一覧で確認できます。
3.指示を入力
エージェントに対し以下の 1 文だけを入力しました。
「AI ハムスターと会話できるチャットアプリを作成してください。」
するとエージェントは下記を実行しました。
- プロジェクト初期化
- Next.js + Tailwind CSS の構成生成
- 画面レイアウト作成
- Chat UI コンポーネント構築
- API Route による簡易チャットロジックの生成
- ローカル開発サーバーの起動
また、左側ではリアルタイムに "実際にエージェントが実行している内容" を確認でき、
右側の Task パネル ではエージェントが自律的に作成した タスク分解 がチェックリストとして表示されます。
どの工程を実行しているのかが一目で分かります。
※AIチャットに必要なGEMINI_API_KEYの設定だけは手作業で行いました。
4.実装が完了すると Chrome でアプリが起動
この時に Chrome 拡張機能である Antigravity Browser Extension をインストールしました。
視覚的フィードバックやユースケースについては公式サイトの下記もご参考ください。
Why frontend developers choose Google Antigravity
実際にチャットができるか試してみるとちゃんと応答が返ってきます。
5.追加の指示を入力
「AI キャラクターの名前をハム次郎にしてください。途中経過をスクショで記録してください」
Chrome 上でアプリが起動し、修正していく様子をリアルタイムで確認できました。
また、Playback available と表示されていたので「View」をクリックすると右側で AI が実施した実際の動作確認のキャプチャを見ることができました。
このキャプチャはArtifactとして保存されています。
Editor／Terminal／Browserをまたぐ作業が実現されていることがわかります。
追加の実装が完了すると、Walkthrough が作成され、指示した通りにキャプチャも一緒に保存してくれました。
6.ArtifactからUIの修正を依頼
2025/11/19 19:58 追記
作成したArtifactは画面の右に一覧表示することが可能です。
UI上で修正したい箇所がある場合、そのArtifactの画面キャプチャを選択、変更したい箇所をドラッグし、コメントをすることでその要望が反映されます。
①変更したい箇所をドラッグ選択
②変更したい内容をコメント
絵文字の表示位置についてコメント
吹き出しの色も変えてほしいのでコメント
③コメント内容通りに実装される！
2025/11/19 23:50 追記
ドラッグして対象箇所のUIを修正する方法ですが、生成された単一の画像にも利用でき、綺麗に修正してくれるようです。
カップケーキの箇所を選択、コメントを入力して修正依頼を実施
なお、Antigravity の画像生成や画面モック制作はNanoBanana（Gemini 2.5 Flash Image） モデルが担当しているとのことです。
Welcome to Google Antigravity 🚀
→1:48-1:52
Nano banana: Used by the generative image tool, when the Agent wants to produce a UI mockup or needs images to populate a web page or application.
Gemini 2.5 Pro UI Checkpoint: Used by the browser subagent to actuate the browser, such as clicking, scrolling, or filling in input.
Gemini 2.5 Flash: Used in the background for checkpointing and context summarization.
Gemini 2.5 Flash Lite: Used by the codebase semantic search tool.
7.Task と Walkthrough の保存先について
Antigravity では、エージェントが実行したタスクや生成された Walkthrough は、ユーザーのホームディレクトリ配下の隠しフォルダ .gemini 内に自動的に保存されます。
具体的には、以下のパスに保存されていることが確認できました。
-
保存場所:
~/.gemini/antigravity/brain/<session_id>/-
task.md: タスクリストと進捗状況 -
walkthrough.md: 作業の記録（スクリーンショットや録画へのリンク含む） -
implementation_plan.md: 実装計画書
-
これらのファイルは Markdown 形式で保存されているため、エディタ外でもテキストとして確認したり、Git で管理することも可能です
キャプチャについては~/.gemini/antigravity/browser_recordings/<session_id>/にありました。
もちろん、Antigravity 上の Task パネル や Agent Manager からもこれらを視覚的に確認・管理できます。
気づき・良かった点
-
タスクの可視化がスムーズ:
エージェントの進捗が一目でわかる。Task パネルでタスク分解の様子がリアルタイムで確認でき、どの工程を実行しているのかが明確。 -
自動化された作業フロー:
ブラウザ操作・スクリーンショット取得・Walkthrough 生成など、通常手作業で煩雑な工程が補助される感覚。エージェントが自律的にテストや検証まで行ってくれる。 -
作業履歴の保存:
Task や Walkthrough が自動的に保存され、後から確認できる。複数のプロジェクトやワークスペースを Agent Manager で一元管理できる。 -
シンプルな指示で完結:
1 文の指示だけで、プロジェクト初期化から開発サーバー起動まで自動で実行される。技術的な詳細を気にせず、やりたいことだけを伝えれば良い。 -
視覚的なフィードバックが強い
ブラウザ操作や UI の変化がスクショや録画で即確認でき、ドラッグ＋コメントだけで UI 修正を依頼できる。
おわりに
AI エージェントが何をやっているのかの確認が格段にわかりやすくなったと感じます。
タスク分解と進捗状況がリアルタイムで反映されていくのはみていて気持ちよかったです。
フロントエンド開発においては、ブラウザ操作やスクリーンショット取得など、視覚的なフィードバックが重要な工程も自動化されるため、開発効率が向上する可能性はあるなと感じました。
まだ機能を使いきれていないところもあるため、引き続き普段使いしているCursorなどと比較しながら使用してみようと思います。
皆さんもぜひ、Antigravity を一度試してみて、ご自身の開発ワークフローにどう馴染むかを検証してみてください。
参考資料
- Antigravity - 公式サイト - Google の AI エージェントファースト開発プラットフォーム
- Why frontend developers choose Google Antigravity - フロントエンド開発者向けのユースケース
- A new era of intelligence with Gemini 3 – Google Blog - Gemini 3 の発表と Antigravity の紹介
- Google Antigravity introduces agent-first architecture for asynchronous, verifiable coding workflows – VentureBeat - Antigravity のアーキテクチャについての解説
- Antigravity Is Google's New Agentic Development Platform – The New Stack - プラットフォームとしての Antigravity の詳細