はじめに
はじめまして！@HirokiLucky24です！この記事はいろいろやってみる Advent Calendar 2025の 3 日目の記事です。今回はひとりアドカレを初めてやってます！自分の興味があることをとにかくいろいろやってみる記事を書いています
先日、Google Japanのこちらの投稿が話題になっていましたね。
雪以外にもエレベーターやフィギュアなど様々なものがあり、画像合成技術の進化を感じました
これが面白そうだったので今回はGoogle DeepMindが発表した新しい「Agent-First」IDEである Antigravity を使って、似たようなAI着せ替えアプリを開発してみました(Gemini3君が)
その体験と技術的な内容をまとめます。
1. Antigravityとは
Google Antigravity は、単なるコード補完ツールを超えた、AIエージェントと協働するための統合開発環境（IDE） です。
最大の特徴は Agentic Mode です。
- Planning: ユーザーの要望から実装計画を立てる
- Execution: ファイルの作成・編集、ターミナルコマンドの実行
- Verification: ブラウザを使った動作確認やエラー修正
これらを自律的なループ（Loop）で回し、開発者の指示（プロンプト）を高いレベルで実行してくれます。裏側では Gemini 3 Pro が動いており、長大なコンテキスト理解とマルチモーダル能力を発揮します。
2. AntiGravityのダウンロード
Antigravityは現在プレビュー段階です（※執筆時点）。
Google Antifravity の公式サイト でダウンロードできます。
インストール後は、VS Codeベースの親しみやすいUIながら、右サイドバーに強力な「Agent Interface」が統合された環境が立ち上がります。
3. Google Cloudで無料枠を受け取る
今回のアプリ開発では、画像生成に Gemini API を使用します。
これを利用するには、Google AI Studio (旧 MakerSuite) でAPIキーを取得する必要があります。
- Google AI Studio にアクセス。
- Googleアカウントでログイン。
- 「APIキーを作成」から新しいキーを作成。
- 「お支払い情報を設定」を行って無料枠からTier1にする ( 無料 )
またAPIは無料枠ではなく、画像のように「300ドル分のクレジットをもらう」「APIを使うため」に「お支払い情報を設定」( 無料 )は必ずしましょう
APIを使わない開発なら 無料枠（Free Tier）で十分試すことができます。今回は gemini-3-pro-previewとgemini-3-pro-image-preview の最新モデルを使用しました。（下記参照）
4.このアプリの作り方
このサイトは以下のプロンプトを書いただけで環境構築からコードの実装まで、そのプロセスのほぼ全てをAIが自律的に行ってくれました。環境構築までしてくれるのは正直驚いた...
ユーザーが自分の人物写真をアップロードすると、その人物の姿勢・肌色・ライティングを保持したまま、指定した服・靴・小物を“実際に着たらどう見えるか”高精度に合成・レンダリングして複数候補の画像を生成して表示するWebアプリを作成してください
しかし、他の記事でも見た気がするのですが、「Nanobanana使って」はあまり把握できないようで、Gemini 3で生成する画像はNanobanana Pro を使っているそうです。そのためモデル選択はちゃんと確認したほうが良さそう
また、使用できるモデルも「Gemini3使って」と言っても理解できず、Gemini2.5やGemini1.5とかを勧められるので、上記3番に乗っているのモデルの公式サイトを参照してそこだけ手動で設定した方が良さそうです
4. このサイトについて
今回作成したのは、「人物画像」と「衣服画像」をアップロードすると、その人がその服を着ている画像を生成するWebアプリ です。なんも言ってないのにデザインもめっちゃ良い...
技術スタック
- Frontend: Next.js (App Router), Tailwind CSS
- Backend: Next.js Route Handlers
-
AI: Google Gemini API
-
gemini-3-pro-preview: 画像を解析し、画像生成用のプロンプトを作成 -
gemini-3-pro-image-preview(Nanobanana Pro): プロンプトから画像を生成
-
仕組み
- ユーザーがフォームから2枚の画像をアップロード。
- サーバーサイドで画像をBase64に変換。
- Gemini 3 Pro に画像を渡し、「この人物がこの服を着ている様子を描写するプロンプトを作って」とAIが依頼。
- 生成されたプロンプトを Gemini 3 Pro Image Preview に渡し、画像を生成。
- 生成された画像をフロントエンドに表示。
// プロンプト生成部分の抜粋
const model = genAI.getGenerativeModel({ model: "gemini-3-pro-preview" });
const prompt = "You are a fashion assistant... (中略) ...output ONLY the prompt string.";
const result = await model.generateContent([
prompt,
{ inlineData: { data: personBase64, mimeType: person.type } },
{ inlineData: { data: garmentBase64, mimeType: garment.type } },
]);
const generatedPrompt = result.response.text();
// 画像生成部分の抜粋
const imageModel = genAI.getGenerativeModel({ model: "gemini-3-pro-image-preview" });
const imageResult = await imageModel.generateContent(generatedPrompt);
5. 画像生成してみる
実際にアプリを動かしてみます。
- 人物画像（全身が写っている写真）を選択。
- 衣服画像（着せたい服の写真）を選択。
- 「Generate」ボタンをクリック。
実行結果
開発中は、APIのクォータ制限（429 Too Many Requests）や、モデルの過負荷（503 Service Unavailable）に何度か遭遇しました。特に最新の画像生成モデルは人気が高く、リクエストが集中することがあるようです。
しかし、成功した時は驚くほど自然な「試着画像」が生成されます。人物のポーズや体型を維持しつつ、衣服の特徴が反映される様子は、まさにGenerative AIの真骨頂です。
6. まとめ
Google Antigravityを使って開発することで、コーディングの体験は大きく変わりました。
「コードを書く」時間よりも、「AIに何をさせるか設計する」「AIが作ったものをレビューする」時間が増えました。正直自分なんにもしてない...
また、Gemini APIのマルチモーダル能力を簡単にアプリに組み込めるのも魅力です。
今回は「着せ替え」というタスクでしたが、アイデア次第で様々な画像処理・生成アプリが作れそうです。
こんな感じのサイトが一瞬で作れてしまうのでみなさんもぜひ、AntiGravityとGemini APIで新しい開発体験を試してみてください。