はじめに
Google が 2025-11-18（米国時間）に発表した AI エディタ、「Antigravity」を使って、実際に「AI チャットアプリ」を開発してみました。
本記事では、拡張機能である Antigravity Browser Extension を利用した体験も踏まえて簡潔にまとめています。
Chrome拡張機能を利用したUI修正のデモ動画
Antigravity とは何か
Antigravity は、Google が 2025-11-18（米国時間）に発表した AI エージェントファーストの開発プラットフォームです。
主な特徴
- エージェントファースト開発体験: 開発者が高レベルの"指示"を出すと、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 パネル ではエージェントが自律的に作成した タスク分解 がチェックリストとして表示されます。
どの工程を実行しているのかが一目で分かります。
4.実装が完了すると Chrome でアプリが起動
この時に Chrome 拡張機能である Antigravity Browser Extension をインストールしました。
視覚的フィードバックやユースケースについては公式サイトの下記もご参考ください。
Why frontend developers choose Google Antigravity
実際にチャットができるか試してみるとちゃんと応答が返ってきます。
5.追加の指示を入力
「AI キャラクターの名前をハム次郎にしてください。途中経過をスクショで記録してください」
Chrome 上でアプリが起動し、修正していく様子をリアルタイムで確認できました。
また、Playback available と表示されていたので「View」をクリックすると右側で AI が実施している実際のテストの様子を確認することができました。
追加の実装が完了すると、Walkthrough が作成され、指示した通りにキャプチャも一緒に保存してくれました。
6.ArtifactからUIの修正を依頼
2025/11/19 19:58 追記
作成したArtifactは画面の右に一覧表示することが可能です。
UI上で修正したい箇所がある場合、そのArtifactの画面キャプチャを選択、変更したい箇所をドラックし、コメントをすることでその要望が反映されます。（驚き、！）
①変更したい箇所をドラック選択
②変更したい内容をコメント
絵文字の表示位置についてコメント
吹き出しの色も変えてほしいのでコメント
③コメント内容通りに実装される！
2025/11/19 23:50 追記
ドラッグして対象箇所のUIを修正する方法ですが、生成された単一の画像にも利用でき、綺麗に修正してくれるようです。
カップケーキの箇所を選択、コメントを入力して修正依頼を実施
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 文の指示だけで、プロジェクト初期化から開発サーバー起動まで自動で実行される。技術的な詳細を気にせず、やりたいことだけを伝えれば良い。
おわりに
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 の詳細