AI
  • #Antigravity
  • #Gemini

Google Antigravityで『本屋の新刊棚のようなサイト』を作ってみた

公開日

更新日

Google Antigravityで『本屋の新刊棚のようなサイト』を作ってみた

はじめに

最近はClineなど、AIを活用した開発支援ツールが次々と登場しています。
その流れで気になったのが、Googleの Antigravity です。

「本屋の新刊棚みたいに見えるWebサイトを作って」

今回の検証は、この一言をAntigravityに投げてみるところから始めました。
普段なら要件整理や技術選定から入りますが、今回はそこをなるべく省いてAIにどこまで任せられるかを見ています。

結論として、プロトタイプの立ち上げはかなり速いです。
AIが計画→実装→テストまで進め、人間はレビューと方向修正に寄せられる感覚がありました。

想定読者

本記事は、以下のような方を想定しています。

・AI開発ツールに興味はあるが、まだ本格的には使ったことがない方

・既存のAI開発ツールとの違いが気になる方

Antigravityとは何か

Antigravityが他のAI開発ツールと異なると感じた一番のポイントは、AIがブラウザを操作してくれることです。
実装して終わりではなく、AIがページを開いて、スクリーンショットや録画といった見て確認できる証拠(Artifacts)を残してくれます。

ここは、ClineやCodexと体感が変わります。
Clineもターミナル操作やブラウザ作業はできますが(必要に応じて指示して使うイメージ)、基本の流れとしては「AIが書く → 人間が表示確認 → 直してもらう」になりがちです。

一方Antigravityは、表示確認(ブラウザ)までを最初から工程に含めているので、「崩れてる」「想像と違う」を潰しやすい作りになっています。

UIはVisual Studio Codeに非常に近いです。
普段VS Codeを使っている方であれば、操作に迷うことはほとんどありません。

無料で使える点について

2025年12月時点では、Antigravityはパブリックプレビューとして提供されており、
Googleの最新モデル Gemini 3 Pro を無料枠で利用できます。

利用回数や連続使用時間に一定の制限はあるものの通常の試用や学習用途であれば、
「ほとんど止まらずに使える」という印象でした。

実際に使ってみた内容

今回は試しに、以下のような簡単なWebページを題材にしました。

・「本屋の新刊棚」のように、新刊書籍を一覧表示するページ
・フロントエンドのみで完結
・書籍データは、GooglebooksAPIのAPIを利用

AIへの指示は大まかに、次の3点だけです。

・新刊が一覧で見られること
・表紙が並んで表示されること
・技術選定や実装方法はAIに任せること

この題材を選んだ理由は、

・API仕様の検索能力
・デザイン構成
・技術選定

を確認するためです。

Antigravityは、実装後に 自動でブラウザ操作する点が強く、ここが既存のAIコーディング支援と体験が変わるポイントだと考えました。

実際に作成した画面

まとめ

Antigravityを触ってみた第一印象として、

AIがエディタ内に留まらず、ブラウザまで触って表示確認できる
・スクリーンショット等のArtifactsで結果を見て判断しやすい
・そのためWebフロントの試作では、修正のループを回しやすい

という点が特に印象的でした。

SHARE on

この記事を書いた人

ishida

主にシステム開発業務に携わっています。 生成AIを中心に実際に触りながら学び中です。