Vibe Design

バイブデザインとは何か、従来のデザインプロセスと何が違うのか？

バイブデザイン（vibe design）とは、マルチモーダルAIツールを使ってインターフェースを生成し、反復し、さらには納品までする手法だ。キャンバス上でコンポーネントを一つずつ置く代わりに、一文、スクリーンショット、参考URL、手描きスケッチを渡すと、ツールが編集可能で、ときにクリックもできるプロトタイプを返し、それを会話で修正し続ける。

従来のプロセスは空白のキャンバスから始まり、主な動作は配置と調整だ。バイブデザインは意図の記述から始まり、主な動作は評価と誘導になる。よくある説明では、主な入力は手作業ではなく意図だとされる。

なぜバイブデザインという言葉が生まれたのか？

これは「vibe coding」の延長にある。vibe codingは自然言語でAIに指示してソフトウェアを書かせることで、Andrej Karpathyが2025年初めに提唱した。その後、同じ考え方が視覚レイヤーに当てはめられた。Googleが2026年3月のStitchの更新で、そのインタラクションモデルをvibe designとして打ち出したことで、この言葉はより広く知られた。

誰が最初にこの言葉をデザインに使ったかは資料によって異なり、出典を示さないものもあるため、ここでは考案者を特定しない。言えるのは、これはまだ形成途中の業界用語で、著者によって定義が少しずつ違うということだ。

バイブデザインは実際にどう進めるのか？

典型的な流れはこうだ。まず画面を一、二文で記述し（例：「サイドバーがあり、MRRのグラフと最近の顧客表がある暗い分析ダッシュボード」）、最初の版を生成させる。次に、配色を三案、レイアウトを五案といったように複数の方向を一度に求めて比較する。一つを選んだら、会話で細部を直していき、最後にコードを書き出すか、デザインツールに戻して開発や仕上げへ渡す。

生成が速いため、20〜50のバリエーションを出すことも可能だとElekenはまとめているが、これは管理された測定ではない。実際に時間がかかるのは後半で、どの版が正しいかの判断、ブランド規定の適用、アクセシビリティや境界状態の確認だ。

デザイナー、PM、小さなチームにとって実際の影響は何か？

利点は探索が速くなることだ。決める前により多くの可能性を見られ、PMもアイデアをチームで議論できる画面にしやすい。ただし既知の限界は頭に入れておきたい。複数のレビューが、出力が似通いやすいと指摘している。ある実機テストでは、生成画面が色のコントラストやタッチターゲットの大きさで基本的なアクセシビリティ要件を満たさなかった。正式なデザインシステムを読み込んで強制できないツールもあり、書き出されたコードはレビューなしで公開すべきでない。

現実的な使い方は、バイブデザインを探索とスケッチの段階として扱い、その後にデザインシステムの制約と人によるレビューを置くことで、納品の最終地点にはしないことだ。