Google Stitch→AI StudioでWebサイトデザインから公開まで全部試してみた
最近の Google のツール群が面白いことになっていたので、実際にサイト制作の一連の流れをやってみました。
今回試したのは、Google Stitch で画面デザインを作成 → Google AI Studio にエクスポート → Google Cloud（Cloud Run）で公開という、デザインから本番公開まで全部 Google のブラウザツールで完結するワークフローです。
Antigravityと統合されたGoogle AI Studioとはなにか
まず前提として、最近 Google AI Studio は大きく変化しています。
もともと AI Studio は「Gemini を試すためのプレイグラウンド」的な位置づけでしたが、2026年初頭に Antigravity のコーディングエージェント機能と Firebase 連携が AI Studio に統合されました。
Antigravity とは、Google が提供するエージェント型コーディング IDE です。
AI が計画・実装・テスト・デプロイまで自律的に担うことを前提に設計されており、VS Code 派生のデスクトップ版と、AI Studio に統合されたブラウザ版があります。
統合によって何が変わったかというと、AI Studio 上で「こういう Web アプリを作って」とプロンプトを書くと、Antigravity エージェントが UI・ロジック・Firebase バックエンドまで一気に組んでくれるようになりました。
これにより、「試す場所（AI Studio）」と「任せる場所（Antigravity IDE）」の距離が縮まり、ブラウザだけでかなり本格的な Web アプリや LP が公開できる環境になっています。
デスクトップ版AntigravityとAI Studioの関係
注意点として、「デスクトップの Antigravity IDE と AI Studio がリアルタイムで連携する」ようになったわけではありません。
正確には、AI Studio 側に Antigravity のエージェント技術が組み込まれたのが今回の統合の実体で、プロジェクト単位での相互移行（AI Studio → Antigravity IDE）はサポートされていますが、同一プロジェクトを同時に両方で開いて双方向同期するような機能ではありません。
Google Stitchとはなにか
Google Stitch は、Google Labs が提供する AI ネイティブの UI デザインツールです。
テキストで「こういうページを作りたい」と入力するだけで、Web・モバイルアプリ向けの画面デザインと HTML/CSS コードを自動生成してくれます。
2025年5月に Google I/O で発表され、2026年3月の大幅アップデート（Stitch 2.0）で最大5画面の同時生成や無限キャンバス上での画面フロー設計が可能になりました。
現在は完全無料（Standardプランで月350回、Experimentalプランで月200回）で使えます。
StitchからAI Studioへのエクスポートの流れ
Stitch のキャンバス画面でデザインが完成したら、右上の「エクスポート」ボタンから「AI Studio」を選びます。
クリックすると Google AI Studio がブラウザで開き、次の3つのファイルが自動的にセットされた状態で立ち上がります。
- デザイン画像（.png）：Stitch で生成した画面のスクリーンショット
- HTML/CSSコード（.html）：Stitch が生成したフロントエンドコード
- マークダウンファイル（.markdown）：画面の構成説明
さらに「このような画面のアプリを作成して」というプロンプトまで自動入力されており、あとは AI Studio 側で「生成」を押すだけで Antigravity エージェントが実装を開始します。
AI Studioで何が起きるか
AI Studio 側では、Antigravity エージェントが Stitch のデザインを受け取り、静的な HTML を「実際に動く Web アプリケーション」に変換します。
つまり役割分担はこうなっています。
| ツール | 役割 |
|---|---|
| Google Stitch | 画面レイアウト・デザインのたたき台を作る |
| Google AI Studio（Antigravityエージェント） | Stitch のデザインを土台に実装・調整・デプロイへ進める |
| Google Cloud（Cloud Run / Firebase） | 公開されたサイトが実際に動く本番環境 |
この統合により、デザイン → コーディング → 調整 → デプロイの流れをブラウザだけで一気通貫で回すことができます。
Google Cloudプロジェクトで公開するとどういう状態になるか
AI Studio 内で「デプロイ」を実行すると、自分の Google Cloud プロジェクトを選択する画面になり、Cloud Run か Firebase Hosting 上にサービスが立ち上がります。
これは AI Studio 上の「仮のプレビュー」ではなく、自分の GCP プロジェクトのリソースとして実際に動いている本番サイトという状態です。
URL（*.run.app 形式）も払い出され、ブラウザから直接アクセスできます。
Cloud Run・Firebase・Firestore それぞれの役割は次の通りです。
| サービス | 役割 |
|---|---|
| Cloud Run | コンテナ化したアプリをサーバーレスで動かす実行環境 |
| Firebase | 認証・ホスティング・DBなど、アプリのバックエンド一式を提供するプラットフォーム |
| Firestore | Firebaseに含まれるNoSQLドキュメントデータベース |
https://trustdental-implants-462687765560.asia-east1.run.app
入力データは学習に使われるのか？
ここ、実際に気になる人が多いと思うので整理しておきます。
結論から言うと、個人の Google アカウントで AI Studio（Web UI）や Antigravity（個人プラン）をそのまま使っている場合は、入力したプロンプトやコードは、モデル改善・学習に使われる前提と考えた方が安全です。
AI Studio の無料 Web UI は、Google の規約上「Unpaid Services」扱いで、「送ったコンテンツや応答を Google 製品・ML 技術の改善に使う」と明記されています。
Antigravity も個人プランでは、IDE 内での操作・プロンプト・コードをまとめて「Interactions」と呼び、サービス改善やモデルの評価・開発のために収集・利用すると説明されています。
一方で、GCP プロジェクトを課金有効化して使う（Paid Services）場合や、Workspace 経由でアクセスする場合は「顧客データはグローバルモデルの訓練には使わない」という企業向けのデータガバナンスが効くようになります。
| 利用形態 | 学習への利用 |
|---|---|
| 個人Gmail + AI Studio 無料UI | 利用される前提 |
| 個人Gmail + Antigravity 個人プラン | 利用される前提 |
| GCP課金有効化 + Vertex AI / API | 訓練に使われない |
| Workspace + GCP経由 | 訓練に使われない |
機密性の高いプロジェクトや業務利用の場合は、GCP の課金有効化 + Vertex AI / Gemini API 経由に切り替えるのが無難です。
課金周りで最初に焦ったこと
公開後に GCP の課金設定を確認したら、自分の Google Cloud プロジェクトに課金アカウントが紐づいていました。
自分で設定した覚えがなかったのですが、GCP の仕様として「課金アカウントが1つだけある場合、新規プロジェクトに自動でリンクされる」ことがあるためです。
また、AI Studio から Cloud Run にデプロイする流れ自体が、Billing が有効なプロジェクトを前提にしています。
焦りながら課金レポートを確認したところ、Cloud Run の利用項目は出ていたものの請求額は 0 円。
Cloud Logging 側にも費目は見当たらず、無料枠の範囲内で収まっていた形です。
- リクエスト：200万回/月
- vCPU秒：18万秒/月
- メモリ秒：36万 GiB秒/月
LP1本のテスト公開程度であれば、ほぼ無料枠の範囲で収まります。
サービスを止めたいときの手順
Cloud Run には「一時停止」ボタンがないため、止めたい場合は次のいずれかになります。
- 完全に要らないなら → サービス削除
Cloud Run コンソール → 対象サービスを選択 → 「削除」 - また使うかも → スケーリングを手動で「0」に設定
サービス編集 → スケーリング → 手動スケーリング → 最大インスタンス数を 0 に設定 - 外部アクセスだけ遮断したい → allUsers の Invoker 権限を削除
課金リスクが不安なら、GCP コンソールの「予算とアラート」で月額上限を設定しておくと安心です。
やってみて感じたこと
今回の流れを試して感じたのは、「AI Studio は単体でゼロから作る場所」というよりも、Stitch でデザインを先に固めてからコーディングと公開に進むワークフローの入口として使う方がかなり合っている、ということです。
Stitch でページ全体のデザインを先に組んでしまい、それを AI Studio 側でコード化して調整していく流れは、プロンプトだけでゼロから手探りで作っていくより、意図通りの画面に近づきやすいです。
デザイン → コーディング → 本番公開の一連を、ブラウザと Google アカウントだけで完結できるのは、アイデア検証や LP 制作においてかなり実用的な選択肢になってきています。
ただし、個人アカウントでの利用は入力データが学習に使われる前提があること、GCP プロジェクトへの課金アカウント自動紐づけのリスクは、あらかじめ理解しておくと安心です。