--- title: "Vibe Design（バイブデザイン）とは？Vibe Codingとの違い・進め方・ツール比較【2026年10月】" url: "https://www.issoh.co.jp/tech/details/8924/" published: 2025-09-19 updated: 2026-10-20 categories: ["AI"] publisher: "株式会社一創" --- # Vibe Design（バイブデザイン）とは？Vibe Codingとの違い・進め方・ツール比較【2026年10月】 Vibe Designは、画面の部品を自分で並べる代わりに、事業の目的やユーザーに感じてほしい印象を言葉で伝え、AIにUIを生成させるデザインの進め方です。言葉自体はVibe Codingからの派生で、Google Labsは2026年3月18日のStitch大型更新で、この呼び方を前面に出しました。この記事では、Vibe Codingとの違い、実務での進め方、ツールの選び方、そして向かない場面までを2026年10月時点の公式情報で整理します。 ## まとめ｜Vibe Designの定義とVibe Codingとの違い - **定義**：ワイヤーフレームから始めず、目的・感情・参考例を自然言語で伝えてAIに画面案を作らせ、見た目の印象を頼りに修正を重ねる手法です。 - **Vibe Codingとの違い**：Vibe Codingの成果物は動くコードで、Vibe Designの成果物は画面案・プロトタイプ・デザインルールです。コードはレビューと動作確認、デザインは見た目の確認に加えて操作・状態・アクセシビリティの検証が必要です。 - **進め方の要**：画面を量産するだけでは画面ごとに色や余白がずれます。気に入った方向が決まったら、色・文字・余白のルールをDESIGN.mdに書き出して共通ルールにし、コーディングエージェントにもそのファイルを渡します。 - **ツール**：画面案の探索ならStitch・Uizard、動くプロトタイプならFigma Make、動くアプリまで一気に作るならv0・Lovable・Bolt.newが向きます。Claude Designはその中間です。 - **向かない場面**：確立したデザインシステムがある既存プロダクトの改修、アクセシビリティ要件が厳しい画面、ブランドの独自性が売上に直結する画面では、生成物を下書き以上に扱わないほうが安全です。 ## Vibe Designの定義と言葉の出どころ ### Vibe Codingからの派生語 土台になったVibe Codingは、Andrej Karpathy氏が2025年2月2日（米国時間）のX投稿で使った造語で、AIが生成したコードを細かく読まずに任せて開発する姿勢を指します。語源と意味の変遷は[バイブコーディングとは？語源・由来と意味・読み方を解説【2026年版】](/tech/details/7216/)で扱っています。Vibe Designはこの考え方をUIデザインに持ち込んだ言葉で、特定の誰かが定義した規格ではありません。そのため記事やツールによって範囲が少しずつ違います。 ### Google Stitchが2026年3月に打ち出した定義 言葉が広まったきっかけは、Google Labsが2026年3月18日に公開したStitchの更新です。公式ブログは、ワイヤーフレームから始める代わりに、達成したい事業目的やユーザーに感じてほしいこと、いま参考にしている例を説明するところから始められる、と説明しています。同じ発表では、無限キャンバス、プロジェクト全体を踏まえるデザインエージェント、音声指示、操作可能なプロトタイプ、DESIGN.mdが紹介されました。さらに2026年5月19日のGoogle I/Oでは、生成中の画面をリアルタイムにキャンバスへ流す機能とStitch Agentが追加され、公式ブログは「vibe design with Stitch」という表現を使っています。 Stitchそのものの使い方や料金は[Google Stitchとは？使い方・料金・商用利用まで解説【2026年最新】](/tech/details/8062/)に、更新の時系列は[Google Stitch 2.0とは？Galileo AI買収からの進化と最新アップデート・新機能を時系列で解説](/tech/details/11458/)にまとめています。 ## Vibe DesignとVibe Codingの違い どちらも自然言語でAIに作らせる点は同じです。違いは、何ができあがり、人が何を見て良し悪しを決めるかにあります。 | 観点 | Vibe Design | Vibe Coding | | -------- | ------------------------ | -------------------------- | | 伝える内容 | 目的・印象・参考例 | 機能の要求・不具合 | | 主な成果物 | 画面案・プロトタイプ・DESIGN.md | 動くコード | | 人が判断すること | 導線・情報の優先度・ブランド適合 | 動作・テスト結果・安全性 | | 必要な検証 | 見た目・操作・状態・アクセシビリティ | コードレビュー・動作・安全性 | | 代表的なツール | Stitch・Figma Make・Uizard | Claude Code・Cursor・Lovable | 実務で効いてくるのは4行目です。コードはレビューと動作確認で欠陥を探します。デザイン案は、配置の崩れなら目視で気づけますが、操作性やアクセシビリティの問題は画面を眺めるだけでは見つかりません。見た目が整っていても、状態ごとの表示（読み込み中・エラー・空の一覧）が抜けていることもあります。この欠落は次の章の手順で拾います。一方で、画面を見ながら議論できる点は企画段階で生きます。画面案を共有して、関係者が情報の優先度や方向性を話し合う用途に向いています。 両者は対立するものではなく、Vibe Designで決めた画面とルールを、コーディングエージェントへ渡して実装する進め方ができます。コーディングエージェントの型と選び方は[Coding Agent（コーディングエージェント）とは？仕組み・3つの型と主要ツールの選び方【2026年9月】](/tech/details/7036/)で解説しています。 ## Vibe Designの進め方：意図の言語化から実装への受け渡しまで ### 手順1：目的・利用者・印象の指示への集約 最初の指示で書くべきなのは「おしゃれに」のような形容詞ではなく、誰が、どの場面で、何を達成したい画面かです。印象の言葉は参考サイトや素材感の比喩と組み合わせると、生成のぶれが小さくなります。 ``` 経理担当者が月末に請求書の承認待ちを片づける業務画面。 目的：未処理件数と期限切れを最初の3秒で把握し、1件ずつ承認か差し戻しを選べること。 印象：紙の帳簿のような落ち着き。派手な色は使わず、前に進む操作だけ緑で目立たせる。 画面：一覧（件数サマリー＋表）と詳細（PDFプレビュー＋承認ボタン）の2画面。 状態：読み込み中、0件、承認エラーの表示も作ること。 ``` 最後の「状態」の行は、前章で触れた欠落を最初から防ぐための指定です。読み込み中・0件・エラーの状態が生成案に含まれるかを確認し、不足していれば追加で指示します。 ### 手順2：主要画面の生成と候補2案への絞り込み 全画面を一度に作らせず、主要な1画面で方向性を比べます。Stitchの公式ブログは、vibe designingでは多くのアイデアを素早く試せると説明しており、Agent managerで複数の方向を並行して探る機能もあります。ここでは案を増やすより、比べる観点（情報の優先度・操作のしやすさ・ブランドとの距離）を先に決めます。本記事では、比較対象を管理しやすくするため、2案に絞ってから残りの画面へ広げる進め方を勧めます。 ### 手順3：DESIGN.mdによる色・文字・余白のルール定義 方向が決まったら、そのルールを文章とトークンで書き出します。DESIGN.mdはGoogle Labsが公開した形式で、先頭のYAMLに色や文字サイズなど機械が読む値を、本文のMarkdownにその値を使う理由を書きます。仕様はApache-2.0でGitHubに公開されており、2026年10月時点のバージョン表記はalphaです。 ``` --- name: Quiet Ledger colors: primary: "#1F2A44" surface: "#F8F7F4" accent: "#2F7D6D" danger: "#B3261E" typography: heading: fontFamily: Noto Sans JP fontSize: 1.5rem fontWeight: 700 body: fontFamily: Noto Sans JP fontSize: 1rem lineHeight: 1.7 rounded: sm: 4px md: 8px spacing: sm: 8px md: 16px components: button-primary: backgroundColor: "{colors.accent}" textColor: "#FFFFFF" rounded: "{rounded.md}" --- ## Overview 経理担当者が毎日開く業務画面。落ち着いた紙の質感と、迷わせない操作導線を優先する。 ## Colors - **Accent (#2F7D6D):** 確定・送信など前に進む操作だけに使う。 - **Danger (#B3261E):** 削除と差し戻しに限定する。 ``` 本文の見出しはOverview、Colors、Typography、Layout、Elevation & Depth、Shapes、Components、Do’s and Don’tsの順に並べる決まりで、不要な節は省けます。`{colors.accent}`のように別のトークンを参照すると、色を1か所変えるだけでボタンの色も追従します。 ### 手順4：コーディングエージェントへのルール共有 Stitchの公式ブログは、MCPサーバーとSDKを通じてStitchの機能を他のツールから呼び出せること、デザインを開発ツールへ書き出せることを案内しています。公式の`@google/stitch-sdk`はStitchのMCPサーバーへの低レベルなクライアントを備え、AIエージェントからツールを直接呼べます。実装側では、リポジトリの直下にDESIGN.mdを置き、エージェントへの指示で「色と余白はDESIGN.mdのトークンだけを使う」と明記すると、追加した画面の色や余白を共通ルールと照合しやすくなります。生成後にlintと目視でルールどおりかを確かめる工程は残してください。 ## DESIGN.mdのlint検査：トークン参照とコントラストの確認 見た目だけで判断するVibe Designの弱点は、読みにくい配色のような数値で決まる問題を見落とすことです。DESIGN.mdには公式のコマンドラインツールがあり、トークンの参照切れやWCAGのコントラスト比を検査できます。上の例を2026年10月2日に`@google/design.md` 0.4.0で検査した結果は次のとおりです。 ``` $ npx @google/design.md@0.4.0 lint DESIGN.md { "findings": [ { "severity": "warning", "path": "colors.danger", "message": "'danger' is defined but never referenced by any component.", "rule": "orphaned-tokens" }, { "severity": "info", "message": "Design system defines 4 colors, 2 typography scales, 2 rounding levels, 2 spacing tokens, 1 component.", "rule": "token-summary" } ], "summary": { "errors": 0, "warnings": 1, "infos": 1 } } ``` 白文字の主ボタンはコントラストの指摘が出ず、どのコンポーネントからも参照されていない`danger`だけが警告されました。次に、低コントラストの比較例として、ボタンの文字色を#8FB3AAへ差し替えると、結果が変わります。 ``` $ npx @google/design.md@0.4.0 lint DESIGN-low.md { "findings": [ { "severity": "warning", "path": "components.button-primary", "message": "textColor (#8fb3aa) on backgroundColor (#2f7d6d) has contrast ratio 2.15:1, below WCAG AA minimum of 4.5:1.", "rule": "contrast-ratio" }, （orphaned-tokensとtoken-summaryは前回と同じため省略） ], "summary": { "errors": 0, "warnings": 2, "infos": 1 } } ``` 2.15:1はWCAG 2.2の達成基準1.4.3（レベルAA）が通常の文字に求める4.5:1を下回り、画面上では「落ち着いた印象」に見えても、利用者の視覚特性や周囲の明るさによって読みにくくなるおそれがあります。この場合もlintは`"errors": 0`と報告するので、終了コードだけでCIを止める運用では素通りします。警告の件数も判定条件に入れてください。`npx @google/design.md diff 旧.md 新.md`を使えば、トークン単位の変更点（今回は`components.button-primary`の変更）も一覧にできます。 Vibe Designを実務に入れるなら、印象で決める工程と数値で検査する工程を分けるのが要点です。印象は人が決め、コントラストや参照切れはlintに任せます。 ## Vibe Designツールの比較：成果物と管理先による選定 ツール選びで最初に決めるのは、成果物をどこで正本として管理するかです。デザイン案として残してデザイナーや開発者が引き継ぐのか、生成されたコードをそのまま育てるのかで、向くツールが分かれます。料金は2026年10月2日時点の各社公式料金ページ（表のリンク先）の表示で、金額はいずれも米ドル・1席あたりです。 | ツール | 主な成果物 | 入口の料金 | 向く場面 | | ---------------- | -------------------- | ------------------------------------------------------------------ | --------------------- | | Google Stitch | 画面案・プロトタイプ・DESIGN.md | 料金・利用条件は公式で確認 | 方向性の探索と共有 | | Figma Make | 動くプロトタイプ・Webアプリ | [Starter無料／Full seat 月額換算$16（年払い）](https://www.figma.com/pricing/) | Figmaで正本を管理するチーム | | Uizard（Miro傘下） | 編集できる複数画面 | [公式で確認](https://uizard.io/pricing/) | 非デザイナーのワイヤー作成 | | UX Pilot | ワイヤー・高精度UI | [Free／有料$14〜](https://uxpilot.ai/pricing) | 画面フローの下書き | | Magic Patterns | UIとプロトタイプ | [Starter $20〜](https://www.magicpatterns.com/pricing) | 製品チームの検証用試作 | | Claude Design | 画面・HTML・他ツールへ送信 | 利用可能プランは公式で確認 | 試作からClaude Codeへの受け渡し | | v0 | Reactのコードとアプリ | [Free／Plus $30（1ユーザー月額）](https://v0.app/pricing) | Next.jsで実装まで進める | | Lovable・Bolt.new | フルスタックのアプリ | 各社公式で確認 | 動く試作を最短で作る | Figma Makeは2025年5月7日に発表され、7月24日に一般提供へ移りました。単体では購入できず、Figmaのプランに含まれるAIクレジットを消費します。2026年10月時点ではStarterが1日150・月500クレジット、ProfessionalのFull seatは1席あたり年払いの月額換算16米ドル、月払い20米ドルで、月3,000クレジットが含まれます。UizardはMiroへの合流を2024年5月27日に発表しており、テキストから複数画面を生成するAutodesigner 2.0を提供しています。v0は2025年8月11日にv0.devからv0.appへ名称とドメインを変えました。詳細は[v0（Vercel）とは？料金・使い方・APIを2026年最新解説](/tech/details/3416/)、[Lovable（LovableAI）とは？料金・使い方とRLSのセキュリティ対策【2026年10月】](/tech/details/5058/)、[Bolt.newとは？料金・使い方・対応フレームワークを実データで解説【2026年版】](/tech/details/4796/)にまとめています。 Anthropicの[Claude Design（Anthropic）とは？使い方・料金・できることと2026年9月の変更点](/tech/details/11838/)は、2026年4月17日にresearch previewとして公開され、9月16日から通常の会話やアーティファクトのテンプレートとして使えるようになりました。公式ヘルプによると、書き出しはZIP・PDF・PPTX・単体HTMLのほか、Figma・Canva・Miroなどのツールへの送信とClaude Codeへの受け渡しに対応しています。一方で版履歴はまだなく、別の方向を試すときは今の案を保存するよう会話で頼む方法が案内されています。正本をFigmaで管理するチームは、送った後の修正をどちらで行うかを先に決めておくと混乱しません。Claude Codeへの受け渡し方は[Claude DesignとClaude Codeの連携｜/design-syncと/designの使い分けと利用条件【2026年9月時点】](/tech/details/12639/)で解説しています。 ## Vibe Designが向かない場面と失敗パターン 生成された画面は、ある程度整って見えるのが普通です。整って見えることと、その製品に合っていることは別の話で、次の3つの場面では生成物を下書き以上に扱わないことを勧めます。 - **デザインシステムが確立した既存プロダクトの改修**：コンポーネントの命名、状態の種類、余白の刻みが既に決まっているなら、生成された画面は既存の部品へ置き換える手間のほうが大きくなります。先に既存ルールをDESIGN.mdへ書き出し、それを読ませて生成させる順番にしてください。 - **アクセシビリティ要件が契約や法令で決まっている画面**：前章のとおり、印象重視の配色はコントラスト比を割りやすく、キーボード操作や読み上げの順序は画面を見ても判断できません。公共系や金融系の画面は、lintと実機の読み上げ確認を通るまで採用しないことです。 - **ブランドの独自性が売上に直結する画面**：競合に似た構図や配色が生成されていないかを比較し、ブランド固有の表現が不足している案は採用しません。ランディングページの主役ビジュアルなどは、方向を探る段階に限って使い、最終案は人が詰めます。 よくある失敗は、画面ごとに別々の指示で生成し、色・角丸・ボタンの高さが少しずつ違う画面が10枚並ぶことです。これは手順3のDESIGN.mdを後回しにしたときに起きます。業務システムの画面で揃えるべき要素は[業務システムの画面デザイン｜実装者向けUI設計パターンとライブラリ選定](/tech/details/15325/)も参考にしてください。 ## Vibe Designに関するよくある質問 ### Vibe Designは無料で試せますか？ 試せます。FigmaのStarterプランは無料で、1日150・月500のAIクレジットの範囲でFigma Makeを使えます。v0とUX PilotにもFreeプランがあります。Google StitchはGoogle Labsの実験として提供されていますが、2026年10月時点の料金と生成上限を示す公式ページは確認できませんでした。上限は各サービスで頻繁に変わるため、利用前に公式ページを確認してください。 ### FigmaでVibe Designはできますか？ できます。Figma Makeが自然言語から動くプロトタイプやWebアプリを生成する機能で、2025年7月24日から全ユーザーが使えます。Figmaのプランに含まれるAIクレジットを消費する仕組みで、ProfessionalのFull seatは月3,000クレジットです。正本をFigmaで管理しているチームなら、別ツールへ書き出す手間がない点が利点になります。 ### vibe designingとvibe designは意味が違いますか？ 同じ手法を指しています。Googleの2026年3月18日の公式ブログは、Stitchで作業する行為を動詞的に「vibe designing」と書き、5月19日のI/O発表では「vibe design」と名詞で使っています。日本語では「バイブデザイン」と表記されることもあります。 ### Vibe Designで作ったUIをそのまま本番に使えますか？ そのままの採用は勧めません。指示しないと生成物はデータが揃った状態の画面に偏りやすく、読み込み中・0件・エラーの表示やコントラスト比が抜けやすいからです。DESIGN.mdでルールを定め、lintでコントラストと参照切れを確認し、実装はコーディングエージェントにDESIGN.mdを読ませて行います。そのうえで公開前に、読み込み中・0件・エラー時の表示、キーボード操作、読み上げ順序、実画面の配色を確認してください。 ### Vibe Designが広まるとデザイナーは不要になりますか？ 不要にはなりません。役割が、部品を配置する作業から、目的と制約を言葉にし、生成案のブランド適合性やキーボード操作・読み上げ順序の検証結果を踏まえて採否を決める作業へ移ります。DESIGN.mdのようなルールを書いて保守する仕事も新しく増えています。 ## 関連記事 - [バイブコーディングとは？語源・由来と意味・読み方を解説【2026年版】](/tech/details/7216/) - [Google Stitchとは？使い方・料金・商用利用まで解説【2026年最新】](/tech/details/8062/) - [Claude Design（Anthropic）とは？使い方・料金・できることと2026年9月の変更点](/tech/details/11838/) - [v0（Vercel）とは？料金・使い方・APIを2026年最新解説](/tech/details/3416/) - [Coding Agent（コーディングエージェント）とは？仕組み・3つの型と主要ツールの選び方【2026年9月】](/tech/details/7036/) --- 出典: [Vibe Design（バイブデザイン）とは？Vibe Codingとの違い・進め方・ツール比較【2026年10月】]()（株式会社一創）