v0が一発で安定したUIを生成する「デザイン仕様書」の作り方

はじめに

Acsimでは、お客様の業務フローから高速にプロトタイプを生成する機能を提供しています。このプロトタイプ生成にはv0を活用していますが、初期は生成されるUIのクオリティにムラがあるという課題がありました。

同じデザインテーマを指定しても、スペーシングが詰まりすぎたり、カラーの適用がずれたり、アイコンのサイズが不揃いだったり。v0に「いい感じに」と伝えるだけでは、デザイナーの目から見て安定したクオリティを維持できません。

この課題を解決するために辿り着いたのが、v0が迷わないための「デザイン仕様書」を体系的に作るというアプローチです。この記事では、デザイナーの視点からその仕様書の構造と作り方を、試行錯誤の過程とともに共有します。

課題：v0はなぜクオリティにムラが出るのか

v0はshadcnとTailwind CSSをベースにUIを生成します。プロンプトだけで簡単にアプリケーションのUIを作れる一方で、以下の問題がありました。

プライマリーカラーだけの指定では差別化しにくい

色をひとつ変えただけでは、どのテーマも似たような印象になってしまいます。カラーパレット全体——アクセントカラー、グレースケール、背景色を一貫して設計する必要がありました。

スペーシングとアイコンのバランスが崩れやすい

v0が自動的に設定する余白やアイコンサイズは、デザイナーの意図とずれることが多くありました。サイドナビゲーションのアイコンとメニュー名が上揃えになっていたり、スペーシングが窮屈だったり、細かな調整が毎回必要になっていました。

セマンティックなカラールールが伝わらない

「プライマリーカラーはこの色」と伝えても、警告色やエラー色、ステータスバッジの色分けまでは意図通りにならないことがありました。

これらの問題に対して、v0への修正指示を毎回繰り返すのではなく、最初から全てを仕様書として渡す方が効率的だと考えました。

試行錯誤の過程

第1段階：CSSファイルを直接渡す

最初のアプローチは、Figmaで作成したVariablesをCSSとして書き出し、そのままv0に添付する方法でした。

用意したファイル：

• globals.css（全体スタイル）
• theme.css（CSS変数）
• tailwind.config.js
• wcag-accessibility-guide.md（アクセシビリティ指針）
• 業務フローJSON

結果：カラールールはある程度反映されたものの、スペーシングとアイコンのバランスが崩れました。Variablesにアイコンの設定がなかったため、v0がサイズ感を把握できなかったのが原因です。

v0での修正を4回ほど重ねて許容範囲にはなったものの、毎回これでは効率が悪い。「一発で安定させたい」という思いから、次のアプローチを模索しました。

第2段階：コンポーネントサンプル＋スタイルガイド

次に試したのは、shadcnベースのコンポーネントサンプルを明示的に渡す方法です。

1. shadcn UI theme generatorでプライマリーカラーを指定し、サンプルUIのキャプチャとCSSを取得
2. Claudeにキャプチャ画像とCSSを渡し、各コンポーネントのJSXファイルを生成
3. それらをもとに「v0が迷わないためのスタイルガイド」をMarkdownにまとめる

結果：キャプチャにあるコンポーネントをかなり忠実に再現してくれました。Figmaでコンポーネント類を一から作成しなくてよいという大きなメリットもありました。ただし、色の反映が要所要所でずれたり、レイアウトのバランスが不安定な場面がまだ残っていました。

転機：「デザインの原則」をv0に教える

第2段階までの試行錯誤は、すべて具体的なスタイル情報（CSS、JSX、カラーコード）をどう渡すかに焦点を当てていました。しかし、色やコンポーネントの形を正しく指定しても、v0が「なぜこの余白なのか」「なぜこの色の組み合わせなのか」を理解していないため、指定外の箇所でデザインの質が落ちてしまう——これが根本的な問題でした。

そこで発想を変えました。具体的なスタイルだけでなく、デザインの原理原則そのものをv0に伝えたらどうか？

試しに、Claudeで以下の2つのドキュメントを生成しました。

デザイン4原則の解説ドキュメント：

UIデザインにおいて意識すべき「デザインの4原則」つまりコントラスト（対比）、
反復（リピティション）、整列（アライメント）、近接（プロキシミティ）について
それぞれどういうことなのかを詳細に説明したmdファイルを作成して

アクセシビリティ基準の解説ドキュメント：

UIデザインにおいて「アクセシビリティを配慮し、WCAG 2.1とAPCAをクリアする」とは
つまりどういうことか、また、AAおよびAAAレベルとはつまりどういうことか、
詳細に説明したmdファイルを作成して

これらのドキュメントは、デザイナーなら知っている基礎知識です。しかし重要なのは、v0にとっては初見の情報だということ。「近接する要素はグループとして認識される」「コントラスト比はWCAG 2.1のAA基準を満たす」といった原則を仕様書に含めることで、v0がスタイル指定のない箇所でも原則に基づいた判断ができるようになります。

実際に、生成済みのUIに対して「添付ファイルを参考に、デザイン4原則の観点から全体をブラッシュアップしてください」と指示したところ、スペーシングの整合性やグルーピングの明確さが目に見えて改善されました。

この発見を踏まえ、第3段階ではカラーパレットの改善と合わせて、4原則・アクセシビリティを仕様書の正式な構成要素として組み込むことにしました。

第3段階：Radix UIカラーパレット＋原則を組み込んだ包括的仕様書

第2段階で残っていたカラーの課題に対しては、カラーパレットの生成方法を見直しました。

Radix UI Colorsを使い、Accent・Gray・Backgroundの3つのスケールを一括で生成。プライマリーカラーだけでなくグレーや背景色まで一貫したトーンが手に入るため、色がずれる問題が解消されました。

そしてこのカラーパレットと、先ほど発見したデザイン4原則・アクセシビリティのドキュメントを合わせて、1つの包括的なデザイン仕様書にまとめるアプローチに辿り着きました。

最終的に辿り着いたワークフロー

試行錯誤の結果、以下の4ステップに型化しました。

ステップ1：カラーパレットの生成

使用ツール：Radix UI Colors、shadcn UI theme generator

1. Radix UI Colorsでプライマリーカラーを設定し、Accent Scale・Gray Scale・Background Colorを「Copy CSS code」で取得
2. shadcn UI theme generatorに同じカラーコードを入力し、サンプルUIのキャプチャを撮影＋CSSコードをコピー

この2つのツールの組み合わせが重要です。Radix UIでカラースケール全体の一貫性を担保し、shadcnのサンプルUIで「このカラーが実際のコンポーネントにどう適用されるか」の具体例を得ます。

ステップ2：Claudeでスタイルガイドを作成

Radix UIのCSS、shadcnのCSS・キャプチャ画像をClaudeに渡し、以下を生成します。

添付した情報を基に、以下で指定している必要事項に沿って、
TailwindCSSのフォーマットに合わせたCSS変数(theme.css)を定義し、
全体のスタイル(globals.css)を作成してください。
また、それらに基づいた実装ガイドも作成します。
なお、Next.js環境で問題なく作動するようにしてください。
これらは複数のファイルではなく一つのmdファイルにまとめて出力してください。

- 必要なデザインスタイル
    - Typography
        - next/font/googleを使用して外部フォントを読み込むこと
        - 英数字はRobotoを使用
        - 日本語フォントはNoto Sans JPを使用
    - Color
        - コントラストはWCAG 2.1に準拠すること
        - アラート等に必要なカラーもTheme情報のトーン＆マナーに合わせて作成する
    - Spacing
        - 8point Grid Systemを適用
    - Border Radius / Border / Box shadow / Elevation
    - Interaction
        - hover / active / focus / disable などのスタイリングを考慮すること
    - 主要なコンポーネントスタイルの指定

ここでのポイントは、デザイナーとしての判断を仕様として明文化することです。「ゆったりめのスペーシング」ではなく「8point Grid System」、「いい感じのフォント」ではなく「英数字はRoboto、日本語はNoto Sans JP」と具体的に指定します。

生成されたファイルに対して、エラー回避のために以下のプロンプトも実行します：

Next.jsでの開発する上でエラーが起こりそうな箇所がないか確認し、あれば修正してください。

ステップ3：包括的なデザイン仕様書にまとめる

ステップ2で生成したファイルに加え、試行錯誤の中で効果を実感したデザイン4原則とアクセシビリティのドキュメントをClaudeで1つのMarkdownファイルに統合します。

デザイン仕様書に含める要素：

上3つは「具体的な値」、下2つは「判断の原則」です。この組み合わせにより、指定済みの箇所は正確に、未指定の箇所も原則に沿って——という品質安定が実現します。

統合時のプロンプトでは、v0が参照する優先度を明示します：

参照する内容の優先度は以下の順であることをv0がわかるように記載してください。
1. 別で添付する業務フローを記載したjsonファイル
2. アクセシビリティとデザインの４原則
3. カラールールやスペーシング、セマンティックな定義を記載したスタイルガイド
4. 各コンポーネントのサンプル
5. 残りのファイルの内容

この優先度の指定が非常に重要です。業務フローの内容を最優先にしつつ、デザインの品質基準であるアクセシビリティと4原則を次に置くことで、v0が「何を作るか」と「どう作るか」の両方を正しく理解できます。

ステップ4：v0に業務フローJSONと一緒に投げる

完成したデザイン仕様書（design-system-guide.md）と業務フローのJSONファイルをv0に添付し、シンプルなプロンプトで生成します。

添付した情報を基にB2B商取引Webアプリケーションを作成してください。
なお、作成する機能は自社営業担当者が利用するものに限定してください。

仕様書に必要な情報が全て詰まっているため、プロンプト自体は極めてシンプルで済みます。

デザイン仕様書がもたらした変化

Before：毎回の修正ループ

仕様書なしの頃は、v0で生成→デザイナーが確認→修正指示→再生成、というループを4〜5回繰り返していました。特にスペーシングとアイコンの調整は毎回発生し、以下のような修正指示を手動で行っていました。

スペーシングはp-6からp-8もしくはm-6からm-8を基準に再調整して。
理由は今のスペーシングよりもゆとりを持たせたいからです。

アイコンのサイズは16px、24px、32px、40px、または60pxの正方形にし、
隣接する要素と比例するようにサイズを変更する必要があります。

After：ほぼ一発で安定した品質

デザイン仕様書を渡すようにしてからは、サイドナビゲーションの余白と高さを1〜2回調整する程度で済むようになりました。カラールール、スペーシング、コンポーネントの基本形はほぼ意図通りに反映されます。

さらに、1つのデザイン仕様書を複数の業務フロー（B2B商取引、ECサイト管理、ITサービス管理など）に適用できるため、デザインスタイルのバリエーション展開も効率的になりました。

デザイナーだからこそ作れる仕様書

この一連のプロセスで最も重要なのは、デザイン仕様書の内容を設計するのはデザイナーの仕事だということです。

Claudeは指示されたファイルを1つにまとめてくれますが、「何を含めるか」「どんな優先度で参照させるか」「スペーシングの基準をどう定めるか」はデザイナーが判断する領域です。

具体的には、以下の判断をデザイナーが行っています：

• カラーパレットの選定：Radix UIでAccent・Gray・Backgroundをどの色にするか
• コントラスト基準：WCAG 2.1のAA/AAAレベルのどちらを目指すか
• スペーシングの方針：「ゆったりめ」を8point Grid Systemとして具体化
• フォントの組み合わせ：英数字と日本語で異なるフォントファミリーの選定
• コンポーネントの取捨選択：B2B SaaSで頻出するButton, Form, Modal, Tableを優先的にサンプル化
• 原則の選定と言語化：デザイン4原則やアクセシビリティ基準など、デザイナーにとっては当たり前の知識を「v0にも伝わる形」でドキュメント化する判断

AIツールはこれらの判断を「実行」してくれますが、判断そのものはデザイナーの専門性です。

まとめ

v0での高速プロトタイプ生成において、デザインのクオリティを安定させる鍵は「デザイン仕様書」にあることが分かりました。

仕様書を作るプロセス自体は、Radix UI・shadcn・Claudeといったツールの組み合わせで効率化できます。しかし、仕様書に何を盛り込み、何を優先するかの判断はデザイナーの専門領域です。

AIがコードを書く時代だからこそ、デザイナーの役割は「見た目を作る人」から 「デザインの意思決定を構造化し、AIに正しく伝える人」 へと広がっています。

この記事で紹介したワークフローが、同じようにAIツールを活用したプロトタイプ生成に取り組むデザイナーの方の参考になれば幸いです。