🖼️

やってくる Vibe Design の波。AI時代のプロダクトはエンジニアだけでやっていく🌊

2025/09/17に公開

VTeacher 所属の Suzuki です。

巷では「Vibe Coding の次は Vibe Design だ！」という流れが来ていますね。
その言葉を使わないとしても、「 AI にデザインを任せられるのでは？」という会話を、いろいろなところで耳にするようになりました。そもそも日本の場合、とくにプロダクト開発においては、その舵取りをデザイナーやプロデューサーが担うことが多く、そこは日本の特徴になってきている気がします。
（2000年代以降の IT ベンチャーでデザイナー・プロデューサーを置く流れ、とくに iPhone ブーム以降は顕著。ゼネコン体質である日本の受託開発にも合っていた、など様々な理由があると思います）

ただ、原点に立ち返ると、
1人もしくは気の合うエンジニアが 2〜3 人集まり、情熱を注いで必死にプロダクトを作る、そしてエンジニア自身が VC にプロダクトを見せて、資金調達する。これが本来のスタートアップの王道だと言います。海外ならとくに。

何が言いたいかと言うと、その中にデザイナーはいません。

ある意味、この Vibe Design の流れこそが、本来の正しいプロダクト開発へと軌道修正できるきっかけになるのかもしれません。かつてプロダクト開発を夢見ていた Web エンジニアが、再び挑戦してくれることを個人的には願っています。CTOがエンジニアのゴールではありません。

Vibe Design

Vibe Coding は雰囲気コーディングで、モデルに指示して、あとは出来上がりを待つというイメージだと思います。 Vibe Design も同様のイメージです。生成する目的はデザインではありますが、直接プログラムに組み込める形、例えば React であれば Component や Page として生成してくれて、そのままプロジェクトに利用できるというものが Vibe Design の理想系である印象です（つまり Design と言いながらも、実態としては Coding ）。

Vibe Coding は Vibe から Viable 仕様（ Spec ）駆動の流れですが、現状 Vibe Design は思想が始まったばかりで、ツールもワークフローも定まっていません。既存デザイナーの役割を単純に AI に置き換えるだけでは難しいでしょうから、独自のワークフローを確立する必要があると思いますが・・・、

現時点、Figma であっても、AIはアシスタント止まりです。
（それでも、指示を入力すると AIがそれに応じてデザインを修正してくれる）

まあ、ただ、この現状を理解できるところはあります・・・

Figma はデザインツールとして職人を支える立ち位置ですから、人間の代わりに AI が手を動かす Vibe Design は（人間との）競合関係になります。ただ、近い将来には Vibe Design が広がっていく流れになるでしょう。そのために Figma はこのタイミングで上場したのではないか、と勘ぐってしまいます。

新しいデザインシステム

現状の Vibe Design は思想が始まったばかりで、これといった決定版がまだありません。そこでチームメンバーが作った desys を使って試してみたいと思います。 desys は未完成の Vibe Design System で実験的ではありますが、Vibe Coding 時代のワークフローの雰囲気をつかむには有用だと思います！

ソースコード（OSS）
https://github.com/rgbkids/desys

デプロイしたものはこちらです。

https://desys.vercel.app

この中の Catalog と Design は、この Web アプリ自体（ desys アプリ自体）のデザイン（ CSS ）を生成 AI に指示して、即時に変更・反映できる機能です。

もうひとつ Code という機能があるので、今回はそれを使います。
Code は大雑把な Vibe Design 向けのデザインシステム機能で、AIにデザインを指示すると、Reactのコンポーネントを生成するので、そのままプロダクトにも活用できます。

desys の良さは、 Vibe Design 用のプロンプトはそのままで、モデルを切り替えるだけで、何度でも簡単に Design と Code を生成し直せるという点です。

ここは大事なポイントで、今回とくに検証したいのは、モデルごとのデザイン生成力の違いです。

――正直なところ、現時点ではデザイン生成に関しては限られたモデル以外では厳しいのではないかという印象があり、それを確かめたい思いがあります。

デザイン生成力におけるモデルの差

Vibe らしく、雑なプロンプトを渡してモデルの差を見てみます。

ちなみに desys のデフォルトモデルは古いので、新しいモデルを使いたい場合は、ローカル環境で次のファイルを変更してください。
（あらかじめ各社のAPIキーを自身で取得しておいてください）

lib/openai.ts
lib/gemini.ts
lib/anthropic.ts

今回は次のようにします。
（ Claude の検証は Opus と Sonnet ）

// GPT-5: さまざまな業界にまたがるコーディングや自律的タスクに最適なモデルです。
export const DEFAULT_OPENAI_MODEL = 'gpt-5'

// Gemini 2.5 Pro: 思考と推論の強化、マルチモーダルな理解、高度なコーディングなど。
export const DEFAULT_GEMINI_MODEL = 'gemini-2.5-pro'

// Claude Opus 4.1 - 複雑な推論と高度なコーディングにおいて新たな基準を確立します。
export const DEFAULT_CLAUDE_MODEL = 'claude-opus-4-1-20250805'

// Claude Sonnet 4 - 卓越した推論性能と効率性を備えた高性能モデルです。
export const DEFAULT_CLAUDE_MODEL = 'claude-sonnet-4-20250514'

さあ、実験！

無茶なプロンプトを振ります。

1. 「日本の四季でいう夏を感じられる、さわやかなデザインにして」

夏を感じさせられるかの検証（夏はもう終わりですが）。

タスク

料金プラン3列、カード、見出し、価格、特徴リスト、購入ボタンの生成。

OpenAI: GPT-5

Google: Gemini 2.5 pro

Anthropic: Claude Opus 4.1

Anthropic: Claude Sonnet 4

2. 「マテリアルデザインとフラットデザインとグラスモーフィズムを足して3で割ったようなデザインにして」

フラットデザイン（装飾をなくした平面的なデザイン）とマテリアルデザイン（フラットデザインのシンプルさを引き継ぎつつ、奥行きや影を加えて分かりやすくしたデザイン）という同系列のテーマと、グラスモーフィズム（すりガラスのような半透明性のデザイン）を足して3で割るという、AIをちょっと困らせるような無茶な指示をどう解釈してくれるか。

タスク

サインアップフォーム（名前、メール、パスワード、送信ボタン）の生成。

OpenAI: GPT-5

Google: Gemini 2.5 pro

Anthropic: Claude Opus 4.1

Anthropic: Claude Sonnet 4

3. 「とにかく奇抜で、どのサイトとも重複しないような個性あふれるデザインにして」

タスク

ヒーローセクション（見出し・説明・2ボタン）の生成。

OpenAI: GPT-5

Google: Gemini 2.5 pro

Anthropic: Claude Opus 4.1

Anthropic: Claude Sonnet 4

4. 「まるで仮面ライダー。クールであり、かつゲームのようなキャラクターのUIデザインにして」

タスク

シンプルなCTA（見出し・説明・メール入力と送信ボタン）の生成。

OpenAI: GPT-5

Google: Gemini 2.5 pro

Anthropic: Claude Opus 4.1

Anthropic: Claude Sonnet 4

総合評価

Vibe Design についての私的な評価は次のとおりです（あくまで主観）。なお、プロンプト設計・画像生成との併用有無・制約条件（配色固定など）で結果は変わると思うので、参考値としてご覧ください。

デザイン力	モデル
A	Claude Sonnet 4、GPT-5
B	Gemini 2.5 pro
C	Claude Opus 4.1

特別編: Nano Banana

Gemini 2.5 pro はB評価（主観）でしたが、 Google にはもうひとつ期待できるモデルがあります。 Gemini 2.5 Flash Image (Nano Banana) です。

Nano Banana は、Googleの画像生成・編集モデルの愛称で、被写体の一貫性と部分編集に強く、同一プロンプトでの反復でも破綻が少ない特徴を持ちます。軽快に試行錯誤でき、ラフ量産から仕上げの微調整まで素早く回せるのが魅力です。“bananas” は「熱狂」というスラングで、Nanoと組みわせて「すごくニッチだけど、ファンを熱狂させるもの」という意味とかそうじゃないとか。

忘れてはいけないことは Nano Banana は「画像を生成するモデル」という点です。
Nano Banana が生成した画像を、コードに変換する必要があります。
つまり、実装までに1クッション挟みます。

画像からコードへ

Nano Banana が生成した画像を、コードに変換する必要があります。
かつ、画像の内容を忠実に反映しなければならないという難しさがあります。

画像からコードを生成する手順については、次の記事を参考にしてください。
スクリーンショットからコンポーネント化するためのポイントが解説されています。

↑これは Figma の例なので、
Nano Banana が生成した画像を期待値として扱い、VRT で検証しながら修正を繰り返します。

プロンプトの例:

次のタスクを順に実行してください。

- [ ] 1. Reasoning Traces:（思考）: vrt.pngを読み込んでください。
- [ ] 2. Actions:（行動）: タスク1で取得したデータを忠実に反映したtest.htmlを作成してください。
- [ ] 3. Observations:（観察）: Playwriteを使用して `test:vrt:compare-test-html` を実行してください。

タスク3のテストに合格するまで、タスク1に戻って test.html を修正する作業を繰り返してください。

Nano Banana の性能を見たいので、先ほどと同じ無茶振りプロンプトを試してます。

Nano Banana に渡す基本プロンプト

<Create a professional PC web mockup figure>
showing exactly 1 web page in a single high-resolution image.  
The page demonstrates the [Application Type] web application.

<APP SPECIFIC CUSTOMIZATION>
Application Core: [User Input of application core]  
Primary Feature Focus: [User Input of main feature to highlight, example: Dashboard with analytics]  
Visual Theme: [User Input of Theme, example: Clean white and blue corporate theme, modern typography, responsive layout]  
Target Audience: [User Input of audience, example: Business professionals aged 25–50]  
<END CUSTOMIZATION>

DETAILED VISUAL SPECIFICATIONS:
Device Frame: Modern desktop web browser (Chrome-like frame), with visible address bar, tabs, and window controls.  
Screen Aspect Ratio: 16:9 widescreen rendering, 1920×1080 resolution.  
Background Setting: Subtle gradient or neutral professional backdrop.  
Lighting: Even lighting with subtle reflections for realism.  

UI/UX REQUIREMENTS:
Native responsive web components styled with HTML5 + CSS3 best practices.  
Clear navigation bar, sidebar, or header elements visible.  
Typography: Modern sans-serif font with proper hierarchy (headings, subheadings, body text).  
Interactive elements clearly distinguishable (buttons, links, dropdowns).  
Realistic, meaningful content relevant to the app (no lorem ipsum).  
The layout demonstrates the core experience of the app.

COMPOSITION AND STYLE:
Single browser mockup centered in the frame.  
Consistent theme across the full page.  
Use depth/shadows to create a professional mockup appearance.  
Include subtle hover/interaction indicators where relevant.  

OUTPUT FORMAT:
Single cohesive figure, 4K resolution minimum, professional presentation quality.  
Photorealistic browser rendering with the web page perfectly integrated.

「日本の四季でいう夏を感じられる、さわやかなデザインにして」

「マテリアルデザインとフラットデザインとグラスモーフィズムを足して3で割ったようなデザインにして」

「とにかく奇抜で、どのサイトとも重複しないような個性あふれるデザインにして」

「まるで仮面ライダー。クールであり、かつゲームのようなキャラクターのUIデザインにして」

おまけ

Nano Banana も API が公開されているので、これと連携すれば Vibe Design がもっと楽になると思います。

import { GoogleGenAI, Modality } from "@google/genai";
import * as fs from "node:fs";

async function main() {

  const ai = new GoogleGenAI({});

  const prompt =
    "Show me a picture of a nano banana dish in a fancy restaurant with a Gemini theme";

  const response = await ai.models.generateContent({
    model: "gemini-2.5-flash-image-preview",
    contents: prompt,
  });
  for (const part of response.candidates[0].content.parts) {
    if (part.text) {
      console.log(part.text);
    } else if (part.inlineData) {
      const imageData = part.inlineData.data;
      const buffer = Buffer.from(imageData, "base64");
      fs.writeFileSync("gemini-native-image.png", buffer);
      console.log("Image saved as gemini-native-image.png");
    }
  }
}

Vibe Design

新しいデザインシステム

ここは大事なポイントで、今回とくに検証したいのは、モデルごとのデザイン生成力の違いです。

デザイン生成力におけるモデルの差

さあ、実験！

1. 「日本の四季でいう夏を感じられる、さわやかなデザインにして」

タスク

OpenAI: GPT-5

Google: Gemini 2.5 pro

Anthropic: Claude Opus 4.1

Anthropic: Claude Sonnet 4

2. 「マテリアルデザインとフラットデザインとグラスモーフィズムを足して3で割ったようなデザインにして」

タスク

OpenAI: GPT-5

Google: Gemini 2.5 pro

Anthropic: Claude Opus 4.1

Anthropic: Claude Sonnet 4

3. 「とにかく奇抜で、どのサイトとも重複しないような個性あふれるデザインにして」

タスク

OpenAI: GPT-5

Google: Gemini 2.5 pro

Anthropic: Claude Opus 4.1

Anthropic: Claude Sonnet 4

4. 「まるで仮面ライダー。クールであり、かつゲームのようなキャラクターのUIデザインにして」

タスク

OpenAI: GPT-5

Google: Gemini 2.5 pro

Anthropic: Claude Opus 4.1

Anthropic: Claude Sonnet 4

総合評価

特別編: Nano Banana

画像からコードへ

Nano Banana の性能を見たいので、先ほどと同じ無茶振りプロンプトを試してます。

「日本の四季でいう夏を感じられる、さわやかなデザインにして」

「マテリアルデザインとフラットデザインとグラスモーフィズムを足して3で割ったようなデザインにして」

「とにかく奇抜で、どのサイトとも重複しないような個性あふれるデザインにして」

「まるで仮面ライダー。クールであり、かつゲームのようなキャラクターのUIデザインにして」

おまけ

次のおすすめ記事:

Discussion