はじめに

ソーイ株式会社村上です。

AIツール評価の一環として、Googleが提供するAI搭載IDE「Antigravity」を使い、GIFアニメーションを生成するWebアプリケーションを開発しました。

本記事では、Antigravityの特徴（エージェント自律実行／Review機能／ブラウザテスト）と、実際に使ってみて感じた「Kiroとの違い」「ハマったポイント」を、コードとスクリーンショット付きで紹介します。半日でデプロイまで完走できたワークフローを知りたい方におすすめです。

想定読者: AIコーディングツールに興味があるエンジニア。Antigravityまだ触っていない方を想定しています。

Antigravityとは

Google DeepMindが2025年11月にGemini 3と同時に発表した、エージェントファーストのIDE（統合開発環境）です。VS Codeベースの見た目はそのままに、AIがコード補完にとどまらず、設計→実装→ブラウザテスト→デプロイまでを自律的に実行する点がGitHub CopilotやCursorとの大きな違いです。

主な特徴は以下の通りです。

エージェントがエディタ・ターミナル・ブラウザを横断して自律的にタスクを実行
実装計画やスクリーンショットなどの「Artifacts」で進捗を報告してくれる
仕様書に対してGoogleドキュメントのようにコメントでフィードバックできる「Review機能」
Gemini 3 ProやClaude Opus 4.6など複数モデルに対応
無料のパブリックプレビューとして公開中（antigravity.google）

似た立ち位置のツール：AWS Kiroとの違い

以前Kiroの検証記事を行いました。どちらもVS Codeベースで仕様駆動の開発ができますが、設計思想がかなり異なります。比較してみます。

観点	Antigravity	Kiro
開発元	Google DeepMind	AWS
主要モデル	Gemini 3 Pro、Claude Opus 4.6	Claude Sonnet（Anthropic）
設計アプローチ	エージェントが自律的に計画→実装→テストまで実行	スペック（仕様書）を先に生成し、それに基づいてコードを生成
マルチエージェント	最大5エージェント並列実行	シングルエージェント
ブラウザテスト	ブラウザサブエージェントが自動でUI検証	なし（外部ツールで対応）
自動化の仕組み	Skills（オンデマンド読み込み）	Hooks（ファイル保存等のイベントトリガー）
クラウド連携	Google Cloud寄り	AWS MCP Serverで200以上のAWSサービスと連携

ざっくり言うと、Antigravityは「AIにタスクごと任せる自律型」、Kiroは「仕様書をしっかり作ってからコードに落とす設計重視型」です。

開発したアプリ：Cat Meme Generator

作成したGIFサンプルです

今回開発したのは、好きな猫のテンプレートを選び、テキストを入力するだけでGIFアニメーションが生成できるシンプルなツールです。

技術スタック

項目	技術
フロントエンド	React (Vite) + TypeScript
バックエンド	Hono (Cloudflare Pages Functions)
GIF処理	gif.js (Web Workersを利用したクライアントサイド生成)
インフラ	Cloudflare Pages
AIツール	Google Antigravity
AIモデル	Gemini 3 Pro
ランタイム	Node.js 24
デプロイ	wrangler

開発の進め方：Geminiとの「壁打ち」からスタート

今回の開発では、いきなりAntigravityに丸投げするのではなく、事前にGeminiを使って「Antigravityへの依頼プロンプト」を壁打ちして作り込みました。

Geminiで作りたいアプリの構想を相談し、最適な技術スタックを検討。
Antigravityが迷わず動けるよう、要件を整理した高精度なプロンプトを作成。
そのプロンプトをAntigravityに投入。

この「AIとの事前準備」が、その後の爆速開発を支える重要なステップとなりました。

Antigravityの初期設定

今回の開発で使用した設定は以下の通りです。

設定項目	選択した値	理由
開発モード	Agent-assisted development	安全な自動化は任せつつ、重要な変更は確認できるバランス
エージェントモード	Planning mode	実装前に計画を確認できるため、学習目的に最適
ターミナルポリシー	Request review	コマンド実行前に確認を挟んで安心感を確保

プロジェクトルートには以下のAGENTS.mdを配置しました。

AGENTS.mdは、エージェントに対する「プロジェクト固有のルールブック」です。このファイルをプロジェクトルートに置くだけで、エージェントがタスクを実行する際に自動的に読み込み、記載されたルールに従って動作するようになります。グローバル設定（~/.gemini/AGENTS.md）に書けば全プロジェクトに適用、プロジェクトルートに置けばそのプロジェクトだけに適用されます。

今回は日本語での対話や設計書優先の開発フローを徹底させるために、以下のように記述しました。

# AGENTS.md（プロジェクトルートに配置）
- 日本語でコミュニケーションすること
- コードのコメントは日本語で書くこと
- コミットメッセージはConventional Commitsに従うこと
- 仕様書や設計変更は実装前に確認を取ること
- Cloudflare Workersの制約（CPU時間10ms/50ms、メモリ128MB）を常に意識すること
- 常に設計書（仕様書）を修正してから実装を開始するようにルール化すること

このファイルがないと、エージェントはデフォルトの挙動（英語での応答、いきなりコードを書き始めるなど）になります。特に日本語で開発を進めたい場合や、チーム固有のコーディング規約がある場合は、最初に用意しておくことを強くおすすめします。

なぜこの構成を選んだのか

なぜCloudflareか

今回はCloudflare Pagesを選びました。理由は主に3つです。

無料枠が充実している: Cloudflare Pagesは無料プランでも月500回のビルド、無制限のリクエスト・帯域幅が使えます。個人開発やR&D検証で気軽に試せます。
フロントエンドとAPIを1リポジトリで管理できる: Pages Functionsを使えば、静的サイトとサーバーレスAPIを同じプロジェクト内でデプロイできます。AWSのようにS3とLambdaを別々に管理する必要がありません。
エッジでの実行による低レイテンシ: Cloudflare Workersはエッジで実行されるため、ユーザーに近い場所でAPIが動きます。今回のアプリはAPI自体は軽量なので、エッジ実行の恩恵をシンプルに受けられる好例でした。

一方で、Workers固有のCPU時間制限（無料枠10ms、有料枠50ms）やNode.js APIの互換性には注意が必要です。この制約があるため、GIF生成をサーバーではなくブラウザ側で行う設計にしています。

なぜHonoか

Cloudflare Workers上で動くAPIフレームワークとして、軽量なHonoを選択しました。Hono自体がCloudflare Workersをファーストクラスでサポートしており、Pages Functionsとの親和性が非常に高いです。ExpressライクなAPIで学習コストも低く、TypeScriptとの相性も良好です。

gif.js（クライアントサイドGIF生成）

GIF生成はCPU負荷が高いため、サーバー側で行うとCloudflare Workersの制限に引っかかります。これをブラウザ（Web Worker）にオフロードすることで、サーバーコストをゼロに抑えつつスケーラブルな設計にしました。ユーザー数が増えてもサーバー側のリソースを消費しない点がこの構成の強みです。

Antigravityとのペアプログラミング体験

Antigravityは単なるコード補完ではなく、「自律的にタスクを推論して実行する」のが最大の特徴です。今回の開発では、以下のような流れでエージェントと協働しました。

このフロー全体をエージェントが主導し、開発者は各ステップの成果物（Artifacts）を確認してフィードバックを返すだけで開発が進みます。

1. 設計書優先のスタイルと「Review機能」

Antigravityには「実装前に必ず設計書（SPECIFICATION.md）を更新する」というルールを課しました。

特筆すべきは、作成された仕様書に対して「Review機能」を使ってコメントで指示を出せる点です。人間がコードを一行ずつ直すのではなく、仕様レベルで対話し、修正をAIに任せるという体験は非常にスマートで、質の高い成果物につながりました。

2. シームレスな画像生成とバックエンド構築

「HonoでAPIを作って」「Viteのプロキシを設定して」といった一連の作業に加え、アプリ内で使うテンプレート画像もその場でAI生成してくれました。プロンプトから画像アセットまでがシームレスにつながる体験は、エージェントならではの強みです。

// Antigravityが生成したHonoのAPIルーター例
import { Hono } from 'hono'

const app = new Hono()

app.get('/api/templates', (c) => {
  return c.json([
    { id: 'cat_sad', url: '/templates/cat_sad.png', name: 'Sad Cat' },
    { id: 'cat_staring', url: '/templates/cat_staring.png', name: 'Staring Cat' }
  ])
})

export default app

3. GIF生成のコア部分（gif.jsとCanvas API）

フロントエンド側で最も重要なのは、Canvas APIで画像にテキストを合成し、gif.jsでアニメーションGIFに変換する部分です。以下はAntigravityが生成したコードの要点です。

// gif.jsを使ったGIF生成の流れ（簡略化）
import GIF from 'gif.js'

const generateMemeGif = (canvas: HTMLCanvasElement, frames: number) => {
  const gif = new GIF({
    workers: 2,
    workerScript: '/gif.worker.js', // publicフォルダに配置
    quality: 10,
    width: canvas.width,
    height: canvas.height,
  })

  // フレームごとにCanvasの状態を追加
  for (let i = 0; i < frames; i++) {
    drawFrame(canvas, i, frames) // テキストアニメーション描画
    gif.addFrame(canvas, { copy: true, delay: 100 })
  }

  gif.on('finished', (blob: Blob) => {
    // BlobからダウンロードURLを生成
    const url = URL.createObjectURL(blob)
    // ダウンロードリンクを表示
  })

  gif.render()
}

ポイントはworkerScriptのパスです。gif.jsのWeb Workerファイルはバンドラー経由だとうまく動かないことがあるため、public/フォルダに直接配置して参照しています。

ハマったポイントと解決策

1. 無料枠における画像生成のクォータ制限

当初、Antigravityはシームレスに6枚のテンプレート画像を生成してくれました。しかし、その後画像を微調整しようとしたところで、モデルの利用上限（429 Too Many Requests）に達してしまいました。

無料枠では画像生成は多くできないため注意が必要です。画像のようなリソース消費が大きいタスクは優先度を決めて早めに済ませ、後半はコードの修正に集中するのがおすすめです。

2. ブラウザテストのプロトコルエラー

Antigravityのブラウザサブエージェントは、アプリをブラウザで開いてUIを自動検証してくれる便利な機能です。しかし、今回の環境ではChromeのDevToolsプロトコル接続でエラーが発生するケースがありました。

具体的には、Viteの開発サーバーが起動するポートが5173ではなく5174になっていた（既に別プロセスが5173を使っていた）ケースや、プロキシ設定でlocalhostを指定すべきところが127.0.0.1になっていたケースです。

エラーが出た際にはAntigravityのターミナル出力にポート番号やプロトコルエラーの詳細が表示されるので、そこを手がかりに修正しました。ブラウザテスト機能自体はまだ発展途上の印象で、ネットワーク周りの設定に敏感な部分があります。環境固有の問題が起きやすいことを前提に、うまく動かない場合は手動での確認も併用するのが現時点では現実的です。

終わりに

Antigravityを使うことで、環境構築からデプロイまでを半日で完了させることができました。AIは「コードを書く道具」から「プロジェクトを共に進めるパートナー」へと進化していることを実感します。

特に、仕様書へのReview機能を通じた対話や、ブラウザテストの自動化は、従来のAIコーディングツールにはなかった体験でした。一方で、無料枠のクォータ管理やブラウザテストの安定性など、まだ発展途上な部分もあります。

今後もソーイでは、こうした先端技術を取り入れながら、よりクリエイティブな開発を目指していきます。

参考リンク

お知らせ

技術ブログを週1〜2本更新中、ソーイをフォローして最新記事をチェック！
https://qiita.com/organizations/sewii