テーマ
Requirements: Home画面(候補者一覧)
概要
Miss World Japan 2026 の全ファイナリスト候補者を一覧表示し、各候補者の現状(順位・得票数)の把握と詳細ページへの遷移、ランキング画面への導線を提供するトップページ。サイトのランディングページ。
ファイル配置・レンダリング方式・ルート定義・技術設計は
design.md、ビジュアル仕様はui-design.mdを参照。
機能仕様
Feature 1: ページ表示
Purpose: トップページの基本構造(ヘッダー・候補者一覧)と投票期間/ランキング画面への導線をユーザーへ提示する。 Scope: Home画面の初回レンダリング全体(全画面共通UI要件は steering/product.md を参照)。
Acceptance Criteria (EARS)
- WHEN ユーザーがHome画面を表示した THEN システムはヘッダーと候補者一覧を描画する
- THE SYSTEM SHALL ページ上部に以下を表示する:
- サイトタイトル「Miss World Japan 2026」
- サブコピー「多様な個性が響き合い、可能性を解き放つ」
- 現在の投票期間(開始日・終了日)。値はDBから取得し、固定値を埋め込まない
- ランキング画面への遷移ボタン
- THE SYSTEM SHALL 投票期間の表示文言は
data-modelで定義される投票期間エンティティから取得した開始日・終了日を整形して描画する(具体的な日付や期間名はソースコード/Markdown内に固定値として記述しない) - IF 永続化層から有効な投票期間を取得できなかった THEN システムはエラー画面を表示し、ヘッダー・候補者一覧の描画を行わない
Feature 2: 候補者一覧の表示内容
Purpose: 全候補者を一覧で見渡せるようにし、各候補者の現状把握と詳細閲覧の起点を提供する。 Scope: Home画面の候補者一覧領域。
Acceptance Criteria (EARS)
- THE SYSTEM SHALL 全候補者を一覧として表示する
- WHEN 各候補者が表示される THEN システムは以下の情報を含める:
- 候補者画像
- 現在順位
- 現在の得票数(3桁区切り)
- 候補者名
- 詳細ページへの遷移手段
Feature 3: 表示順
Purpose: 一覧の表示順序を投票数の変動から独立させ、安定した参照経路(候補者ID)を保証する。 Scope: Home画面の候補者一覧における並び順制御。
Acceptance Criteria (EARS)
- THE SYSTEM SHALL 候補者一覧を 候補者ID(
id)の昇順 で表示する - THE SYSTEM SHALL 投票数の変動によって表示順を変更しない(表示順は得票数に依存しない)
Feature 4: 順位計算
Purpose: 表示時点の得票数から各候補者の現在順位を算出し、ページ上で同得票時のタイブレークを一貫させる。 Scope: Home画面で表示する順位値の生成ロジック。
Acceptance Criteria (EARS)
- THE SYSTEM SHALL 各候補者に表示する「現在順位」は、ページ表示時点の得票数(
votes)の降順から算出する - THE SYSTEM SHALL 順位の最新化はページ再訪問時とする
- IF 同得票の候補者が複数存在する THEN システムはID昇順で順位を確定する
Feature 5: 詳細ページへの遷移
Purpose: 候補者一覧から個別の候補者詳細へ単一操作で遷移できるようにする。 Scope: 候補者カードの詳細遷移トリガー。
Acceptance Criteria (EARS)
- WHEN ユーザーが候補者の詳細表示を要求した THEN システムは該当候補者の詳細ページに遷移する
非機能要件
Home画面固有の非機能要件はない。
全画面共通の非機能要件(アクセシビリティ/SEO/レスポンシブ/全画面共通UI要件=スクロール補助・フッター 等)は
steering/product.mdを、パフォーマンス/キャッシュ/セキュリティ等はsteering/tech.mdを参照。
依存仕様
data-model/requirements.md(投票期間エンティティの保持元)