コードゼロで不動産サイトを3ページ公開した話 — Google Stitch × Antigravity × MCP

はじめに

「AIを使えばサイト制作が爆速になる」という話は以前から耳にしていたが、実際に試したことはなかった。今回、社内の検証として Google Stitch と Google Antigravity を組み合わせ、MCPを使ってデザインから公開まで一気通貫でやってみた。

題材はシェアハウス物件サイト。トップページ・物件一覧・物件詳細の3ページ構成だ。

結論から言うと、HTMLもCSSも一行も書かずに、3ページのWebサイトを公開することができた。

使ったツール

Google Stitch

テキストでUIのデザインを説明するだけで、HTML/CSSのコードを自動生成してくれるGoogleのAIデザインツール。現在はベータ版として無料で利用できる。

Google Antigravity

GoogleのAIエージェント型IDE。VS Codeをベースに構築されており、AIエージェントが自律的にコードの作成・実行・デプロイまでをこなしてくれる。現在はパブリックプレビューとして無料で利用可能。

MCP（Model Context Protocol）

異なるAIツール同士をつなぐプロトコル。今回はStitchとAntigravityをMCPで接続することで、「Stitchで生成したデザインをAntigravityが直接取得してデプロイする」という連携を実現した。

全体の流れ

Step 1：Stitchで3ページのデザインを作る

https://stitch.withgoogle.com にアクセスし、「ウェブ」タブを選んでプロンプトを入力するだけでデザインが生成される。今回は以下の3ページを作成した。

ページ	内容
ホーム	キャッチコピーと検索UIを備えたトップページ（検索機能はデザインのみ）
物件一覧	物件一覧ページ（絞り込みUIはデザインのみ、動作しない）
物件詳細	個別物件の詳細情報・内覧申し込みページ

各ページごとにプロンプトで指示を出し、30秒〜1分でデザインが生成される。気に入らない部分はチャットで追加指示を出して修正できる。

スクリーンIDのコピー方法

後でAntigravityからデザインをMCP経由で取得するために、スクリーンIDが必要になる。

デザインを選択した状態で画面右上の「エクスポート」→「MCP」を選ぶと、以下のような形式でテキストが表示される。これをそのままコピーしておく。

このテキストは後のステップでそのままAntigravityに貼り付けて使う。

Step 2：Antigravityをインストールする

https://antigravity.google からMac用のインストーラーをダウンロードする。Apple SiliconとIntelで別々のインストーラーが用意されているため、自分のMacに合ったものを選ぶ。

インストール後の初期設定は以下の通り。

設定項目	選択肢
Setup flow	`Start fresh`
Agent mode	`Review-driven development`（推奨）
Keybindings	`Normal`

Step 3：Firebaseプロジェクトを作成する

https://console.firebase.google.com にアクセスし、新規プロジェクトを作成する。プランはSparkプラン（無料）で十分。作成後、⚙️「プロジェクトの設定」からプロジェクトIDを確認しておく。

Step 4：AntigravityにStitch MCPを設定する

ここが今回の肝となる部分だ。

StitchのAPIキーを取得してAntigravityに設定するだけで、AIエージェントがStitchのデザインデータに直接アクセスできるようになる。

右側Agentパネルの「…」→「MCP Servers」→ stitch で検索 → Install
https://stitch.withgoogle.com/settings でAPIキーを作成してコピー
AntigravityのAPIキー入力欄に貼り付けて「Save」
ステータスが「Enabled」になれば設定完了

Step 5：Antigravityにデプロイを指示する

Antigravityの右側チャット欄（Ask anything...）に以下を入力して送信する。

以下のStitchのデザインを取得して、Firebase Hostingプロジェクト「[FirebaseプロジェクトID]」にデプロイしてください。

（StitchのエクスポートでコピーしたMCPテキストをそのまま貼り付ける）

保存先：
- ホーム → public/index.html
- 物件一覧 → public/list.html
- 物件詳細 → public/detail.html

既存ファイルはすべて上書きして firebase deploy --project [FirebaseプロジェクトID]

あとはエージェントが自動で：

Stitch MCPから3ページ分のデザインデータを取得
各HTMLファイルを public/ 以下に保存
firebase deploy を実行してデプロイ

まで完了し、最後に公開URLを教えてくれる。

プロンプトは日本語でOK。 AntigravityはGeminiベースのため、日本語の指示もそのまま理解してくれる。英語で書く必要はない。

完成したサイト

キャッチコピーとエリア検索欄を備えたトップページ、絞り込み機能つきの物件一覧、詳細情報と申し込みフォームを含む物件詳細ページが揃った本格的なサイトが完成した。

ページ	URL
トップ	`https://[プロジェクトID].web.app/`
物件一覧	`https://[プロジェクトID].web.app/list.html`
物件詳細	`https://[プロジェクトID].web.app/detail.html`

やってみてわかったこと

よかった点

StitchのMCPコピーがそのまま使える。エクスポートしたテキストをAntigravityに貼り付けるだけで、複数ページを一括取得してデプロイしてくれる
プロンプトは日本語でOK。英語で書く必要がなく、日本語で「〇〇してください」と書けばそのまま動く
3ページ同時デプロイも一発。1ページずつ指示しなくても、まとめて指示するだけで全ページが公開される
スマートフォン表示にも自動対応。Stitchが生成するHTMLはレスポンシブデザインになっており、PCとスマホ両方で崩れずに表示された
すべて無料。Stitch・Antigravity・Firebase Hosting（無料枠内）の組み合わせでコストゼロ

ハマりどころ

Antigravityがクラッシュすることがある。パブリックプレビュー段階のため不安定な場合があるが、左下の「Reload」ボタンで再起動すれば復旧する
同じFirebaseプロジェクトに再デプロイすると既存サイトが上書きされる。別のサイトを同じプロジェクトにデプロイすると前のサイトは見えなくなるため、サイトごとにFirebaseプロジェクトを分けることを推奨
デプロイ後にブラウザキャッシュが残ることがある。古いデザインが表示される場合は ⌘ + Shift + R でキャッシュクリアを試す

まとめ

Google Stitch × Antigravity × MCPの組み合わせは、デザイン → コード → デプロイの工程を劇的に短縮する可能性を持っている。特に「StitchのMCPエクスポートをそのまま貼り付けるだけ」という操作感は非常にシンプルで、エンジニアでなくても扱えると感じた。

LPや物件サイトのプロトタイプをこの仕組みで内製化できれば、コストとスピードの両面で大きなメリットがある。今後はお問い合わせフォームの実装や、CMSとの連携なども検証していきたい。

参考リンク

Google Stitch
Google Antigravity

Firebase Hosting ドキュメント