AI・マーケトレンド
▶ 動画はこちら ↓
デザイナーもエンジニアもいない。でも自社サービスのUI、ダサいまま放置するのはもう終わり——
この記事では、Google製のAI UIデザインツール「Google Stitch」と、バイブコーディングツール「Cursor」を組み合わせ、実際に約1時間でサービスのUIをリニューアルした全工程を公開します。
筆者（ドヤマーケのミツモリ）が自社サービス「ドヤインタビューAI」で実際に試した、リアルな検証レポートです。「Stitchってどこまで使えるの？」「バイブコーディングでUIは本当に変わるの？」そんな疑問にそのままお答えします。
■ Google Stitchとは？UIデザインを爆速で生成するGoogleの無料AIツール
Google Stitch（スティッチ）は、Googleが提供するAI UIデザインツール（Beta）です。スクリーンショットやプロンプトを入力するだけで、洗練されたUIデザインを自動生成してくれます。
主な特徴は以下の通りです。
・スクリーンショットやプロンプトからUIデザインを自動生成 ・WebアプリとモバイルアプリのUI両方に対応 ・追加指示でデザインをブラッシュアップ可能 ・HTML/CSSコードとしてエクスポート可能（Figma出力にも対応） ・レスポンシブデザインにも対応 ・無料で利用可能（Beta版）
公式サイト：https://stitch.withgoogle.com
デザインの知識がなくても、プロンプトを入力するだけで洗練されたUIが生成される——それがGoogle Stitchの最大の魅力です。
■ 今回改善したサービス「ドヤインタビューAI」とは
今回UIをリニューアルするのは、筆者が開発中の「ドヤインタビューAI」です。
音声データ・動画ファイルをアップロードするだけで、AIが自動的に文字起こし〜インタビュー記事作成まで一気通貫で行うサービスです。インタビュー動画や音声を記事化する手間を大幅削減できます。
▶ ドヤインタビューAIを使ってみる：https://doyamarke.surisuta.jp/tool/doya_interview
課題はひとつ——「デザインがダサすぎる」（本人談）。
機能はちゃんとあるのに、見た目で損している状態。そこを今回、Google Stitchで変えていきます。
■ ステップ①｜Google StitchでUIデザインを生成する
▼ Google Stitchにアクセスして「Web」を選択
https://stitch.withgoogle.com にアクセスし、Webサービスの改善なので「Web」を選択します。
▼ サービス説明＋デザイン指示プロンプトを入力
今回使用したプロンプトはこちらです。概要欄にも掲載していますので、ぜひコピーして使ってみてください。
———————————————————
このWebアプリのUIを大幅に改善してください。
【目的】 "ツール"ではなく"プロダクト"に見えるUI
【デザイン方針】 ・メインカラー：紫（アクション・強調に限定使用） ・背景：白〜淡いグレー、上品なコントラスト ・BtoB SaaS / AIプロダクトとしての落ち着き ・余白・整列・階層設計を重視、無駄な装飾なし ・「静かに強い」温度感
【ファーストビュー】 ・「何が一段良くなるのか」が一目で伝わる ・構造が美しく、情報が整理されている
【入力エリア】 ・思考を邪魔しないフォーム設計 ・入力すること自体が「気持ちいい」UI
【生成・結果表示】 ・AIの回答ではなく"プロが作った設計書"の見た目で表示 ・コピー・保存・再生成の導線を自然に配置
【全体】 ・カードベースで意味単位を分離 ・ボタンはPrimary / Secondary / Textを明確に ・モダンで信頼感のあるデザイン ———————————————————
ポイントは「ツールではなくプロダクトに見えるUI」という目的を最初に明確にしていること。デザイン方針・各セクションの要件を細かく指定することで、Stitchから高品質なデザインを引き出せます。
▼ AIモデルを選択して生成
今回は「Flash」モデルを選択して生成。数十秒で結果が返ってきました。
「ドヤインタビューAIのUIが完成しました。パープルコアのテーマを基軸に、BtoBサースとしての安心感とAIプロダクトとして洗練された美しさができました」
生成されたUIの特徴：
・LPページも自動生成 ・入力エリアも洗練されたデザイン ・ダッシュボード画面も自動生成 ・モダンで信頼感のある仕上がり
「おお、かっこいいですね」——率直にそう感じるクオリティでした。
■ ステップ②｜追加指示でデザインをブラッシュアップする
生成されたデザインに対して、さらに追加指示を出せるのがStitchの強みです。今回は以下を追加しました。
・「エディター画面と構成の検閲パネルのUIを詳しく見たい」→ より詳細なUIを追加生成 ・「レスポンシブのデザインも作成してください」→ スマホ対応デザインも自動生成
Stitchは自動でデザイン提案もしてくれます。「これも追加しませんか？」と積極的に改善案を出してくれるので、対話しながらどんどんデザインが磨かれていきます。
この段階でしっかりブラッシュアップしておくことが、後の実装精度に直結します。
■ ステップ③｜StitchからHTML/CSSコードをエクスポートする
デザインが完成したら、エクスポート機能でコードを出力します。手順は以下の通りです。
画面上部の「Export」ボタンをクリック
エクスポートしたいページを全選択
「AI Studio」を押すとHTMLファイル＋画像がバックグラウンドでダウンロードされる
エクスポートされるのは単一のHTMLファイル（Tailwind CSS・Googleフォント使用）です。これをそのまま開発環境に取り込んで実装に活用します。
■ ステップ④｜Cursor（バイブコーディング）でUIを実装する
▼ 開発環境の準備
今回の開発環境はVisual Studio CodeにClaude（Anthropic）の拡張機能が入った構成です。いわゆる「バイブコーディング」環境です。
バイブコーディングとは、自然言語（日本語など）でAIに指示を出すだけでコードを自動生成してもらう開発スタイルのこと。プログラミング知識がなくても、AIが実装まで担ってくれます。
▼ StitchのエクスポートデータをCursorに渡す
エクスポートしたHTMLファイルのパスをCursorのチャットに貼り付け、このように依頼します。
「このファイルを読み込んで、UI全てをリニューアルしてください」
▼ 既存ロジックを維持しながらUIだけ差し替える
重要なのは「既存のロジックを壊さずにUIだけ変更してもらう」という指示の仕方です。機能はそのままに、見た目だけをStitchのデザインに寄せていくイメージで依頼します。
■ 実際の結果｜どこまでStitchのデザインを再現できたか？
正直にお伝えします。
【良かった点】 ・全体的な雰囲気・テイストはStitchのデザインに近い仕上がりになった ・素材アップロード画面・文字起こし中の画面（64%コンプリート表示）など各画面が改善された ・画面の構成・レイアウトはほぼ再現できた ・機能（文字起こし・記事生成）はそのまま動作した
【惜しかった点】 ・文字の太さ・フォントサイズなど細部のデザインが微妙に違う ・「ニュアンスは近いけど細部が違う」という感じ ・丸ごと投げるだけでOKにはならない。細部の修正は別途必要
結論：Google StitchのUIデザイン出力は本当に素晴らしく、UIデザインを出力するツールとしては断然使うべきです。ただし、バイブコーディングで自然言語だけで実装すると完全な再現は難しく、細部の調整は別途必要になります。
「デザインは細部に宿る」——それが今回の正直な所感です。AIの進歩に期待しつつ、現時点ではStitchでデザインを作り、実装は細部まで丁寧に調整する、というハイブリッドな進め方がベストです。
■ Google Stitch × Cursor ワークフロー まとめ
ステップ① UIデザイン生成 プロンプト＋スクショでデザイン案を生成｜ツール：Google Stitch
ステップ② ブラッシュアップ 追加指示・レスポンシブ対応｜ツール：Google Stitch
ステップ③ コードエクスポート HTML/CSSをダウンロード｜ツール：Google Stitch
ステップ④ UI実装 バイブコーディングでUI差し替え｜ツール：Cursor
ステップ⑤ 確認・調整 細部を追加指示で修正｜ツール：Cursor
このワークフローが特に向いている人：
・デザイナーに頼む予算がない個人開発者 ・スタートアップで素早くUIを整えたい人 ・LP・社内ツールのUIを自分で改善したい人 ・バイブコーディングに興味がある人 ・Google Stitchを使ってみたい人
■ ドヤマーケのAIツールも使ってみてください
ドヤマーケでは、AIを活用したマーケティング支援ツールを提供しています。
マーケティングの無料相談はこちらから↓
https://doyamarke.surisuta.jp/download/base02_doyamarke-free-1
・ドヤインタビューAI（動画・音声からインタビュー記事を自動作成） → https://doyamarke.surisuta.jp/tool/doya_interview
・ドヤバナーAI（AIでバナー作成） → https://doya-ai.surisuta.jp/banner
・ドヤSEO（ラクラク記事作成） → https://doya-ai.surisuta.jp/seo
関連記事：
・【2026年最新】バナー作成AIツールおすすめ8選｜無料で使える比較ランキング → /notes/banner-ai-tools-comparison
・【2026年最新】AI記事作成ツール徹底比較｜ChatGPT vs Gemini vs Claude → /notes/ai-article-writing-comparison-2026
・【2026年版】広告バナーをAIで作成する方法｜A/Bテスト用3案を1分で同時生成 → /notes/ad-banner-ai-creation
■ まとめ
今回は「Google Stitch × Cursor」を使って、自社サービス「ドヤインタビューAI」のUIを約1時間でリニューアルした全工程をご紹介しました。
ポイントをまとめます。
Google StitchはUIデザイン生成ツールとして最高クラスの精度
詳細なプロンプト設計がデザイン品質を左右する
バイブコーディング（Cursor）で実装すると雰囲気は再現できるが細部の調整は必要
デザイナーなし・エンジニアなしでも、このワークフローでUIの大幅改善は可能
「あなたのサービス、Stitchで直したい箇所はどこ？」——ぜひコメントやSNSで教えてください！
▶ 動画で全工程を確認する：