UI Design: ランキング画面

機能は requirements.md、技術は design.md 参照。デザイントークンは home/ui-design.md を参照。

---

レイアウト

┌────────────────────────────────────────────┐
│ [← 候補者一覧へ戻る]                          │
│ 📈 候補者ランキング (display 大)              │
├────────────────────────────────────────────┤
│ 🏆 [1位] 🖼  名前        ████████ 100% 1234票 │
│           [無料投票] [有料投票]               │
├────────────────────────────────────────────┤
│ 🥈 [2位] 🖼  名前        ██████ 75% 925票    │
│           [無料投票] [有料投票]               │
├────────────────────────────────────────────┤
│ 🥉 [3位] 🖼  名前        █████ 60% 740票     │
│           [無料投票] [有料投票]               │
├────────────────────────────────────────────┤
│ 🏅 [4位] 🖼  名前        ████ 45% 555票      │
│           [無料投票] [有料投票]               │
└────────────────────────────────────────────┘

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

---

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

<RankingHeader>

• flex items-center gap-3
• TrendingUp アイコン (gold, 7×7)
• タイトル「候補者ランキング」: display フォント、clamp(2rem, 4vw, 3rem)、weight 500

<RankingItem> (共通)

• rounded-2xl p-5、flex items-center gap-4
• 内部構造（左→右）:
  1. 順位アイコン（円形背景に Trophy/Medal/Award）
  2. 順位バッジ + 候補者名（縦並び）
  3. 候補者画像（円形 or 角丸サムネ、64×64）
  4. 得票率バー + 得票数（縦並び）
  5. 投票ボタン2つ（縦並び、コンパクト）

順位別装飾

1位

項目	値
背景	linear-gradient(135deg, rgba(212, 175, 55, 0.15), rgba(232, 180, 168, 0.15))
枠線	2px solid var(--gold)
影	0 8px 30px rgba(212, 175, 55, 0.3)
アイコン	Trophy (gold, 8×8)
バッジ背景	var(--gold)
バッジ文字	white
バー色	var(--gold)

2位

項目	値
背景	linear-gradient(135deg, rgba(192, 192, 192, 0.12), rgba(220, 220, 220, 0.12))
枠線	2px solid #C0C0C0
影	0 6px 25px rgba(192, 192, 192, 0.2)
アイコン	Medal (silver #C0C0C0, 7×7)
バッジ背景	#C0C0C0
バー色	#C0C0C0

3位

項目	値
背景	linear-gradient(135deg, rgba(205, 127, 50, 0.12), rgba(230, 160, 120, 0.12))
枠線	2px solid #CD7F32
影	0 6px 25px rgba(205, 127, 50, 0.2)
アイコン	Medal (bronze #CD7F32, 7×7)
バッジ背景	#CD7F32
バー色	#CD7F32

4位以降

項目	値
背景	white
枠線	1px solid rgba(212, 175, 55, 0.2)
影	0 2px 10px rgba(0, 0, 0, 0.05)
アイコン	Award (gold-light opacity 0.6, 6×6)
バッジ背景	rgba(212, 175, 55, 0.2)
バッジ文字	gold-dark
バー色	var(--gold-light)

<VoteShareBar>

• 高さ 6px、rounded-full、背景 gray-200
• 内側バー: rounded-full、幅 (votes / maxVotes) * 100%
• アニメーション: 幅変更を transition-all duration-700 ease-out
• バー上部に得票率 % と票数を並列表示

投票ボタン (RankingItem 内)

• home/詳細ページよりコンパクト: py-2 px-4、文字サイズ 0.85rem
• 配置: 行右端に縦並び (gap 4px)、モバイルでは行下に折り返し

---

アニメーション

要素	プロパティ	timing
ヘッダー	opacity, y(-20→0)	duration 0.6s
各 RankingItem	opacity, x(-30→0)	delay 0.1 + i*0.08s
順位変動 (投票後)	motion layout	spring (damping: 25)
バー幅変更	width transition	700ms ease-out

---

レスポンシブ

モバイル

• アイテム内部を縦積み (2段組: 上=情報、下=ボタン)
• 投票ボタンは横並びの2列
• 順位アイコン縮小 (40×40)

デスクトップ

• 1行レイアウト、ボタンは右端縦並び

---

関連

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