AI・マーケトレンド
本記事でUIを刷新したドヤインタビューAI
取材の録音を記事にまとめたい方には、ドヤマーケAIシリーズのドヤインタビューAIがおすすめです。音声・動画から話者ごとの文字起こし、記事構成、校正までを進め、記事の叩き台を作れます。
本記事では、このサービスのUIを改善した手順を紹介します。生成した記事は、発言・固有名詞・数値を元の録音と照合してから公開してください。
30秒で分かる結論
デザイナーもエンジニアもいない状態から、Google StitchでUIデザインを生成 → Cursorで実装という2ツールの組み合わせで、自社サービスのUIを約1時間でリニューアルできました。ただし正直に言うと、丸ごと投げるだけでは完成しません。実際にやってみた結論は次のとおりです。
Stitchのデザイン出力は素晴らしい。UIデザインを作るツールとしては断然おすすめできます
雰囲気・レイアウトはほぼ再現できた。一方でフォントの太さやサイズなど細部は微妙にずれます
現実解はハイブリッド。Stitchでデザインを作り、実装の細部はCursorで丁寧に詰めるのが今のところベストです
この記事では、実際に使ったプロンプトとエクスポート手順、うまくいかなかった点まで含めて全工程を公開しています。AIツールを自社開発する側の話はスライド作成ツールをAIで自作するでも書いています。
▶ 動画はこちら ↓
デザイナーもエンジニアもいない。でも自社サービスのUI、ダサいまま放置するのはもう終わり——
この記事では、Google製のAI UIデザインツール「Google Stitch」と、バイブコーディングツール「Cursor」を組み合わせ、実際に約1時間でサービスのUIをリニューアルした全工程を公開します。
筆者（ドヤマーケのミツモリ）が自社サービス「ドヤインタビューAI」で実際に試した、リアルな検証レポートです。「Stitchってどこまで使えるの？」「バイブコーディングでUIは本当に変わるの？」そんな疑問にそのままお答えします。
サービスサイトのAI内製化（30秒結論）
Google Stitch（UI生成AI）×Cursor（コーディングAI）を使った本記事の検証では、デザイン案を生成し、実装後に細部を調整しました。生成物を公開する前には、操作・表示・既存機能の確認が必要です。職場でのAI利用に関する調査は次の記事で紹介しています：PR-01、PR-04。
■ 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の最大の魅力です。
2026年9月時点の公式アップデート
本記事の検証は、2026年3月上旬に公開した動画の時点の画面と手順です。その後もStitchは更新が続いているため、Googleの公式発表をもとに主な変更を時系列でまとめます。記事内のスクリーンショットと現在の画面が異なる場合は、以下の変更を前提に読み替えてください。
2025年5月20日：Google Labsの実験的なツールとして発表。プロンプトや画像からUIデザインとフロントエンドのコードを生成し、Figmaへの貼り付けとコードの書き出しに対応（出典：Google Developers Blog）
2025年12月10日：Gemini 3を導入し、複数の画面をつないで操作できるプロトタイプを作る「Prototypes」機能を追加（出典：Google公式ブログ）
2026年3月18日：無限キャンバス型の画面に刷新。プロジェクト全体を踏まえて作業するデザインエージェント、デザインのルールをエージェントが読める形で持ち運ぶ「DESIGN.md」、クリックで動くプロトタイプ、音声での指示、MCPサーバー・SDK・スキルによるAI StudioやAntigravityとの連携を発表（出典：Google公式ブログ）
2026年5月19日（Google I/O）：デザインエージェントと対話しながらリアルタイムで作る機能を発表。テキスト・音声に加え、既存のコードやデザインファイルから始められ、Google AI Studioでの共有リンク発行、Google Antigravityへの書き出し、Netlifyとの提携による公開に対応（出典：Google公式ブログ）
本記事の「Web」を選んで始める手順や、Flashモデルの選択、「AI Studio」ボタンでの書き出しは検証時点の画面です。基本の流れ（プロンプトで生成→追加指示で修正→書き出して実装）は変わりませんが、ボタンの位置や名称は公式サイトで確認してください。
料金・ダウンロード・日本語対応について
料金：上記の公式発表には料金や月間の生成回数の上限は書かれていません。上限の数値を紹介している解説記事もありますが、利用前にStitchの画面上の表示で確認してください
ダウンロード：公式発表ではstitch.withgoogle.comからの利用が案内されています。本記事の手順もWebサイトにアクセスして使っており、アプリのダウンロードは行っていません
日本語：本記事では日本語のプロンプトで指示し、UIデザインを生成できました。画面表示や出力文言の言語は、生成後に確認してください
■ 今回改善したサービス「ドヤインタビュー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ページも自動生成 ・入力エリアも洗練されたデザイン ・ダッシュボード画面も自動生成 ・モダンで信頼感のある仕上がり
「おお、かっこいいですね」——率直にそう感じるクオリティでした。
サイト内のヒーロー画像・バナー・LP用画像はChatGPT Image 2.0 プロンプト集、広告バナーをAIで作成する方法も参照。
■ ステップ②｜追加指示でデザインをブラッシュアップする
生成されたデザインに対して、さらに追加指示を出せるのがStitchの強みです。今回は以下を追加しました。
・「エディター画面と構成の検閲パネルのUIを詳しく見たい」→ より詳細なUIを追加生成 ・「レスポンシブのデザインも作成してください」→ スマホ対応デザインも自動生成
Stitchは自動でデザイン提案もしてくれます。「これも追加しませんか？」と積極的に改善案を出してくれるので、対話しながらどんどんデザインが磨かれていきます。
この段階でしっかりブラッシュアップしておくことが、後の実装精度に直結します。
「AIのデザインがダサい」を避ける追加指示の型
AIが作るUIが「どこかで見たような」「安っぽい」印象になる原因の多くは、指示が抽象的なことです。本記事のプロンプトが効いたのは、目的（ツールではなくプロダクトに見せる）と、色の使い道・余白・ボタンの階層まで指定していたためです。生成結果に違和感があるときは、次の観点で1つずつ追加指示を出すと修正しやすくなります。以下は編集部が作成した追加指示の例です。
・色：メインカラーはボタンと強調する数字だけに使い、見出しや背景には使わないでください
・文字：見出し・本文・補足の3段階に文字サイズを揃え、それ以外のサイズは使わないでください
・余白：カード同士の間隔と、カード内の余白を画面全体で統一してください
・ボタン：1画面の主ボタン（Primary）は1つにし、他はSecondaryかテキストリンクにしてください
・装飾：グラデーション、影の重ね掛け、意味のないアイコンを外してください
・状態：読み込み中・データなし・エラーの画面も同じデザインで作ってください一度に全部を指示するより、違和感のある観点から1つずつ直すほうが、どの指示が効いたのかを判断できます。
対象はNotebookLMの画像生成ですが、「ダサい」出力をデザイン指示で直す考え方は同じです。6つのデザインプロンプトを動画で紹介しています。
■ ステップ③｜StitchからHTML/CSSコードをエクスポートする
デザインが完成したら、エクスポート機能でコードを出力します。手順は以下の通りです。
画面上部の「Export」ボタンをクリック
エクスポートしたいページを全選択
「AI Studio」を押すとHTMLファイル＋画像がバックグラウンドでダウンロードされる
エクスポートされるのは単一のHTMLファイル（Tailwind CSS・Googleフォント使用）です。これをそのまま開発環境に取り込んで実装に活用します。
書き出し先の選び方（2026年のアップデート後）
本記事ではAI Studio経由でHTMLを書き出し、Cursorで既存サービスに組み込みました。公式発表で案内されている書き出し先・連携先は増えているため、目的に合わせて選んでください（出典：Google Developers Blog、Google公式ブログ（2026年3月）、Google公式ブログ（2026年5月））。
既存サービスのUIを差し替えたい：本記事と同じく、コードを書き出してCursorなどのAIコーディングツールに読み込ませる
デザイナーと一緒に仕上げたい：Figmaへ貼り付けて、細部をFigma上で調整する
まず動くものを関係者に見せたい：Google AI Studioで共有リンクを発行する
AIコーディングエージェントに直接渡したい：MCPサーバーやSDKを使って、AntigravityなどのツールからStitchのデザインを参照する
DESIGN.mdにデザインのルールを書いておく
2026年3月の更新で、デザインのルールをエージェントが読める形で持ち運べる「DESIGN.md」が発表されました。本記事で「細部が微妙にずれた」ように、実装段階で色や文字の太さがずれるのを防ぐには、ルールを文章で残しておくと有効です。以下は編集部が作成した記載例で、書式の詳細はStitchの画面や公式情報で確認してください。
# デザインルール
## 目的
ツールではなくプロダクトに見えるUIにする
## 色
- メインカラー：[カラーコード]（ボタンと強調だけに使う）
- 背景：白〜淡いグレー
## 文字
- 見出し：[サイズ・太さ]
- 本文：[サイズ・太さ]
## 部品
- ボタンはPrimary / Secondary / Textの3種類
- 意味のまとまりごとにカードで区切る
## 変えてはいけないもの
- 既存のログイン・アップロード・生成・保存の動作同じルールをCursorへの実装依頼にも添えると、Stitchのデザインと実装のずれを確認する基準になります。
■ ステップ④｜Cursor（バイブコーディング）でUIを実装する
▼ 開発環境の準備
今回の開発環境はVisual Studio CodeにClaude（Anthropic）の拡張機能が入った構成です。いわゆる「バイブコーディング」環境です。
バイブコーディングとは、自然言語（日本語など）でAIに指示を出すだけでコードを自動生成してもらう開発スタイルのこと。プログラミング知識がなくても、AIが実装まで担ってくれます。
▼ StitchのエクスポートデータをCursorに渡す
エクスポートしたHTMLファイルのパスをCursorのチャットに貼り付け、このように依頼します。
「このファイルを読み込んで、UI全てをリニューアルしてください」
▼ 既存ロジックを維持しながらUIだけ差し替える
重要なのは「既存のロジックを壊さずにUIだけ変更してもらう」という指示の仕方です。機能はそのままに、見た目だけをStitchのデザインに寄せていくイメージで依頼します。
追加で使える実装依頼テンプレート
以下は読者が自分の環境に合わせて使うための追記例です。今回の検証で実際に入力したプロンプトとは区別しています。角括弧の項目を埋めてから依頼してください。
対象画面：[画面名とパス]
参照デザイン：[Stitchから書き出したファイル]
変更する範囲：[レイアウト・余白・配色など]
維持する機能：[ログイン・入力検証・アップロード・生成・保存など]
確認する画面幅：[パソコン・スマートフォンの対象幅]
まず既存実装と参照デザインを読み、変更予定のファイルと影響範囲を説明してください。
合意した範囲を一画面ずつ実装し、機能の削除やAPIの変更が必要になった場合は理由を示してください。
読み込み中・空データ・入力エラー・処理失敗・完了の各状態を確認してください。
最後に、実施した確認と未確認の項目、残る不具合を分けて報告してください。一度に全画面を置き換える前に、代表的な一画面で見た目と動作を確認すると、残りの画面へ反映する条件を整理できます。生成された変更は差分を読み、検証用の環境で確認してから公開します。
サイトのファーストビューに動画を入れる場合はChatGPT Image × Seedanceで動くバナー、関連動画はChatGPT Image 2とSeedanceで動くバナーを作る方法も参照。
■ 実際の結果｜どこまで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を使ってみたい人
サイト改善後のリード獲得施策はBtoBマーケティングを1人で回す全手順、ツール選定はBtoBマーケティングツール比較を参照。
■ ドヤマーケの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
三森の実務メモ：AI UIリニューアルで気をつけるべきポイント
Stitch + Cursorの組み合わせは「デザインの方向性を素早く探る」用途に最適ですが、プロダクション品質のUIをそのまま出すにはまだ限界があります。実務では「AI生成→デザイナーレビュー→微調整」の3ステップを組み込むのがベストプラクティスです。特にブランドガイドラインが厳密な企業では、AIは「たたき台の高速生成ツール」として位置づけましょう。
よくある質問（FAQ）
Q. Google Stitchは無料で使えますか？
A. はい、Google Stitchは現在無料で利用可能です。Googleアカウントがあれば誰でもアクセスでき、画像からUIデザインを生成できます。
Q. CursorとVS Codeの違いは何ですか？
A. CursorはVS Codeをベースにしたエディタですが、AI機能が統合されている点が最大の違いです。自然言語でコードの修正指示を出せるため、デザインからコーディングへの変換が格段にスムーズになります。
Q. プログラミング経験がなくてもできますか？
A. プロンプトでデザイン案やコードを作ることはできますが、生成されたコードの理解と動作確認は必要です。まず変更前の状態を保存し、検証用の環境で一画面ずつ試してください。認証・保存・決済などへの影響を判断できない場合は、公開前に開発担当者へ確認を依頼します。作業時間は対象画面や修正範囲で変わるため、一律の削減率は示せません。
Q. Google Stitchはダウンロードが必要ですか？
A. 公式発表ではstitch.withgoogle.comからの利用が案内されており、本記事でもWebサイトにアクセスして使っています。Googleアカウントでログインして始められます。
Q. Google Stitchは日本語で使えますか？
A. 本記事では日本語のプロンプトで指示し、UIデザインを生成できました。生成されたUIの文言が意図した言語になっているかは、書き出す前に確認してください。
Q. Cursor以外のAIコーディングツールでも同じ手順でできますか？
A. 本記事の実装環境はVisual Studio CodeにClaudeの拡張機能を入れた構成でした。書き出したHTMLファイルを読み込ませて「既存のロジックを維持したままUIだけ差し替える」と依頼する流れは、ファイルを読めるAIコーディングツールであれば同じように試せます。2026年3月以降は、MCPサーバーやSDKでStitchと直接連携する方法も公式に案内されています。
UIを差し替えた後の確認チェックリスト
見た目の再現と、利用者が操作を完了できることは分けて確認します。以下は今回の実績値ではなく、同様のリニューアルを行う際の確認項目です。
画面幅：パソコンとスマートフォンで文字・ボタン・入力欄が重ならず、必要な操作が画面外に隠れていないか。
入力とエラー：必須項目が分かり、入力エラーの場所と直し方が示されるか。キーボードでも操作できるか。
処理中と失敗時：処理が続いていること、完了したこと、失敗後に再試行する方法が分かるか。
既存機能：変更前にできたログイン、アップロード、生成、保存などが、同じ条件で完了するか。
公開判断：変更箇所・確認結果・未解決の問題を記録し、重大な不具合があれば変更前へ戻せるか。
修正件数や制作時間だけで成果を判断せず、対象の利用者に同じタスクを試してもらい、完了率・所要時間・迷った箇所を確認してください。
■ まとめ
今回は「Google Stitch × Cursor」を使って、自社サービス「ドヤインタビューAI」のUIを約1時間でリニューアルした全工程をご紹介しました。
ポイントをまとめます。
Google StitchはUIデザイン生成ツールとして最高クラスの精度
詳細なプロンプト設計がデザイン品質を左右する
バイブコーディング（Cursor）で実装すると雰囲気は再現できるが細部の調整は必要
デザイナーなし・エンジニアなしでも、このワークフローでUIの大幅改善は可能
「あなたのサービス、Stitchで直したい箇所はどこ？」——ぜひコメントやSNSで教えてください！
▶ 動画で全工程を確認する：
参考データ：株式会社スリスタ『企業の生成AI活用実態調査2026』（全国の会社員400名）より、職場の生成AIツールシェア実態2026。