画面設計

画面一覧

画面名	ファイル	説明
デッキビルダー	deck-builder.html	デッキの作成・編集画面
カード検索	card-search.html	カードの検索・一覧表示
価格比較	price-compare.html	日米価格比較・購入リンク
デッキ一覧	deck-list.html	公開デッキの検索・閲覧
メタゲーム	metagame.html	大会結果・メタ分析
デッキ回し	deck-tester.html	デッキの一人回し・プレイテスト

共通仕様

レイアウト

• ヘッダー: ロゴ、ナビゲーション、ユーザーメニュー
• 左サイドバー: ナビゲーション（開閉可能）
• メインパネル: コンテンツ表示エリア
• フッター: 利用規約、プライバシーポリシー、SNSリンク

デザインシステム

項目	仕様
テーマ	ダークモード標準（ライトモード切替可能）
カラー	ニューモーフィズム風のソフトな配色
フォント	Inter（見出し）、Noto Sans JP（本文）
アニメーション	Framer Motion（60FPS）

レスポンシブ対応

ブレークポイント	対象デバイス
< 640px	モバイル
640px - 1024px	タブレット
> 1024px	デスクトップ

共通コンポーネント

コンポーネント	用途
CardPreview	カードのプレビュー表示（3D対応）
DeckCard	デッキのサムネイル表示
SearchFilter	検索フィルターUI
PriceTag	価格表示（日米対応）
LoadingSpinner	ローディング表示