DESIGN.mdの使い方 — AIコーディングでWebサイトのデザインを一貫させる方法

# DESIGN.md

## Visual Theme & Atmosphere

- **テーマ**: モダンでクリーン、信頼感のあるビジネスサイト
- **雰囲気**: プロフェッショナルだが親しみやすい
- **角丸**: 8px を基本とし、柔らかい印象を与える
- **アニメーション**: 控えめ。トランジションは200ms ease-in-out

## Color Palette & Roles

### メインカラー

| 役割 | 色名 | HEX | 用途 |
|------|------|-----|------|
| Primary | ブルー | `#2563EB` | CTA、リンク、アクセントカラー |
| Primary Dark | ダークブルー | `#1D4ED8` | ホバー状態、強調 |
| Secondary | スレートグレー | `#475569` | サブテキスト、補助要素 |

### 背景・テキスト

| 役割 | HEX | 用途 |
|------|-----|------|
| Background | `#FFFFFF` | メイン背景 |
| Surface | `#F8FAFC` | カード、セクション背景 |
| Border | `#E2E8F0` | 区切り線、カード枠 |
| Text Primary | `#0F172A` | 見出し、本文 |
| Text Secondary | `#64748B` | 補助テキスト、キャプション |

### ステータスカラー

| 役割 | HEX | 用途 |
|------|-----|------|
| Success | `#16A34A` | 成功メッセージ |
| Warning | `#F59E0B` | 警告 |
| Error | `#DC2626` | エラー |

## Typography Rules

### フォントファミリー

- **見出し**: `"Noto Sans JP", "Helvetica Neue", Arial, sans-serif`
- **本文**: `"Noto Sans JP", "Helvetica Neue", Arial, sans-serif`
- **コード**: `"JetBrains Mono", "Source Code Pro", monospace`

### サイズ階層

| レベル | サイズ | ウェイト | 行間 | 用途 |
|--------|--------|----------|------|------|
| H1 | 36px / 2.25rem | 700 | 1.2 | ページタイトル |
| H2 | 28px / 1.75rem | 700 | 1.3 | セクション見出し |
| H3 | 22px / 1.375rem | 600 | 1.4 | サブセクション |
| Body | 16px / 1rem | 400 | 1.75 | 本文 |
| Small | 14px / 0.875rem | 400 | 1.5 | キャプション、注釈 |

## Component Stylings

### ボタン

#### Primary Button
- 背景: `#2563EB` → ホバー: `#1D4ED8`
- テキスト: `#FFFFFF`、16px、font-weight: 600
- パディング: `12px 24px`
- 角丸: `8px`
- トランジション: `background-color 200ms ease-in-out`
- 無効化時: opacity 0.5、cursor: not-allowed

#### Secondary Button
- 背景: `transparent` → ホバー: `#F1F5F9`
- ボーダー: `1px solid #E2E8F0`
- テキスト: `#475569`

### カード

- 背景: `#FFFFFF`
- ボーダー: `1px solid #E2E8F0`
- 角丸: `12px`
- パディング: `24px`
- シャドウ: `0 1px 3px rgba(0, 0, 0, 0.1)`
- ホバー: `0 4px 12px rgba(0, 0, 0, 0.1)`

### 入力フォーム

- 背景: `#FFFFFF`
- ボーダー: `1px solid #E2E8F0` → フォーカス: `2px solid #2563EB`
- 角丸: `8px`
- パディング: `10px 14px`
- プレースホルダー色: `#94A3B8`

## Layout Principles

### スペーシング（8pxグリッド）

| トークン | 値 | 用途 |
|----------|------|------|
| xs | 4px | アイコンとテキストの間 |
| sm | 8px | 関連要素間 |
| md | 16px | カード内パディング |
| lg | 24px | セクション内余白 |
| xl | 48px | セクション間余白 |
| 2xl | 80px | ページセクション間 |

### コンテナ

- 最大幅: `1200px`
- 左右パディング: `24px`（モバイル: `16px`）
- センター配置: `margin: 0 auto`

## Depth & Elevation

| レベル | シャドウ | 用途 |
|--------|---------|------|
| Level 0 | なし | フラットな要素 |
| Level 1 | `0 1px 3px rgba(0,0,0,0.1)` | カード、ドロップダウン |
| Level 2 | `0 4px 12px rgba(0,0,0,0.1)` | ホバー状態、モーダル |
| Level 3 | `0 8px 24px rgba(0,0,0,0.15)` | ダイアログ、ポップオーバー |

## Do's and Don'ts

### Do（推奨）
- コントラスト比はWCAG AA基準（4.5:1以上）を守る
- ボタンのクリック領域は最低44x44px確保する
- 一画面のCTAは最大2つまでに絞る
- 余白を十分に取り、情報密度を下げる

### Don't（禁止）
- テキストに影をつけない
- 3色以上のグラデーションを使わない
- 本文テキストを14px未満にしない
- アニメーションの持続時間を500ms以上にしない
- Primary Buttonを1ページに3個以上配置しない

## Responsive Behavior

### ブレークポイント

| 名称 | 幅 | 対象 |
|------|------|------|
| mobile | 〜639px | スマートフォン |
| tablet | 640px〜1023px | タブレット |
| desktop | 1024px〜 | デスクトップ |

### レスポンシブルール

- グリッドレイアウト: desktop 3列 → tablet 2列 → mobile 1列
- ナビゲーション: desktop 横並び → mobile ハンバーガーメニュー
- フォントサイズ: mobile では H1 を 28px、H2 を 22px に縮小
- タッチターゲット: mobile では最低48x48px確保

## Agent Prompt Guide

### カラーリファレンス（コピー用）

# CLAUDE.md

## デザインルール
- UI・スタイルに関する変更は、必ず DESIGN.md を参照すること
- DESIGN.md に定義されていない色やフォントを使わないこと
- 新しいコンポーネントを作る場合は DESIGN.md の既存パターンに合わせること

# Next.jsの場合
npx create-next-app@latest my-website --typescript --tailwind
cd my-website

# DESIGN.mdを配置（Step 1で作成済み）
# CLAUDE.mdにDESIGN.mdの参照を追加

# リポジトリをクローン
git clone https://github.com/VoltAgent/awesome-design-md.git

# 使いたいデザインをコピー
cp awesome-design-md/stripe/DESIGN.md ./my-website/DESIGN.md

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#2563EB',
        'primary-dark': '#1D4ED8',
        secondary: '#475569',
        surface: '#F8FAFC',
      }
    }
  }
}