【2026年版】Google Stitch 活用事例10選｜非デザイナーでもできるUI・LPデザインの実践パターン

2026.04.10

「デザインってどうやって作るの？」という疑問から、「実際にUIを自分で作れた」という達成感へ。そのギャップを埋めてくれるツールが、今注目されている Google Stitch です。

Google Stitch を使い始めて3か月。マーケターとして日々さまざまな場面で試した結果、「これは非デザイナーの救世主だ」と確信しています。本記事では、実際に試した活用事例を10個、具体的なプロンプト例・得られた成果・使う際のコツとともに紹介します。

「デザインのことはわからないけど、何かを作らなければならない」という状況にある方は、ぜひ最後まで読んでみてください。きっと、明日からの仕事が変わります。

結論から言うと：Google Stitch は非デザイナーのデザイン力を一段引き上げる

一言で言えば、Google Stitch は「デザインの専門知識がなくても、プロに近いUIを素早く作れるAIツール」です。Googleが2025年5月のGoogle I/O 2025で発表し、現在は stitch.withgoogle.com から無料で利用できます（Google Labs実験的プロジェクト）。

特に次のような方に向いています：

マーケターやセールスで、LP・提案資料のデザインに困っている方
スタートアップ創業者で、プロトタイプを素早く見せたい方
フリーランスで、クライアントへのイメージ共有に使いたい方
社内でちょっとしたビジュアルを急いで作る必要がある方

Google Stitch とは？改めて整理する

Google Stitch（グーグル・スティッチ）とは、Googleが開発したAI駆動のUIデザイン生成ツールのことです。日本語や英語のテキスト指示（プロンプト）を入力するだけで、ウェブページやアプリの画面デザインを自動生成します。Googleが2025年5月20日にGoogle I/O 2025で発表し、Google Labsの実験的プロジェクトとして stitch.withgoogle.com から無料で提供されています。

Figma・Adobe XDのような従来のデザインツールとの最大の違いは、「UIコンポーネントを自分で配置する操作が不要」という点です。「青い送信ボタンをフォームの下に配置して」と書けば、AIがそれを解釈してデザインに反映します。テキストだけでなく、手書きスケッチ・ウェブサイトのURL・既存のデザイン画像をアップロードしてもUIを生成できます。

内部ではGoogleのGemini 2.5シリーズを活用しています。標準モードではGemini 2.5 Flash（月350回まで生成可能）、実験的モードではGemini 2.5 Pro（月50回まで）が使われ、用途に応じて切り替えられます。

実際に使ってみて感じたのは、「デザインの知識がないほど、むしろ Stitch が機能する」ということです。既存の固定観念にとらわれず、率直にやりたいことを言葉にできるため、AIがイメージ通りのものを生成しやすいのです。

活用事例1：ランディングページ（LP）のファーストビュー作成

どんな状況で使ったか

マーケティング施策として、新しいサービスのLPを急きょ作る必要が生じました。デザイナーへの依頼には1〜2週間かかる、しかし上司への提案は3日後——そんな状況でGoogle Stitchに頼ることにしました。

実際に使ってみて分かったのは、ファーストビュー（ページを開いたときに最初に見える部分）のデザインが特に得意だということです。「サービス名」「キャッチコピー」「ターゲット像」「配色」を伝えるだけで、複数パターンのデザイン案を数秒で提示してくれます。

使ったプロンプトの例と得られた成果

プロンプト：「中小企業向け経費精算SaaSのLP。ターゲットは経理担当者。青と白を基調にした清潔感のあるデザイン。ヘッドライン：経費精算の手間を9割削減。CTAボタン：無料で始める。ファーストビューのみ生成してください」

結果：3パターンのデザイン案が数秒で生成されました。そのうち1つをベースに、プロンプトで微調整を重ねながら最終案を完成させました。所要時間は約2時間。デザイナーへの依頼なしで、上司プレゼン用のビジュアルを準備できました。

このケースでのコツをまとめると：

ターゲット・配色・キャッチコピーは最初から具体的に明示する
「ファーストビューのみ」など生成範囲を絞ると精度が上がる
気に入らない場合は「もっとシンプルに」「コントラストを強くして」と追加指示する

活用事例2：スタートアップのMVPプロトタイプ作成

どんな状況で使ったか

副業でスタートアップを手伝っていた際、投資家向けのデモ用プロトタイプが必要になりました。開発リソースはなく、Figmaの操作も不慣れ。そこでGoogle Stitchを使ってアプリの主要画面を複数枚作成しました。

実際に試した結果、Google Stitch には「次の画面を自動提案する」機能があり、ユーザーの操作フローに沿って画面を連続生成できることがわかりました。「アプリ全体の雰囲気を伝える」という用途なら、十分な品質のプロトタイプが作れます。投資家からは「直感的なUIだ」とポジティブな反応がありました。

使ったプロンプトの例と得られた成果

プロンプト：「フードデリバリーアプリのメイン画面。ダークモード。近くのレストランがカード形式で表示され、評価・配送時間・最低注文金額が各カードに表示される。下部にホーム・検索・注文履歴・プロフィールのタブナビゲーション」

結果：主要画面5枚（ホーム・検索・商品詳細・カート・注文完了）を約2時間で生成。デモ当日は、生成した画像をスライドに貼り付けてプレゼンしました。

「ダークモード」「カード形式」など、UIパターンの名称を使うと精度が上がる
複数画面を作る場合は「前の画面と統一したデザインで」と指示する
投資家・クライアント向けには完成度より「コンセプトの伝達」に集中する

活用事例3：営業提案書に使うサービス画面イメージ

どんな状況で使ったか

「実際のサービス画面のスクリーンショットがないけど、提案書に画面イメージを載せたい」——そんなシーンは営業職に多いはずです。まだ開発中のサービスを売り込む際、Google Stitch でイメージ図を作成しました。

実際に使ってみて分かったのは、「提案書に使うための見栄えの良い画面イメージ」を作るのに非常に向いているということです。実装はまだなくても、「こういう画面になります」と見せるためのビジュアルとして十分機能します。商談での視覚的な説明が格段に具体的になりました。

使ったプロンプトの例と得られた成果

プロンプト：「採用管理システムの候補者一覧画面。左にフィルタパネル（ポジション・選考段階・担当者）、右にテーブル形式の候補者リスト。各行に名前・応募ポジション・選考状況・次回面接日が表示される。プロフェッショナルで清潔感のあるデザイン」

結果：提案書に挿入したところ、クライアントから「具体的でわかりやすい」と高評価。サービスのイメージが伝わりやすくなり、受注につながった案件もありました。

「プロフェッショナル」「清潔感」など品質方向性を明示する
実際のサービスと齟齬が生まれないよう、架空・イメージである旨を口頭で補足する
社内向けには「内部確認用イメージ」として活用する

活用事例4：管理画面・ダッシュボードのUI設計

どんな状況で使ったか

社内向けの分析ダッシュボードを作ることになりました。エンジニアにUI要件を伝えるため、言葉だけでなく「こんな画面」という視覚的なイメージが必要でした。Google Stitchでダッシュボード案を複数生成し、エンジニアへの要件説明に活用しました。

実際に使ってみて分かったのは、Google Stitch はグラフ・KPIカード・データテーブルといったダッシュボード要素の生成が得意だということです。「グラフを何種類配置するか」「数値をどう見せるか」を視覚的に検討できたため、エンジニアとの認識のずれが激減しました。

使ったプロンプトの例と得られた成果

プロンプト：「eコマース向けの売上分析ダッシュボード。上部に今月の売上・注文数・平均単価・リピート率の4つのKPIカード。中央に折れ線グラフ（直近30日の売上推移）とドーナツグラフ（カテゴリ別売上比率）。下部に売れ筋商品TOP10のリスト。配色はグリーン系」

結果：エンジニアへの説明が「言葉だけ」から「画面イメージあり」に変わり、認識のずれが激減。仕様確認の往復が減り、開発の手戻りが大幅に削減されました。

KPIの数・グラフの種類・配置を具体的に指定する
エンジニアに渡す場合は「レイアウトの参考」であることを明示する
「モバイル対応版も作って」と続けて指示すると、レスポンシブ考慮のデザインも生成できる

活用事例5：モバイルアプリのUI試作

どんな状況で使ったか

個人開発でモバイルアプリを作ることになり、まず「どんな画面にするか」を固めたかった。Figmaで一から作るのは時間がかかりすぎる。そこでGoogle Stitchで複数画面を試作し、気に入ったデザインの方向性をベースにFigmaで作り込むという流れにしました。

実際に使ってみて分かったのは、「最初の方向性を決める」というフェーズにGoogle Stitchは最適だということです。Google Stitch はiOS・Androidのデザインガイドラインを理解しており、「iOSアプリ」と指定するだけでHuman Interface Guidelinesに沿ったUIが生成されます。

使ったプロンプトの例と得られた成果

プロンプト：「習慣トラッカーアプリのホーム画面（iOS）。今日の習慣がリスト表示され、チェックすると達成率が上がる仕組み。上部にカレンダーストリップ（今週分）。全体的にミニマルで、グリーンとホワイトを基調にしたデザイン」

結果：3パターンの画面案を10分で生成。一番気に入ったデザインを参考に、Figmaで実際の画面を作り込みました。最初の方向性決めにかかる時間が大幅に短縮されました。

「iOS」「Android」「Material Design」など、デザインシステムを指定する
Google Stitchで方向性を決め、最終的な細かいデザインはFigmaで調整するのがベスト
生成したデザインはFigmaに直接ペーストして作業を引き継げる

活用事例6：ECサイト商品ページのデザイン改善案出し

どんな状況で使ったか

EC担当者として、商品ページのCVR（コンバージョン率）改善施策を検討していました。「どんなレイアウトが良いか」を議論するために、複数パターンの商品ページデザインをGoogle Stitchで生成し、チームで比較検討しました。

実際に使ってみて分かったのは、A/Bテストのアイデア出しや社内議論のたたき台として非常に有効だということです。「こっちのほうがCTAが目立つ」「あちらのほうが信頼感がある」という議論が、言葉だけでなくビジュアルで行えるようになりました。

使ったプロンプトの例と得られた成果

プロンプト：「プレミアムコーヒー豆の商品ページ。大きな商品画像と、その右に商品名・価格・在庫状況・購入ボタン。下に商品説明・原産地情報・顧客レビュー（4.7/5.0）。ブランドカラーは深いブラウンとベージュ」

結果：「画像大きめ版」「スペック重視版」「レビュー最優先版」の3パターンを生成し、チームで議論。最終的なランディングページの改修方向が素早く決まりました。

複数パターンを「バリエーション1、バリエーション2」と分けて指示する
CTAボタンの文言・色・配置を具体的に変えたパターンを依頼する
生成したデザインは「議論のたたき台」として使い、最終仕上げはデザイナーに依頼する

活用事例7：SaaSのオンボーディング画面設計

どんな状況で使ったか

BtoB SaaSのオンボーディング体験を改善するプロジェクトを担当しました。「ユーザーが初めてログインしたときに表示する画面」を複数パターン設計するため、Google Stitchを活用しました。

実際に使ってみて分かったのは、「ステップバイステップのUI」の生成が特に得意だということです。「進行状況バー付きのウィザード形式」と指示するだけで、分かりやすいオンボーディングUIが生成されました。画面間の連続生成機能を使って、5ステップ分を一気に作れたのも大きかったです。

使ったプロンプトの例と得られた成果

プロンプト：「プロジェクト管理ツールの初回ログイン画面（ステップ3/5）。上部に進行状況バー。中央に『チームメンバーを招待しましょう』というタイトルと、メールアドレス入力フォーム3件分。下に『招待する』ボタンと『後で行う』リンク。背景は薄いパープル系」

結果：5ステップ分のオンボーディング画面を1時間で生成。UXデザイナーとの議論がスムーズになり、改善案の合意が早かった。

「ステップ〇/〇」という情報を含めると一貫性のあるUIが生成される
ウィザード形式・モーダル形式・チェックリスト形式など、UIパターンを明示する
「空の状態（初回表示）」と「データが入った状態」の両方を作っておくと議論しやすい

活用事例8：イベント・セミナー申込ページのデザイン

どんな状況で使ったか

社内イベントの申し込みページを急遽作ることになりました。WordPressの操作はできますが、デザインが不安。Google Stitch で申し込みページのデザインを生成し、レイアウトの方向性を固めてから実装に入りました。

実際に使ってみて分かったのは、「締め切りが近い・社内向け」という状況で、Google Stitch は特に威力を発揮するということです。「とりあえず見栄えが良いものを素早く」という用途に最適で、方向性が決まれば実装もスムーズに進みます。

使ったプロンプトの例と得られた成果

プロンプト：「マーケティングセミナーの申し込みページ。ヘッダーにイベント名と日時（2026年5月15日 14:00〜16:00）。メインビジュアルは抽象的なビジネス系のイラスト。概要説明テキスト。申し込みフォーム（名前・会社名・メールアドレス・参加人数）。CTAボタン。配色はネイビーとオレンジ」

結果：申し込みページのデザイン案を生成し、ラフデザインとして確認。配色・レイアウトの方向性を固めてからWordPressで実装できたため、手戻りが少なかった。

日時・場所などの具体的な情報を入れるとリアリティが増す
フォームの必須項目を具体的に指定する
「CTA周辺を強調して」「信頼感を増す要素を追加して」と調整指示を出す

活用事例9：社内ツール・承認フローの画面設計

どんな状況で使ったか

社内の稟議・承認フローをデジタル化するプロジェクトで、エンジニアへの要件定義書に添付するUI案が必要でした。専門的なワイヤーフレームツールは不要で、「こんな画面になる」という共通認識を作るためだけに使いました。

実際に使ってみて分かったのは、社内ツールのような「地味だが機能的なUI」の生成にも、Google Stitch は十分対応できるということです。むしろシンプルで機能的なUIのほうが、プロンプトで制御しやすいくらいでした。

使ったプロンプトの例と得られた成果

プロンプト：「経費申請の承認フロー画面。申請一覧リスト（申請者名・申請日・金額・カテゴリ・ステータス）。各行にアクションボタン（承認・差し戻し・詳細）。上部にフィルタ（未処理のみ・すべて・承認済み）。シンプルで機能的なデザイン」

結果：エンジニアとのキックオフ会議で使用。「ステータスの種類は？」「差し戻し理由の入力フォームは？」という議論が具体的になり、要件の抜け漏れを早期に発見できました。

エンジニアへの説明用なら「ワイヤーフレーム風」「シンプル」と指定する
「エラー状態」「空の状態」「ローディング状態」も合わせて生成する
リストの列名・ボタンのラベルを具体的に書くと、よりリアルなデザインになる

活用事例10：個人ポートフォリオサイトのデザイン案作成

どんな状況で使ったか

フリーランス転向を検討していた際、ポートフォリオサイトのデザインを考える必要がありました。「どんな雰囲気にするか」が決まらず悩んでいたところ、Google Stitch で複数パターンを生成して方向性を固めました。

実際に使ってみて分かったのは、「自分のブランドイメージを言語化→ビジュアル化」するプロセスにおいて、Google Stitch が非常に役立つということです。「こんな人間だと思われたい」を言葉にするだけで、デザインが形になります。また、URL入力機能を使って「このサイトに似た雰囲気で」と指定する方法も効果的でした。

使ったプロンプトの例と得られた成果

プロンプト：「Webマーケターのポートフォリオサイトのトップページ。キャッチコピー：データドリブンなマーケター。実績数値（SEO流入3倍・CVR改善2.5倍）を大きく表示。配色はモノクロを基調に、アクセントカラーとして鮮やかなグリーン。モダンでプロフェッショナルな印象」

結果：「プロフェッショナル版」「クリエイティブ版」「ミニマル版」の3パターンを生成。クリエイティブ版の方向性が一番しっくりきたため、それをベースにWordPressテーマを選定しました。

「〜という人間だと思われたい」という目標を言葉にして入れる
色・フォント・雰囲気（モダン・クラシック・ポップ）を具体的に指定する
1つ気に入ったデザインが出たら「もっとミニマルに」「もっとカラフルに」と派生させる

Google Stitch を使う際の注意点・失敗しやすいポイント

ポイント1：プロンプトが曖昧すぎると的外れなデザインが生成される

「かっこいいデザインを作って」という指示では、意図と大きく外れることがあります。色・ターゲット・コンテンツ・UIパターンの4要素を最初から具体的に指定することが重要です。「どんな印象を与えたいか」「誰に向けたUIか」を言葉にすることで、AIが意図を正確に汲み取れます。

ポイント2：生成結果を「完成品」と思わない

Google Stitch は「起点」であって「終点」ではありません。生成したデザインをそのまま使うのではなく、「このレイアウトを参考に調整する」というスタンスが現実的です。特に実際のウェブサイトやアプリとして実装する場合は、デザイナーによるブラッシュアップが必要です。

ポイント3：複雑なインタラクションは生成できない

アニメーション・マイクロインタラクション・ホバー効果など、動的な要素はGoogle Stitch では表現が限定的です。「見た目」は作れますが、「動き」は別途設計が必要です。インタラクティブなプロトタイプが必要な場合は、Figmaやその他のプロトタイプツールと組み合わせましょう。

ポイント4：月間生成回数の上限に注意

無料で利用できますが、月間の生成回数に上限があります。標準モード（Gemini 2.5 Flash）は月350回まで、実験的モード（Gemini 2.5 Pro）は月50回までです（2026年4月時点の情報）。集中的に使う場合は、無駄な生成を減らすためにプロンプトを練ってから実行することをおすすめします。

ポイント5：日本語での指示は英語より精度が落ちる場合がある

複雑なUIの場合、英語でプロンプトを書いた方が精度が高くなるケースがあります。うまくいかない場合は英語で試してみることをおすすめします。また、デザインの専門用語（「カード型UI」「ウィザード形式」「Material Design」など）を積極的に使うと、AIの理解度が上がります。

よくある質問（FAQ）

Q1. Google Stitch は無料で使えますか？

はい、Google Stitch は現在無料で利用できます（2026年4月時点、Google Labs実験的プロジェクトとして提供）。stitch.withgoogle.com からアクセスするだけで使い始められます。ただし月間の生成回数に上限があり、標準モード（Gemini 2.5 Flash）は月350回まで、実験的モード（Gemini 2.5 Pro）は月50回までという制限があります。Google アカウントがあればすぐに使えます。

Q2. Figmaとの違いは何ですか？

Figmaはデザイナーが手動でUIを作るためのプロフェッショナルツールで、細かい調整・コンポーネント管理・チームコラボレーションに優れています。一方、Google Stitch はテキスト指示からAIがデザインを生成するツールで、「素早く試作を作る・アイデアを形にする」用途に向いています。両者は競合するというより補完関係にあります。Google Stitch で生成したデザインはFigmaに直接ペーストできるため、「Stitchで方向性を決め、Figmaで仕上げる」というワークフローが効果的です。

Q3. デザインの知識がまったくなくても使えますか？

はい、デザインの知識がなくても使えます。ただし、「見た目が良い」という抽象的な指示より、「青と白を基調にした、ミニマルでプロフェッショナルなデザイン」という具体的な指示の方が、イメージ通りの結果に近づきます。色・雰囲気・配置などのデザイン用語を少し知っておくと、プロンプトの質が上がります。まずは「ターゲット」「配色」「レイアウトのイメージ」「含めたいコンテンツ」の4点を整理してからプロンプトを書くことをおすすめします。

Q4. 生成したデザインをそのまま使って良いですか？

アイデア出し・社内確認・プレゼン資料としての利用は問題ありません。ただし、実際のウェブサイト・アプリへの実装には、デザイナーによるブラッシュアップやエンジニアによるコーディングが必要です。Google Stitch は「完成品」ではなく「たたき台」として活用するのがベストです。なお、商用利用する場合は Google の利用規約を確認してください。

Q5. スマートフォン向けのUIも作れますか？

はい、モバイル向けUIの生成も可能です。「iOSアプリの画面」「Androidアプリ」「モバイルウェブ」など、対象プラットフォームを指定するとそれに合ったデザインが生成されます。Google Stitch はiOSのHuman Interface Guidelines（HIG）やAndroidのMaterial Designのガイドラインを理解しており、プラットフォームを指定するだけでそれに沿ったUIが生成されます。

Q6. 複数ページの一貫したデザインを作れますか？

作れます。「前の画面と同じデザインシステムで、次の画面を作って」という指示や、「使用するフォントはInter、メインカラーは#2563EB」のように具体的なデザイントークンを指定することで、複数画面でのデザインの一貫性を保ちやすくなります。また、DESIGN.mdというエージェント向けマークダウンファイルにデザインルールをまとめてインポート・エクスポートする機能も提供されています。

Q7. 画像や手書きスケッチからデザインを生成できますか？

はい、テキスト以外にも画像・スクリーンショット・手書きスケッチ・URLをインプットとして使えます。たとえば「このウェブサイトのレイアウトを参考にして、もっとシンプルなバージョンを作って」とURLを貼り付けたり、ホワイトボードに描いたラフ案の写真をアップロードしてデジタルUIに変換したりできます。テキストだけでなく視覚的なインプットが使えるのが、Google Stitch の強みの一つです。

Q8. HTMLやCSSコードとして出力できますか？

はい、Google Stitch はデザインをHTML/CSSコードとして出力する機能も持っています。生成したUIを画像として使うだけでなく、実際のフロントエンドコードのベースとして活用できます。ただし、出力されたコードはそのまま本番環境に使えるものではなく、エンジニアによる調整が必要です。