画面設計: 学習者ホーム（今日のタスク）

関連: ia.md §2.1 / api.md §3 / data-model.md §3.6, §3.7

URL

/app/home

目的

学習者がログイン直後に「今日やること」を迷わず開始できる状態を提供する。

レイアウト（モバイルファースト）

[ヘッダー: ロゴ / 組織名 / 言語切替 / アバター]
[挨拶: おはよう {name} さん]
[本日の学習状況サマリー: 完了 x / y]
[今日のタスクカード一覧]
  - 単語学習（セット名、残 N 語）[開始]
  - 動画視聴（タイトル、長さ）[開始]
  - クイズ（N 問）[開始]
[連続学習: 🔥 7日連続]
[下部ナビ: ホーム / 単語 / 動画 / テスト / マイ]

要素

サマリーカード

• 本日のタスク進捗（パーセンテージ + バー）
• 合計予定時間（分）・経過時間

タスクカード

• アイコン（単語／動画／クイズ）
• タイトル・補足メタ（残数・長さ・難易度）
• ステータス：未着手／進行中／完了
• 「開始」または「続きから」ボタン（primary）

連続学習

• 現在の継続日数
• 達成しなかった日のグレースポリシー（病欠等）を明示（ツールチップ）

エンプティ状態

• 「今日のタスクはまだ割り当てられていません。講師に連絡してください」＋講師連絡導線

API 連携

• GET /learner/today 応答スキーマ（抜粋）：

{
  "date": "2026-04-15",
  "summary": {
    "completed": 2,
    "total": 5,
    "plannedMinutes": 45,
    "elapsedMinutes": 18
  },
  "streak": {
    "currentDays": 7,
    "graceDaysUsedThisMonth": 0,
    "graceDaysAllowedPerMonth": 2
  },
  "tasks": [
    { "id": "...", "kind": "vocab", "title": "...", "status": "not_started", "meta": { "remaining": 12 } },
    { "id": "...", "kind": "video", "title": "...", "status": "in_progress", "meta": { "lengthSeconds": 600 } },
    { "id": "...", "kind": "quiz", "title": "...", "status": "not_started", "meta": { "questions": 10 } }
  ],
  "teacherContact": {
    "teacherName": "Hien先生",
    "messageUrl": "/app/messages/new?teacherId=..."
  }
}

• 連続学習 streak の grace ルール（病欠等）：月 2 日まで途切れを許容（AttendanceLog と照合してサーバで算出）
• 「講師に連絡」→ /app/messages/new?teacherId=...（メッセージ送信画面。別 issue で設計予定）
• タスククリックで /app/vocab/:id, /app/video/:id, /app/vocab/:setId/quiz 等へ遷移

状態管理

• SWR で /learner/today を取得・キャッシュ
• タスク完了イベントで再検証

アクセシビリティ

• カードは button または role=link、キーボード遷移可能
• フォーカス可視

モック（M1）

• 静的データを lib/mock/learnerToday.ts から読込
• ロール切替で即確認可能

文言トーン

• 積極的な「お疲れさま」「あと少し」など肯定的
• 達成数の誇張表示は避ける
• 連続学習が途切れた翌日もネガティブ表現を避ける

未確定

• 通知バッジの扱い（メッセージ・試験結果）
• ベトナム語の長文ラベルの折返し検証