Vibe Design
Google Stitch と共に Google が提唱するデザイン哲学。最初から UI パーツを細かく指示するのではなく、「何を達成したいか」「ユーザーに何を感じてほしいか」という意図・感情から設計をスタートする考え方。
「Vibe Coding」（コードより意図を先に伝えるプログラミングスタイル）のデザイン版に相当する概念。
核心
設計の出発点を「UI パーツの細かい仕様」ではなく「ビジネス目的とユーザー体験の意図」に置く。
| 従来のアプローチ | Vibe Design |
|---|---|
| ヘッダーの色を 1b3a5c にしてください | 信頼感があり、整理されている印象にしてください |
| ボタンを右上に配置してください | 採用担当者がすぐ行動できるようにしてください |
| フォントサイズを 40px にしてください | 名前と肩書きが3秒で伝わるようにしてください |
実践方法
ツールを開く前に4項目を言語化する：
誰に見せるか:
何を伝えたいか:
どう感じてほしいか:
避けたい印象:
この4項目がプロンプトの核になる。意図を先に置いた方が AI の生成案がぶれにくく、後続の修正回数も減る。
Vibe Design の系譜
「Vibe」を冠する AI 活用スタイルはデザイン以外にも広がっている：
| スタイル | 概要 |
|---|---|
| Vibe Coding | コードの細かい実装より意図・目的を優先してAIに指示するプログラミングスタイル |
| Vibe Design | UIパーツより意図・感情を優先してAIにデザインを指示するスタイル（Google提唱） |
| Vibe Writing | 完成形より素材（音声吐き出し）を優先してAIに文章整理させるスタイル（Cursor 文章執筆（AIファースト環境） 参照） |
いずれも「人間は意図・方向性を与え、細部の実装は AI に委ねる」という思想で共通する。
実践ツールの例
- Google Stitch — Google提唱のVibe Designツール（DESIGN.md駆動）
- Claude Design — Anthropicのウェブデザイン生成ツール。モック画像と素材を渡すだけでLP実装。GPT image 2 との組み合わせで高品質な素材を用意することが鍵。