MTGDeckTool サンプル完全解説
MTGデッキ管理ツール「MTGDeckTool」向けに生成された DESIGN.md の詳細解説です。ダークモードネイティブ + MTG 5色の統合 + 6画面構成という複雑な要件をカバーした実践例として、create-design スキルの全体像を把握できます。
プロジェクト概要
| 項目 | 内容 |
|---|---|
| プロジェクト名 | MTGDeckTool |
| 種別 | カードゲーム管理Webアプリ |
| ミッション | 世界最速・唯一無二のMTGデッキ管理プラットフォーム |
| 差別化要因 | デッキ回し（ゴールドフィッシュ）機能 |
| モード | ダークモードネイティブ |
| 技術スタック | Next.js 14 / shadcn/ui / Tailwind CSS / Zustand / React Query |
要件
デザイン要件
- ダークモードネイティブ — 暗闇が母体。カードとデータが光として浮かぶ
- MTG 5色の統合 — 装飾ではなくセマンティック用途（マナシンボル・デッキ分類タグ）
- 情報密度: 高 — 統計・確率・価格データをLinear/Stripeの精密さで表示
- パフォーマンス最優先 — マナシンボルはインラインSVG（0ms）、レアリティは純粋CSS
- 著作権遵守 — MTG Arena/MTGO の公式UI模倣禁止
画面構成（6画面）
| # | 画面 | 役割 |
|---|---|---|
| 1 | カード検索 | Scryfall API によるカード検索・フィルタリング |
| 2 | デッキビルダー | デッキの構築・編集 |
| 3 | 価格比較 | ショップ間の価格比較テーブル |
| 4 | デッキ一覧（ギャラリー） | 保存デッキの一覧・管理 |
| 5 | メタゲーム | 大会メタの分布・分析 |
| 6 | デッキ回し（プレイテスト） | ゴールドフィッシュ・確率計算・マリガン判断 |
パフォーマンス制約
| 項目 | 目標値 |
|---|---|
| 初回ページロード | < 1.5秒 |
| ページ遷移 | < 0.3秒 |
| カード検索 | < 100ms |
| カードドロー | < 10ms |
| 確率計算 | < 100ms |
テンプレート選択の理由
DARK_THEME + GAMING_APP のハイブリッド を採用。
| 採用要素 | 出典 | 理由 |
|---|---|---|
| 輝度ステップによる深度表現 | DARK_THEME | 影なしでサーフェス階層を表現。パフォーマンスに優しい |
| 半透明白ボーダー | DARK_THEME | ソリッドボーダーより上品でダークモードに馴染む |
| フロステッドガラス効果 | GAMING_APP | デッキ回し画面の没入感演出（モーダル限定で使用） |
| インセット影・アンビエントグロウ | GAMING_APP | デッキ回し画面のCTAボタン・カードホバーに使用 |
| パープル基調のアクセント | GAMING_APP | MTGの世界観と調和するブランドカラー |
使い分けの方針
通常画面（検索・ビルダー・価格・一覧・メタゲーム） は Linear 方式（影なし + 輝度ステップ）で精密さを演出。デッキ回し画面のみ Sentry 方式（インセット影 + グロウ + フロステッドガラス）でゲーミングの没入感を追加。
参考デザインシステム
画面ごとに異なるデザインシステムを参照し、それぞれの強みを活かしています。
| 画面 | メインベース | サブ参考 | 参考ポイント |
|---|---|---|---|
| カード検索 | Linear | Supabase | サイドバー + グリッド構造。フィルターの配置 |
| デッキビルダー | Supabase | Linear | データベースエディタ風のカラム構成 |
| 価格比較 | Stripe | Linear | 金融データの等幅数字テーブル。価格変動の色分け |
| デッキ一覧 | Spotify | Linear | コンテンツ発見体験。カードギャラリーのグリッド |
| メタゲーム | Linear | Stripe | データダッシュボード。円グラフ・統計表示 |
| デッキ回し | Sentry | Spotify | フロステッドガラス + インセット影の没入感 |
生成された DESIGN.md のハイライト
Section 1: Visual Theme & Atmosphere
デザイン哲学を一文で表現:
ダークモードネイティブ。暗闇が母体であり、MTGカードと統計データが光として浮かぶ。パフォーマンスファーストのコンテンツ駆動型UI。
「これではない」リスト が特徴的です。MTG Arena の公式UI模倣・過度なファンタジー装飾・ライトモードベースのカジュアルデザインを明確に排除しています。AIエージェントがデザインの方向性を誤解しないための重要なガードレールです。
Section 2: Color Palette & Roles
通常のダークテーマ（背景・テキスト・アクセント・セマンティック・ボーダー）に加え、MTG固有のカテゴリが追加されています。
MTG 5色（機能的統合）
| Token | Value | Role |
|-------|-------|------|
| mana-white | #FFFBD5 | 白マナシンボル・白デッキ分類タグ |
| mana-blue | #0EA5E9 | 青マナシンボル・青デッキ分類タグ |
| mana-black | #374151 | 黒マナシンボル・黒デッキ分類タグ |
| mana-red | #DC2626 | 赤マナシンボル・赤デッキ分類タグ |
| mana-green | #059669 | 緑マナシンボル・緑デッキ分類タグ |
| mana-colorless | #9ca3af | 無色マナシンボル |
| mana-multi | linear-gradient(135deg, ...) | 多色デッキ表現 |MTG 5色の使い方
5色は マナシンボル と デッキ分類タグ にのみ使用します。UI装飾（ボタン背景・ヘッダー色等）には使いません。この制約が Do's and Don'ts に明記されています。
レアリティカラー
| Token | Value | Role |
|-------|-------|------|
| rarity-common | #9ca3af | コモン（純粋CSS実装） |
| rarity-uncommon | #c0c0c0 | アンコモン |
| rarity-rare | #F59E0B | レア |
| rarity-mythic | #DC2626 | 神話レア |レアリティ表示は 純粋CSS で実装する方針です。画像やSVGを使わず、color + background-color のみで表現します。
デザインプレビュー: カラーパレット
Color Palette Preview
Background Surfaces
Text Hierarchy
Brand & Accent
Semantic
MTG 5 Colors
Rarity
背景の4段階輝度
#080808 (bg-deepest) → #0F0F0F (bg-base) → #151515 (bg-panel) → #1A1A1A (bg-surface)この微妙な輝度差でサーフェスの階層を表現します。影を使わないため、パフォーマンスへの影響がゼロです。
Section 3: Typography Rules
フォント構成
| 種別 | フォント | 用途 |
|---|---|---|
| Primary | Inter Variable | 英語テキスト全般 |
| Japanese | Noto Sans JP | 日本語テキスト（Body以下のフォールバック） |
| Monospace | JetBrains Mono | デッキリスト・MTGコード |
ウェイト制限
ウェイトは 400 / 510 / 590 の3段階のみ。700（Bold）は使用禁止です。510 で十分な視覚的重みがあり、過度な太字はダークモードで目に刺さります。
等幅数字（tnum）
価格表示・統計値には font-feature-settings: 'tnum' を必ず適用します。数字が等幅で整列するため、価格テーブルの可読性が大幅に向上します。
Section 4: Component Stylings
MTG固有のコンポーネントが特徴的です。
マナボタン（色フィルター用）
- Size: 28px x 28px
- Background: transparent
- Border: 1px solid rgba(255,255,255,0.08)
- Border Radius: 50%
- Active: 対応するマナカラー背景MTGカードサムネイル
- Border Radius: 4.5% / 3.5%（MTGカードの実際の角丸比率）
- Shadow: 0 4px 12px rgba(0,0,0,0.30)
- Hover: transform scale(1.02)MTGカードの実物の角丸比率（4.5% / 3.5%）を再現している点がこだわりです。
デッキ回し画面専用コンポーネント
デッキ回し画面では通常画面と異なるスタイルが適用されます。
| コンポーネント | 通常画面 | デッキ回し画面 |
|---|---|---|
| CTA ボタン | accent-primary, shadow: none | #10B981, inset shadow |
| モーダル | bg-surface, 標準shadow | bg-frosted, backdrop-filter + glow |
| カードホバー | border-emphasis | border-glow + ambient glow |
デザインプレビュー: コンポーネント
Component Preview
Buttons
Mana Filter Buttons
Card Component
Search Input
Badges
Price Table
Section 5: Layout Principles
カードグリッドのレスポンシブ
| デバイス | カード画像 | デッキカード |
|---|---|---|
| デスクトップ | 5カラム | 3カラム |
| タブレット | 3カラム | 2カラム |
| モバイル | 2カラム | 1カラム |
デッキビルダーのレイアウト
┌──────────────┬─────────────────────────┐
│ デッキリスト │ │
│ (320px固定) │ カード検索エリア │
│ │ (flex-1) │
│ ┌──────────┐│ │
│ │メインボード ││ │
│ ├──────────┤│ │
│ │サイドボード ││ │
│ └──────────┘│ │
└──────────────┴─────────────────────────┘デザインプレビュー: ミニダッシュボード
Section 6: Depth & Elevation
二重の深度戦略 がこのプロジェクトの特徴です。
| 画面 | 深度方式 | 技法 |
|---|---|---|
| 通常画面 | Linear 方式 | 輝度ステップ + 半透明白ボーダー。影なし |
| MTGカード画像 | 物理方式 | box-shadow でカードの存在感を表現 |
| デッキ回し画面 | Sentry 方式 | インセット影 + アンビエントグロウ + フロステッドガラス |
デザインプレビュー: 深度方式の比較
Depth Strategy Comparison
Linear Method - Normal Screens
Sentry Method - Playtest Screen
Section 7: Do's and Don'ts
MTG 固有のルールが充実しています。
Do（やること）
- マナシンボルは インラインSVG で実装する（0ms描画）
- レアリティは 純粋CSS で実装する
- 価格表示には tnum（等幅数字） を必ず適用
- カード画像は Scryfall API からオンデマンド取得
- テキスト最高輝度は
#f7f8f8（#ffffff禁止）
Don't（やらないこと）
- MTG Arena / MTGO の公式UIを模倣しない（著作権リスク）
- Wizards of the Coast のロゴ・商標を無断使用しない
- カードイラストをローカルにダウンロードしない
- AI API をデッキ回し機能で使用しない（純粋ロジック実装が必須）
- マナシンボルに外部画像（PNG/WebP）を使わない
backdrop-filterをヘッダーに常時適用しない
Section 9: Agent Prompt Guide
AIエージェント向けのクイックリファレンスと具体的なプロンプト例が含まれています。
実装の順序ガイド（Iteration Guide）
1. 背景色を設定（#080808 → #0F0F0F → #151515 → #1A1A1A の4層）
2. テキスト階層を適用（#f7f8f8 → #d0d6e0 → #8a8f98 → #62666d）
3. アクセント #7C3AED は CTA とアクティブ状態のみ
4. ボーダーは半透明白 rgba(255,255,255, 0.05-0.12)
5. MTG 5色はマナシンボルとデッキ分類のみ
6. 影はカード画像のみ。UIカードは輝度ステップで深度表現
7. 価格表示は必ず tnum（等幅数字）
8. デッキ回し画面のみ: インセット影 + アンビエントグロウ + フロステッドガラスプロンプト例
#0F0F0F 背景に #f7f8f8 テキスト、#7C3AED のプライマリボタン（6px角丸）を持つ
カード検索画面のヘッダーを作成してください。検索バーは #080808 背景、
rgba(255,255,255,0.08) ボーダーです#1A1A1A 背景のデッキカードを作成してください。
ボーダーは rgba(255,255,255,0.08)、角丸は 8px、パディングは 16px。
カード名は #f7f8f8、デッキ価格は #d0d6e0 + tnum（等幅数字）ですMTG 5色のマナフィルターボタンを作成してください。
44px x 44px、円形、デフォルトは transparent + rgba(255,255,255,0.08) ボーダー。
アクティブ時はそれぞれのマナカラーを背景にします。
White: #FFFBD5, Blue: #0EA5E9, Black: #374151, Red: #DC2626, Green: #059669デッキ回し画面のドローボタンを作成してください。
#10B981 背景、#ffffff テキスト、8px角丸、12px 24px パディング。
inset 0 1px 0 rgba(255,255,255,0.15) のインセット影で立体感を付けてください価格比較テーブルを作成してください。
ヘッダー: #151515 背景、#8a8f98 テキスト。
価格セルは font-feature-settings: 'tnum' で等幅数字。
上昇は #10B981、下落は #EF4444 で色分けしてください画面別デザイン適用マッピング
各画面で使用する主なデザイン要素を一覧化します。
| 画面 | 背景 | 深度方式 | 特殊コンポーネント | 参考サービス |
|---|---|---|---|---|
| カード検索 | bg-base | 輝度ステップ | マナフィルターボタン、カードグリッド | Linear + Supabase |
| デッキビルダー | bg-base | 輝度ステップ | デッキリスト、マナカーブチャート | Supabase + Linear |
| 価格比較 | bg-base | 輝度ステップ | 価格テーブル（tnum）、価格変動バッジ | Stripe + Linear |
| デッキ一覧 | bg-base | 輝度ステップ | デッキカードギャラリー、MTGカードサムネイル | Spotify + Linear |
| メタゲーム | bg-base | 輝度ステップ | メタ分布チャート、デッキタイプバッジ | Linear + Stripe |
| デッキ回し | bg-base | フロステッド + グロウ | CTAボタン（inset shadow）、Playtestモーダル | Sentry + Spotify |
画面別の追加コンポーネント
| 画面 | コンポーネント | 特記事項 |
|---|---|---|
| カード検索 | 検索入力（bg-deepest） | 左アイコン付き。Placeholder: 「カード名で検索...」 |
| カード検索 | マナフィルターボタン | 28px円形。アクティブ時にマナカラー背景 |
| デッキビルダー | デッキ名入力 | transparent背景。border-bottom のみのミニマル入力 |
| デッキビルダー | デッキリスト | メインボード + サイドボード。リサイズ可能な分割 |
| 価格比較 | 価格テーブル | tnum必須。上昇 #10B981 / 下落 #EF4444 |
| デッキ一覧 | MTGカードサムネイル | 角丸 4.5%/3.5%。ホバーで scale(1.02) + 影強化 |
| デッキ回し | CTAボタン | #10B981 + inset shadow。「ドロー」「ターン進行」 |
| デッキ回し | Playtestモーダル | フロステッドガラス + accent-glow。マリガン判定等 |
| デッキ回し | マナコスト表示 | インラインSVG 16px。シンボル間隔 2px |
まとめ
MTGDeckTool の DESIGN.md は、create-design スキルの全機能を活用した最も包括的な事例です。
- ダークテーマ + ゲーミング のハイブリッドアプローチ
- MTG 5色 をセマンティック用途に限定した機能的統合
- 画面ごとの深度方式の切り替え（通常=輝度ステップ / プレイテスト=フロステッド）
- パフォーマンス制約 をDo's and Don'tsで明文化（インラインSVG必須、純粋CSS、backdrop-filter限定使用）
- 著作権ガードレール をAIエージェントに伝達
このレベルの DESIGN.md があれば、Google Stitch や Claude に投入するだけで、デザイン意図を正確に反映した UI が生成されます。