「頭の中にサービスのアイデアはあるが、自分でコードを書くのは……」
そんな課題に、これまで多くの企画者やマーケターが直面してきました。ですが2026年現在、そのハードルは確実に下がりつつあります。そこで、このブログでは、AI画面設計ツール「Google Stitch」と、AIアプリ開発環境「Google AI Studio」を紹介します。
前編では、２つのアプリの位置づけと、Stitchでの画面デザインの生成方法を解説しました。
ブログ前編はこちら！
【前編】Google Stitch & Google AI Studioで爆速LP制作！Vibe Codingでアイデアを現実に 1. Stitch編
本記事では「Google AI Studio」を使い、直感（Vibe）とAIとの対話だけで約1時間のうちに高品質なプロトタイプを作る 「Vibe Coding」 の手順を、当ブログLP制作を題材に実践的に解説します。
Google AI Studio とは──画面をコードに起こすAI開発環境
Google Stitchで作ったページは、まだモックアップ、つまり静的な画面のままです。これを実際にクリックして動くアプリへ変えるのが、Google AI Studioの役割です。Google AI Studio側でBuild modeでコードとプレビューを確認しながら、対話することで実装を詰めていくというのが主な流れです。
Google AI Studio の利用価格は、生成時に使用するAIモデルにより決まります。Google AI Studio の標準設定で利用できる Gemini API には無料枠がありますが、無料枠の上限を超えた利用や一部の高機能・高性能モデルでは、モデルごとの従量課金が発生します。モデルやモデルに対する料金は都度変わりますので、以下リンクなどで最新の情報をお調べください。
Google StitchからGoogle AI Studioへ書き出す
Google Stitch（以下Stitch）で、画面の文言・画像・レイアウト修正が終わったら、Google AI Studio（以下AI Studio）へ書き出します。
対象画面の ...
メニューから エクスポート を選び、右パネルの AI Studio で構築 を押します。
- 対象画面を選択: 書き出したいアートボード（例: LPトップ、記事詳細）を選択します。
- エクスポート実行:
...→エクスポートを開きます。 - AI Studioへ送信: 右側の
AI Studio で構築をクリックします。 - Build modeで確認: AI Studioが開いたら、生成コードとプレビューを確認し、必要に応じてそのまま追記修正します。
補足として、画像枚数が多い場合は、書き出し完了まで1〜2分ほどかかることがあります（UI上の案内ベース）。
書き出しとシームレスな統合
Stitchで作成したデザインをAI Studioへ渡し、クリックやページ遷移が機能するプロトタイプへ変換します。手順は以下の通りです。
- AI Studio内IDEへのインポート: 前手順、Stitch側で「AI Studioで構築」を押した直後、AI StudioのBuildモードが立ち上がり、Stitchデザインがコードとして生成されます。画像例だとTypescript/Reactのtsxが生成されています。
- Preview: 画面上部Previewボタンを押すと、右側にプレビューが表示されます。
プレビュー操作でアプリに動きを与える
ここから更にVibe Codingで実装していきます。プレビューを直接操作しながら、次の流れで修正を加えます。
- 対象要素の指定: AI Studio右側のプレビューで、動きを追加したいボタンやセクションをクリックして選択します。
- AIチャット（Add to Chat）: 選択した状態でチャットを開き、「この箇所をクリックしたときのモーダルを追加して」などの指示を送ります。
- コードの自動更新: 数秒待つとコードが更新され、プレビューにも自動で反映されます。
AIチャットで実際に行った修正を元に説明すると、見出し画像をクリックすると拡大して表示される機能を実装した際、画像を右クリックして、「この画像をクリックして拡大する機能を実装してください」と指示することで、lightbox風のポップアップ機能を実装してくれました。
完成したプロトタイプと、ここから実運用に至るまでの障壁
わずか1時間足らずで、PCでもスマホでもスムーズに動作するLPプロトタイプを作成できました。
ですが、プロトタイプが動いても、そのまま本番公開できるわけではありません。
「動く画面」を得るハードルは下がりましたが、「事業で継続運用できるプロダクト」にするには、次の工程が必要です。
AIが得意なのは、主に目に見えるフロントエンドの構築です。実運用には、以下の「見えない領域」の設計が欠かせません。
- セキュリティ: 認証、権限設計、入力検証、依存ライブラリの脆弱性対策
- インフラ: 独自ドメイン、SSL、可用性設計、監視、アクセス急増時の耐障害設計
- SEO/LLMO最適化: 検索エンジン・AI回答の上位を獲得するための情報構造設計、キーワード設計、メタ情報管理
- 運用: CMS（WordPressなど）連携、更新フロー、障害時対応手順
これらは、AI生成コードを配置するだけでは到達できない、実務の要所です。これらのビジネスに関わる領域については、AI伴走を前提とした計画から構築、長期運用タームまで連携できる経験豊富なAIベンダーと協業することが重要です。
AIが生んだ種を、大きな果実に。
「自社ブランドに合わせたセキュアなインフラを整えたい」「試作から本番運用への移行を任せたい」
そのような課題をお持ちの企業様は、ぜひ株式会社jeki Data-Driven
Labにご相談ください。プロトタイプから本番稼働まで、実務に即して支援します。
付録: Google Stitch / Google AI Studio 競合比較：類似サービスとの違い
最後に、なぜStitchとAI Studioに着目したかを、類似サービスの比較しながら説明します。
デザイン生成サービスにおいて、Stitchは「Googleのエコシステム」と「直感的な微調整」において圧倒的な優位性を誇ります。
AIを使った開発において、AI Studioは「StitchなどGoogleサービスと連携した開発」に向いています。
| AI開発ツール | Google AI Studio | Vercel v0 | Cursor |
|---|---|---|---|
| 強み |
対話型開発 Build Mode 対話で画面を作れる開発環境 |
UI生成 画面案をすばやく生成 React/Tailwindの生成に強い |
AI-IDE 実装・修正を支援 複数ファイルの解析や修正に強い |
| 操作感 |
Stitch生成UIから開発 Googleサービスと親和性大 |
UIの初稿をすばやく作成 | より詳細な開発が可能 |
| 向いている場面 |
Stitchなどモックから 高速試作したい |
UIだけ短時間で出したい | 実装寄りの開発を進めたい |
今回記事のGoogle StitchとGoogle AI Studioとの協業のように、現在AIツールは各社から、あるいはOSSとして、数多くリリースされています。
日進月歩に目まぐるしく変わるAI技術についてのキャッチアップも弊社、株式会社jeki Data-Driven Labの得意分野です。AIにおける最新の潮流や、AIを使った開発、あるいはAI人材などをお探しであれば、ぜひ弊社へお問合せくださいませ。
参考：公式ソース一覧
- Stitch（Google Developers Blog）: https://developers.googleblog.com/en/stitch-a-new-way-to-design-uis/
- Google AI Studio Buildモード: https://ai.google.dev/gemini-api/docs/aistudio-build-mode
- 対応リージョン・年齢要件: https://ai.google.dev/gemini-api/docs/available-regions
- 料金体系: https://ai.google.dev/pricing
- WorkspaceユーザーのAI Studioアクセス: https://ai.google.dev/gemini-api/docs/workspace
- Google Workspace with Geminiのプライバシーとセキュリティ: https://workspace.google.com/security/ai-privacy/
