「管理画面をGoogle Stitch だけで本当に設計できるか」という問いを立てて、実際にやってみた。
対象は、架空のSaaSサービスの管理画面。ユーザー管理、請求・プラン管理、分析ダッシュボード、設定ページ——実際のプロダクトで必要になる画面を一通り含む、それなりに複雑な設計だった。
結果は「できる部分とできない部分がはっきり分かれた」だった。そしてその境界線は、「AIデザインツールというものが今どこにいるか」を示す、なかなか面白い地図になった。
一言で言えば、AIデザインツールは「見た目の仮説を素早く作る」のは既に実用レベルに達しているが、「情報設計と状態設計」はまだ人間の判断が必要な領域として残っている。この区分を理解することが、AIデザインツールを適切に使いこなす鍵だ。
SaaS管理画面が持つ特有の要件
SaaSの管理画面は、一般的なLPやコンテンツページとは異なる難しさを持っている。主な特徴は以下の通りだ。
- データ密度が高い：数値・リスト・グラフが同一画面に共存する
- 状態の種類が多い：ローディング・エラー・空の状態・権限による表示分岐など
- 操作が複雑：一覧・詳細・編集・削除・確認ダイアログなど操作フローが入り組んでいる
- 役割（ロール）によって表示が変わる：管理者・一般ユーザー・閲覧のみなど権限別のUIが必要
- 長期間使われる：LPと違い、毎日使うユーザーが存在するため使いやすさが最重要
これらの要件を念頭に置きながら、Google Stitch でどこまで対応できるかを試した。
Google Stitch が得意だった管理画面のUI
まず「思ったより得意だった」と感じた部分を紹介する。
ダッシュボードの骨格
KPIカード＋グラフ＋最近のアクティビティ一覧、というダッシュボードの標準的な構成は、一発でそれっぽいものが出てきた。情報の配置・視覚的な階層・データの見せ方の大枠が、プロンプト一発でほぼ完成形に近い状態になった。
これには驚いた。「ダッシュボードUI」という概念を大量に学習しているAIだからこそ、「ダッシュボードらしいレイアウト」を的確に出せるのだと思う。
一覧テーブルのUI
ユーザー管理ページの「ユーザー一覧テーブル」は、ヘッダー・ソートアイコン・ページネーション・行のホバー状態を含む複合的なUIだが、プロンプトで「ユーザー一覧テーブル、列は名前・メール・ロール・最終ログイン・操作ボタン、ページネーション付き」と指定すると、実用レベルのものが出てきた。
テーブルのUIはWebアプリでよく使われる要素のため、AIの学習データが豊富だと思われる。指定した列構成を正確に反映した出力になりやすかった。
設定ページの構成
「一般設定・セキュリティ・通知・請求情報」のようなタブ型設定ページも、生成精度が高かった。左サイドにカテゴリ一覧、右側に各設定フォームという構成は、プロンプト通りに出てきた。
Google Stitch が苦手だった管理画面のUI
一方で、「ここは人間が設計するしかない」と感じた部分もあった。
権限による表示の分岐
「管理者には編集・削除ボタンを表示するが、一般ユーザーには表示しない」という権限制御のUIは、Google Stitch だけでは対応が難しかった。
プロンプトで「管理者向けの表示と一般ユーザー向けの表示を比較できるデザイン」と指定すると、2つのバリエーションを生成しようとするが、差分が分かりにくい出力になることが多かった。
権限分岐のUIは、それぞれの権限レベルのUIを個別に生成して、仕様書でその違いを説明するという方法で対処した。
複雑な操作フロー
「ユーザーを削除するときの確認ダイアログ→削除完了通知→一覧の更新」のような、複数ステップにわたる操作フローは、Google Stitch 一つで全画面をシームレスに設計するのは難しかった。
各状態を個別に生成して、フロー図（矢印で繋いだ図）でその繋がりを示すという方法で補完した。
「空の状態」の設計
ユーザーがまだ一人もいない「ユーザー一覧テーブルの空状態」や、通知が一件もない「通知一覧ページの空状態」は、意識的に指定しないと生成されない。
「データが0件の空状態のUI。中央にイラストとメッセージ「まだユーザーがいません。最初のユーザーを招待しましょう。」とCTAボタン。」というプロンプトで個別に生成する必要があった。
実際に私がこの設計を通じて感じたのは、「空の状態のUXデザインの重要性」だ。ユーザーが初めてサービスを使うときに見るのはこの画面であり、ここの設計がオンボーディング体験を左右する。Google Stitch は「指定すれば作れる」が「自動的に考えてくれる」わけではないため、設計者がこういった観点を持つ必要がある。
この経験から考えた「AIデザインツールの今」
SaaS管理画面の設計を通じて、AIデザインツールの現在地についていくつかの考えが整理された。
「型のあるUI」は既に実用水準
ダッシュボード・一覧テーブル・フォーム・設定ページ——これらは「典型的なパターン」が存在するUIだ。AIは大量のUIデータを学習しているため、こういった「型のあるUI」の生成精度は既に実用水準にある。
プロンプトで「何が必要か」を伝えれば、それなりの骨格が出てくる。細部の調整は必要だが、「ゼロから考える」手間は大幅に省ける。
「そのサービス固有の問題」への対応はまだ人間が必要
一方で、「このサービスのユーザーはどういう状況でこの画面を開くか」「この操作のフローで詰まりやすいのはどこか」という、サービス固有の設計判断は、AIには担えない。
AIは「一般的に良いとされるUIパターン」を出すことはできるが、「このユーザーにとって本当に使いやすいUI」を判断するには、そのサービスとユーザーを理解している人間の介在が必要だ。
AIデザインツールの「次」に期待すること
現在のGoogle Stitch を使い倒した上で、「次のステップ」として期待することが二つある。
期待1：状態を一括で設計できる機能
「このUIの通常状態・ローディング・エラー・空の状態・成功状態を全部生成して」という一つの指示で、全状態のUIをセットで出してほしい。現状は状態ごとに別のプロンプトが必要だが、これが一括でできると管理画面の設計が大幅に速くなる。
期待2：デザインの「つながり」を理解した生成
「このページから次のページへの遷移をデザインしてほしい」という、ページ間のフロー設計への対応を期待している。現状は各ページを個別に生成することしかできないが、「ユーザーがどの経路でどの画面に到達するか」を理解した上でデザインの整合性を保つ機能があれば、より複雑なプロダクトの設計にも対応できる。
よくある質問（FAQ）
Q1. SaaS管理画面の設計にGoogle Stitch を使う場合、何から始めるのが良いですか？
最も使用頻度が高いメインダッシュボードから始めることをおすすめします。メイン画面のデザイントーンが決まると、他のすべての画面の「基準」になります。また、ナビゲーション構造（どのメニュー項目があるか）を最初に決めておくと、全ページにわたって一貫した構成になります。
Q2. Google Stitch で設計したSaaSのUIを開発チームに渡す最善の方法は？
スクリーンショット集とページ一覧表に加え、各画面の「目的・主要コンポーネント・インタラクション仕様・状態一覧」をドキュメント化して渡すことをおすすめします。UIビジュアルだけでは伝わらない情報を補完することで、開発チームが実装時に迷う場面が減ります。
Q3. 本格的なSaaS開発でGoogle Stitch を使っているチームはありますか？
2026年4月時点では、スタートアップを中心に「プロトタイピング段階」での活用事例が増えています。本番環境の最終デザインにそのまま使うケースはまだ少ないですが、「要件定義〜プロトタイプ段階」の活用は広がっています。【要確認：最新の活用事例については公式情報・コミュニティをご参照ください。】
Q4. デザイナーがいるチームでも、Google Stitch を使う意味はありますか？
あります。デザイナーがいても「最初のアイデア出し・方向性の比較」にGoogle Stitch を使うことで、Figmaで作業する前の「探索フェーズ」を速めることができます。デザイナーの時間を「アイデア探索」ではなく「品質の仕上げ」に集中させる使い方が効果的です。
Q5. Google Stitch で設計した管理画面を実際にリリースしたことはありますか？
Google Stitch で設計した骨格をFigmaで仕上げ、その後エンジニアが実装した、という形での「間接的なリリース」はあります。Google Stitch のアウトプットがそのままHTMLとして本番環境に入るケースは少ないですが、設計フローの上流部分での貢献は確実にあります。
Q6. 管理画面のレスポンシブ対応はGoogle Stitch で対応できますか？
PCブラウザ版の管理画面は得意ですが、スマートフォン向けのレスポンシブ対応は難しいケースがあります。管理画面はPC前提の設計が多いため、「PC版を先に設計→必要に応じてモバイル版を別途生成」という方法が現実的です。
Q7. AIデザインツールはデザイナーの仕事を奪うと思いますか？
「型のある定番UIを作る作業」の一部は変化していくと思いますが、「ユーザーと向き合い、本質的な問題を解くデザイン」はAIが代替できる部分ではないと感じています。むしろ「手を動かす作業」が速くなることで、「考える・観察する・検証する」に使える時間が増え、デザイナーの価値が高まる領域がシフトしていく、というのが今の見立てです。
Q8. Google Stitch 以外の選択肢として、今注目しているAIデザインツールはありますか？
v0（by Vercel）はReactコンポーネントを直接生成できる点でエンジニアフレンドリーです。Figma AIは既存のFigmaワークフローに統合されている点が強みです。Galileo AIはUI生成に特化しています。Google Stitch と並んで、用途に応じた使い分けを探ることが今後の課題です。
設計ツールとしての「成熟度」をどこで測るか
SaaS管理画面の設計を通じて、AIデザインツールの「成熟度」を測る基準が見えてきた気がする。
それは「どれだけ複雑なプロダクトの、どれだけ深い部分まで対応できるか」だ。
LPやランディングページは「状態が少ない・インタラクションが少ない・ユーザーが見るだけ」という意味でシンプルだ。AIはここをほぼ実用水準でこなせる。
管理画面は「状態が多い・インタラクションが複雑・ユーザーが日常的に使う」という意味で複雑だ。AIはここを「骨格は作れるが、詳細設計は人間が必要」というレベルにある。
この境界線が、今後どこまで移動するか。AIデザインツールの進化を、この管理画面の「どこまで対応できるか」という基準で追いかけていくのが、今の自分の一つの楽しみになっている。
