ファイル1つ置くだけで、AIの出力がここまで変わる
3パターンのUI生成で検証 / Claude Code (Opus 4.6) 使用 / 失敗事例も公開
この記事でわかること
GoogleがオープンソースにしたDESIGN.mdを、はてなベース株式会社のブランドカラーで実際に作成し、Claude Code（Opus 4.6モデル、2026年4月版）でUI生成を行いました。ダッシュボード・お問い合わせフォーム・料金表の3パターンについて、DESIGN.mdなし/ありのBefore/Afterをスクリーンショット付きで比較します。うまくいかなかった点も正直に共有します。
検証環境と方法
| AIツール | Claude Code（Opus 4.6モデル、2026年4月版） |
| OS | macOS Sequoia |
| 検証日 | 2026年4月24日 |
| DESIGN.md | はてなベース株式会社のブランドカラーで自作（後述） |
検証方法
同じプロンプトを使って、DESIGN.mdのなし/ありでそれぞれUIを生成させました。生成されたHTMLをPlaywrightでスクリーンショットし、視覚的な差異を比較しています。
検証した3パターンは以下の通りです。
- ダッシュボード — KPIカード3枚 + プロジェクト一覧テーブル
- お問い合わせフォーム — 入力フォーム + 送信ボタン
- 料金テーブル — 3プラン比較カード
はてなベース用のDESIGN.mdを作成
はてなベースの既存Webサイト（hatenabase.jp）のCSSから値を抽出し、以下のDESIGN.mdを作成しました。
---
version: "alpha"
name: "Hatenabase Design System"
colors:
primary: "#2A5772"
on-primary: "#FFFFFF"
background: "#F2F2F2"
surface: "#FFFFFF"
text-primary: "#545454"
divider: "#E4EAEB"
cta: "#f0b90b"
cta-text: "#2A5772"
typography:
heading:
fontFamily: "Jost"
fontWeight: 600
body:
fontFamily: "Zen Kaku Gothic New"
fontSize: "16px"
rounded:
sm: "4px"
md: "8px"
---
## Colors
- Primary (#2A5772): ヘッダー、見出し用。背景全面には使わない
- CTA (#f0b90b): ボタンのみ。テキスト色は #2A5772
- テーブルヘッダー背景: #E4EAEB
## Do's and Don'ts
- Don't: border-radius 12px以上にしない
- Don't: グラデーションを使わない作成のポイント
最初から完璧を目指す必要はありません。今回はカラー6色 + フォント2種 + 角丸2サイズ + Do's/Don'ts 2項目という最小構成で始めました。この程度でも後述するように十分な効果がありました。
検証1 — ダッシュボード
プロンプト「社内プロジェクト管理ダッシュボードを作成。進行中プロジェクト数・完了タスク数・対応待ち件数のKPIカード、最近のプロジェクト一覧テーブルを含める」
Before（DESIGN.mdなし）
After（DESIGN.md適用）
反映された項目
- ヘッダーが#2A5772に変更（グラデーション排除）
- フォントがZen Kaku Gothic New + Jostに変更
- テーブルヘッダーが#E4EAEB、h2にborder-bottom追加
- CTAボタンが黄色(#f0b90b)に変更
- border-radiusが16px→8pxに縮小
- 会社名「はてなベース株式会社」が自動挿入
検証2 — お問い合わせフォーム
プロンプト「お問い合わせフォームを作成。名前・会社名・メール・問い合わせ種別(select)・内容(textarea)・送信ボタンを含める」
Before（DESIGN.mdなし）
After（DESIGN.md適用）
フォームで特に効いた項目
- 送信ボタンの色が紫グラデーション→黄色に変更
- ラベルの色が汎用グレー→#2A5772（ブランドカラー）に
- input/textareaのborder-radiusが12px→4pxに
- focus時のハイライトがindigo→#2A5772に統一
検証3 — 料金テーブル
プロンプト「料金プランページを作成。スターター(¥9,800/月)・ビジネス(¥29,800/月・おすすめ)・エンタープライズ(要相談)の3プラン比較」
Before（DESIGN.mdなし）
After（DESIGN.md適用）
料金テーブルで特に効いた項目
- ページ背景のグラデーションが完全に排除（Do's/Don'tsの「グラデーション禁止」が効いた）
- 「おすすめ」バッジが紫グラデーション→#2A5772フラットに
- 非推奨プランのボタンが#E4EAEB背景に（divider色を活用）
- 見出しフォントがJostに変更
うまくいかなかった点（正直レビュー）
DESIGN.mdは万能ではありません。今回の検証で見つかった課題を正直に共有します。
課題1 — フォントが実際には反映されないケースがある
DESIGN.mdでfontFamily: "Jost"と指定しても、AIが生成するHTMLにGoogle Fontsの読み込みコード（<link href="fonts.googleapis.com/…">）を自動で追加するかはツール次第です。Claude Codeは今回追加してくれましたが、すべてのケースで保証されるわけではありません。フォールバック（sans-serif）が使われる可能性を考慮しておく必要があります。
課題2 — シャドウの強さは「近い値」になるが完全一致しない
DESIGN.mdで0 2px 10px rgba(0,0,0,0.05)と指定しましたが、生成結果は0 2px 10px rgba(0,0,0,.05)のようにわずかに表記が異なることがありました。視覚的にはほぼ同じですが、ピクセルパーフェクトを求める場合は注意が必要です。
課題3 — レスポンシブやアニメーションは対象外
DESIGN.mdはカラー・フォント・余白・角丸といった静的なスタイルのみを扱います。ブレークポイント、ホバーアニメーション、トランジション速度などは現時点では仕様に含まれておらず、別途プロンプトで指示する必要があります。
課題4 — 2回目の生成で微妙にブレることがある
同じDESIGN.md + 同じプロンプトでも、2回目の生成結果が1回目と完全に同一になるとは限りません。カラーやフォントは安定していましたが、paddingの値やflexboxのgap値にわずかな差異が出ることがありました。
3パターンの総合比較
| チェック項目 | ダッシュボード | フォーム | 料金テーブル |
|---|---|---|---|
| プライマリカラー反映 | ○ | ○ | ○ |
| CTAボタン色 | ○ | ○ | ○ |
| フォント（Zen Kaku Gothic New） | ○ | ○ | ○ |
| border-radius 8px以下 | ○ | ○ | ○ |
| グラデーション排除 | ○ | ○ | ○ |
| テーブルヘッダー #E4EAEB | ○ | — | — |
| シャドウ値の完全一致 | △ | △ | △ |
| Google Fonts自動読み込み | ○ | ○ | ○ |
結論 — 主要なブランド要素（カラー・フォント・角丸・グラデーション禁止）は3パターンすべてで正しく反映されました。シャドウ値の微妙なブレがある程度で、実用上は十分な精度です。
DESIGN.mdを自社用に作るコツ
まずはカラー3色だけで始める
primary, background, text-primaryの3色だけ定義するだけでも、AIの出力品質は大幅に改善します。今回の検証でも、もっともインパクトが大きかったのはカラー指定でした。
Do's and Don'tsが最も効く
「グラデーションを使わない」「border-radiusは8px以下」のように禁止事項を明示すると、AIが余計な装飾を追加しなくなります。今回の3パターンすべてで、Do's/Don'tsの効果がもっとも安定していました。
既存CSSから値を抽出する
すでにWebサイトがあるなら、そのCSSからカラーコードやフォント指定を抜き出すのが最も確実です。ゼロから考える必要はありません。
テンプレートを活用する
GitHubの「awesome-design-md」には69種類、designmd.appには423種類以上のテンプレートが公開されています。自社のテイストに近いものをベースにカスタマイズするのが効率的です。
まとめ
DESIGN.mdを使った3パターンの検証で、主要なブランド要素は安定して反映されることが確認できました。一方で、シャドウ値の微妙なブレやレスポンシブ対応の限界など、現時点での制約もあります。
それでも、プロンプトに毎回カラーコードをコピペする生活が終わるだけで十分価値があります。まずはカラー3色 + Do's/Don'ts 2項目のミニマムなDESIGN.mdから始めてみてください。