Stitch 徹底解説：プロンプトから UI とコードまで
Stitch 徹底解説：プロンプトから UI とコードまで
はじめに
Google の「Stitch」（https://stitch.withgoogle.com/）は、テキストや画像から Web/モバイルの UI とフロントエンドコードを数分で生成する AI デザインツールです。アイデア出しから実装初動までを一気通貫で短縮できるのが特徴で、最新アップデートで提案品質やワークフロー連携が大幅に改善されて、実務でも使いやすくなってきました。
このレベルを一発のプロンプト AI が作れるようになったのすごくないですか？
Stitch とは
- Google Labs の実験的プロジェクトで、自然言語や画像を入力すると、複数レイアウトの UI 案と HTML/CSS 等のコードを生成してくれます。
- モデルは Gemini 3.0 系を活用していて、Pro と Flash の選択で精度と速度のトレードオフを切り替えられます。
- 目的は「UI のアイデア出しを高速・容易にする」ことで、設計と開発の断絶を埋めることにフォーカスしています。
基本の使い方（最短ルート）
- 種別（アプリ/Web）とAIモデル（詳しくは下表参照）を選択して、日本語で画面要件を入力するか、ラフスケッチや既存 UI のスクショをアップロードします。
- 複数ページの提案を受け取って、候補から採用しつつテーマやプライマリーカラーを当てて世界観を固めていきます。
テーマはここから変えれます。
- 共有リンクで関係者レビューを回して、アノテーションで箇所指定のフィードバックを反映して質を上げます。
- View Code や一括ダウンロードでコードを取得して、実装側に引き渡してプロトタイプを起動します。
モデル別の役割
| モデル | 何が得意？ | 出力・制約の傾向 | こういう時に選ぶ |
|---|---|---|---|
| Fast | Gemini Flashで“速く”作るモードで、素早い反復に向きます。image.jpg | コード出力やFigmaへのエクスポートが案内されています。image.jpg ただしFigma出力はStandard/一部エージェントに限られる旨の案内もあります。discuss.google+1 | 方向性出し、ラフ案を大量に作って比較、軽い修正ループ。image.jpg |
| 3 Flash | Gemini 3.0 Flashで、速さと品質のバランスを取りつつ高品質なHTMLデザイン生成を狙う位置づけです。image.jpg | 「Export to coding agents」とあり、コーディングエージェント連携を想定した出力導線が示されています。image.jpg またGemini 3 FlashがStitchに来る（/来た）という告知も出ています。x | Fastだと粗いが、Proほど重くしたくない時の量産＋実装寄り反復。image.jpgblog |
| Thinking with 3 Pro | “推論優先”で最大品質を狙い、速度よりも出来を重視します。image.jpg 2025年12月更新でGemini 3 Pro Thinkingが導入され、デフォルトエージェントになったと報じられています。 | 複雑な要件をまとめて整合性あるUIにしやすい一方、反復コストは上がりやすい設計です。image.jpg | 要件が多い画面、情報設計が重要なダッシュボード、実装前提で破綻しにくい案が欲しい時。image.jpg |
| Redesign | 既存アプリ/サイトを「スクショ前提でリデザイン」するエージェントで、Nano Banana Proを使います。image.jpg | 既存UIを“作り直す”用途が中心で、自然言語で「若い層向けに」「CVを上げたい」などの指示を受けて再構成する流れが紹介されています。 | 既存LP/管理画面の刷新、競合参考の再構成、デザイン負債のリフレッシュ。 |
使い分けの目安
まずFast/3 Flashで候補を多めに出し、良い方向性が見えたらThinking with 3 Proで詰める、が効率的です。
既存画面があるなら、最初からRedesignにスクショを渡して“たたき台”を作るのが速いです。
Figmaと連携させたいならFastを選択してください。
開発での活かし方
難しいことは考えず、まずは「たたき台」を作るツールとして使うのがおすすめです。
- アイデア出し: 「こんな機能があるアプリ」と伝えて、ざっくりした画面を作ってもらう
- 見た目の調整: 「もっと信頼感のある色で」「文字を大きく」とチャットで修正する
- コード出力: 良い感じになったらコードを書き出して、エディタに貼り付けて調整する
これだけで、白い画面からコードを書き始めるよりも圧倒的に早く開発に入れます。
思い通りに作るためのコツ（プロンプト）
AI に指示するときは、以下の 4 つを含めると一発で良い結果が出やすくなります。
- 目的: 何のための画面か（例：新規ユーザー登録、商品一覧）
- ターゲット: 誰が使うか（例：スマホに慣れていない高齢者、急いでいるビジネスマン）
- 必要な要素: 必ず入れてほしいもの（例：大きなボタン、料金表、地図）
- 雰囲気: デザインの好み（例：清潔感のある青系、ポップで元気な感じ）
プロンプトの例
悪い例 🙅
「いい感じのランディングページを作って」
（これだと AI が迷ってしまい、ありきたりな提案になりがちです）
良い例 🙆
目的: 個人開発者向けのタスク管理ツールの紹介ページ
ターゲット: 効率化を求めるエンジニア
雰囲気: ダークモードで、サイバーパンク風のかっこいい感じ
必須要素:
- キャッチコピーと「無料で始める」ボタン
- 主な機能 3 つを並べた紹介エリア
- 実際の画面のスクリーンショットを置く場所
これくらい具体的に書くと、最初から使える精度のデザインが出てきます。
知っておきたい注意点
- 完璧を求めない: 100点満点のコードを出そうと粘るより、80点くらいで書き出して、あとは自分でコードを直した方が早いです。
- 制限がある: まだ実験的なツールなので、細かい画像の差し替えなどがうまくできないこともあります。
まとめ
Stitch は、開発の「最初の一歩」を劇的に軽くしてくれるツールです。
「デザインが決まらない」「コードを書くのが面倒」という時に、まずは Stitch に相談してみると、驚くほどスムーズに開発が進むはずです。ぜひ気軽に試してみてください！
Discussion