UI Design: Home画面（候補者一覧）

機能仕様は requirements.md、技術設計は design.md を参照。本ドキュメントは 見た目に関する仕様のみを定義する。

デザインコンセプト

キーワード: Elegant, Luxurious, Feminine, Refined
印象: アイボリー基調 + ゴールド/ローズゴールドのアクセントによる、上品で華やかな世界観
雰囲気: 高級感のあるブライダル雑誌や宝飾ブランドサイトに近い

デザイントークン

カラーパレット

トークン	HEX	役割
`--gold`	`#D4AF37`	プライマリアクション、強調、順位1位
`--gold-light`	`#E8D7A2`	補助、装飾
`--gold-dark`	`#B8941F`	テキスト強調、ホバー
`--rose-gold`	`#E8B4A8`	アクセント、グラデ第2色
`--ivory`	`#FFFFF0`	背景ベース
`--charcoal`	`#2C2C2C`	本文テキスト

グラデーション

背景: linear-gradient(to bottom right, #FFFFF0 → #FFF8F0 → #FFE8E0)
装飾発光: radial-gradient(circle at 20% 50%, rgba(212,175,55,0.15) 0%, transparent 50%) + 右下にローズゴールド版
ボタン強調: linear-gradient(135deg, var(--gold), var(--rose-gold))

タイポグラフィ

用途	フォント	サイズ	weight
見出し（display）	`Cormorant Garamond` (serif)	`clamp(2.5rem, 6vw, 5rem)`	400
本文	`Jost` (sans-serif)	1rem	300〜500
サブコピー	`Jost`	`clamp(1.1rem, 2vw, 1.5rem)`	300
候補者名	`Cormorant Garamond`	1.5rem	500
ボタン	`Jost`	0.95rem	500

letter-spacing: 見出しは 0.02em
line-height: 本文 1.7〜1.8、見出し 1.2

スペーシング

基本単位: 4px ベースのTailwindスケール
セクション間: py-16 (64px) / pb-20 (80px)
カード余白: p-5 (20px)
ボタン高さ: py-3 (12px) / 詳細ページ py-4 (16px)

角丸

用途	値
カード	`rounded-2xl` (16px)
ボタン・バッジ	`rounded-full`
モーダル	`rounded-3xl` (24px)

シャドウ

用途	値
カード	`0 4px 20px rgba(0,0,0,0.08)`
ボタン強調	`0 4px 15px rgba(212,175,55,0.3)`
カードhoverのぼかし枠	gold〜roseグラデを `filter: blur(8px)`

レイアウト

グリッド (候補者カード)

ブレークポイント	列数	横幅
< 640px (mobile)	1	full
≥ 640px (sm)	2	–
≥ 1024px (lg)	3	–
≥ 1280px (xl)	4	max-w-7xl (1280px)

gap: gap-8 (32px)
外側パディング: px-6 (24px)
中央揃え: mx-auto

ヘッダー (Hero)

pt-16 pb-12 px-6、最大幅 max-w-7xl、中央揃え
構成（縦並び）:
1. サブコピー「多様な個性が響き合い、可能性を解き放つ」
2. メインタイトル「Miss World Japan 2026」
3. 「ランキングを見る」ボタン（ゴールド、TrendingUpアイコン付き）
4. 投票期間バッジ「投票期間：{開始日} 〜 {終了日}」（ゴールド枠、薄ゴールド背景）
  - 表示例: 「投票期間：2026年4月1日〜 4月30日」（サンプル値。実際の日付は data-model の投票期間エンティティからDB経由で取得し、UI／ソースコードに固定値として埋め込まない）

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

`<CandidateCard>`

静止状態

白背景、rounded-2xl、shadow-lg
画像: aspect-ratio 3:4、object-cover
順位バッジ: ゴールド〜ローズゴールドグラデ、白文字、rounded-full、padding px-3 py-1、文字サイズ 0.85rem
得票数バッジ: 薄ゴールド背景 + ゴールド枠、gold-dark 文字
候補者名: serif 1.5rem、charcoal

Hover状態

カード全体: translateY(-8px)
画像: scale(1.1) (700ms ease)
オーバーレイ: 黒60%→0%のグラデで上から覆う
「詳細を見る」ピル: 白95%透過 + Info アイコン + テキスト、中央配置でフェードイン
カード周囲: ゴールドぼかし枠（gold→rose-gold→light-goldの135度グラデ、blur 8px）

`<HomeHero>`

上下センター揃え
アニメーション: 全体 fadeIn + slideY(-30 → 0) 800ms ease-out

`<ScrollToTopButton>` および Footer

Note: スクロール補助とフッターは全画面共通UI要件として steering/product.md の「全画面共通UI要件」を参照。Home固有のビジュアル差分は持たない（サイト共通仕様に準ずる）。

アニメーション仕様

ページロード

要素	プロパティ	timing
Header	opacity, y(-30→0)	0s, duration 0.8s
Header inner	opacity	delay 0.2s, duration 0.8s
Grid container	opacity	delay 0.6s, duration 0.8s
各 CandidateCard	opacity, y(30→0)	delay `0.7 + i*0.1`s, duration 0.6s

インタラクション

カード hover: 全体 transform 500ms、画像 scale 700ms
「ランキングを見る」ボタン hover: scale 200ms

レスポンシブ対応

モバイル (< 640px)

グリッド 1列、カード幅 full
ヘッダーパディング縮小: pt-10 pb-8 px-4
ボタンテキストは折り返し可

タブレット (640px〜1024px)

グリッド 2列
フォントサイズは clamp で自動調整

デスクトップ (≥ 1024px)

グリッド 3〜4列
カードhoverアニメーション有効

アクセシビリティ

カラーコントラスト: 本文 --charcoal on ivory で WCAG AA（4.5:1）以上
ボタン disabled 状態に aria-disabled="true" と十分な色差
候補者画像 alt: 候補者名 + 補足
フォーカスリング: gold で outline-2 outline-offset-2

参考リンク

Figma 元データ: https://www.figma.com/design/LUoTCldhCVFKxK9ewL5QIn/Miss-World-Japan-Voting-Site
フォント: Cormorant Garamond / Jost (Google Fonts)

関連ドキュメント

requirements.md — 機能要件
design.md — 技術設計