デザインガイドライン

Version 1.0.0 | SB-Ticket（シュートボクシング）

UIガイドライン

プロジェクト: シュートボクシング協会統合PWAアプリ（SB-Ticket） バージョン: 1.0 作成日: 2026-03-16 ソース: docs/requirements/design-requirements.md, docs/design/design-system.yml

1. 美的方向性

1-1. トーン・ムード

項目	方向性
トーン	ダーク×コンバット — 格闘技ブランドの力強さとモダンさの融合
ムード	緊張感・プロフェッショナル・信頼感
世界観	格闘技の迫力とエンターテインメント性。試合の熱気をデジタルで体感できるUI

1-2. ビジュアルの柱

ダークネイビーベース: 情報密度の高い管理画面でも視認性を確保
ブランドレッドアクセント: シュートボクシングのアイデンティティ。CTAと重要数値に使用
データファースト: 数値・チャート・プログレスバーで状況を即座に把握
コンバットビジュアル: LP自動生成ではvs構図の対戦カードを自動合成

1-3. 差別化ポイント

格闘技系チケットサービスとして類を見ない「ダークUI×データ可視化×LP自動生成」の統合体験を提供する。管理画面の洗練されたデータ表示と、LPの迫力あるビジュアルが共存するUIを目指す。

2. タイポグラフィガイドライン

2-1. フォント体系

用途	フォント	ウェイト	備考
日本語（見出し・本文）	Noto Sans JP	400, 500, 700	Webフォント。日本語UIの主軸
数値・英語	Inter	400, 600, 700	クライアント指定例外。`tabular-nums`で数値を等幅に
アイコン	Lucide Icons	—	SVG形式で軽量

注意: Inter はCCAGI Anti-Patternルールでは禁止フォントだが、クライアント要件定義書にて数値・英語用フォントとして明示的に指定されているため、client-specified exceptionとして採用する。

2-2. サイズスケール

用途	サイズ	フォント	使用場面
KPI数値	3rem (48px)	Inter 700	ダッシュボードのKPIカード
ページタイトル (h1)	2.5rem (40px)	Noto Sans JP 700	ページ見出し
セクション見出し (h2)	2rem (32px)	Noto Sans JP 700	セクション区切り
カード見出し (h3)	1.5rem (24px)	Noto Sans JP 500	カードタイトル
サブヘッダー (h4)	1.25rem (20px)	Noto Sans JP 500	サブセクション
リード文	1.125rem (18px)	Noto Sans JP 400	説明文（大）
本文	1rem (16px)	Noto Sans JP 400	通常テキスト
補助テキスト	0.875rem (14px)	Noto Sans JP 400	ラベル・キャプション
極小テキスト	0.75rem (12px)	Noto Sans JP 400	タイムスタンプ・注釈

2-3. 使用ルール

数値表示には必ず font-variant-numeric: tabular-nums を適用する（Inter使用時）
KPIカードの大きな数値はInter 700で表示し、カウントアップアニメーションを付与する
テーブル内の数値列はInterで右揃えにする
日本語テキストは行間 line-height: 1.8 を基本とする
LP内のヒーロータイトルはNoto Sans JP 700、テキストシャドウ付きで視認性を確保する

3. カラーガイドライン

3-1. 管理画面（ダークパレット）

管理画面と選手ホームはダークネイビーベースで統一する。

要素	カラー	HEX	用途
背景	ダークネイビー	`#0F1729`	ページ背景
サーフェス	ダークスレート	`#1E293B`	カード・パネル・テーブル行
ホバー	ミディアムスレート	`#334155`	インタラクティブ要素のホバー
アクセント	ブランドレッド	`#E63946`	CTA・アクティブタブ・重要数値
テキスト（主）	ホワイト	`#FFFFFF`	見出し・主要テキスト
テキスト（副）	グレー	`#94A3B8`	ラベル・補助テキスト
ボーダー	ダークボーダー	`#2D3748`	カード境界線

3-2. 公開ページ（ライトパレット）

ファン向けページはライトテーマで明るく親しみやすい印象にする。

要素	カラー	HEX	用途
背景	ライトグレー	`#F8FAFC`	ページ背景
サーフェス	ホワイト	`#FFFFFF`	カード背景
テキスト（主）	ダーク	`#0F172A`	主要テキスト
アクセント	ブランドレッド	`#E63946`	購入ボタン・CTA

3-3. プログレスバー色分け

達成率に応じた3段階の色分けを全画面で統一して使用する。

達成率	色	HEX	使用場面
80%以上	緑	`#22C55E`	順調・支払完了
50〜80%	黄	`#EAB308`	注意・要フォロー
50%未満	赤	`#EF4444`	危険・エラー・期限切れ

3-4. ステータスバッジカラー

ステータス	背景色	テキスト色	用途
ドラフト	`#334155`	`#94A3B8`	LP未公開状態
確認中	`#EAB308` + 透過	`#EAB308`	LP確認中
公開済み	`#22C55E` + 透過	`#22C55E`	LP公開中
公開停止	`#EF4444` + 透過	`#EF4444`	LP停止

4. モーションガイドライン

4-1. アニメーションライブラリ

framer-motion を使用する。全アニメーションは200ms以内を基本とする。

4-2. パターン一覧

パターン	実装方法	用途
カウントアップ	framer-motion `animate` + `useInView`	KPIカードの数値表示時
フェードイン	`opacity: 0 → 1`, `duration: 200ms`	スケルトンからデータ表示への切り替え
スライドオーバー	`x: "100%" → "0%"`, `duration: 300ms`	選手詳細パネル（右からスライド）
スケルトンスクリーン	`pulse` アニメーション	データ読み込み中の枠表示
プログレスバー	`width: 0 → N%`, `duration: 500ms`, `ease: easeOut`	達成率の視覚的表現
トースト	`y: 100 → 0`, `opacity: 0 → 1`	成功/エラー/Undo通知
モーダル	`scale: 0.95 → 1`, `opacity: 0 → 1`	確認ダイアログ・LP生成プレビュー
タブ切り替え	レッドアンダーラインの `layoutId` アニメーション	試合選択タブ

4-3. Undoトースト

破壊的操作（削除・公開停止など）実行時に3秒間Undoトーストを表示する。

[操作名]を実行しました  [元に戻す]  ━━━━━━━━ (3秒タイマー)

4-4. カウントアップアニメーション

KPIカードの数値はページ表示時にカウントアップアニメーションで表示する。

開始値: 0
終了値: 実データ値
duration: 800ms
イージング: easeOut
前回比の矢印（上向き緑 / 下向き赤）も同時にフェードイン

4-5. 禁止事項

レイアウトプロパティ（width, height, top, left）のアニメーション禁止
compositor props（transform, opacity）のみ使用する
1秒を超える長時間アニメーションは禁止

5. コンポーネントパターン

5-1. KPIカード

ダッシュボード最上部に配置する最重要コンポーネント。

┌──────────────────────────────┐
│  直近試合 総販売枚数          │
│  ┌─────────────────────┐     │
│  │    1,247 枚         │     │  ← Inter 700 / 48px / カウントアップ
│  │    ▲ +12% (前回比)  │     │  ← 緑矢印 or 赤矢印
│  └─────────────────────┘     │
│  更新: 2026-03-16 15:30      │  ← 補助テキスト / 14px
└──────────────────────────────┘

5-2. プログレスバー付きデータテーブル

販売状況テーブルでは各行にプログレスバーを組み込む。

| 選手名       | ノルマ | 販売数 | 達成率     |
|-------------|--------|--------|-----------|
| 笠原 直樹    |   30   |   28   | ███████▓░ 93% (緑) |
| 鈴木 一郎    |   25   |   15   | ██████░░░ 60% (黄) |
| 田中 太郎    |   20   |    5   | ██░░░░░░░ 25% (赤) |

5-3. スライドオーバーパネル

選手カードクリック時に右からスライドして表示する詳細パネル。

幅: デスクトップで480px / モバイルでフルスクリーン
背景: オーバーレイ（黒50%透過）
内容: タブ構成（販売状況 / ファン一覧 / スポンサー / 還元履歴）

5-4. コマンドパレット（⌘K）

⌘K でオーバーレイ表示される検索パレット。

┌──────────────────────────────────────┐
│  🔍 試合・選手・LPを検索...          │
│─────────────────────────────────────│
│  最近の操作                          │
│  ● SHOOT BOXING 2026 act.2          │
│  ● 笠原 直樹                        │
│  ● LP: SHOOT BOXING 2026 act.1     │
│─────────────────────────────────────│
│  アクション                          │
│  ⌘N  新しい試合を作成               │
│  ⌘G  LP生成                        │
└──────────────────────────────────────┘

5-5. LPインラインエディタ

LPプレビュー画面でテキストをクリックすると、その場で編集できるインラインエディタ。

テキストクリックで編集モードに切り替え
フォント・色・サイズの変更パネルをフローティング表示
画像クリックでDrag&Dropエリアを表示（最大10MB・JPG/PNG）
CTAボタンのテキストのみ変更可（URLは自動設定）

5-6. LPステータスカード

LP管理ショートカットで使用するカード。

┌──────────────────────────────┐
│  SHOOT BOXING 2026 act.2     │
│  2026/04/15 後楽園ホール      │
│  ┌────────┐                  │
│  │ 公開済み │ ← ステータスバッジ（緑）
│  └────────┘                  │
│  LP閲覧数: 3,456             │
│  LP経由購入: 28枚            │
│  [プレビュー] [編集] [停止]   │
└──────────────────────────────┘

6. ページ別ガイドライン

6-1. 協会管理者ダッシュボード

テーマ: ダークネイビー（admin）
構成:
1. KPIカード行（横並び4枚）: 総販売枚数 / LP閲覧数 / 全体達成率 / 未払い還元額
2. 試合選択タブ（横スクロール）: アクティブ試合をレッドアンダーラインで強調
3. 販売状況テーブル（プログレスバー付き）
4. アラートパネル（右サイド）: 赤ボーダーカードで警告表示
5. LP管理ショートカット: ステータスバッジ付きカード
操作性: スケルトンスクリーン → フェードイン。⌘Kコマンドパレット常時利用可能

6-2. 選手ホーム

テーマ: ダーク（admin）
構成:
1. ノルマ達成率を大きなプログレスバーで表示
2. 締切カウントダウン（日数表示を大きく目立たせる）
3. 収入サマリーカード: 確定 / 見込み / 累計を明確に区分
4. 販売ランキング（順位のみ表示）
特記: 選手が最も頻繁にアクセスする画面。モバイルでの閲覧を最優先に設計

6-3. 公開ページ（ファン向け）

テーマ: ライト（public）
特徴:
- 格闘技の迫力を感じるヒーロービジュアル
- チケット購入CTAを最大限目立たせる（ブランドレッド大ボタン）
- QRコードは大きく・スキャンしやすく表示
- 選手プロフィールはカード形式でビジュアル重視
- SNSシェアボタン（LINE / Instagram / X / コピー）を常に表示

6-4. 試合LP（自動生成）

テーマ: ダーク（lp）
構成:
1. ヒーロービジュアル: 対戦選手のvs構図（宣材写真合成）
2. 試合タイトル・開催日・会場
3. 試合紹介文（AI補完）
4. 出場選手一覧（プロフィールカード）
5. 席種・料金表
6. チケット購入CTAボタン（席種別・ブランドレッド）
7. SNSシェアボタン
8. スポンサーロゴ（下部配置）
特記: モバイルファーストで縦長レイアウト。OGP画像（1200x630）も自動生成

7. アンチパターン（禁止事項）

以下のパターンは本プロジェクトでは使用禁止とする。

カテゴリ	禁止パターン	理由
カラー	紫グラデーション on 白背景	AI slop — 格闘技ブランドの世界観と合わない
エフェクト	過剰なドロップシャドウ（多重シャドウ）	AI slop — カードシャドウは指定値のみ
エフェクト	グロー効果（neon glow）	AI slop — ダークUIの視認性を損なう
エフェクト	ぼかし（backdrop-blur多用）	パフォーマンス低下の原因
レイアウト	予測不能なレイアウト変更	ユーザビリティの低下
アニメーション	1秒超のアニメーション	ユーザーの待機時間増加
アニメーション	レイアウトプロパティのアニメーション	パフォーマンス低下（リフロー発生）
タイポグラフィ	Roboto / Arial の使用	ブランドフォントはNoto Sans JP + Interに統一

注意: Inter はクライアント要件により例外的に許可しているが、数値・英語表示以外での使用は禁止する。日本語テキストには必ずNoto Sans JPを使用すること。

8. アクセシビリティガイドライン

項目	基準
WCAG準拠レベル	AA
コントラスト比	4.5:1以上（通常テキスト）、3:1以上（大テキスト）
タッチターゲット	最小44px × 44px
キーボード操作	全主要操作でキーボードナビゲーション対応
スクリーンリーダー	全インタラクティブ要素に適切な `aria-label` を設定
フォーカスリング	フォーカス状態を視覚的に明示する（ブランドレッドのアウトライン）
減モーション	`prefers-reduced-motion` を尊重し、アニメーションを無効化する

Generated by CCAGI SDK Phase 2 - 2026-03-16 Source: docs/requirements/design-requirements.md