「試作は早く作りたい。でも、デザインツールの学習に時間はかけたくない……」
「企画会議の前に、まず叩き台を出したいけど時間が……」
エンジニアやプロダクトマネージャーなら、この悩みに覚えがあるのではないのでしょうか。
Googleは2025年から、この課題を解決するツールを2つ公開しました。画面生成に特化した Google Stitch と、AIアプリ開発の統合環境 Google AI Studio です。
本記事では、Googleの最新ツール群「Google Stitch」と「Google AI Studio」を縦横無尽に組み合わせ、一行もコードを手書きせずにLPを開発するまでの全プロセスを徹底解説します。
ブログ後編はこちら！
【後編】Google Stitch & Google AI Studioで爆速LP制作！Vibe Codingでアイデアを現実に 2. AI Studio編
Google Stitch と Google AI Studio の役割
Google Stitch（以下Stitch 公式サイト）は、Google Labsが提供するAI画面設計用ブラウザアプリです。Googleは2025年5月のGoogle I/OでStitchを発表し、2026年3月時点もベータ提供を継続しています。
図: Google Stitch で開発中の画面
一方、Google AI Studio（以下AI Studio 公式サイト）は、Googleモデルでアプリを開発するためのブラウザアプリです。
Google Stitchで作ったデザインを、実際に動作するコードへと昇華させるのが、Google AI Studioの役割です。単なるコードエディターではなく、ブラウザ内でアプリを組み上げるAI統合開発環境です。
図: Google AI Studio で開発中の画面
Google StitchとGoogle AI Studioとの違いは明確です。
Google Stitchが「見た目」、Google AI Studioが「動き」を担当します。
2つのツールを組み合わせた時の開発手順
Google StitchとGoogle AI Studioは、補完関係にあります。Googleエコシステムに入った両者を組み合わせることで高いシナジーを発揮します。
Google Stitch から Google AI Studioにエクスポートするだけで、Google Stitchのデザインを活かしたLP開発に移行できます。
Google Stitchで見た目を固め、Google AI Studioで動作を作る。
これが、爆速LP制作における最大の秘訣です。
Google Stitch とは──テキストから画面を起こす設計環境
この記事では、ここからGoogle Stitch（以下Stitch）にフォーカスを当てて解説していきます。
競合サービスにはないStitchの真髄は、言葉をそのままデザインへと変換する力にあります。特筆すべきは、既存のサイトURLや手書きのメモを読み込ませることで、その文脈を活かしたまま再構築する「Redesign」機能。これにより、言語化しにくいデザインの微細な空気感までもが正確に具現化されます。
各モードの違いと利用制限（2026年3月時点）
現在はGoogle Labsの一部として、無料で開放されています。しかし生成回数には上限があり、Stitch全体で1日150デザインまでとなります。その他、モードごとの主な違いは以下表の通りです。
※制限枠組みなどは定期的にアップデートされるため、最新の仕様については必ずGoogle Stitch 公式サイト等でご確認ください。
実践・会社ブログ風LPを1時間で作る手順1: Stitch編
ここから実際に、Stitchを起点として、ブログ風デザインのLPを構築していきます。実際にStitch + Google AI Studioで作ったLPがこちらです。こちらに至る手順を紹介していきます。
※ 以降のStitch操作環境は2026年3月時点でのものとなります。Googleの開発状況により画面および仕様が変更される場合がありますことご了承ください。
Google Stitchを使用した詳細なUIデザインと修正
最初のステップは、Stitchトップページを開き、アプリの見た目（UI）を作成することから始まります。まずは「モバイルアプリ」か「PCウェブアプリ」を選択し、作りたいアプリのイメージをテキストで入力するだけです。
他のモックアップアプリだとゼロから四角形を描いていましたが、その必要はありません。
少し前にStitchの各モードに触れましたが、最初の叩き台は 3 Flash、仕上がり優先なら Thinking with 3 Pro を選ぶという使い分けを推奨します。
さらにRedesign機能を使えば、参考にしたい既存のWebサイトやスクリーンショットを読み込ませて、「これと同じような雰囲気で」と指示することも可能です。自社ロゴをアップロードし、「このロゴの重心に合わせてヘッダーのマージンを整えて」といった調整もAIが応えます。
デザイン生成後も修正OK・こだわりの詳細編集
生成されたデザインは直感的に、かつ細かく編集できます。
編集（テキストの直接修正）: 要素を選択して文言を直接編集できます。
アノテーション（囲って修正依頼）: 変更したい範囲を囲み、吹き出しで修正指示を出せます。指示はそのままChatに連携でき、上部の 適用 から反映できます。今回は「画像をもっとAI技術らしい雰囲気に変更して」と依頼し、画像差し替えに使いました。
この段階までで問題がなければ、次はStitchからGoogle AI Studioにエクスポートする工程になります。
こちらについては、【後編】にて詳しく解説していきます。
ブログ後編はこちら！
【後編】Google Stitch & Google AI Studioで爆速LP制作！Vibe Codingでアイデアを現実に 2. AI Studio編
Stitch生成物をクオリティアップする・便利なテクニック３点
ここからは、Stitchを使う上で実際に試して、実際に効果を実感できたTipsを紹介します。
一度に複数案を生成してコンペする
Stitchは1回の生成で最大5案を出せます。次の場面で効果を発揮します。
- 手詰まり時に方向性を開く
- 同一コンテンツで複数レイアウトを比較する
- スタイルを大きく切り替える
最初のプロンプトは、 目的 / 雰囲気 / 内容 を意識する
Stitchは、次の3ステップで指示するのがおすすめです。
- ・目的 → 何を作るか
- ・雰囲気 → どんな見た目にするか
- ・内容 → 何を載せるか
Redesign に伝えるための、具体的なデザインプロンプト例
Redesignに伝える時も、プロンプトの工夫が重要です。生成したい内容を、デザイン用語を駆使してプロンプトとして伝えると、精度が上がります。下記は一例ですが、geminiやChatGPTに相談してプロンプトを作ってもらうのも一つの手です。
このように、ただ「かっこよく」より、「Bento Gridで黒基調、余白広め」のように、具体的に指定しましょう。
まとめ
- ・Google Stitch は画面設計に特化した生成ツールです。モードとプロンプト設計を使い分けると、短時間でモックアップを生成できます。
- ・Google AI Studio はAIアプリ開発の統合環境です。Stitchの成果物にロジックを載せ、実装とデプロイができます。
- ・2ツールを組み合わせる と、画面設計とコード実装をGoogleエコシステムの中で連動して開発できます。
- ・Google Stitchは、いかにあなたのアイデアを具体的に、プロンプトに落とし込めるかが重要です。
「AIで高速に試作し、人の技術で本番運用に落とし込む」
これが、これからの時代における開発プロセスの新しいかたちです。
AIだけで賄えない全体設計や運用管理まで見据えて開発を進めたい場合は、株式会社jeki Data-Driven Labまでご相談ください。業務分析、画面設計、実装、運用まで一貫して支援します。
ブログ後編はこちら！
【後編】Google Stitch & Google AI Studioで爆速LP制作！Vibe Codingでアイデアを現実に 2. AI Studio編
