Google Stitchでバイブデザインを試して管理画面をつくってみた話

おはようございます、デザイナーとしてアートディレクションとUX業務を担当しているSHIRAI（@shirai_astaster）です。

どの業務でもUXデザインが関わってくるのですが、最近は生成AIを使いながらデザイン業務をどう効率化できるかをいろいろ試しています。

今回は最近大幅なアップデートがあり話題になっている、Google製デザインツール「Stitch（ベータ版）」を使って、バイブデザイン（Vibe Design）を試してみました。

Design UI using AI with Stitch from Google Labs

普段は「Figma Make」も使っていたのですが、Stitchを実際に触ってみて感じたのは、デザインを立ち上げるスピードの速さです。
Figma Makeはコード生成まで含むためまあまあ時間がかかりますが、Stitchはもっと気軽にUIを出して調整していける感覚があります。

実際に試してみると、その過程がなかなかよかったので、今回はその内容を共有します😀😀

Stitchでマテリアリーの管理画面をつくってみた

今回バイブデザインを試してみたのは、弊社サービス「マテリアリー」の管理画面です。

このサービスは、素材の細かなディテールを伝えられる、建築・ファッション業界向けを想定した素材スキャン＆デジタルカタログサービスです。色だけではなく、光沢や凹凸、透明感といった情報までデジタル上で扱えるのが特徴です。

マテリアリーの管理画面では、一般的なブログCMSやECの管理画面ではなく、素材の質感、光沢、凹凸、透明感、カテゴリ、用途、タグ、公開状態などを扱う、少し専門性の高い業務UIを想定しています。

作成対象として指定したのは以下の3画面。

• ダッシュボード

• 素材一覧

• 素材詳細／編集

加えて、「左サイドバー」「上部ヘッダー」「検索」「フィルタ」「ステータス表示」「一覧テーブル」なども要素として明記しました。

実際にできあがった3画面はこちら

ダッシュボードは全体状況の把握、一覧は大量データの確認、詳細画面は素材プレビューを見ながら編集、という役割分担がかなり自然にできていました。想像していた以上に、業務画面としての骨格が最初から成立していたのが印象的です。

Stitchにはデザインの意図を言語化したものを投げた

最初は「管理画面をつくってください」という短い指示で試しましたが、悪くはないものの汎用的で、マテリアリーらしさは出しきれていませんでした。

そこで Stitchが解釈しやすいように情報を整理して渡してみることにしました。結果として、生成されたUIのクオリティにもかなり差が出てきました。

ポイントは、要件をそのまま並べるのではなく、「何のサービスか」「どんな画面をつくるか」「必要なUI」「トーン」「避けたい表現」といった単位で整理したことです。

実際に入力した情報は以下。

BtoB向け素材デジタルカタログサービス「マテリアリー」のデスクトップ用管理画面をデザインしてください。表記はすべて日本語。

【サービス概要】
企業向けに、素材データを登録・整理・確認・公開するための業務システムです。
一般的なブログCMSではなく、素材そのものの質感や属性を丁寧に管理するための、プロ向けの管理画面です。

【管理対象の素材情報】
- 素材名
- カテゴリ
- 用途
- タグ
- 質感
- 光沢
- 凹凸
- 透明感
- 色
- サイズ・規格
- 素材説明
- 画像
- 公開状態（下書き／確認中／公開中）
- 更新日時
- 管理担当者

【目的】
- 素材データを登録しやすい
- 大量の素材を一覧・検索・整理しやすい
- 公開前の確認がしやすい
- BtoBの実務画面として信頼感がある
- 素材そのものが主役に見えるUIにする

【作成する画面】
1. ダッシュボード
2. 素材一覧
3. 素材詳細 / 編集

【レイアウト共通要件】
- 左に固定サイドバー、上部にヘッダーがあるデスクトップUI
- 情報量は多いが、余白を広く取り、圧迫感を抑える
- 12カラムグリッドを意識した整然としたレイアウト
- 白とライトグレーを基調にした落ち着いた配色
- 素材画像やプレビューが主役になる構成
- 派手な装飾や強いグラデーションは使わない

【デザインの方向性】
- ミニマル
- 上質
- 静か
- 洗練
- 余白が広い
- プロ向け
- ギャラリーのような静けさと、業務システムとしての機能性を両立

【避けたい表現】
- 安っぽいEC管理画面
- 派手なSaaS感
- ネオンカラー
- ポップすぎるUI
- 情報が詰まりすぎた雑然とした画面
- マーケティングツールのような強い装飾

【画面1：ダッシュボード】
目的：全体状況と作業優先度を把握できること

必要要素：
- 総素材数
- 下書き数
- 確認待ち数
- 公開中件数
- 最近更新した素材
- 確認依頼中の素材一覧
- 最近追加された素材のサムネイルプレビュー
- 検索バー
- クイックアクション（新規素材登録、CSV一括登録、下書き確認）

見せ方：
- KPIカードは小さめで控えめに
- 数字を主張しすぎず、整った余白で見せる
- 最近更新した素材や確認待ち素材を、見やすいテーブルまたはリストで表示
- 素材サムネイルは上質に見えるサイズ感で配置

【画面2：素材一覧】
目的：大量の素材を効率よく探し、状態を把握し、絞り込みできること

必要要素：
- ページタイトル
- 検索バー
- フィルタ
  - カテゴリ
  - 用途
  - タグ
  - 公開状態
  - 更新日
  - 担当者
- 件数表示
- テーブルまたはカード一覧
- 各素材のサムネイル
- 素材名
- カテゴリ
- タグ
- 公開状態バッジ
- 更新日時
- 編集ボタン
- 並び替え
- ページネーション

見せ方：
- 一覧性を優先し、情報は整然と配置
- テーブルベースでも、素材サムネイルが美しく見えること
- 公開状態は控えめなステータスバッジで分かりやすく表現
- 大量データでも視認性が落ちない、余白のある設計
- 業務感はあるが冷たすぎず、上質な印象にする

【画面3：素材詳細 / 編集】
目的：素材情報を正確に編集し、プレビュー確認しながら公開準備できること

必要要素：
- 素材名入力
- カテゴリ選択
- 用途選択
- タグ入力
- 質感、光沢、凹凸、透明感の選択UI
- 色、サイズ・規格、説明文の入力欄
- 画像アップロード領域
- 素材プレビュー
- 公開状態表示
- 更新履歴または最終更新情報
- 下書き保存ボタン
- 確認依頼ボタン
- 公開ボタン

見せ方：
- 左に編集フォーム、右に素材プレビューの2カラム構成
- アップロード領域は広めで上品に
- プレビューは素材の質感が伝わる大きさで見せる
- フォームは業務UIとして使いやすく、ラベルや間隔を丁寧に設計
- CTAボタンは目立ちすぎず、状態ごとの優先度が明確
- 公開前確認がしやすい落ち着いた編集画面にする

【UX要件】
- 一覧性が高い
- 状態が分かりやすい
- 公開前確認がしやすい
- 大量データでも使いやすい
- 実務担当者が長時間使っても疲れにくい
- 素材そのものの魅力を損なわないUI

【ビジュアルトーン】
- 背景：白〜ごく薄いグレー
- 文字：濃いグレー
- 線や区切り：薄いグレー
- アクセントカラーはごく控えめなニュートラルカラー
- 角丸は小さめ〜中程度
- シャドウは極薄、またはなし
- 余白を十分に使って静かな高級感を出す

洗練されたBtoBプロダクトデザインとして、ミニマルで信頼感があり、素材の質感が引き立つ管理画面にしてください。

といった形で、極力デザインの判断基準を言語化して渡してみました。見た目の好みではなく、どういう空気感を目指したいのか、何を主役にしたいのか、どんな目的の画面なのか。この部分を明文化しておくことで、生成されるUIの方向がかなりブレにくくなる気がしました。

そのうえで、「想定するユーザー像」や「想定される業務フロー」などを入れるとさらに実務寄りUIが追求できそうです😀😀

Stitchを使ってみて感じたこと

正直、ここまでいい感じのUIデザインが出るとは思っていませんでした。

もちろん細かい余白や情報の優先順位、コンポーネントの整合など、人が詰めるべきところはまだたくさんあります。

それでも最初のたたき台として見るとかなり優秀で、業務UIとして必要な「一覧性」や「状態のわかりやすさ」もある程度成立していました。 見た目のトーンも、こちらが意図したミニマルで静かな方向にかなり寄っていて、素材を主役に見せたいという狙いにも合っていました。

今回あらためて、生成AIでいいアウトプットを得るには「こちらがどれだけデザインを言語化できるか」がかなり重要だと感じました。

バイブデザイン（Vibe Design）というと軽やかに聞こえますが、実際にはかなり設計的で、どういう空気感を目指すのか、何を主役にするのか、どんな印象は避けたいのかを整理して伝えるほど、生成されるUIの精度も上がっていく気がしました😀😀