UI Design: 候補者詳細画面

機能は requirements.md、技術は design.md 参照。共通のデザイントークンは home/ui-design.md を参照し、本ドキュメントでは詳細ページ固有の要素のみ記述する。

---

レイアウト全体

┌─────────────────────────────────────────┐
│ [← 候補者一覧]  [📈 ランキング]            │ NavLinks (左寄せ)
├─────────────────────────────────────────┤
│ [N位]  候補者名 (display大)  [N票]        │ DetailHeader
├─────────────────────────────────────────┤
│ [無料投票ボタン] [有料投票ボタン]          │ VoteButtonGroup (2列)
├─────────────────────────────────────────┤
│                                         │
│       ┌────────────────────┐            │
│       │                    │            │ ImageSlider
│       │   画像 (3:4)       │            │ max-w-md
│       │                    │            │
│       └────────────────────┘            │
│       ▢ ▢ ▢ ▢                          │ Thumbnails
├─────────────────────────────────────────┤
│ [出身地] [職業] [身長]                    │ InfoBadgeRow
├─────────────────────────────────────────┤
│ 趣味・特技                               │
│ [Tag] [Tag] [Tag]                      │ TagList
├─────────────────────────────────────────┤
│ 資格・大会実績                           │
│ [Tag] [Tag] [Tag]                      │ TagList
├─────────────────────────────────────────┤
│ ✨ PR                                    │
│ メッセージ本文（line-height 1.8)        │ PRMessage
├─────────────────────────────────────────┤
│ 📈 投票者貢献度ランキング                 │
│ [Voter1] [Voter2] [Voter3] ...         │ VoterRanking
└─────────────────────────────────────────┘

最大幅: max-w-4xl mx-auto px-6 py-12

---

コンポーネント別ビジュアル仕様

<NavLinks>

• 左寄せ、横並び、gap 8px
• 各リンク: inline-flex + アイコン + テキスト、px-3 py-2 rounded-full
• ホバー: 背景 white/60
• アイコン: ArrowLeft (一覧へ), TrendingUp (ランキングへ)

<DetailHeader>

• flex flex-wrap items-center gap-4
• 順位バッジ: ゴールド〜ローズゴールドグラデ、白文字、px-4 py-2 rounded-full、文字 1.1rem
• 候補者名: clamp(2.5rem, 5vw, 4rem)、display フォント、weight 500、letter-spacing 0.02em
• 得票数バッジ: 薄ゴールド背景 + ゴールド枠、gold-dark 文字、1.1rem

<VoteButtonGroup>

• グリッド grid-cols-1 md:grid-cols-2 gap-3
• ボタンは home の VoteButton と同形状だが、サイズが大きい（py-4、文字 1rem、weight 600）
• 無料ボタン: shadow 0 4px 20px rgba(212, 175, 55, 0.4) (有効時のみ)
• 有料ボタン: shadow 0 4px 20px rgba(212, 175, 55, 0.2)
• アニメーション: hover時 scale(1.02), tap時 scale(0.98) (motion使用)

<CandidateImageSlider>

• 最大幅: max-w-md mx-auto
• メイン画像: aspect 3:4、rounded-3xl overflow-hidden shadow-2xl
• 装飾枠: 周囲に gold→rose-gold→light-gold の135度グラデを blur(12px) opacity(0.6) で配置
• 矢印: 円形 40×40px、ゴールド90%透過背景、白アイコン、左15px / 右15px、ホバーで scale(1.1)
• ドット: 非表示 (dots: false)
• サムネイル: 80px幅・3:4比率、rounded-lg、gap 12px、中央寄せ
  • アクティブ: opacity 1.0、ゴールド枠2px
  • 非アクティブ: opacity 0.6、枠 transparent

<InfoBadge> / <InfoBadgeRow>

• flex flex-wrap items-center gap-4
• 各バッジ: px-4 py-2 rounded-full
• 背景: rgba(212, 175, 55, 0.08)、枠 1px solid rgba(212, 175, 55, 0.2)
• ラベル: opacity 0.6、0.85rem、mr-2
• 値: weight 500、gold-dark

<Tag> / <TagList>

• <TagList>: タイトル (display 1.3rem) + tags の縦並び
• 各 <Tag>: 白背景、px-4 py-2 rounded-full、ゴールド薄枠 1px solid rgba(212, 175, 55, 0.3)
• tags は flex flex-wrap gap-2 で並べる

<PRMessage>

• 外枠: p-6 rounded-2xl
• 背景: linear-gradient(135deg, rgba(212, 175, 55, 0.05), rgba(232, 180, 168, 0.05))
• 枠線: 1px solid rgba(212, 175, 55, 0.2)
• 見出し: Sparkles アイコン + 「PR」、display 1.3rem、gold-dark
• 本文: 1rem、line-height 1.8、opacity 0.9、white-space: pre-wrap で改行保持

<VoterRanking>

• セクション見出し: TrendingUp アイコン + 「投票者貢献度ランキング」(display 2rem) + サブテキスト
• アイテム配列 (5件):
  • 共通: rounded-2xl p-5、左にアイコン、中央に名前、右に投票数
  • 1位: ゴールド系グラデ背景 + ゴールド2px枠 + 強い影、Trophy アイコン
  • 2位: シルバー系 (#C0C0C0) Medal
  • 3位: ブロンズ系 (#CD7F32) Medal
  • 4位以降: 白背景 + 薄ゴールド枠、Award アイコン
• 投票数表示: rounded-xl px-4 py-2、display フォント、3桁区切り、下に「投票」サブラベル

---

アニメーション

要素	プロパティ	timing
NavLinks	opacity, x(-20→0)	duration 0.6s
DetailHeader	opacity, y(30→0)	delay 0.2s, duration 0.8s
ImageSlider	opacity, scale(0.95→1)	delay 0.4s, duration 0.8s
情報セクション	opacity, y(30→0)	delay 0.6s, duration 0.8s
VoterRanking	opacity, y(30→0)	delay 0.8s, duration 0.8s
各 VoterItem	opacity, x(-20→0)	delay 0.7 + i*0.05s

---

レスポンシブ

• モバイル: 投票ボタン1列、画像サイズ自動縮小、見出しサイズは clamp で調整
• タブレット以上: 投票ボタン2列、最大幅 max-w-4xl

---

関連ドキュメント

• requirements.md / design.md
• ../home/ui-design.md — 共通デザイントークン