テーマ
Requirements: 候補者詳細画面
概要
個別候補者のプロフィール、写真、PRメッセージ、応援者ランキング(ニックネーム単位)を表示し、有料投票への導線を提供する画面。Home画面・ランキング画面・直接URLからの遷移に対応する。
機能仕様
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: 詳細画面の投票アクション領域の UI 表現（ラベル文言・有効/無効状態・アクセシビリティ伝達）。購入フローは voting/requirements.md を参照。
Acceptance Criteria (EARS)
- THE SYSTEM SHALL 投票アクションを 1 つ提示し、投票期間内のラベルを「投票する」とする
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桁区切り)
- THE SYSTEM SHALL 同一文字列のニックネームを同一支援者として集計する(本人確認は行わない)
- WHEN 該当候補者の応援者が存在しない THEN システムは空状態を許容する(フォールバックメッセージは任意)
Feature 9: 投票成功時のフィードバック
Purpose: 投票成立をユーザーへ視覚的に伝える。 Scope: 詳細画面における投票成功時の表示制御。
Acceptance Criteria (EARS)
- WHEN 投票が成功した THEN システムはユーザーに視覚的な成功フィードバックを一定時間提示する
非機能要件
- メタデータ(個別): 候補者ごとに OGP 画像・タイトル・description を動的に生成する(横断SEO要件の詳細ページ固有実装)
依存仕様
voting/requirements.md(購入フロー本体・購入モーダル・決済モーダル・投票成立の規約)steering/product.md「投票期間」(期間内/外の業務ルール。本 spec はその UI 表現のみを定義する)