Skip to content

HANDOFF.md

Latest commit

 

History

History
111 lines (93 loc) · 9.11 KB

HANDOFF.md

File metadata and controls

111 lines (93 loc) · 9.11 KB
Raw

Handoff: o-sumo (http://osada.us/) UX改善仕様・実装計画

本ドキュメントは、/grilling セッションを経て策定された o-sumo（http://osada.us/）のUX刷新計画の受け渡し（Handoff）資料です。受信エージェント（Antigravity / 他エージェント）がゼロコンテキストから直ちに理解し、実装に着手できるように必要な背景、意思決定、制約事項、受け入れ基準を網羅しています。

1. Task（目的・タスク概要）

本場所中の大相撲ファンに向けた**「即応的・日常的な観戦ツール」としてのUX抜本的強化**。 情報構造を「スマートハブ型」に再編し、取組画面のファーストビュー短縮、15日間の木札風日別ナビ、星取表のリーダーボードソート、マイ力士の場所中トラッカー化を二段階（Phase 1 / Phase 2）で実装する。

2. Context（背景とプロダクト前提）

  • プロダクト: o-sumo（非公式ファンサイト / https://osada.us/ / C:/dai/GitHub/o-sumo）
  • 技術スタック: React 18, Vite, TypeScript, Cloudflare Pages (SPA + 静的JSON API), PWA
  • デザインシステム: "The Digital Washi" / "The Sacred Interval (Ma)"（詳細は DESIGN.md）
  • 現状の課題:
    • トップページでブログ告知等がファーストビューを圧迫し、本日の取組導線が重複している。
    • 取組画面（TorikumiDayPage）でヘッダー・パンくず・サマリー・休場等のメタ情報が縦積みになり、肝心の勝敗を見るまでにスマホで大幅なスクロールが必要。
    • 15日間の日別遷移が「前日／翌日」しかなく、過去日程や特定の日への回遊が不便。
    • 星取表が番付順カードのみで、中日以降の「誰がトップで何敗か（優勝争い）」の把握に42名分のスクロールが必要。
    • 「マイ力士」画面が名鑑の静的お気に入り一覧に留まり、場所中に推しの「今日の勝敗」「今場所の成績」が直接確認できない。

3. Decisions（合意された設計・意思決定事項）

  1. 体験の主軸:
    • 本場所中の即応観戦ツール（実用・速報性最優先）。
  2. トップページ（/）の情報設計:
    • スマートハブ型。
    • BlogUpdatesSection 等の副次的告知をヒーロー上部から下方へ移動。
    • ファーストビュー最上部に「場所名・○日目」ステータスを置き、直下に4大クイック導線を集約：
      1. 本日の取組（速報 / 進行中アンカー直行）
      2. 星取表（成績一覧）
      3. 明日の割（取組予定）
      4. マイ力士（推しトラッカー）
    • 直下に重複していた live-torikumi-section を整理・統合。
  3. 取組画面（TorikumiDayPage）の操作性・視認性:
    • ファーストビュー圧縮: パンくず、サマリーカード、休場一覧、ソートボタンをコンパクトなツールバー/アコーディオンに整理し、即座に取組本体（勝敗）が見えるようにする。
    • 木札風横スクロール日別バー（1〜15日）: ヘッダー直下に「初 2 3 4 5 6 7 中 9 10 11 12 13 14 楽」を配置し、1タップで15日間を自由に行き来可能にする。
  4. 星取表（BanzukeTable）の優勝争い可視化:
    • ワンタップで**「勝敗順（リーダーボード：全勝・1敗・2敗...）／番付順」**を切り替えられるソートトグルを追加。勝ち越し（8勝）・負け越しラインも視覚化。
  5. マイ力士（お気に入り）の包括的強化:
    • マイ力士画面（/my-rikishi/）のダッシュボード化: 本場所中は登録力士の「今場所の星取（○勝○敗）」「本日の取組結果（勝敗・決まり手）」「明日の対戦相手」を一覧表示。
    • 取組・星取表との連動: 取組表や星取表で「★マイ力士のみ」のワンタップ絞り込みトグル、および視覚的ハイライトを提供。
  6. デザインシステム（Digital Washi）の完全遵守:
    • 0px border-radius（角丸禁止）、No-Line Rule（1px solid境界線禁止、背景トーン差で区切る）、**Ink & Gold（墨と金）**を厳守。
    • 新規UI（日別バー、トグル、バッジ）は相撲の伝統的な「木札（木版）・印判」をモチーフにした端正な矩形スタイルで統一する。

4. Implementation Roadmap（実装フェーズ）

Phase 1: コア観戦動線の刷新（最優先）

  1. トップページのスマートハブ化 (app/page.tsx)
    • BlogUpdatesSection の配置見直し（ヒーロー下部へ移動）
    • ファーストビューに4大導線（本日・星取・明日・マイ力士）を集約
    • 重複している live-torikumi-section の整理
  2. 取組画面の圧縮 ＆ 日別ナビゲーション (app/components/TorikumiDayPage.tsx, app/torikumi/page.css)
    • 上部メタ情報（パンくず・サマリーカード・休場・ソート）のレイアウト圧縮
    • 木札風横スクロール日別ピルバー（1〜15日）の実装とアクティブ日インジケータ
    • スクロール位置とアンカー移動の安定性確認

Phase 2: 成績・マイ力士体験の深化

  1. 星取表のリーダーボードソート (app/components/BanzukeTable.tsx, app/banzuke/page.tsx)
    • 「番付順」と「勝敗順（リーダーボード）」の切り替えロジックとUI追加
    • 勝ち越し・負け越しセクション表示
  2. マイ力士ダッシュボード化 (app/rikishi/MyRikishiPage.tsx, app/components/TorikumiDayPage.tsx)
    • /my-rikishi/ における当場所データ（取組・結果・星取）の動的表示
    • 取組画面・星取表での「★マイ力士のみ」フィルタ／強調連携

5. Relevant Files（対象ファイル）

  • app/page.tsx — トップページ（スマートハブ、ヒーローアクション、ブログ・見どころセクション）
  • app/components/TorikumiDayPage.tsx — 取組結果・予定画面（日別表示、サマリー、ソート）
  • app/torikumi/page.css — 取組画面のスタイル
  • app/components/BanzukeTable.tsx — 番付・星取表コンポーネント
  • app/banzuke/page.tsx — 番付・星取表ページ
  • app/styles/banzuke.css — 番付・星取表のスタイル
  • app/rikishi/MyRikishiPage.tsx — マイ力士（お気に入り力士）画面
  • app/lib/my-rikishi.ts — マイ力士のLocalStorege / Event管理
  • app/lib/torikumi-data.ts, app/lib/torikumi-routes.ts — 取組データおよびルート生成
  • DESIGN.md, DESIGN-Ronin.md — 遵守すべきデザインシステム仕様

6. Constraints & Invariants（遵守すべき制約事項）

  1. Design System:
    • 角丸（border-radius > 0px）を使用しないこと（0px鋭角のみ）。
    • 区切り線（border: 1px solid ...）でセクションを区切らないこと（surface トーン差と余白で表現）。
    • フォントスタック（日本語: Shippori Mincho, 英数字: Source Serif 4）を崩さないこと。
  2. ルーティングとSEO:
    • 既存のURL構造（/{monthKey}-torikumi/, /{monthKey}-yotei/, /{monthKey}-banzuke/, 日別URL）および正規化（trailing slash）を破壊しないこと。
  3. テストの維持:
    • 既存のユニット・統合テスト（全68ファイル / 468テスト）がすべてパスする状態を維持すること（npm test）。
  4. 多言語（日英）対応:
    • すべての新設テキストは src/locales/ja/common.json および src/locales/en/common.json にキーを追加して国際化対応すること。

7. Acceptance Criteria（受け入れ基準）

  • Top Page: ファーストビュー内に「場所名・○日目」と「本日・星取・明日・マイ力士」の4大導線が即座に視認・タップできること。
  • Top Page: ブログ告知がヒーロー上部でファーストビューを阻害せず、直下の重複リンクが整理されていること。
  • Torikumi Page: 取組画面のヘッダー下部が圧縮され、スクロールなし（または最小スクロール）で初戦/注目取組が見えること。
  • Torikumi Page: 1〜15日の木札風横スクロールバーから、任意の日程へ1タップで遷移できること。
  • Banzuke/Hoshitori: 星取表で「番付順」と「勝敗順（リーダーボード）」を切り替えられ、優勝争いの力士が即座にわかること。
  • My Rikishi: /my-rikishi/ で登録力士の「今場所の星」「本日の結果」が一覧でき、取組画面でもマイ力士の取組が容易に見つかること。
  • Design Quality: 新設UIが「Digital Washi」の0px角・No-Line・Ink & Goldの美学に完全に調和していること。
  • Verification: npm test および npm run build がエラーなくパスすること。