vibe design（バイブデザイン）とは？意図でデザインする2026年版ガイド
UIの雰囲気と方向性を言葉で伝え、あとはAIに生成させる——けれど、ほとんどのツールは見栄えのいいモックアップで止まってしまいます。本記事では、vibe designの本当の意味、vibe designとvibe codingの違い、そしてプロンプトから実際に出荷できるコードへ持っていく方法を解説します。
2026年、デザイナーも創業者もプロダクトエンジニアも「vibe design」という言葉を耳にし続けています——けれど記事の半分はベンダーの売り込みで、残りの半分はAIが画面を吐き出したあとに何が起こるのかを語りません。本ガイドでは、明確な定義、その系譜、ワークフローの回し方、そして誰も口にしないたった一つのギャップ——出荷（シッピング）について整理します。
vibe designとは？
vibe designとは、主たる入力が「意図」——自然言語、参照画像、あるいはURLで表現されたもの——であり、手作業ではなく感覚で舵を取りながらAIにデザインを生成させる、UI・プロダクトデザインのアプローチです。
コンポーネントを配置し、余白を微調整し、カラーピッカーを探し回る代わりに、あなたはvibe（雰囲気）——トーン、レイアウトの方向性、感触——を言葉で伝えます。職人というより、レビューして方向を修正するクリエイティブディレクターのように振る舞うのです。これを定義づけるのは3つの要素です。
- 意図を入れる——プロンプト、スクリーンショット、参照サイト、あるいはラフスケッチ。
- 生成が返る——AIは白紙のキャンバスではなく、実際のUIを返します。
- 舵取り——納得いくまで、自然言語で批評し方向を修正します。
vibe designとvibe codingの違い
この言葉は、2025年にAndrej Karpathyが提唱したvibe codingを直接の祖先としています——コードを手で書くのではなく、欲しいものを言葉で伝えてAIに実装させる、という考え方です。vibe designは、その同じ「意図ファースト」の哲学をビジュアルレイヤーに適用したものです。
| vibe coding | vibe design | |
|---|---|---|
| 入力 | 意図（何をすべきか） | 意図（どう見え、どう感じさせるか） |
| 出力 | 動くコード | 動くインターフェース |
| 舵取りの軸 | 振る舞いとロジック | トーン、レイアウト、センス |
| 広めたのは | Karpathy、2025年 | Google Stitch、2026年初頭 |
両者は同じ大きな変化の両端であり、2026年には収束しつつあります——もっとも役に立つエージェントは、デザインとビルドの両方をこなすのです。Googleは2026年初頭のStitchのローンチで「vibe design」を一気に主流へと押し上げ、このカテゴリーに名前と検索需要の波をもたらしました。
vibe designの実際の進め方
典型的なループは、4つの動きで回ります。
- vibeを言葉にする——「落ち着いていて信頼感のあるフィンテックのダッシュボード、余白たっぷり、アクセントカラーは1色」。
- 生成する——AIが実際の画面（または複数のバリエーション）を返します。
- 舵を取る——「もっと密度を上げて」「もっと暖かいパレットに」「空の状態（エンプティステート）を追加して」。
- 反復する——意図と一致するまで繰り返します。
見返りはスピードとアクセスのしやすさです。1人か2人がAIを指揮すれば、週に何十もの洗練されたコンセプトを生み出せますし、デザイナーでない人でも重厚なツールを覚えることなく、説得力のあるインターフェースにたどり着けます。
Open Designのようなエージェントネイティブなワークスペースでは、このループが一つの面の上に収まります——あなたがvibeを伝える相手は、後でコードまで書けるのと同じエージェントなので、デザインの舵取りとプロダクトのビルドが分断された2つのツールに分かれることはありません。（開示：私たちはOpen Designを開発しています。）
誰も語らないギャップ——モックアップから出荷へ
ここが、ほとんどの「vibe design」ツールがそっと止まってしまう場所です——静的なモックアップのところで。美しい画面は手に入るものの、そこから先は自分の手でコードに翻訳し直す作業に逆戻りし、デザインは二度と更新されません。
本物のvibe designは、絵で終わるべきではありません。より難しく、より価値のあるバージョンがエージェント型のvibe designです——デザインを生成し、それを批評して進化させ、本番コードまで出荷するエージェント。舵を取るそばから、デザインとコードを同期させ続けます。
| 段階 | 今日のほとんどのツール | エージェント型のvibe design |
|---|---|---|
| UIを生成する | ✅ | ✅ |
| 自己批評して反復する | ❌ 静的な画面が1枚 | ✅ エージェントが修正する |
| 実際のコードへ出荷する | ❌ あとで手作業で翻訳 | ✅ 動くコードを書き出す |
| デザイン ↔ コードを同期させ続ける | ❌ | ✅ |
| オープンソース / BYOK | たいていクローズド | ✅ |
これこそOpen Designが走るレーンです——オープンソースで、エージェントネイティブなデザインワークスペースです。あなたがvibeを伝えると、エージェントがUIをデザインし、それを進化させ、実際のコードへ出荷します。BYOKに対応し、クローズドなキャンバスに閉じ込めるのではなく、あなたがすでに使っているコーディングエージェント（Claude CodeやCursorなど）と並んで動きます——だから、下のウォークスルーはワークフローを主張するだけでなく、実際に見せます。
私たちが常に回している具体的なループ：ダッシュボードをプロンプトする → 動くレイアウトを得る → 「余白を詰めてダークモードを追加して」 → エージェントがデザインとコードを一緒に修正する → 本番用のHTMLを書き出す。成果物はスクリーンショットではなく、出荷できるものです。
vibe designにまつわるよくある誤解
- 「デザイナーを置き換える」——いいえ。デザイナーをクリエイティブディレクションとセンスへとシフトさせるのであって、そこでは判断力がより重要になります。決して軽くはなりません。
- 「使い捨てのモックアップしか作れない」——それはツールがモックアップで止まる場合だけです。エージェント型のツールは、それをコードまで持っていきます。
- 「技術的な知識が必要」——むしろ逆です。意図こそがインターフェースなのです。
- 「ただのAI画像生成でしょ」——vibe designは平らな絵ではなく、構造化された編集可能なUIを生み出します。
今日からvibe designを始めるには
- モックアップだけでなく、コードまで出荷できる「意図ファースト」のツールを選ぶ——作業が行き止まりにならないように。
- 参照から始める——スクリーンショットやURLを貼り付け、何を残し何を変えるかを伝えます。
- 普段の言葉で舵を取る——密度、パレット、トーン、各状態を反復します。
- 早めにコードへ落とす——デザインが実際のコードになるのが早いほど、何がうまくいくかを早く学べます。
- オープンで、自分のものに保つ——オープンソース + BYOKなら、カテゴリーが速く動く中でもロックインを避けられます。（クローズドなキャンバスから移ってくるなら、Figmaから離れるオープンソースの道や、Claude Designからの道はこちらです。）
まとめ
vibe designとは意図ファーストのデザインです——あなたが言葉で伝え、AIが生成し、あなたが舵を取る。vibe codingから生まれ、2026年にGoogle Stitchによって主流へと押し上げられたこの手法は、アイデアとインターフェースの距離を一気に縮めます。けれど、本当に意味を持つバージョンはモックアップで止まりません——それはエージェント型であり、コードまで出荷します。そこから始めれば、vibe designは見栄えのいい絵ではなく、本物の成果物になります。
試してみる準備はできましたか？ アプリを開くか、デザインシステムとスキルのライブラリを見る。