テーマ
Requirements: 候補者詳細画面
概要
個別候補者のプロフィール、写真、PRメッセージ、投票者貢献度ランキングを表示し、無料・有料の投票導線を提供する画面。Home画面・ランキング画面・直接URLからの遷移に対応する。
ファイル配置・レンダリング方式・ルート定義・技術設計は
design.md、ビジュアル仕様はui-design.mdを参照。
機能仕様
Feature 1: ルーティングとデータ取得
Purpose: 候補者IDをキーに対象候補者を取得し、存在しないIDに対して安全にフォールバックしながら、候補者ごとのメタデータを生成する。 Scope: 候補者詳細ページのレンダリング基盤。
Acceptance Criteria (EARS)
- WHEN ユーザーが候補者詳細ページを表示した THEN システムは候補者IDをキーに候補者データを取得する
- IF 該当する候補者が存在しない THEN システムは 404 ページを表示する
- WHEN ページがビルド/レンダリングされる THEN システムは候補者名をタイトルに含むメタデータを生成する（例:
タイトル: アリサ | Miss World Japan 2026）
Feature 2: ナビゲーション
Purpose: 候補者一覧/ランキング画面へ戻る導線を常に明示し、候補者間比較を阻害しない。 Scope: 詳細画面のナビゲーション領域。
Acceptance Criteria (EARS)
- THE SYSTEM SHALL 候補者一覧画面とランキング画面へ戻る導線を提示する
Feature 3: 候補者情報サマリ
Purpose: 現在順位・名前・得票数を即時把握できるようにし、ページ滞在中の順位値の安定性を担保する。 Scope: 詳細画面のサマリ領域。
Acceptance Criteria (EARS)
- THE SYSTEM SHALL 以下を表示する:
- 現在順位
- 候補者名
- 現在の得票数（3桁区切り）
- THE SYSTEM SHALL 「現在順位」はページ表示時点の得票数の降順から算出する
- WHEN 投票によって得票数が更新された THEN システムは得票数表示のみを更新し、順位は変更しない
- THE SYSTEM SHALL 順位の最新化はページ再訪問時とする
Feature 4: 投票アクション
Purpose: 詳細ページから直接、無料/有料投票を起動できるようにする。 Scope: 詳細画面の投票アクション領域（投票ロジックの詳細は voting-flow/requirements.md を参照）。
Acceptance Criteria (EARS)
- THE SYSTEM SHALL 以下2つの投票手段を提示する:
- 無料投票
- 有料投票（投票券購入）
- WHEN ユーザーが無料投票を要求した AND 当日未投票 AND 未認証 THEN システムは Social Login Modal を開き、認証後に投票を実行する
- WHEN ユーザーが無料投票を要求した AND 当日未投票 AND 認証済み THEN システムは即座に投票を実行し成功フィードバックを表示する
- WHEN ユーザーが当日すでに無料投票している THEN システムは無料投票アクションを無効化し、次回投票可能になるまでの残り時間を提示する
- WHEN ユーザーが有料投票を要求した THEN システムは Purchase Credits Modal を開く
Feature 5: 画像表示
Purpose: 候補者の複数写真を切り替えて閲覧でき、現在表示中の画像を視覚的に識別できるようにする。 Scope: 詳細画面の画像ギャラリー領域。
Acceptance Criteria (EARS)
- THE SYSTEM SHALL 候補者の写真を切り替え可能なギャラリーとして表示する
- WHEN ユーザーが画像を切り替える操作をした THEN システムは該当画像を表示する
- THE SYSTEM SHALL 切り替え可能な複数画像が存在する場合、ユーザーが任意の画像へ直接遷移できる手段（サムネイル等）を提供する
- THE SYSTEM SHALL 現在表示中の画像を識別可能にする
- IF 候補者の写真が1件のみ THEN システムは画像切り替えUIを非表示または無効化する
Feature 6: プロフィール表示
Purpose: 候補者の経歴情報をユーザーが投票判断に使える形でまとめて提示する。 Scope: 詳細画面のプロフィール領域。
Acceptance Criteria (EARS)
- THE SYSTEM SHALL 以下のプロフィール項目を表示する:
- 出身地
- 職業
- 身長（cm）
- 趣味・特技
- 資格・大会実績
- THE SYSTEM SHALL 趣味・特技および資格・大会実績は複数項目をリストとして列挙する
Feature 7: PRメッセージ表示
Purpose: 候補者の長文PRメッセージを段落構造を保ったまま提示し、他項目と区別する。 Scope: 詳細画面のPRセクション。
Acceptance Criteria (EARS)
- THE SYSTEM SHALL 候補者のPRメッセージを段落構造（複数の改行）を保持して表示する
- THE SYSTEM SHALL PRメッセージを他のプロフィール情報と区別できる形で提示する
Feature 8: 応援者ランキング
Purpose: 候補者を多く支持している投票者上位5名を提示し、応援の集まり方をユーザーへ示す。 Scope: 詳細画面の応援者セクション。
Acceptance Criteria (EARS)
- WHEN 応援者ランキングが表示される THEN システムは該当候補者の応援者上位5名を表示する
- THE SYSTEM SHALL 各応援者について以下を表示する:
- 順位（1〜5位）
- 投票者名
- 投票数（3桁区切り）
- WHEN 該当候補者の応援者が存在しない THEN システムは空状態を許容する（フォールバックメッセージは任意）
Feature 9: 投票成功時のフィードバック
Purpose: 投票成立をユーザーへ視覚的に伝える。 Scope: 詳細画面における投票成功時の表示制御。
Acceptance Criteria (EARS)
- WHEN 投票が成功した THEN システムはユーザーに視覚的な成功フィードバックを一定時間提示する
非機能要件
- メタデータ（個別）: 候補者ごとに OGP 画像・タイトル・description を動的に生成する（横断SEO要件の詳細ページ固有実装）
全画面共通の非機能要件（アクセシビリティ／SEO／レスポンシブ／全画面共通UI要件＝スクロール補助・フッター 等）は
steering/product.mdを、パフォーマンス（LCP目標、画像最適化、SSG/ISR、初期画像の優先読み込み等）／キャッシュ／セキュリティはsteering/tech.mdを参照。
依存仕様
voting-flow/requirements.mdsocial-login/requirements.mdcredit-purchase/requirements.md
エッジケース
- 存在しないID: 404 ページを表示
- 画像URL切れ: デフォルト画像にフォールバック
- 応援者0名: 空状態を許容（または「まだ応援者がいません」と表示）