カスタムテンプレート作成ガイド
既存のプリセット（DARK_THEME / GAMING_APP）がプロジェクトに合わない場合、DESIGN_TEMPLATE.md をベースにカスタムテンプレートを作成できます。このガイドでは、ゼロからの作成手順と、既存デザインからの変換方法を解説します。
カスタムテンプレートが必要な場合
以下のケースでは、既存プリセットではなくカスタムテンプレートの作成を推奨します。
| ケース | 理由 |
|---|---|
| ライトモードがメインのプロジェクト | 既存プリセットは全てダーク系 |
| 独自のブランドガイドラインが既にある | プリセットの色体系と衝突する |
| 特殊なUIパターンが必要 | 既存コンポーネントでカバーできない |
| 既存のデザインプロンプトを移植したい | フォーマットの変換が必要 |
まずはプリセットの上書きを検討
完全なカスタム作成は時間がかかります。DARK_THEME や GAMING_APP のアクセントカラーを差し替えるだけで済む場合は、プリセットの上書きを先に試してください。
作成手順
Step 1: テンプレートのコピー
bash
cp templates/DESIGN_TEMPLATE.md ./DESIGN.mdDESIGN_TEMPLATE.md には全9セクションの構造と、各セクションの記述ガイド（HTMLコメント）が含まれています。{placeholder} をプロジェクト固有の値に置き換えていきます。
Step 2: Visual Theme & Atmosphere（Section 1）
最初に埋めるべきセクションです。ここがデザイン全体の方向性を決定します。
記述すべき項目:
- デザイン哲学 -- 一文で表現する（例: 「ダークモードネイティブ」「コンテンツファースト」）
- 視覚的印象 -- 比喩で伝える（例: 「プレミアムコードエディタ風」「劇場のような没入感」）
- 密度 -- 情報密度と余白のバランス方針
- 特徴的要素 -- 3-5個の視覚的特徴
- これではない -- 避けるべき方向性（AI の誤解を防ぐ）
md
**デザイン哲学**: コンテンツファースト。UIは透明な存在に徹し、コンテンツが主役。
**視覚的印象**: 美術館の展示室。白い壁が作品を際立たせるように、
余白がコンテンツの価値を高める。
**密度**: 情報密度は控えめ。一画面に表示する情報量を制限し、
ユーザーの認知負荷を最小化する。
**特徴的要素**:
- 広い余白と明確な視覚的階層
- 微妙な影による深度表現
- アクセントカラーの戦略的使用
**これではない**:
- データ密度の高いダッシュボード
- ゲーミング感のある派手なUIStep 3: Color Palette（Section 2）
カラーパレットは セマンティックトークン で定義します。HEX値だけでなく、必ず「どこで使うか」の Role を記述してください。
最低限必要なトークン:
| カテゴリ | 必須トークン数 | 例 |
|---|---|---|
| Background Surfaces | 4-6 | bg-deepest, bg-base, bg-panel, bg-surface |
| Text & Content | 3-4 | text-primary, text-secondary, text-muted |
| Brand & Accent | 3-4 | accent-primary, accent-hover, accent-muted |
| Semantic | 4 | success, error, warning, info |
| Borders | 2-3 | border-subtle, border-standard |
カラートークンの命名規則
bg-{用途} -- 背景色（bg-base, bg-surface, bg-hover）
text-{優先度} -- テキスト色（text-primary, text-muted）
accent-{状態} -- アクセント色（accent-primary, accent-hover）
border-{強度} -- ボーダー色（border-subtle, border-emphasis）Step 4: Typography（Section 3）
フォントファミリーとサイズ階層を定義します。
md
### Font Families
- **Primary**: "Noto Sans JP", -apple-system, sans-serif
- **Monospace**: "JetBrains Mono", monospace
### Hierarchy Table
| Role | Size | Weight | Line Height | Letter Spacing | Font |
|------|------|--------|-------------|----------------|------|
| Display Hero | 48px | 700 | 1.00 | -1.0px | Noto Sans JP |
| Heading 1 | 32px | 700 | 1.20 | -0.5px | Noto Sans JP |
| Body | 16px | 400 | 1.75 | normal | Noto Sans JP |
| Caption | 13px | 400 | 1.50 | normal | Noto Sans JP |日本語フォントの行間
日本語テキストは英語より広い行間が必要です。Body の Line Height は 1.75 以上を推奨します。
Step 5: Component Stylings（Section 4）
最低限 4種類 のコンポーネントを定義してください。
| コンポーネント | 必須 | 定義すべき状態 |
|---|---|---|
| Button（Primary / Secondary / Ghost） | 必須 | default, hover, active, disabled |
| Card | 必須 | default, hover |
| Input（Text / Select） | 必須 | default, focus, error |
| Navigation（Header / Sidebar） | 必須 | default, active item |
| Badge / Pill | 推奨 | 各セマンティックタイプ |
| Modal / Dialog | 推奨 | overlay, content |
| Table / List | 推奨 | header, row hover |
各コンポーネントには以下を記述します:
md
### Buttons
#### Primary Button
- Background: {accent-primary の値}
- Text: {テキスト色}
- Padding: {上下px} {左右px}
- Border Radius: {値}
- Hover: {ホバー時の色}
- Active: {アクティブ時の色}
- Disabled: {無効時の色}, opacity {値}
- Shadow: {影の値 or none}
- Transition: {トランジション}Step 6: 残りのセクション
Section 5-9 は以下の要点を押さえて記述します。
| Section | 要点 |
|---|---|
| 5. Layout Principles | ベースユニット（4px or 8px）、スペーシングスケール、グリッド設定 |
| 6. Depth & Elevation | 影のレベル定義（0-4段階）、深度表現の哲学 |
| 7. Do's and Don'ts | 各5項目以上。具体的な色・サイズを含めて記述 |
| 8. Responsive Behavior | ブレークポイント3段階、タッチターゲットサイズ、折りたたみ戦略 |
| 9. Agent Prompt Guide | クイックカラーリファレンス、プロンプト例2-3個 |
既存デザインからの変換
デザインプロンプトからの変換
既にあるデザインプロンプト（テキストベースのデザイン指示）を DESIGN.md 形式に変換する手順です。
Step 1: デザインプロンプトから色情報を抽出
既存: 「背景は暗いグレー、テキストは白、アクセントは紫」
↓ 変換
| bg-base | #0f1011 | メインページ背景 |
| text-primary | #f7f8f8 | 見出し・重要テキスト |
| accent-primary | #7C3AED | メインCTA |Step 2: 曖昧な表現を具体的な値に変換
| 曖昧な表現 | 具体的な値 |
|---|---|
| 「大きめのフォント」 | 48px, weight 700 |
| 「角丸」 | 8px border-radius |
| 「薄いボーダー」 | 1px solid rgba(255,255,255,0.08) |
| 「少し透明」 | opacity 0.80 or rgba |
| 「ふんわりした影」 | 0 4px 12px rgba(0,0,0,0.15) |
Step 3: 足りないセクションを既存プリセットから補完
Section 5（Layout）や Section 8（Responsive）は、DARK_THEME や GAMING_APP から適切な値を借用できます。
スタイルガイドからの変換
Figma や Sketch のスタイルガイドがある場合:
- カラースタイルを Section 2 のトークンテーブルにマッピング
- テキストスタイルを Section 3 の Hierarchy Table にマッピング
- コンポーネントバリアントを Section 4 の状態別定義にマッピング
- スペーシング値を Section 5 の Spacing Scale にマッピング
参考デザインシステムの活用
awesome-design-md の55サイトから、プロジェクトに近いデザインを参考にできます。
活用手順
- awesome-design-md の一覧から、プロジェクトに近いカテゴリのサイトを2-3個選ぶ
- 各サイトのカラーパレット・タイポグラフィ・コンポーネントを観察
- 共通するデザインパターンを抽出
- DESIGN_TEMPLATE.md の対応セクションに値を記入
カテゴリ別の参考例
| プロジェクトタイプ | 参考にすべきサイト群 | 注目ポイント |
|---|---|---|
| SaaS | Linear, Notion, Vercel | 情報階層、余白設計 |
| eコマース | Shopify, Stripe | CTA設計、信頼性 |
| メディア | Spotify, Netflix | 没入感、コンテンツ優先 |
| 開発者ツール | GitHub, Supabase | コードブロック、ダークモード |
チェックリスト
カスタムテンプレートの完成度を確認するためのチェックリストです。
必須項目
- [ ] Section 1: デザイン哲学が一文で表現されている
- [ ] Section 1: 「これではない」が2項目以上ある
- [ ] Section 2: 背景色が最低4段階定義されている
- [ ] Section 2: テキスト色が最低3段階定義されている
- [ ] Section 2: セマンティックカラー（success/error/warning/info）が定義されている
- [ ] Section 3: フォントファミリーとフォールバックが指定されている
- [ ] Section 3: サイズ階層が Display から Caption まで網羅されている
- [ ] Section 4: Button / Card / Input / Navigation の4コンポーネントが定義されている
- [ ] Section 4: 各コンポーネントに hover / active / disabled 状態がある
- [ ] Section 5: ベースユニットとスペーシングスケールが定義されている
- [ ] Section 7: Do's と Don'ts がそれぞれ5項目以上ある
- [ ] Section 8: 3段階のブレークポイントが定義されている
- [ ] Section 9: クイックカラーリファレンスがある
推奨項目
- [ ] Section 2: 全カラートークンに Role（用途）が記述されている
- [ ] Section 4: Badge / Modal / Table も定義されている
- [ ] Section 5: Grid & Container の設定がある
- [ ] Section 6: 影のレベルが4段階定義されている
- [ ] Section 9: プロンプト例が2-3個ある
- [ ] Section 9: Stitch 投入手順が記述されている
- [ ] HTMLコメント（ガイド）が全て削除されている
品質チェック
- [ ] 全ての色値が HEX または RGBA で指定されている（色名不可）
- [ ] フォントサイズが px で統一されている
- [ ] ボーダーの半透明値が一貫している
- [ ] Do's と Don'ts が具体的な値を含んでいる（「適切な色を使う」ではなく「#f7f8f8 を最高輝度とする」）
- [ ] プリセットからコピーした値がプロジェクトに合わせて調整されている
関連ページ
- テンプレート一覧・選び方
- ダークテーマプリセット -- カスタム作成時の参考値として
- ゲーミングアプリプリセット -- カスタム作成時の参考値として