Miss World Japan 2026 - Kiro Docs

テーマ

UI Design: 候補者詳細画面 ​

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

レイアウト全体 ​

┌─────────────────────────────────────────┐
│ [← 候補者一覧]  [📈 ランキング]            │ NavLinks (左寄せ)
├─────────────────────────────────────────┤
│ [N位]  候補者名 (display大)  [N票]        │ DetailHeader
├─────────────────────────────────────────┤
│ [           投票する           ]          │ PaidVoteButton (単一)
├─────────────────────────────────────────┤
│                                         │
│       ┌────────────────────┐            │
│       │                    │            │ 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

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

  • 左寄せ、横並び、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

<PaidVoteButton>(単一ボタン) ​

  • 中央配置、最大幅 max-w-md、w-full md:max-w-md mx-auto
  • 通常: bg-gold text-white py-4 rounded-full font-semibold text-base
  • shadow 0 4px 20px rgba(212, 175, 55, 0.4) (有効時のみ)
  • disabled (投票期間外): opacity 0.4 + cursor not-allowed + ラベル「投票期間外」
  • アニメーション: hover時 scale(1.02), tap時 scale(0.98) (motion使用)

過去仕様の「無料投票ボタン + 有料投票ボタン」の 2 列構成は廃止。投票は有料のみとなり 1 ボタンに統一。

<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 アイコン
  • ニックネーム表示: weight 500、最大幅でテキストオーバーフローを truncate、必要に応じて title 属性に全文を入れる
  • 投票数表示: rounded-xl px-4 py-2、display フォント、3桁区切り、下に「投票」サブラベル
  • 補助テキスト(ランキング下): 「同じニックネームの投票は1人の支援者として集計しています」(text-xs opacity-0.6)

アニメーション ​

要素プロパティtiming
NavLinksopacity, x(-20→0)duration 0.6s
DetailHeaderopacity, y(30→0)delay 0.2s, duration 0.8s
PaidVoteButtonopacity, y(20→0)delay 0.3s, duration 0.6s
ImageSlideropacity, scale(0.95→1)delay 0.4s, duration 0.8s
情報セクションopacity, y(30→0)delay 0.6s, duration 0.8s
VoterRankingopacity, y(30→0)delay 0.8s, duration 0.8s
各 VoterItemopacity, x(-20→0)delay 0.7 + i*0.05s

レスポンシブ ​

  • モバイル: 投票ボタンは画面幅いっぱい、画像サイズ自動縮小、見出しサイズは clamp で調整
  • タブレット以上: 投票ボタンは max-w-md で中央寄せ、コンテンツ最大幅 max-w-4xl

関連ドキュメント ​

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