From 2a5235818f153bc4e9a01e2bc9069d2d67806898 Mon Sep 17 00:00:00 2001
From: tmba <ut42.nu@gmail.com>
Date: Sat, 30 May 2026 00:00:01 +0900
Subject: [PATCH 01/11] docs: add signage + chime app design spec

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../specs/2026-05-29-signage-chime-design.md  | 296 ++++++++++++++++++
 1 file changed, 296 insertions(+)
 create mode 100644 docs/superpowers/specs/2026-05-29-signage-chime-design.md

diff --git a/docs/superpowers/specs/2026-05-29-signage-chime-design.md b/docs/superpowers/specs/2026-05-29-signage-chime-design.md
new file mode 100644
index 0000000..d643885
--- /dev/null
+++ b/docs/superpowers/specs/2026-05-29-signage-chime-design.md
@@ -0,0 +1,296 @@
+# サイネージ＋チャイム アプリ（`apps/signage`）設計
+
+- 作成日: 2026-05-29
+- ステータス: 設計合意済み（実装計画はこの後に作成）
+- 関連: `docs/architecture.md`（拡張ロードマップに本アプリを追記予定）
+
+---
+
+## 背景・目的（Context）
+
+会場（tec-nova Nagasaki）の大型モニターに常時表示する**デジタルサイネージ兼チャイム**アプリを新設する。
+現状、サイネージ／チャイム／大型モニターは `requirements.md` / `mvp.md` / `architecture.md` のいずれにも記載がなく、本アプリは**新規スコープ**である。
+
+会場運用は「**活動50分 → 休憩10分**」のリズムで進む（例: 9:00–9:50 活動 / 9:50–10:00 休憩 / 10:00 再開 …）。
+このリズムの区切りを**チャイム**で知らせ、普段は**動画を流し**つつ、時間が近づくと**シームレスに画面を切り替える**ことで、子どもと運営の双方に「いまは活動／休憩」「次の区切りまであと何分」を直感的に伝える。
+
+狙う成果：
+- 区切りの合図（チャイム）と視覚表示を自動化し、運営の手間と「時間を見失う」事故を減らす。
+- 動画で会場の雰囲気をつくる（ウェルカム・空気づくり）。
+- 既存プラットフォームの**チェックインデータ**を稼働シグナルに使い、無人でも「今日・このタームが稼働中か」を正しく判定する。
+
+---
+
+## スコープ
+
+### v1 に含む
+- 動画フルスクリーン再生（ループ・プレイリスト）＋常時表示の情報バー（**レイアウト L2**）。
+- **50/10サイクル**に連動した状態遷移（活動↔休憩↔待機）と**シームレスなクロスフェード**。
+- **チャイム**（Web Audio 合成、種別ごとに音色を変える）。
+- **在館人数のライブ表示**（個人情報なし）と、**ターム最初のチェックインで稼働開始**するデータ駆動ロジック。
+- 休憩中画面は**「再開まで M:SS」のカウントダウンを主役**に。
+- 営業時間外・昼休みの**待機（ロゴ）画面**。
+- キオスク運用（フルスクリーン・横向き・スリープ防止・起動時タップで音声解放）。
+
+### v1 に含まない（将来拡張）
+- admin での動画CMS（アップロード・並べ替え）。
+- ニックネーム表示（v1は人数のみ）。
+- 任意時刻のカスタムアナウンス登録。
+- YouTube/Vimeo 埋め込み（v1は HTML5 `<video>` のみ）。
+- WebSocket/SSE などのプッシュ（v1はポーリング）。
+
+---
+
+## 全体像
+
+```
+[大型モニター] ── Chrome キオスク ──> apps/signage (Next.js 16, 公開・認証なし)
+                                         │  ~15–30s ポーリング
+                                         ▼
+                          GET /public/signage/today  (Hono on Workers, 認証外・PII非含有)
+                                         │  既存 sessions/events を集計再利用
+                                         ▼
+                                    Cloudflare D1
+
+時刻ロジック: packages/shared/activity-cycle.ts （venue-schedule.ts の TERMS を50/10に展開）
+```
+
+- **時刻の刻み**（活動/休憩/チャイム時刻）は端末のローカル時計から純粋ロジックで算出。
+- **稼働判定**（鳴らす／表示するか）は API のターム別チェックイン数で決定（クロックとデータの役割分離）。
+- **音声解放**は起動時の1回タップ（ブラウザの自動再生制約）。稼働判定とは独立。
+
+---
+
+## 1. 新規アプリ `apps/signage`（`apps/checkin` 規約を踏襲）
+
+Next.js 16.2.4 / React 19.2.4。`pnpm-workspace.yaml` の `apps/*` グロブで**自動的にワークスペースに含まれる**（編集不要）。turbo も `dev`/`build`/`type-check` を自動でファンアウト。Biome lint はルートから走るため**アプリ単位の lint スクリプトは不要**。
+
+**dev ポート: 3002**（api=8787 / checkin=3000 / admin=3001）。
+
+作成ファイル（`apps/checkin` から複製し、差分のみ調整）：
+
+| ファイル | 内容 / checkin との差分 |
+|---|---|
+| `package.json` | `name: "signage"`、scripts `dev: next dev --port 3002` ほか `build`/`start`/`type-check`。deps は checkin から **`@zxing/browser` と `better-auth` を除外**（公開・QR不要）、`motion` は維持。 |
+| `next.config.ts` | checkin と同一（`transpilePackages: ['@tecnova/shared','@tecnova/ui']`）。 |
+| `tsconfig.json` | checkin と同一（`paths` の `@/*` と `@tecnova/ui/*` 両方を含む）。 |
+| `postcss.config.mjs` | `export { default } from '@tecnova/ui/postcss.config';`（同一）。 |
+| `components.json` | checkin と同一（`style: radix-maia`、css は `packages/ui/.../globals.css`）。 |
+| `.gitignore` | checkin から複製（`.next/`・`.env*`・`next-env.d.ts` 等）。 |
+| `src/app/layout.tsx` | `LINE_Seed_JP` ＋ `@tecnova/ui/globals.css`。**`AppShell`（＝`MeProvider`）は使わず** `{children}` を直接描画。`viewport` でズーム無効、`metadata`/`appleWebApp` 設定。 |
+| `src/app/manifest.ts` | **`display: 'fullscreen'`・`orientation: 'landscape'`**（checkin は standalone/portrait）。 |
+| `src/app/page.tsx` | サイネージ本体（クライアントコンポーネント、状態機械のルート）。 |
+| `CLAUDE.md` / `AGENTS.md` | checkin/admin と同様に複製。dev 3002・横向きフルスクリーン・**公開（`MeProvider`/`useMe`/`better-auth` なし）** を明記。 |
+
+**認証なし**：`useMe()` を呼ばず `MeProvider` で包まない（呼ぶと throw する）。データ取得は `@tecnova/ui` の `apiJson`/`apiFetch` を流用（`credentials:'include'` は固定だが公開エンドポイントは無視するので無害）。`NEXT_PUBLIC_API_URL` 未設定時は `http://localhost:8787` にフォールバック。
+
+> 本番でクロスオリジンに API を叩く場合、公開エンドポイントは専用の緩い CORS（後述）で対応するため `TRUSTED_ORIGINS` への追加は不要。
+
+---
+
+## 2. 画面の状態機械（state machine）
+
+### 状態
+| 状態 | 条件 | 画面（L2） |
+|---|---|---|
+| **boot** | 初回ロード〜起動タップ前 | 全画面「▶ タップして開始」オーバーレイ（背後でミュート動画が再生） |
+| **idle** | ターム外（昼休み・営業時間外） **または** ターム内だが当該タームが未稼働 | **待機・ロゴ画面**（ロゴ＋時計＋「次は HH:MM から」/「まもなく開始」）、動画停止 |
+| **activity** | ターム内・稼働中・活動フェーズ（:00–:50） | **動画フルスクリーン** ＋ 上部情報バー（ターム・時計・「休憩まであと◯分」・在館◯人） |
+| **break** | ターム内・稼働中・休憩フェーズ（:50–:00） | **「休憩中／再開まで M:SS」を主役**（時計・在館数は小さく添える） |
+
+### 稼働判定（データ駆動）
+- **稼働開始 = 現タームの `terms[term].checkedIn > 0`**（API から取得、累計なので一度立てば**ターム終了まで sticky**）。
+- ターム内でも `checkedIn === 0` の間は **idle（まもなく開始）**。チャイムも鳴らさない。
+- これにより「土日=朝＋昼のみ稼働／平日=夕方のみ」「非稼働日は無音」が**曜日ルールなしで自動成立**。
+- 端末の現タームは `classifyCycleMoment(now)` の `term` で判定。
+- **9:00（や各タームの :00 開始）チャイムは基本鳴らない**（その時刻はまだ `checkedIn===0` のことが多い）。意味のある **:50 休憩 / :00 再開 / ターム終了** チャイムは初チェックイン後に発火。
+
+### 遷移
+- フェーズ境界（`:50` → break / `:00` → activity / ターム終了 → idle）で**クロスフェード**（不透明度のみ、`<video>` はアンマウントしない＝再読込フラッシュ防止）。
+- `prefers-reduced-motion` 尊重：トランジションを実質ゼロ（〜1ms）に縮約（プロジェクトのモーション方針 [[project_checkin_motion]] に整合）。
+- API 不達時の degrade：直近取得値をキャッシュし、**稼働済みなら時計駆動で継続／未稼働なら安全側で idle 維持**。
+
+---
+
+## 3. スケジュール＆チャイム（`packages/shared/src/activity-cycle.ts` 新規）
+
+`venue-schedule.ts` の `TERMS` を import し、各ターム（180分）を **`ACTIVITY_MINUTES=50` + `BREAK_MINUTES=10` = 60分 × 3サイクル**に割る純粋ロジック。Workers安全（Intl のみ・Node API なし）、JST 固定 UTC+9。`venue-schedule.ts` と同じ subpath エクスポート方針（**root barrel には入れない**、`package.json` exports に `"./activity-cycle"` を追加）。
+
+```ts
+export const ACTIVITY_MINUTES = 50;
+export const BREAK_MINUTES = 10;            // CYCLE = 60
+
+export type CyclePhase = 'activity' | 'break' | 'idle';
+export interface CycleMoment {
+  phase: CyclePhase;
+  term: TermId | null;
+  cycleIndex: number | null;   // 1..3
+  phaseEndsAt: Date | null;    // 次の境界 instant
+}
+export type ChimeKind = 'resume' | 'break' | 'term-end';
+export interface ChimeEvent { kind: ChimeKind; term: TermId; at: Date; key: string; }
+
+export const classifyCycleMoment = (instant: Date): CycleMoment => { /* ... */ };
+export const cycleChimeEventsForDay = (instant: Date): ChimeEvent[] => { /* ... */ };
+export const msUntilNextBoundary = (instant: Date): number | null => { /* ... */ };
+export const secondsUntilNextBoundary = (instant: Date): number | null => { /* ... */ };
+```
+
+実装方針（`venue-schedule.ts` のスタイルに整合）：ターム内 `offset = current - termStart`（0..179）、`cycleIndex = floor(offset/60)+1`、`withinCycle = offset%60`、`phase = withinCycle < 50 ? 'activity' : 'break'`。境界 instant は `termEndInstant` と同じ `new Date(Date.UTC(y, m-1, d, jstHour-9, jstMin, 0, 0))` パターン。`key = `${toJstDateString}#${term}#${kind}#${HH:mm}`` でクライアント dedupe。
+
+**朝ターム 9:00–12:00 のイベント列（検証済み・3サイクルちょうど）:**
+
+| JST | フェーズ | 画面 | 境界イベント |
+|---|---|---|---|
+| 09:00–09:50 | activity | 動画 | `resume`@09:00（≒開始、通常未発火） |
+| 09:50–10:00 | break | 休憩カウントダウン | `break`@09:50 |
+| 10:00–10:50 | activity | 動画 | `resume`@10:00 |
+| 10:50–11:00 | break | 休憩 | `break`@10:50 |
+| 11:00–11:50 | activity | 動画 | `resume`@11:00 |
+| 11:50–12:00 | break | 休憩 | `break`@11:50 |
+| 12:00 | idle | 待機 | `term-end`@12:00 |
+
+→ 1ターム = `resume`×3 + `break`×3 + `term-end`×1 = **7イベント**。昼・夕方も同形。
+
+### チャイム（Web Audio 合成）
+- 単一の `AudioContext` を遅延生成し、**起動タップ内で `resume()`**。`OscillatorNode → GainNode` の指数エンベロープ（`exponentialRampToValueAtTime`、0 ではなく 0.0001 へ）でベル風に。
+- **種別で音色を変える**：再開＝二音上行、休憩＝二音下行（キンコン）、ターム終了＝やや長め——など `kind → (周波数, 波形, 長さ)` のマップ。
+- `visibilitychange`→visible で `ctx.state !== 'running'` なら再 `resume()`（OSスリープ後の suspended 対策）。コンテキストはチャイム毎に作らず使い回す。
+
+### スケジューラ（ドリフトしない自己補正型）
+- `setInterval` は使わない。**毎tick `Date.now()` から次境界までの遅延を再計算する `setTimeout`**（最大〜1秒キャップ）。
+- `cycleChimeEventsForDay(now)` を保持し、「前回 instant < `event.at` ≤ 今 instant」で境界跨ぎ検出 → `key` で dedupe（焦点復帰時の二重発火防止）。
+- 発火は**稼働中の時のみ**（その時点で当該ターム `checkedIn > 0`）。`visibilitychange`→visible で即時 `tick()`。
+
+---
+
+## 4. ライブデータ（公開エンドポイント・在館人数のみ）
+
+### エンドポイント
+`GET /public/signage/today` → 認証外・PII非含有。
+
+```jsonc
+{
+  "date": "YYYY-MM-DD",          // JST
+  "currentlyPresent": 23,        // checkedOutAt === null の件数
+  "totalCheckedIn": 58,          // 当日の延べセッション数
+  "terms": {                     // checkedInAt の属するタームで累計（30分ルールは適用しない）
+    "morning":   { "checkedIn": 30 },
+    "afternoon": { "checkedIn": 28 },
+    "evening":   { "checkedIn": 0 }
+  }
+}
+```
+
+### 配線（`apps/api`）
+- **`apps/api/src/routes/public.ts`（新規）**：`publicRoute.get('/signage/today', ...)`。`/health` と同じ「認証ミドルウェア対象外パス」方式。`'/public'` は `'/api/*'`・`'/checkin/*'` のどちらにも一致しないため `requireAuthenticatedMentor` に**捕まらない**。
+- **`apps/api/src/lib/public.ts`（新規）**：`fetchSignageToday(db)`。`lib/admin.ts` の `fetchSessionsForEvent` を踏襲。当日は `toJstDateString(new Date())`、`events` を `date` で引き、無ければ `date`＋ゼロを返す。セッションは**PII不要なので participants を join せず** `checkedInAt`/`checkedOutAt` のみ取得し、`classifyTerm(checkedInAt)`（`classifyVisit` ではなく＝30分ルール非適用）でターム別に加算。`currentlyPresent` は `checkedOutAt === null`。
+- **`apps/api/src/index.ts`（変更）**：
+  ```ts
+  app.use('/public/*', cors({ origin: '*', allowMethods: ['GET', 'OPTIONS'] })); // 資格情報なしの緩いCORS
+  app.route('/public', publicRoute);   // app.route('/', healthRoute) の直前
+  ```
+  既存の `apiCors`（`credentials:true` + `TRUSTED_ORIGINS` 限定）は**流用しない**（`origin:'*'` と `credentials:true` は併用不可）。
+
+### スキーマ
+- **`packages/shared/src/schemas/public.ts`（新規）** に `signageTodayResponseSchema` ＋ `SignageTodayResponse` 型。`schemas/index.ts` に `export * from './public';` を追加（公開契約として admin/checkin と分離）。フロントは `@tecnova/shared/schemas` から import しレスポンスを型アサート。
+
+### フロント取得
+- `apiJson<SignageTodayResponse>('/public/signage/today')` を ~15–30秒間隔でポーリング（活動境界の検出は時計側が担うため、データ遅延は稼働判定の数十秒ラグのみで許容）。
+
+---
+
+## 5. 動画（設定リスト管理）
+
+- **`apps/signage/src/config/playlist.ts`**：`export const PLAYLIST: { src: string; type?: string }[] = [...]`。self-host/CDN の URL を列挙し、**リポジトリにバイナリを置かない**。差し替えは設定変更＋再デプロイ。
+- v1 は HTML5 `<video>` をループ＋プレイリスト順送り。`playsInline`、起動前は `muted` 自動再生（許容）、タップで `muted=false`。
+- 将来：env / リモート設定 / YouTube 埋め込みへ拡張可能な型設計にしておく。
+
+---
+
+## 6. キオスク／ブラウザ制約・ブートシーケンス
+
+ブラウザの自動再生・スリープ・全画面制約に対応する。**2層**で堅牢化：アプリ層（どこでも動く1回タップ）＋キオスク層（管理端末の起動フラグ）。
+
+**ブートシーケンス（タップ1回で全解放）:**
+1. ロード時はミュートで「▶ タップして開始」全画面オーバーレイ。
+2. タップハンドラ（1つのジェスチャ内で）：`ctx.resume()` → `requestFullscreen()` → `video.muted=false; video.play()` → `requestWakeLock()` → スケジューラ開始。
+3. `visibilitychange`→visible：`ctx.resume()` 再実行・wake lock 再取得・即時 `tick()`。
+
+**個別制約:**
+- **自動再生**：`navigator.getAutoplayPolicy?.('mediaelement')` で判定。`play()` の `NotAllowedError` は muted フォールバック。React では `muted` を**ref/effect で DOM に反映**（JSX prop だけだと不確実）。一度のジェスチャでページ寿命中は sticky activation。
+- **Screen Wake Lock**：`navigator.wakeLock.request('screen')`。**hidden で自動解放されるため `visibilitychange` で再取得**。HTTPS 必須。OS 側のスクリーンブランク無効化も併用（API 単独に依存しない）。
+- **全画面/横向き/カーソル/スクロール**：本番は Chromium を `--kiosk --autoplay-policy=no-user-gesture-required --disable-pinch --overscroll-history-navigation=0` で起動（自動再生は enterprise policy `AutoplayAllowed` がより確実）。横向き・カーソル非表示・スリープ無効は **OS/ディスプレイ層**で固定。CSS は `html,body { height:100%; overflow:hidden; overscroll-behavior:none; touch-action:none; }`、タッチ専用なら `cursor:none`。
+- 主要参照は本ドキュメント末尾の出典（MDN/Chrome for Developers 等）。
+
+---
+
+## 7. 作成・変更するファイル一覧
+
+**新規（packages/shared）**
+- `packages/shared/src/activity-cycle.ts`
+- `packages/shared/src/schemas/public.ts`
+
+**変更（packages/shared）**
+- `packages/shared/package.json` … exports に `"./activity-cycle": "./src/activity-cycle.ts"`
+- `packages/shared/src/schemas/index.ts` … `export * from './public';`
+
+**新規（apps/api）**
+- `apps/api/src/routes/public.ts`
+- `apps/api/src/lib/public.ts`
+
+**変更（apps/api）**
+- `apps/api/src/index.ts` … `/public/*` の緩い CORS ＋ `app.route('/public', publicRoute)`
+
+**新規（apps/signage、すべて）**
+- 設定: `package.json` / `next.config.ts` / `tsconfig.json` / `postcss.config.mjs` / `components.json` / `.gitignore`
+- アプリ: `src/app/layout.tsx` / `src/app/page.tsx` / `src/app/manifest.ts`
+- コンポーネント（目安）: `src/components/{tap-to-start,stage,info-bar,break-screen,idle-screen}.tsx`
+- ロジック（目安）: `src/lib/{chimes,use-chime-scheduler,use-wake-lock,use-signage-data}.ts`
+- 設定: `src/config/playlist.ts`
+- ドキュメント: `CLAUDE.md` / `AGENTS.md`
+
+**ドキュメント（フォロー）**
+- `docs/architecture.md` のクライアント一覧／拡張ロードマップに `apps/signage` を追記。
+
+---
+
+## 8. 検証方法（end-to-end）
+
+1. **共有ロジック**：`activity-cycle.ts` に単体テスト（境界値）。朝/昼/夕の各タームで `classifyCycleMoment` のフェーズ遷移、`cycleChimeEventsForDay` が 7×（稼働ターム数）件・時系列順・正しい JST instant、`msUntilNextBoundary` の符号と null（活動なし日）を検証。`pnpm --filter @tecnova/shared test`（無ければ vitest を最小導入）。
+2. **API**：ローカル D1 にセッションを投入し `curl http://localhost:8787/public/signage/today` で `terms.*.checkedIn`・`currentlyPresent`・`totalCheckedIn`・空イベント日のゼロ応答を確認。`requireAuthenticatedMentor` に**捕まらない**こと（401 にならない）を確認。CORS ヘッダ（`access-control-allow-origin: *`）を確認。
+3. **フロント結合**：`pnpm --filter signage dev`（:3002）。デバッグ用に「現在時刻を上書き」できる仕組み（クエリ `?now=2026-05-30T09:49:30+09:00` 等）を入れ、:50/:00 のクロスフェードとチャイム発火、稼働前 idle→初チェックインで activity への切替を確認。`prefers-reduced-motion` でトランジション縮約を確認。
+4. **キオスク確認**：実機 or Chrome で「タップして開始」後に音付き動画・wake lock・全画面が効くこと、タブ復帰で音声が戻ることを確認。
+5. `pnpm type-check` ／ `pnpm biome check .` 通過。
+
+---
+
+## 9. リスク・留意点・要確認
+
+- **端末ローカル時計依存**：チャイム時刻は端末時計が正しい前提。キオスク端末は NTP 同期推奨。
+- **稼働判定の数十秒ラグ**：初チェックインから次ポーリングまで最大ポーリング間隔分、activity 化が遅れうる。:50 直前の初チェックインは当該休憩チャイムを逃す可能性（許容）。
+- **同一日に一部タームのみ稼働**（例：土曜は朝のみ）：未稼働タームは `checkedIn===0` のまま idle ＝ 自動で無音。問題なし。
+- **off-hours セッションの扱い**：`classifyTerm` が `null`（昼休み・時間外）のチェックインは `terms` 集計から除外、`totalCheckedIn` には含む（表示用）。この区分で良いか最終確認。
+- **公開エンドポイントの露出**：在館人数（数値のみ・PIIなし）を無認証公開する。ニックネーム等は返さない設計を維持する。
+- **自動再生フラグの不安定さ**：`--autoplay-policy` は一部 Chrome ビルドで無視されるため、enterprise policy ＋ アプリ内タップの二重化で担保。
+
+---
+
+## 付録：主要参照ファイル（既存・再利用元）
+
+- `apps/api/src/index.ts`（ルート登録順・CORS・認証 mount）
+- `apps/api/src/middleware/{auth,cors}.ts`（`createDb`・`requireAuthenticatedMentor`・`apiCors`＝流用しない）
+- `apps/api/src/lib/admin.ts`（`fetchSessionsForEvent` L46-103・`fetchParticipationSummary` L132-183・`todayInJst` L40）
+- `apps/api/src/routes/health.ts`（公開ルートの先例）
+- `packages/shared/src/venue-schedule.ts`（`TERMS`・`classifyTerm`・`termEndInstant`・`toJstWallClock`・`toJstDateString`）
+- `packages/shared/src/schemas/{index,admin}.ts`（スキーマ／型のスタイル）
+- `apps/checkin/*`（スキャフォルド複製元：`package.json`・`next.config.ts`・`tsconfig.json`・`postcss.config.mjs`・`components.json`・`src/app/{layout,manifest}.ts(x)`）
+- `packages/ui/src/lib/{api-client,format,utils}.ts`（`apiJson`/`apiFetch`・JST整形・`cn`）
+
+### 出典（ブラウザ制約・2025–2026）
+- Autoplay guide — MDN / Chrome for Developers / Chromium project
+- OscillatorNode・Advanced techniques (Web Audio) — MDN
+- Screen Wake Lock API — Chrome for Developers / MDN / caniuse
+- Accurate timers in JS（self-correcting setTimeout / Web Worker）— SitePoint / HackWild
+- View Transitions・`<ViewTransition>`・prefers-reduced-motion — Chrome for Developers / React / MDN
+- Chromium kiosk mode — Smartupworld / OSTechNix

From ae1e293a4145059195a005360f2c4b3706788604 Mon Sep 17 00:00:00 2001
From: tmba <ut42.nu@gmail.com>
Date: Sat, 30 May 2026 00:14:59 +0900
Subject: [PATCH 02/11] docs: switch signage app to mentor-whitelist auth,
 reuse /api/sessions/today

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../specs/2026-05-29-signage-chime-design.md  | 151 +++++++++---------
 1 file changed, 74 insertions(+), 77 deletions(-)

diff --git a/docs/superpowers/specs/2026-05-29-signage-chime-design.md b/docs/superpowers/specs/2026-05-29-signage-chime-design.md
index d643885..31b4bd5 100644
--- a/docs/superpowers/specs/2026-05-29-signage-chime-design.md
+++ b/docs/superpowers/specs/2026-05-29-signage-chime-design.md
@@ -19,6 +19,14 @@
 - 動画で会場の雰囲気をつくる（ウェルカム・空気づくり）。
 - 既存プラットフォームの**チェックインデータ**を稼働シグナルに使い、無人でも「今日・このタームが稼働中か」を正しく判定する。
 
+### 認証方針（決定事項）
+
+サイネージは**他2アプリ（checkin/admin）と同じメンター・ホワイトリスト認証**（Better Auth + Google OAuth + `mentors` 許可リスト）にする。**公開（無認証）にはしない。**
+
+- 理由：将来「チェックイン履歴ベースの情報」「メンター紹介スライド（氏名・写真・経歴）」などの**機微コンテンツ**を流す構想があるため、データ取得経路は最初からアクセス制御下に置く。「壁に映ること」と「APIを誰でも叩けること」は別問題で、後者を塞ぐ。
+- 端末運用：**テクノバ共有の管理用 Google アカウント（`mentors` にメンターロールで登録済み）**でキオスク端末を1回ログインし、セッション（既定7日）で維持する。個人アカウントを使わず最小権限。
+- 効果：v1 では**新規エンドポイントを作らず**、認証付きの既存 `GET /api/sessions/today` をそのまま再利用できる。将来の機微コンテンツも同じ許可リスト配下の `/api/*`（必要なら `/api/signage/*`）に足すだけで、**新しい認証機構は不要**。
+
 ---
 
 ## スコープ
@@ -27,14 +35,15 @@
 - 動画フルスクリーン再生（ループ・プレイリスト）＋常時表示の情報バー（**レイアウト L2**）。
 - **50/10サイクル**に連動した状態遷移（活動↔休憩↔待機）と**シームレスなクロスフェード**。
 - **チャイム**（Web Audio 合成、種別ごとに音色を変える）。
-- **在館人数のライブ表示**（個人情報なし）と、**ターム最初のチェックインで稼働開始**するデータ駆動ロジック。
+- **在館人数のライブ表示**と、**ターム最初のチェックインで稼働開始**するデータ駆動ロジック（認証付き `GET /api/sessions/today` を再利用）。
 - 休憩中画面は**「再開まで M:SS」のカウントダウンを主役**に。
 - 営業時間外・昼休みの**待機（ロゴ）画面**。
+- メンター・ホワイトリスト認証（checkin と同じログイン経路）。
 - キオスク運用（フルスクリーン・横向き・スリープ防止・起動時タップで音声解放）。
 
-### v1 に含まない（将来拡張）
+### v1 に含まない（将来拡張・認証経路は確定済み）
 - admin での動画CMS（アップロード・並べ替え）。
-- ニックネーム表示（v1は人数のみ）。
+- ニックネーム表示・チェックイン履歴ベースの情報・メンター紹介スライド → **認証付き `/api/*` エンドポイントを追加**して対応（公開はしない）。
 - 任意時刻のカスタムアナウンス登録。
 - YouTube/Vimeo 埋め込み（v1は HTML5 `<video>` のみ）。
 - WebSocket/SSE などのプッシュ（v1はポーリング）。
@@ -44,24 +53,24 @@
 ## 全体像
 
 ```
-[大型モニター] ── Chrome キオスク ──> apps/signage (Next.js 16, 公開・認証なし)
-                                         │  ~15–30s ポーリング
-                                         ▼
-                          GET /public/signage/today  (Hono on Workers, 認証外・PII非含有)
-                                         │  既存 sessions/events を集計再利用
-                                         ▼
-                                    Cloudflare D1
+[大型モニター] ── Chrome キオスク ──> apps/signage (Next.js 16, 認証あり=メンター許可リスト)
+        │ 共有管理アカウントで1回ログイン（セッション既定7日・cookie維持）
+        ▼  ~15–30s ポーリング（credentials:'include'）
+  GET /api/sessions/today  (Hono on Workers, requireAuthenticatedMentor)  ← 既存を再利用
+        │  event/sessions/summary（term・isPresent 含む）を返す
+        ▼
+   Cloudflare D1
 
 時刻ロジック: packages/shared/activity-cycle.ts （venue-schedule.ts の TERMS を50/10に展開）
 ```
 
 - **時刻の刻み**（活動/休憩/チャイム時刻）は端末のローカル時計から純粋ロジックで算出。
-- **稼働判定**（鳴らす／表示するか）は API のターム別チェックイン数で決定（クロックとデータの役割分離）。
-- **音声解放**は起動時の1回タップ（ブラウザの自動再生制約）。稼働判定とは独立。
+- **稼働判定**（鳴らす／表示するか）は `/api/sessions/today` のターム別チェックイン数で決定（クロックとデータの役割分離）。
+- **音声解放**は起動時の1回タップ（ブラウザの自動再生制約）。**ログイン**（共有アカウント）とは独立。
 
 ---
 
-## 1. 新規アプリ `apps/signage`（`apps/checkin` 規約を踏襲）
+## 1. 新規アプリ `apps/signage`（`apps/checkin` 規約を踏襲・認証あり）
 
 Next.js 16.2.4 / React 19.2.4。`pnpm-workspace.yaml` の `apps/*` グロブで**自動的にワークスペースに含まれる**（編集不要）。turbo も `dev`/`build`/`type-check` を自動でファンアウト。Biome lint はルートから走るため**アプリ単位の lint スクリプトは不要**。
 
@@ -71,20 +80,23 @@ Next.js 16.2.4 / React 19.2.4。`pnpm-workspace.yaml` の `apps/*` グロブで*
 
 | ファイル | 内容 / checkin との差分 |
 |---|---|
-| `package.json` | `name: "signage"`、scripts `dev: next dev --port 3002` ほか `build`/`start`/`type-check`。deps は checkin から **`@zxing/browser` と `better-auth` を除外**（公開・QR不要）、`motion` は維持。 |
+| `package.json` | `name: "signage"`、scripts `dev: next dev --port 3002` ほか `build`/`start`/`type-check`。deps は checkin から **`@zxing/browser` を除外**（QR不要）、**`better-auth` と `motion` は維持**（ログイン経路＋表示アニメ）。 |
 | `next.config.ts` | checkin と同一（`transpilePackages: ['@tecnova/shared','@tecnova/ui']`）。 |
 | `tsconfig.json` | checkin と同一（`paths` の `@/*` と `@tecnova/ui/*` 両方を含む）。 |
 | `postcss.config.mjs` | `export { default } from '@tecnova/ui/postcss.config';`（同一）。 |
-| `components.json` | checkin と同一（`style: radix-maia`、css は `packages/ui/.../globals.css`）。 |
+| `components.json` | checkin と同一。 |
 | `.gitignore` | checkin から複製（`.next/`・`.env*`・`next-env.d.ts` 等）。 |
-| `src/app/layout.tsx` | `LINE_Seed_JP` ＋ `@tecnova/ui/globals.css`。**`AppShell`（＝`MeProvider`）は使わず** `{children}` を直接描画。`viewport` でズーム無効、`metadata`/`appleWebApp` 設定。 |
+| `src/lib/auth-client.ts` | checkin と同一（`createAuthClient({ baseURL: API_URL, fetchOptions:{credentials:'include'} })`、`better-auth/react`）。 |
+| `src/app/login/page.tsx` | checkin と同一パターン（`authClient.signIn.social({ provider:'google', callbackURL, errorCallbackURL })`）。共有管理アカウントでログイン。 |
+| `src/components/app-shell.tsx` | checkin パターン：`/login` 以外を `MeProvider` で包む（`forbiddenMessage` はサイネージ用文言）。サイネージ本体は MeProvider 配下に置く。 |
+| `src/app/layout.tsx` | `LINE_Seed_JP` ＋ `@tecnova/ui/globals.css` ＋ `<AppShell>`。`viewport` でズーム無効、`metadata`/`appleWebApp` 設定。 |
 | `src/app/manifest.ts` | **`display: 'fullscreen'`・`orientation: 'landscape'`**（checkin は standalone/portrait）。 |
-| `src/app/page.tsx` | サイネージ本体（クライアントコンポーネント、状態機械のルート）。 |
-| `CLAUDE.md` / `AGENTS.md` | checkin/admin と同様に複製。dev 3002・横向きフルスクリーン・**公開（`MeProvider`/`useMe`/`better-auth` なし）** を明記。 |
+| `src/app/page.tsx` | サイネージ本体（クライアントコンポーネント、状態機械のルート。MeProvider 配下なので `useMe()` 可）。 |
+| `CLAUDE.md` / `AGENTS.md` | checkin/admin と同様に複製。dev 3002・横向きフルスクリーン・**認証あり（共有アカウント運用）** を明記。 |
 
-**認証なし**：`useMe()` を呼ばず `MeProvider` で包まない（呼ぶと throw する）。データ取得は `@tecnova/ui` の `apiJson`/`apiFetch` を流用（`credentials:'include'` は固定だが公開エンドポイントは無視するので無害）。`NEXT_PUBLIC_API_URL` 未設定時は `http://localhost:8787` にフォールバック。
+データ取得は `@tecnova/ui` の `apiJson`/`apiFetch`（`credentials:'include'` 固定）で認証付き `/api/*` を叩く。`NEXT_PUBLIC_API_URL` 未設定時は `http://localhost:8787` にフォールバック。
 
-> 本番でクロスオリジンに API を叩く場合、公開エンドポイントは専用の緩い CORS（後述）で対応するため `TRUSTED_ORIGINS` への追加は不要。
+**API側のコード変更は不要。設定のみ**：`TRUSTED_ORIGINS`（`apps/api` の `.dev.vars` / Wrangler Secrets）にサイネージのオリジンを追加（dev: `http://localhost:3002`、本番: サイネージ本番ドメイン）。`parseTrustedOrigins` 経由で **CORS と Better Auth trustedOrigins の両方**に効く（コード変更なし）。
 
 ---
 
@@ -93,17 +105,19 @@ Next.js 16.2.4 / React 19.2.4。`pnpm-workspace.yaml` の `apps/*` グロブで*
 ### 状態
 | 状態 | 条件 | 画面（L2） |
 |---|---|---|
-| **boot** | 初回ロード〜起動タップ前 | 全画面「▶ タップして開始」オーバーレイ（背後でミュート動画が再生） |
+| **(login)** | 未ログイン（セッションなし・401） | `MeProvider` が `/login` へ。共有アカウントでログイン（通常は7日に1回程度） |
+| **boot** | ログイン済み・初回ロード〜起動タップ前 | 全画面「▶ タップして開始」オーバーレイ（背後でミュート動画が再生） |
 | **idle** | ターム外（昼休み・営業時間外） **または** ターム内だが当該タームが未稼働 | **待機・ロゴ画面**（ロゴ＋時計＋「次は HH:MM から」/「まもなく開始」）、動画停止 |
 | **activity** | ターム内・稼働中・活動フェーズ（:00–:50） | **動画フルスクリーン** ＋ 上部情報バー（ターム・時計・「休憩まであと◯分」・在館◯人） |
 | **break** | ターム内・稼働中・休憩フェーズ（:50–:00） | **「休憩中／再開まで M:SS」を主役**（時計・在館数は小さく添える） |
 
-### 稼働判定（データ駆動）
-- **稼働開始 = 現タームの `terms[term].checkedIn > 0`**（API から取得、累計なので一度立てば**ターム終了まで sticky**）。
-- ターム内でも `checkedIn === 0` の間は **idle（まもなく開始）**。チャイムも鳴らさない。
+### 稼働判定（データ駆動・`/api/sessions/today` 由来）
+- レスポンスの `sessions[]`（当日全セッション、`term` 付き）から **現タームの件数（`sessions.filter(s => s.term === currentTerm).length`）> 0 で稼働中**。セッションはチェックアウトしても消えない（`checkedOutAt` が付くだけ）ため**累計＝ターム終了まで sticky**。
+- 在館数は `summary.currentlyPresent`、当日延べは `summary.totalCheckedIn` をそのまま表示。
+- ターム内でも現タームが未稼働の間は **idle（まもなく開始）**。チャイムも鳴らさない。
 - これにより「土日=朝＋昼のみ稼働／平日=夕方のみ」「非稼働日は無音」が**曜日ルールなしで自動成立**。
 - 端末の現タームは `classifyCycleMoment(now)` の `term` で判定。
-- **9:00（や各タームの :00 開始）チャイムは基本鳴らない**（その時刻はまだ `checkedIn===0` のことが多い）。意味のある **:50 休憩 / :00 再開 / ターム終了** チャイムは初チェックイン後に発火。
+- **9:00（や各タームの :00 開始）チャイムは基本鳴らない**（その時刻はまだ件数0のことが多い）。意味のある **:50 休憩 / :00 再開 / ターム終了** チャイムは初チェックイン後に発火。
 
 ### 遷移
 - フェーズ境界（`:50` → break / `:00` → activity / ターム終了 → idle）で**クロスフェード**（不透明度のみ、`<video>` はアンマウントしない＝再読込フラッシュ防止）。
@@ -160,43 +174,26 @@ export const secondsUntilNextBoundary = (instant: Date): number | null => { /* .
 ### スケジューラ（ドリフトしない自己補正型）
 - `setInterval` は使わない。**毎tick `Date.now()` から次境界までの遅延を再計算する `setTimeout`**（最大〜1秒キャップ）。
 - `cycleChimeEventsForDay(now)` を保持し、「前回 instant < `event.at` ≤ 今 instant」で境界跨ぎ検出 → `key` で dedupe（焦点復帰時の二重発火防止）。
-- 発火は**稼働中の時のみ**（その時点で当該ターム `checkedIn > 0`）。`visibilitychange`→visible で即時 `tick()`。
+- 発火は**稼働中の時のみ**（その時点で当該タームの件数 > 0）。`visibilitychange`→visible で即時 `tick()`。
 
 ---
 
-## 4. ライブデータ（公開エンドポイント・在館人数のみ）
-
-### エンドポイント
-`GET /public/signage/today` → 認証外・PII非含有。
-
-```jsonc
-{
-  "date": "YYYY-MM-DD",          // JST
-  "currentlyPresent": 23,        // checkedOutAt === null の件数
-  "totalCheckedIn": 58,          // 当日の延べセッション数
-  "terms": {                     // checkedInAt の属するタームで累計（30分ルールは適用しない）
-    "morning":   { "checkedIn": 30 },
-    "afternoon": { "checkedIn": 28 },
-    "evening":   { "checkedIn": 0 }
-  }
-}
-```
+## 4. ライブデータ（認証付き既存エンドポイントの再利用）
+
+**新規エンドポイントは作らない。** サイネージは認証済みの信頼端末なので、既存の `GET /api/sessions/today`（`requireAuthenticatedMentor`／admin ロール不要・メンターで可）を再利用する。
 
-### 配線（`apps/api`）
-- **`apps/api/src/routes/public.ts`（新規）**：`publicRoute.get('/signage/today', ...)`。`/health` と同じ「認証ミドルウェア対象外パス」方式。`'/public'` は `'/api/*'`・`'/checkin/*'` のどちらにも一致しないため `requireAuthenticatedMentor` に**捕まらない**。
-- **`apps/api/src/lib/public.ts`（新規）**：`fetchSignageToday(db)`。`lib/admin.ts` の `fetchSessionsForEvent` を踏襲。当日は `toJstDateString(new Date())`、`events` を `date` で引き、無ければ `date`＋ゼロを返す。セッションは**PII不要なので participants を join せず** `checkedInAt`/`checkedOutAt` のみ取得し、`classifyTerm(checkedInAt)`（`classifyVisit` ではなく＝30分ルール非適用）でターム別に加算。`currentlyPresent` は `checkedOutAt === null`。
-- **`apps/api/src/index.ts`（変更）**：
-  ```ts
-  app.use('/public/*', cors({ origin: '*', allowMethods: ['GET', 'OPTIONS'] })); // 資格情報なしの緩いCORS
-  app.route('/public', publicRoute);   // app.route('/', healthRoute) の直前
-  ```
-  既存の `apiCors`（`credentials:true` + `TRUSTED_ORIGINS` 限定）は**流用しない**（`origin:'*'` と `credentials:true` は併用不可）。
+レスポンス（`todaySessionsResponseSchema`、`@tecnova/shared/schemas`）には次が含まれ、サイネージに必要なものはすべて揃っている：
+- `event: { id, date } | null`（当日イベント未作成なら null＋ゼロサマリ）
+- `sessions[]`：各 `term: 'morning'|'afternoon'|'evening'|null`、`isPresent`、`checkedInAt` ほか
+- `summary: { totalCheckedIn, currentlyPresent, checkedOut }`
 
-### スキーマ
-- **`packages/shared/src/schemas/public.ts`（新規）** に `signageTodayResponseSchema` ＋ `SignageTodayResponse` 型。`schemas/index.ts` に `export * from './public';` を追加（公開契約として admin/checkin と分離）。フロントは `@tecnova/shared/schemas` から import しレスポンスを型アサート。
+サイネージ側の導出：
+- **ターム別 checkedIn**：`sessions` を `term` でカウント（稼働判定に使用）。
+- **在館数**：`summary.currentlyPresent`。**当日延べ**：`summary.totalCheckedIn`。
 
-### フロント取得
-- `apiJson<SignageTodayResponse>('/public/signage/today')` を ~15–30秒間隔でポーリング（活動境界の検出は時計側が担うため、データ遅延は稼働判定の数十秒ラグのみで許容）。
+取得は `apiJson<TodaySessionsResponse>('/api/sessions/today')` を ~15–30秒間隔でポーリング（活動境界の検出は時計側が担うため、データ遅延は稼働判定の数十秒ラグのみで許容）。`fullName`/`nickname` 等の PII も返るが、認証済み信頼クライアント（admin と同等の信頼レベル）であり v1 は画面に出さない。将来 PII を絞った専用 `/api/signage/*` を足す余地は残す。
+
+**API 側の変更は設定のみ**：`TRUSTED_ORIGINS` にサイネージのオリジンを追加（CORS＋Better Auth 双方に反映、コード変更なし）。
 
 ---
 
@@ -212,8 +209,9 @@ export const secondsUntilNextBoundary = (instant: Date): number | null => { /* .
 
 ブラウザの自動再生・スリープ・全画面制約に対応する。**2層**で堅牢化：アプリ層（どこでも動く1回タップ）＋キオスク層（管理端末の起動フラグ）。
 
-**ブートシーケンス（タップ1回で全解放）:**
-1. ロード時はミュートで「▶ タップして開始」全画面オーバーレイ。
+**ブートシーケンス:**
+0. （初回／セッション切れ時のみ）`MeProvider` が `/login` を表示 → 共有管理アカウントで Google ログイン。以降はセッション cookie で維持（既定7日）。
+1. ログイン済みでロードすると、ミュートで「▶ タップして開始」全画面オーバーレイ（背後でミュート動画）。
 2. タップハンドラ（1つのジェスチャ内で）：`ctx.resume()` → `requestFullscreen()` → `video.muted=false; video.play()` → `requestWakeLock()` → スケジューラ開始。
 3. `visibilitychange`→visible：`ctx.resume()` 再実行・wake lock 再取得・即時 `tick()`。
 
@@ -229,21 +227,17 @@ export const secondsUntilNextBoundary = (instant: Date): number | null => { /* .
 
 **新規（packages/shared）**
 - `packages/shared/src/activity-cycle.ts`
-- `packages/shared/src/schemas/public.ts`
 
 **変更（packages/shared）**
 - `packages/shared/package.json` … exports に `"./activity-cycle": "./src/activity-cycle.ts"`
-- `packages/shared/src/schemas/index.ts` … `export * from './public';`
-
-**新規（apps/api）**
-- `apps/api/src/routes/public.ts`
-- `apps/api/src/lib/public.ts`
 
-**変更（apps/api）**
-- `apps/api/src/index.ts` … `/public/*` の緩い CORS ＋ `app.route('/public', publicRoute)`
+**変更（apps/api）— コードなし・設定のみ**
+- `apps/api/.dev.vars`（ローカル）／ Wrangler Secrets（本番）の `TRUSTED_ORIGINS` にサイネージのオリジンを追加。
+- `.env.example` の `TRUSTED_ORIGINS` 例コメントを更新（任意）。
 
 **新規（apps/signage、すべて）**
 - 設定: `package.json` / `next.config.ts` / `tsconfig.json` / `postcss.config.mjs` / `components.json` / `.gitignore`
+- 認証: `src/lib/auth-client.ts` / `src/app/login/page.tsx` / `src/components/app-shell.tsx`（MeProvider ラッパ）
 - アプリ: `src/app/layout.tsx` / `src/app/page.tsx` / `src/app/manifest.ts`
 - コンポーネント（目安）: `src/components/{tap-to-start,stage,info-bar,break-screen,idle-screen}.tsx`
 - ロジック（目安）: `src/lib/{chimes,use-chime-scheduler,use-wake-lock,use-signage-data}.ts`
@@ -251,16 +245,16 @@ export const secondsUntilNextBoundary = (instant: Date): number | null => { /* .
 - ドキュメント: `CLAUDE.md` / `AGENTS.md`
 
 **ドキュメント（フォロー）**
-- `docs/architecture.md` のクライアント一覧／拡張ロードマップに `apps/signage` を追記。
+- `docs/architecture.md` のクライアント一覧／拡張ロードマップに `apps/signage`（認証あり）を追記。
 
 ---
 
 ## 8. 検証方法（end-to-end）
 
 1. **共有ロジック**：`activity-cycle.ts` に単体テスト（境界値）。朝/昼/夕の各タームで `classifyCycleMoment` のフェーズ遷移、`cycleChimeEventsForDay` が 7×（稼働ターム数）件・時系列順・正しい JST instant、`msUntilNextBoundary` の符号と null（活動なし日）を検証。`pnpm --filter @tecnova/shared test`（無ければ vitest を最小導入）。
-2. **API**：ローカル D1 にセッションを投入し `curl http://localhost:8787/public/signage/today` で `terms.*.checkedIn`・`currentlyPresent`・`totalCheckedIn`・空イベント日のゼロ応答を確認。`requireAuthenticatedMentor` に**捕まらない**こと（401 にならない）を確認。CORS ヘッダ（`access-control-allow-origin: *`）を確認。
+2. **認証＆データ**：`apps/api` の `TRUSTED_ORIGINS` に `http://localhost:3002` を追加。共有（or 任意のメンター）アカウントでログイン後、ブラウザから `/api/sessions/today` が 200 で取得でき、`sessions[].term`・`summary.currentlyPresent/totalCheckedIn` が返ることを確認。未ログインだと `MeProvider` が `/login` に飛ばすこと、ログイン後にサイネージが表示されることを確認。
 3. **フロント結合**：`pnpm --filter signage dev`（:3002）。デバッグ用に「現在時刻を上書き」できる仕組み（クエリ `?now=2026-05-30T09:49:30+09:00` 等）を入れ、:50/:00 のクロスフェードとチャイム発火、稼働前 idle→初チェックインで activity への切替を確認。`prefers-reduced-motion` でトランジション縮約を確認。
-4. **キオスク確認**：実機 or Chrome で「タップして開始」後に音付き動画・wake lock・全画面が効くこと、タブ復帰で音声が戻ることを確認。
+4. **キオスク確認**：実機 or Chrome で「タップして開始」後に音付き動画・wake lock・全画面が効くこと、タブ復帰で音声が戻ることを確認。セッション維持（再読込でログイン不要）を確認。
 5. `pnpm type-check` ／ `pnpm biome check .` 通過。
 
 ---
@@ -268,10 +262,11 @@ export const secondsUntilNextBoundary = (instant: Date): number | null => { /* .
 ## 9. リスク・留意点・要確認
 
 - **端末ローカル時計依存**：チャイム時刻は端末時計が正しい前提。キオスク端末は NTP 同期推奨。
+- **セッション期限（既定7日）**：長期イベントではキオスクが再ログインを要する。必要なら `apps/api/src/lib/auth.ts` の `betterAuth({ session: { expiresIn } })` で延長（小さなコード変更）。会場運用上「数日に一度ログインし直す」で許容できるかを確認。
 - **稼働判定の数十秒ラグ**：初チェックインから次ポーリングまで最大ポーリング間隔分、activity 化が遅れうる。:50 直前の初チェックインは当該休憩チャイムを逃す可能性（許容）。
-- **同一日に一部タームのみ稼働**（例：土曜は朝のみ）：未稼働タームは `checkedIn===0` のまま idle ＝ 自動で無音。問題なし。
-- **off-hours セッションの扱い**：`classifyTerm` が `null`（昼休み・時間外）のチェックインは `terms` 集計から除外、`totalCheckedIn` には含む（表示用）。この区分で良いか最終確認。
-- **公開エンドポイントの露出**：在館人数（数値のみ・PIIなし）を無認証公開する。ニックネーム等は返さない設計を維持する。
+- **同一日に一部タームのみ稼働**（例：土曜は朝のみ）：未稼働タームは件数0のまま idle ＝ 自動で無音。問題なし。
+- **共有アカウントの運用**：壁の端末に共有メンターアカウントのログイン状態が乗る。最小権限（メンターロール）で運用し、漏洩時は当該アカウントの無効化／セッション失効で対応。
+- **PII の取り扱い**：v1 は `/api/sessions/today` の PII を画面に出さない。将来ニックネーム等を出す場合も、認証経路は維持しつつ表示内容を設計で限定する。
 - **自動再生フラグの不安定さ**：`--autoplay-policy` は一部 Chrome ビルドで無視されるため、enterprise policy ＋ アプリ内タップの二重化で担保。
 
 ---
@@ -279,12 +274,14 @@ export const secondsUntilNextBoundary = (instant: Date): number | null => { /* .
 ## 付録：主要参照ファイル（既存・再利用元）
 
 - `apps/api/src/index.ts`（ルート登録順・CORS・認証 mount）
-- `apps/api/src/middleware/{auth,cors}.ts`（`createDb`・`requireAuthenticatedMentor`・`apiCors`＝流用しない）
-- `apps/api/src/lib/admin.ts`（`fetchSessionsForEvent` L46-103・`fetchParticipationSummary` L132-183・`todayInJst` L40）
-- `apps/api/src/routes/health.ts`（公開ルートの先例）
+- `apps/api/src/middleware/{auth,cors}.ts`（`requireAuthenticatedMentor`・`createDb`・`apiCors`・`parseTrustedOrigins`）
+- `apps/api/src/lib/auth.ts`（Better Auth 設定・`trustedOrigins`・セッション）
+- `apps/api/src/routes/admin.ts`（`/me` L25-32・`/sessions/today` L37・`fetchTodaySessions`）
+- `apps/api/src/lib/admin.ts`（`fetchSessionsForEvent`・`todayInJst`）
 - `packages/shared/src/venue-schedule.ts`（`TERMS`・`classifyTerm`・`termEndInstant`・`toJstWallClock`・`toJstDateString`）
-- `packages/shared/src/schemas/{index,admin}.ts`（スキーマ／型のスタイル）
-- `apps/checkin/*`（スキャフォルド複製元：`package.json`・`next.config.ts`・`tsconfig.json`・`postcss.config.mjs`・`components.json`・`src/app/{layout,manifest}.ts(x)`）
+- `packages/shared/src/schemas/{index,admin}.ts`（`todaySessionsResponseSchema` ＝ `term`/`summary` を含む）
+- `apps/checkin/*`（スキャフォルド＆認証複製元：`package.json`・`next.config.ts`・`tsconfig.json`・`postcss.config.mjs`・`components.json`・`src/lib/auth-client.ts`・`src/app/login/page.tsx`・`src/components/app-shell.tsx`・`src/app/{layout,manifest}.ts(x)`）
+- `packages/ui/src/components/me-provider.tsx`（`MeProvider`・`useMe`・401→`/login`）
 - `packages/ui/src/lib/{api-client,format,utils}.ts`（`apiJson`/`apiFetch`・JST整形・`cn`）
 
 ### 出典（ブラウザ制約・2025–2026）

From 6e56748104ae20a7725e3c092c8f10d3bdaa0800 Mon Sep 17 00:00:00 2001
From: tmba <ut42.nu@gmail.com>
Date: Sat, 30 May 2026 00:37:50 +0900
Subject: [PATCH 03/11] docs: add signage + chime implementation plan

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../plans/2026-05-30-signage-chime-app.md     | 1567 +++++++++++++++++
 1 file changed, 1567 insertions(+)
 create mode 100644 docs/superpowers/plans/2026-05-30-signage-chime-app.md

diff --git a/docs/superpowers/plans/2026-05-30-signage-chime-app.md b/docs/superpowers/plans/2026-05-30-signage-chime-app.md
new file mode 100644
index 0000000..7e0861a
--- /dev/null
+++ b/docs/superpowers/plans/2026-05-30-signage-chime-app.md
@@ -0,0 +1,1567 @@
+# サイネージ＋チャイム アプリ 実装計画
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** 大型モニター常時表示用の認証付きサイネージアプリ `apps/signage` を新設し、50分活動／10分休憩サイクルに連動した動画表示・カウントダウン・チャイムを自動制御する。
+
+**Architecture:** 端末ローカル時計から純粋ロジック（`@tecnova/shared/activity-cycle`）で活動/休憩フェーズとチャイム時刻を算出し、稼働判定は認証付き既存 `GET /api/sessions/today` のターム別チェックイン数（初回チェックインで稼働開始・ターム終了まで sticky）で行う。画面は L2（動画フルスクリーン＋情報バー）で、フェーズ境界にクロスフェードし Web Audio 合成チャイムを鳴らす。認証は checkin/admin と同じメンター・ホワイトリスト（共有管理アカウントで1回ログイン）。
+
+**Tech Stack:** Next.js 16.2.4 / React 19.2.4 / TypeScript / Tailwind v4（`@tecnova/ui`）/ Better Auth（`better-auth/react`）/ motion / Web Audio API / Screen Wake Lock API / vitest（`packages/shared` のみ新規導入）。
+
+設計の根拠は `docs/superpowers/specs/2026-05-29-signage-chime-design.md` を参照。
+
+---
+
+## File Structure
+
+**packages/shared（共有純粋ロジック）**
+- `src/activity-cycle.ts`（新規）— 50/10サイクル分類・チャイムイベント列・カウントダウン
+- `src/activity-cycle.test.ts`（新規）— 上記の単体テスト
+- `package.json`（変更）— `"./activity-cycle"` export ＋ vitest devDep ＋ `test` スクリプト
+
+**apps/api（設定のみ・コード変更なし）**
+- `.dev.vars` / `.env.example`（変更）— `TRUSTED_ORIGINS` にサイネージ origin を追加
+
+**apps/signage（新規アプリ）**
+- 設定: `package.json` / `next.config.ts` / `tsconfig.json` / `postcss.config.mjs` / `components.json` / `.gitignore`
+- 認証: `src/lib/auth-client.ts` / `src/components/app-shell.tsx` / `src/app/login/page.tsx`
+- ルート: `src/app/layout.tsx` / `src/app/manifest.ts` / `src/app/page.tsx`（状態機械）
+- ロジック: `src/lib/now.ts` / `src/lib/use-now.ts` / `src/lib/time.ts` / `src/lib/chimes.ts` / `src/lib/use-chime-scheduler.ts` / `src/lib/use-wake-lock.ts` / `src/lib/use-signage-data.ts`
+- 設定値: `src/config/playlist.ts`
+- 表示: `src/components/{stage,info-bar,break-screen,idle-screen,tap-to-start}.tsx`
+- ドキュメント: `CLAUDE.md` / `AGENTS.md`
+
+**docs**
+- `docs/architecture.md`（変更）— クライアント一覧に `apps/signage` を追記
+
+各ファイルは単一責務。`now.ts`（時刻ソース）・`chimes.ts`（音）・`use-chime-scheduler.ts`（発火）・`use-signage-data.ts`（データ）・各表示コンポーネントは独立して理解・差し替え可能。
+
+---
+
+## Task 1: 共有ロジック `activity-cycle.ts`（TDD・vitest 最小導入）
+
+**Files:**
+- Modify: `packages/shared/package.json`
+- Create: `packages/shared/src/activity-cycle.test.ts`
+- Create: `packages/shared/src/activity-cycle.ts`
+
+- [ ] **Step 1: vitest を devDep と test スクリプトに追加**
+
+`packages/shared/package.json` の `scripts` と `devDependencies` を以下に変更（他キーは既存のまま）：
+
+```json
+  "scripts": {
+    "type-check": "tsc --noEmit",
+    "test": "vitest run"
+  },
+  "devDependencies": {
+    "@cloudflare/workers-types": "^4.20260502.1",
+    "typescript": "^6.0.3",
+    "vitest": "^3.2.4"
+  },
+```
+
+そして `exports` に `"./activity-cycle"` を追加（`"./venue-schedule"` の隣）：
+
+```json
+  "exports": {
+    ".": "./src/index.ts",
+    "./google-sheets": "./src/google-sheets.ts",
+    "./schemas": "./src/schemas/index.ts",
+    "./venue-schedule": "./src/venue-schedule.ts",
+    "./activity-cycle": "./src/activity-cycle.ts"
+  },
+```
+
+- [ ] **Step 2: 依存をインストール**
+
+Run: `pnpm install`
+Expected: vitest が `packages/shared` に追加され lockfile 更新。
+
+- [ ] **Step 3: 失敗するテストを書く**
+
+Create `packages/shared/src/activity-cycle.test.ts`:
+
+```ts
+import { describe, expect, it } from 'vitest';
+import {
+  classifyCycleMoment,
+  cycleChimeEventsForDay,
+  msUntilNextBoundary,
+} from './activity-cycle';
+
+// JST 指定の instant を作るヘルパ（Asia/Tokyo は固定 UTC+9）。
+const jst = (iso: string): Date => new Date(`${iso}+09:00`);
+
+describe('classifyCycleMoment', () => {
+  it('活動中（朝・サイクル1）', () => {
+    const m = classifyCycleMoment(jst('2026-05-30T09:30:00'));
+    expect(m.phase).toBe('activity');
+    expect(m.term).toBe('morning');
+    expect(m.cycleIndex).toBe(1);
+    expect(m.phaseEndsAt?.toISOString()).toBe(jst('2026-05-30T09:50:00').toISOString());
+  });
+
+  it(':50 ちょうどは休憩', () => {
+    const m = classifyCycleMoment(jst('2026-05-30T09:50:00'));
+    expect(m.phase).toBe('break');
+    expect(m.phaseEndsAt?.toISOString()).toBe(jst('2026-05-30T10:00:00').toISOString());
+  });
+
+  it('サイクル3の活動（朝 11:30）', () => {
+    const m = classifyCycleMoment(jst('2026-05-30T11:30:00'));
+    expect(m.phase).toBe('activity');
+    expect(m.cycleIndex).toBe(3);
+    expect(m.phaseEndsAt?.toISOString()).toBe(jst('2026-05-30T11:50:00').toISOString());
+  });
+
+  it('昼休みは idle', () => {
+    const m = classifyCycleMoment(jst('2026-05-30T12:30:00'));
+    expect(m.phase).toBe('idle');
+    expect(m.term).toBeNull();
+    expect(m.phaseEndsAt).toBeNull();
+  });
+
+  it('開始前は idle', () => {
+    expect(classifyCycleMoment(jst('2026-05-30T08:00:00')).phase).toBe('idle');
+  });
+
+  it('夕方ターム内', () => {
+    expect(classifyCycleMoment(jst('2026-05-30T16:30:00')).term).toBe('evening');
+  });
+});
+
+describe('cycleChimeEventsForDay', () => {
+  it('1日分は 3ターム×7 = 21 イベント', () => {
+    expect(cycleChimeEventsForDay(jst('2026-05-30T09:00:00'))).toHaveLength(21);
+  });
+
+  it('時系列順に並ぶ', () => {
+    const ev = cycleChimeEventsForDay(jst('2026-05-30T09:00:00'));
+    const ts = ev.map((e) => e.at.getTime());
+    expect([...ts].sort((a, b) => a - b)).toEqual(ts);
+  });
+
+  it('朝タームの最初の3イベントは resume@9:00 / break@9:50 / resume@10:00', () => {
+    const ev = cycleChimeEventsForDay(jst('2026-05-30T09:00:00')).filter((e) => e.term === 'morning');
+    expect(ev[0]).toMatchObject({ kind: 'resume', at: jst('2026-05-30T09:00:00') });
+    expect(ev[1]).toMatchObject({ kind: 'break', at: jst('2026-05-30T09:50:00') });
+    expect(ev[2]).toMatchObject({ kind: 'resume', at: jst('2026-05-30T10:00:00') });
+    expect(ev.at(-1)).toMatchObject({ kind: 'term-end', at: jst('2026-05-30T12:00:00') });
+  });
+
+  it('key は安定（日付#term#kind#HH:mm）', () => {
+    const ev = cycleChimeEventsForDay(jst('2026-05-30T09:00:00')).find((e) => e.term === 'morning' && e.kind === 'break');
+    expect(ev?.key).toBe('2026-05-30#morning#break#09:50');
+  });
+});
+
+describe('msUntilNextBoundary', () => {
+  it('09:30 の次境界は 09:50（20分後）', () => {
+    expect(msUntilNextBoundary(jst('2026-05-30T09:30:00'))).toBe(20 * 60 * 1000);
+  });
+
+  it('営業終了後は null', () => {
+    expect(msUntilNextBoundary(jst('2026-05-30T20:00:00'))).toBeNull();
+  });
+});
+```
+
+- [ ] **Step 4: テストが失敗することを確認**
+
+Run: `pnpm --filter @tecnova/shared test`
+Expected: FAIL（`activity-cycle.ts` 不在で import 解決エラー）。
+
+- [ ] **Step 5: 実装を書く**
+
+Create `packages/shared/src/activity-cycle.ts`:
+
+```ts
+// 活動50分・休憩10分のリズムを壁時計の「時」に合わせて刻む純粋ロジック。
+// 各タームを 50+10=60分 × 3サイクルに割る（3時間タームをちょうど割り切る）。
+// venue-schedule と同じく Workers 安全（Intl のみ・Node API なし）、JST 固定 UTC+9。
+import { TERMS, type TermId, toJstDateString, toJstWallClock } from './venue-schedule';
+
+export const ACTIVITY_MINUTES = 50;
+export const BREAK_MINUTES = 10;
+const CYCLE_MINUTES = ACTIVITY_MINUTES + BREAK_MINUTES; // 60
+
+// Asia/Tokyo は DST が無く固定 UTC+9（venue-schedule と同前提）。
+const JST_OFFSET_HOURS = 9;
+
+// 'HH:mm' を 0:00 からの通算分に。venue-schedule の同名ヘルパは非公開のため再宣言。
+const toMinutesOfDay = (hhmm: string): number =>
+  Number.parseInt(hhmm.slice(0, 2), 10) * 60 + Number.parseInt(hhmm.slice(3, 5), 10);
+
+const jstMinuteOfDay = (instant: Date): number => {
+  const { hour, minute } = toJstWallClock(instant);
+  return hour * 60 + minute;
+};
+
+// ref の JST 暦日における JST 通算分 m を UTC instant に変換（termEndInstant と同手法）。
+const jstInstantOnDayOf = (ref: Date, minuteOfDay: number): Date => {
+  const { year, month, day } = toJstWallClock(ref);
+  const hh = Math.floor(minuteOfDay / 60);
+  const mm = minuteOfDay % 60;
+  return new Date(Date.UTC(year, month - 1, day, hh - JST_OFFSET_HOURS, mm, 0, 0));
+};
+
+export type CyclePhase = 'activity' | 'break' | 'idle';
+
+export interface CycleMoment {
+  phase: CyclePhase;
+  term: TermId | null;
+  cycleIndex: number | null; // 1..3、idle のとき null
+  phaseEndsAt: Date | null; // 現フェーズ終端（次の境界）、idle のとき null
+}
+
+export type ChimeKind = 'resume' | 'break' | 'term-end';
+
+export interface ChimeEvent {
+  kind: ChimeKind;
+  term: TermId;
+  at: Date;
+  key: string; // dedup 用安定キー `${date}#${term}#${kind}#${HH:mm}`
+}
+
+// 瞬間を活動/休憩/idle に分類し、現フェーズの終端 instant も返す。
+export const classifyCycleMoment = (instant: Date): CycleMoment => {
+  const current = jstMinuteOfDay(instant);
+  for (const term of TERMS) {
+    const start = toMinutesOfDay(term.start);
+    const end = toMinutesOfDay(term.end);
+    if (current >= start && current < end) {
+      const offset = current - start; // 0..179
+      const cycleIndex = Math.floor(offset / CYCLE_MINUTES) + 1;
+      const withinCycle = offset % CYCLE_MINUTES;
+      const phase: CyclePhase = withinCycle < ACTIVITY_MINUTES ? 'activity' : 'break';
+      const cycleStart = start + (cycleIndex - 1) * CYCLE_MINUTES;
+      const boundaryMinute =
+        phase === 'activity' ? cycleStart + ACTIVITY_MINUTES : cycleStart + CYCLE_MINUTES;
+      return {
+        phase,
+        term: term.id,
+        cycleIndex,
+        phaseEndsAt: jstInstantOnDayOf(instant, boundaryMinute),
+      };
+    }
+  }
+  return { phase: 'idle', term: null, cycleIndex: null, phaseEndsAt: null };
+};
+
+// instant の JST 暦日における全タームのチャイムイベントを時系列順で返す。
+// クライアントは tick ごとに「前回 < at <= 今」で境界跨ぎを検出し key で dedup する。
+export const cycleChimeEventsForDay = (instant: Date): ChimeEvent[] => {
+  const date = toJstDateString(instant);
+  const events: ChimeEvent[] = [];
+  const push = (kind: ChimeKind, term: TermId, minuteOfDay: number): void => {
+    const hh = String(Math.floor(minuteOfDay / 60)).padStart(2, '0');
+    const mm = String(minuteOfDay % 60).padStart(2, '0');
+    events.push({
+      kind,
+      term,
+      at: jstInstantOnDayOf(instant, minuteOfDay),
+      key: `${date}#${term}#${kind}#${hh}:${mm}`,
+    });
+  };
+  for (const term of TERMS) {
+    const start = toMinutesOfDay(term.start);
+    const end = toMinutesOfDay(term.end);
+    const cycles = Math.round((end - start) / CYCLE_MINUTES);
+    for (let n = 0; n < cycles; n += 1) {
+      push('resume', term.id, start + n * CYCLE_MINUTES);
+      push('break', term.id, start + n * CYCLE_MINUTES + ACTIVITY_MINUTES);
+    }
+    push('term-end', term.id, end);
+  }
+  return events;
+};
+
+// 次の境界までのミリ秒。その日もう境界が無ければ null。
+export const msUntilNextBoundary = (instant: Date): number | null => {
+  const now = instant.getTime();
+  const future = cycleChimeEventsForDay(instant)
+    .map((e) => e.at.getTime())
+    .filter((t) => t > now)
+    .sort((a, b) => a - b);
+  const next = future[0];
+  return next === undefined ? null : next - now;
+};
+
+// 秒丸め（ceil で 0 秒の一瞬を避ける）。
+export const secondsUntilNextBoundary = (instant: Date): number | null => {
+  const ms = msUntilNextBoundary(instant);
+  return ms === null ? null : Math.ceil(ms / 1000);
+};
+```
+
+- [ ] **Step 6: テストが通ることを確認**
+
+Run: `pnpm --filter @tecnova/shared test`
+Expected: PASS（全ケース green）。
+
+- [ ] **Step 7: 型チェック**
+
+Run: `pnpm --filter @tecnova/shared type-check`
+Expected: エラーなし。
+
+- [ ] **Step 8: コミット**
+
+```bash
+git add packages/shared/package.json packages/shared/src/activity-cycle.ts packages/shared/src/activity-cycle.test.ts pnpm-lock.yaml
+git commit -m "feat(shared): add activity-cycle (50/10 schedule + chime events)"
+```
+
+---
+
+## Task 2: API の `TRUSTED_ORIGINS` にサイネージ origin を追加（設定のみ）
+
+**Files:**
+- Modify: `apps/api/.dev.vars`（ローカル開発用・git管理外）
+- Modify: `.env.example`（コメント例）
+
+- [ ] **Step 1: `.dev.vars` に dev origin を追加**
+
+`apps/api/.dev.vars` の `TRUSTED_ORIGINS` 行に `http://localhost:3002` を追記（カンマ区切り）：
+
+```
+TRUSTED_ORIGINS=http://localhost:3000,http://localhost:3001,http://localhost:3002
+```
+
+- [ ] **Step 2: `.env.example` のコメント例を更新**
+
+`.env.example` の `TRUSTED_ORIGINS` 付近のコメントに signage(3002) を含める（値は空のまま、例コメントのみ）。
+
+- [ ] **Step 3: API を再起動して疎通確認（手動）**
+
+Run: `pnpm --filter @tecnova/api dev`（別ターミナル）
+確認: 既存メンター（または共有）アカウントでログイン済みのブラウザから `http://localhost:8787/api/sessions/today` が 200 を返し、`sessions[].term` と `summary.currentlyPresent` を含む。未ログインだと 401。
+Expected: 認証付きで取得可能。`TRUSTED_ORIGINS` はコード変更なしで CORS と Better Auth 双方に反映。
+
+- [ ] **Step 4: コミット**
+
+```bash
+git add .env.example
+git commit -m "chore(api): document signage origin (3002) in TRUSTED_ORIGINS"
+```
+（`.dev.vars` は git 管理外のためコミットしない。）
+
+---
+
+## Task 3: `apps/signage` スキャフォルド（:3002 で起動するところまで）
+
+**Files（すべて新規・`apps/signage/` 配下）:**
+- `package.json` / `next.config.ts` / `tsconfig.json` / `postcss.config.mjs` / `components.json` / `.gitignore`
+- `src/app/layout.tsx`（暫定）/ `src/app/page.tsx`（暫定）/ `src/app/manifest.ts`
+
+- [ ] **Step 1: `package.json`**
+
+Create `apps/signage/package.json`:
+
+```json
+{
+  "name": "signage",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --port 3002",
+    "build": "next build",
+    "start": "next start",
+    "type-check": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@tabler/icons-react": "^3.42.0",
+    "@tecnova/shared": "workspace:*",
+    "@tecnova/ui": "workspace:*",
+    "better-auth": "^1.6.9",
+    "motion": "^12.40.0",
+    "next": "16.2.4",
+    "react": "19.2.4",
+    "react-dom": "19.2.4"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "tailwindcss": "^4",
+    "typescript": "^5"
+  }
+}
+```
+
+- [ ] **Step 2: ビルド設定ファイル**
+
+Create `apps/signage/next.config.ts`:
+
+```ts
+import type { NextConfig } from 'next';
+
+const nextConfig: NextConfig = {
+  // モノレポ内 workspace パッケージを Next の transpile 対象にする
+  transpilePackages: ['@tecnova/shared', '@tecnova/ui'],
+};
+
+export default nextConfig;
+```
+
+Create `apps/signage/postcss.config.mjs`:
+
+```ts
+export { default } from '@tecnova/ui/postcss.config';
+```
+
+Create `apps/signage/tsconfig.json`（checkin と同一）:
+
+```json
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [{ "name": "next" }],
+    "paths": {
+      "@/*": ["./src/*"],
+      "@tecnova/ui/*": ["../../packages/ui/src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", ".next/dev/types/**/*.ts", "**/*.mts"],
+  "exclude": ["node_modules"]
+}
+```
+
+Create `apps/signage/components.json`（checkin と同一）:
+
+```json
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "radix-maia",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "../../packages/ui/src/styles/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true
+  },
+  "iconLibrary": "tabler",
+  "aliases": {
+    "components": "@/components",
+    "hooks": "@/hooks",
+    "lib": "@/lib",
+    "utils": "@tecnova/ui/lib/utils",
+    "ui": "@tecnova/ui/components"
+  },
+  "rtl": false,
+  "menuColor": "default-translucent",
+  "menuAccent": "subtle"
+}
+```
+
+Create `apps/signage/.gitignore`（checkin の `.gitignore` を verbatim でコピー： `/node_modules`・`/.next/`・`.env*`・`.vercel`・`next-env.d.ts` 等を含むもの）。
+
+- [ ] **Step 3: 暫定 layout / manifest / page**
+
+Create `apps/signage/src/app/manifest.ts`:
+
+```ts
+import type { MetadataRoute } from 'next';
+
+// 壁掛けモニター向け。display:'fullscreen' + orientation:'landscape' が最も強いキオスク表示。
+// アイコンは省略（--kiosk 起動では PWA インストール不要）。
+export default function manifest(): MetadataRoute.Manifest {
+  return {
+    name: 'テクノバながさき サイネージ',
+    short_name: 'サイネージ',
+    description: 'テクノバながさきの会場サイネージ表示',
+    start_url: '/',
+    display: 'fullscreen',
+    orientation: 'landscape',
+    background_color: '#020617',
+    theme_color: '#2563eb',
+    lang: 'ja',
+  };
+}
+```
+
+Create `apps/signage/src/app/layout.tsx`（暫定：この時点では AppShell 未作成なので children 直描画。Task 4 で AppShell に差し替える）:
+
+```tsx
+import type { Metadata, Viewport } from 'next';
+import { LINE_Seed_JP } from 'next/font/google';
+import '@tecnova/ui/globals.css';
+import { cn } from '@tecnova/ui/lib/utils';
+
+const fontSans = LINE_Seed_JP({
+  variable: '--font-sans',
+  weight: ['100', '400', '700', '800'],
+  subsets: ['latin'],
+});
+
+export const metadata: Metadata = {
+  title: 'テクノバ サイネージ',
+  appleWebApp: { capable: true, title: 'サイネージ', statusBarStyle: 'black-translucent' },
+};
+
+export const viewport: Viewport = {
+  themeColor: '#020617',
+  width: 'device-width',
+  initialScale: 1,
+  maximumScale: 1,
+  userScalable: false,
+};
+
+export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
+  return (
+    <html lang="ja" className={cn('h-full antialiased font-sans', fontSans.variable)}>
+      <body className="min-h-full bg-slate-950">{children}</body>
+    </html>
+  );
+}
+```
+
+Create `apps/signage/src/app/page.tsx`（暫定プレースホルダ。Task 10 で状態機械に差し替える）:
+
+```tsx
+export default function SignagePage() {
+  return <main className="flex min-h-svh items-center justify-center text-white">signage</main>;
+}
+```
+
+- [ ] **Step 4: インストールして起動確認**
+
+Run: `pnpm install`
+Run: `pnpm --filter signage dev`
+確認: `http://localhost:3002` が「signage」を表示。
+Expected: :3002 で起動。
+
+- [ ] **Step 5: 型チェック**
+
+Run: `pnpm --filter signage type-check`
+Expected: エラーなし。
+
+- [ ] **Step 6: コミット**
+
+```bash
+git add apps/signage pnpm-lock.yaml
+git commit -m "feat(signage): scaffold Next.js app on port 3002"
+```
+
+---
+
+## Task 4: 認証ゲート（auth-client / AppShell / login）
+
+**Files:**
+- Create: `apps/signage/src/lib/auth-client.ts`
+- Create: `apps/signage/src/components/app-shell.tsx`
+- Create: `apps/signage/src/app/login/page.tsx`
+- Modify: `apps/signage/src/app/layout.tsx`
+
+- [ ] **Step 1: Better Auth クライアント**
+
+Create `apps/signage/src/lib/auth-client.ts`:
+
+```ts
+import { createAuthClient } from 'better-auth/react';
+
+// Worker（API）の URL。本番では NEXT_PUBLIC_API_URL を Vercel 側で設定する。
+const API_URL = process.env.NEXT_PUBLIC_API_URL ?? 'http://localhost:8787';
+
+// クッキーは Worker 側オリジンに発行される。サイネージは別オリジンから fetch するため
+// credentials:'include' でクッキーを同送させる（API の TRUSTED_ORIGINS に 3002 を登録済み）。
+export const authClient = createAuthClient({
+  baseURL: API_URL,
+  fetchOptions: { credentials: 'include' },
+});
+```
+
+- [ ] **Step 2: AppShell（最小・ヘッダなし）**
+
+Create `apps/signage/src/components/app-shell.tsx`（checkin と違い全画面表示なのでヘッダ chrome は持たず、`MeProvider` だけで包む）:
+
+```tsx
+'use client';
+
+import { MeProvider } from '@tecnova/ui/components/me-provider';
+import { usePathname } from 'next/navigation';
+
+export function AppShell({ children }: { children: React.ReactNode }) {
+  const pathname = usePathname();
+  // /login は認証ゲートの外（401 時の遷移先）。
+  if (pathname.startsWith('/login')) {
+    return <>{children}</>;
+  }
+  return (
+    <MeProvider
+      forbiddenMessage="サイネージの利用権限がありません"
+      loadingClassName="flex min-h-svh items-center justify-center bg-slate-950 text-slate-300"
+      forbiddenClassName="flex min-h-svh flex-col items-center justify-center gap-4 bg-slate-950 p-8 text-center text-slate-300"
+      errorClassName="flex min-h-svh flex-col items-center justify-center gap-4 bg-slate-950 p-8 text-center text-slate-300"
+    >
+      {children}
+    </MeProvider>
+  );
+}
+```
+
+- [ ] **Step 3: ログインページ（自己完結・`@tecnova/ui` のみ依存）**
+
+Create `apps/signage/src/app/login/page.tsx`:
+
+```tsx
+'use client';
+
+import { Alert, AlertDescription, AlertTitle } from '@tecnova/ui/components/alert';
+import { Button } from '@tecnova/ui/components/button';
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@tecnova/ui/components/card';
+import { useState } from 'react';
+import { authClient } from '@/lib/auth-client';
+
+export default function LoginPage() {
+  const [error, setError] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+
+  const signIn = async () => {
+    setBusy(true);
+    setError(null);
+    try {
+      // callbackURL は絶対URL（フロントのオリジンに戻す）。相対だと API オリジンに着地する。
+      const redirect = `${window.location.origin}/`;
+      await authClient.signIn.social({
+        provider: 'google',
+        callbackURL: redirect,
+        errorCallbackURL: redirect,
+      });
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e));
+      setBusy(false);
+    }
+  };
+
+  return (
+    <main className="flex min-h-svh items-center justify-center bg-slate-950 p-8">
+      <Card className="w-full max-w-md">
+        <CardHeader>
+          <CardTitle className="text-2xl">テクノバ サイネージ</CardTitle>
+        </CardHeader>
+        {error && (
+          <CardContent>
+            <Alert variant="destructive">
+              <AlertTitle>ログインエラー</AlertTitle>
+              <AlertDescription>{error}</AlertDescription>
+            </Alert>
+          </CardContent>
+        )}
+        <CardFooter className="flex-col gap-3">
+          <Button type="button" size="lg" onClick={signIn} disabled={busy} className="w-full">
+            {busy ? 'リダイレクト中...' : 'Google でログイン（共有アカウント）'}
+          </Button>
+          <p className="text-center text-sm text-muted-foreground">
+            許可リストに登録されたアカウントのみ利用できます
+          </p>
+        </CardFooter>
+      </Card>
+    </main>
+  );
+}
+```
+
+- [ ] **Step 4: layout を AppShell でラップ**
+
+Modify `apps/signage/src/app/layout.tsx` — import を追加し body を差し替え：
+
+```tsx
+import { AppShell } from '@/components/app-shell';
+```
+
+```tsx
+      <body className="min-h-full bg-slate-950">
+        <AppShell>{children}</AppShell>
+      </body>
+```
+
+- [ ] **Step 5: 型チェック**
+
+Run: `pnpm --filter signage type-check`
+Expected: エラーなし。
+
+- [ ] **Step 6: 認証ゲートを手動確認**
+
+Run: `pnpm --filter signage dev`（api も起動しておく）
+確認: 未ログインで `http://localhost:3002` → `/login` へ遷移。共有（or 任意の許可リスト）アカウントでログイン → `/` に戻り「signage」プレースホルダが表示。
+Expected: 401→/login、ログイン後に本体表示。
+
+- [ ] **Step 7: コミット**
+
+```bash
+git add apps/signage/src
+git commit -m "feat(signage): add mentor-whitelist auth (auth-client, MeProvider shell, login)"
+```
+
+---
+
+## Task 5: 時刻ソースとユーティリティ（`now` / `use-now` / `time`）
+
+**Files:**
+- Create: `apps/signage/src/lib/now.ts`
+- Create: `apps/signage/src/lib/use-now.ts`
+- Create: `apps/signage/src/lib/time.ts`
+
+- [ ] **Step 1: `now.ts`（`?now=` 上書き対応の時刻ソース）**
+
+Create `apps/signage/src/lib/now.ts`:
+
+```ts
+// 端末のローカル時計を返す。?now=ISO クエリがある場合のみ、その時刻を起点に
+// 実時間の経過分だけ進めた擬似時刻を返す（タイムベース挙動の手動検証用）。
+let anchor: { base: number; mountedAt: number } | null | undefined;
+
+const readAnchor = (): { base: number; mountedAt: number } | null => {
+  if (typeof window === 'undefined') return null;
+  const raw = new URLSearchParams(window.location.search).get('now');
+  if (!raw) return null;
+  const base = new Date(raw).getTime();
+  if (Number.isNaN(base)) return null;
+  return { base, mountedAt: Date.now() };
+};
+
+export const getNow = (): Date => {
+  if (anchor === undefined) anchor = readAnchor();
+  if (anchor === null) return new Date();
+  return new Date(anchor.base + (Date.now() - anchor.mountedAt));
+};
+```
+
+- [ ] **Step 2: `use-now.ts`（毎秒 re-render 用フック）**
+
+Create `apps/signage/src/lib/use-now.ts`:
+
+```ts
+'use client';
+
+import { useEffect, useState } from 'react';
+import { getNow } from './now';
+
+// 表示更新用に一定間隔で現在時刻を返す（チャイム発火は use-chime-scheduler が別途精密に行う）。
+export const useNow = (intervalMs = 1000): Date => {
+  const [now, setNow] = useState<Date>(() => getNow());
+  useEffect(() => {
+    const id = window.setInterval(() => setNow(getNow()), intervalMs);
+    return () => window.clearInterval(id);
+  }, [intervalMs]);
+  return now;
+};
+```
+
+- [ ] **Step 3: `time.ts`（JST 時刻・カウントダウン整形）**
+
+Create `apps/signage/src/lib/time.ts`:
+
+```ts
+const jstHmFormatter = new Intl.DateTimeFormat('en-GB', {
+  timeZone: 'Asia/Tokyo',
+  hour: '2-digit',
+  minute: '2-digit',
+  hour12: false,
+});
+
+// JST の 'HH:mm'。
+export const jstHm = (date: Date): string => jstHmFormatter.format(date);
+
+// 秒数を 'M:SS' に（休憩カウントダウン用）。負値は 0 扱い。
+export const mmss = (totalSeconds: number): string => {
+  const s = Math.max(0, Math.floor(totalSeconds));
+  const m = Math.floor(s / 60);
+  const sec = s % 60;
+  return `${m}:${String(sec).padStart(2, '0')}`;
+};
+```
+
+- [ ] **Step 4: `use-wake-lock.ts`（スリープ防止・visibility で再取得）**
+
+Create `apps/signage/src/lib/use-wake-lock.ts`:
+
+```ts
+'use client';
+
+import { useEffect } from 'react';
+
+// 画面スリープ防止。document が hidden になると OS が自動解放するため
+// visibilitychange で再取得する。HTTPS（secure context）必須。
+export const useWakeLock = (enabled: boolean): void => {
+  useEffect(() => {
+    if (!enabled || !('wakeLock' in navigator)) return;
+    let lock: WakeLockSentinel | null = null;
+
+    const request = async (): Promise<void> => {
+      try {
+        lock = await navigator.wakeLock.request('screen');
+      } catch {
+        // low battery / hidden などで拒否されうる（ベストエフォート）。
+      }
+    };
+    const onVisible = (): void => {
+      if (document.visibilityState === 'visible') void request();
+    };
+
+    void request();
+    document.addEventListener('visibilitychange', onVisible);
+    return () => {
+      document.removeEventListener('visibilitychange', onVisible);
+      void lock?.release().catch(() => {});
+    };
+  }, [enabled]);
+};
+```
+
+- [ ] **Step 5: 型チェック**
+
+Run: `pnpm --filter signage type-check`
+Expected: エラーなし（`WakeLockSentinel`/`navigator.wakeLock` は lib.dom 由来）。
+
+- [ ] **Step 6: コミット**
+
+```bash
+git add apps/signage/src/lib
+git commit -m "feat(signage): add time utils (now override, useNow, jst/mmss) and wake lock hook"
+```
+
+---
+
+## Task 6: チャイム音（Web Audio 合成）`chimes.ts`
+
+**Files:**
+- Create: `apps/signage/src/lib/chimes.ts`
+
+- [ ] **Step 1: 実装**
+
+Create `apps/signage/src/lib/chimes.ts`:
+
+```ts
+import type { ChimeKind } from '@tecnova/shared/activity-cycle';
+
+// 単一の AudioContext を使い回す（ブラウザは同時 context 数を制限するため）。
+let ctx: AudioContext | null = null;
+
+const getCtx = (): AudioContext => {
+  if (!ctx) ctx = new AudioContext();
+  return ctx;
+};
+
+// 起動タップ内で呼ぶ。自動再生制約を解放する。
+export const resumeAudio = async (): Promise<void> => {
+  const c = getCtx();
+  if (c.state !== 'running') await c.resume();
+};
+
+// suspended に戻っていれば再開（OS スリープ後・タブ復帰時）。
+export const ensureAudioRunning = async (): Promise<void> => {
+  if (ctx && ctx.state !== 'running') await ctx.resume();
+};
+
+const tone = (
+  c: AudioContext,
+  freq: number,
+  startAt: number,
+  dur: number,
+  type: OscillatorType,
+): void => {
+  const osc = c.createOscillator();
+  const gain = c.createGain();
+  osc.type = type;
+  osc.frequency.value = freq;
+  // 指数エンベロープでベル風の余韻（0 には到達できないので 0.0001 へ）。
+  gain.gain.setValueAtTime(0.0001, startAt);
+  gain.gain.exponentialRampToValueAtTime(0.5, startAt + 0.02);
+  gain.gain.exponentialRampToValueAtTime(0.0001, startAt + dur);
+  osc.connect(gain).connect(c.destination);
+  osc.start(startAt);
+  osc.stop(startAt + dur + 0.05);
+};
+
+// 種別ごとに音色・音程を変える。
+const PATTERNS: Record<ChimeKind, { freqs: [number, number]; type: OscillatorType; dur: number }> = {
+  resume: { freqs: [784, 988], type: 'sine', dur: 0.7 }, // 上行＝再開
+  break: { freqs: [988, 784], type: 'sine', dur: 0.8 }, // 下行＝休憩（キンコン）
+  'term-end': { freqs: [880, 587], type: 'triangle', dur: 1.2 }, // 長め＝ターム終了
+};
+
+export const playChime = (kind: ChimeKind): void => {
+  const c = getCtx();
+  if (c.state !== 'running') return; // 解放前は鳴らさない
+  const { freqs, type, dur } = PATTERNS[kind];
+  const t = c.currentTime + 0.02;
+  tone(c, freqs[0], t, dur, type);
+  tone(c, freqs[1], t + 0.45, dur, type);
+};
+```
+
+- [ ] **Step 2: 型チェック**
+
+Run: `pnpm --filter signage type-check`
+Expected: エラーなし。
+
+- [ ] **Step 3: コミット**
+
+```bash
+git add apps/signage/src/lib/chimes.ts
+git commit -m "feat(signage): synthesize chime tones via Web Audio"
+```
+
+---
+
+## Task 7: チャイムスケジューラ `use-chime-scheduler.ts`
+
+**Files:**
+- Create: `apps/signage/src/lib/use-chime-scheduler.ts`
+
+- [ ] **Step 1: 実装（自己補正 setTimeout ＋ key dedup）**
+
+Create `apps/signage/src/lib/use-chime-scheduler.ts`:
+
+```ts
+'use client';
+
+import { type ChimeEvent, cycleChimeEventsForDay } from '@tecnova/shared/activity-cycle';
+import { useEffect, useRef } from 'react';
+
+interface Args {
+  enabled: boolean; // 音声解放済みか（起動タップ後）
+  isTermActive: (term: ChimeEvent['term']) => boolean; // 稼働判定
+  onChime: (event: ChimeEvent) => void; // 発火時の副作用（playChime 等）
+  getNow: () => Date;
+}
+
+// 壁時計の :00/:50 等の境界でちょうど発火させる。setInterval は使わず、毎 tick
+// Date から次境界までの遅延を再計算する（ドリフトしない）。key で二重発火を防ぐ。
+export const useChimeScheduler = ({ enabled, isTermActive, onChime, getNow }: Args): void => {
+  const isActiveRef = useRef(isTermActive);
+  const onChimeRef = useRef(onChime);
+  const getNowRef = useRef(getNow);
+  isActiveRef.current = isTermActive;
+  onChimeRef.current = onChime;
+  getNowRef.current = getNow;
+
+  useEffect(() => {
+    if (!enabled) return;
+    const fired = new Set<string>();
+    let last = getNowRef.current().getTime();
+    let timer = 0;
+
+    const tick = (): void => {
+      const now = getNowRef.current().getTime();
+      const events = cycleChimeEventsForDay(new Date(now));
+      for (const e of events) {
+        const at = e.at.getTime();
+        if (at > last && at <= now && !fired.has(e.key)) {
+          fired.add(e.key);
+          if (isActiveRef.current(e.term)) onChimeRef.current(e);
+        }
+      }
+      last = now;
+      const nextAt = events
+        .map((e) => e.at.getTime())
+        .filter((t) => t > now)
+        .sort((a, b) => a - b)[0];
+      const delay = nextAt === undefined ? 1000 : Math.min(1000, Math.max(50, nextAt - now));
+      timer = window.setTimeout(tick, delay);
+    };
+
+    const onVisible = (): void => {
+      if (document.visibilityState === 'visible') {
+        window.clearTimeout(timer);
+        tick();
+      }
+    };
+
+    timer = window.setTimeout(tick, 0);
+    document.addEventListener('visibilitychange', onVisible);
+    return () => {
+      window.clearTimeout(timer);
+      document.removeEventListener('visibilitychange', onVisible);
+    };
+  }, [enabled]);
+};
+```
+
+- [ ] **Step 2: 型チェック**
+
+Run: `pnpm --filter signage type-check`
+Expected: エラーなし。
+
+- [ ] **Step 3: コミット**
+
+```bash
+git add apps/signage/src/lib/use-chime-scheduler.ts
+git commit -m "feat(signage): drift-free chime scheduler with per-boundary dedupe"
+```
+
+---
+
+## Task 8: ライブデータ取得 `use-signage-data.ts`
+
+**Files:**
+- Create: `apps/signage/src/lib/use-signage-data.ts`
+
+- [ ] **Step 1: 実装（`/api/sessions/today` をポーリングしターム別に集計）**
+
+Create `apps/signage/src/lib/use-signage-data.ts`:
+
+```ts
+'use client';
+
+import type { TermId } from '@tecnova/shared/venue-schedule';
+import type { TodaySessionsResponse } from '@tecnova/shared/schemas';
+import { apiJson } from '@tecnova/ui/lib/api-client';
+import { useEffect, useState } from 'react';
+
+export interface SignageData {
+  currentlyPresent: number;
+  totalCheckedIn: number;
+  termCounts: Record<TermId, number>;
+}
+
+const EMPTY: SignageData = {
+  currentlyPresent: 0,
+  totalCheckedIn: 0,
+  termCounts: { morning: 0, afternoon: 0, evening: 0 },
+};
+
+const POLL_MS = 20_000;
+
+// 認証付き /api/sessions/today を ~20秒間隔で取得。ターム別 checkedIn は
+// sessions[].term の件数（累計＝ターム終了まで sticky）。失敗時は直近値を保持。
+export const useSignageData = (): SignageData => {
+  const [data, setData] = useState<SignageData>(EMPTY);
+
+  useEffect(() => {
+    let active = true;
+    const load = async (): Promise<void> => {
+      try {
+        const res = await apiJson<TodaySessionsResponse>('/api/sessions/today');
+        if (!active) return;
+        const termCounts: Record<TermId, number> = { morning: 0, afternoon: 0, evening: 0 };
+        for (const s of res.sessions) {
+          if (s.term) termCounts[s.term] += 1;
+        }
+        setData({
+          currentlyPresent: res.summary.currentlyPresent,
+          totalCheckedIn: res.summary.totalCheckedIn,
+          termCounts,
+        });
+      } catch {
+        // ネットワーク不達時は直近値を維持（degrade）。
+      }
+    };
+    void load();
+    const id = window.setInterval(() => void load(), POLL_MS);
+    return () => {
+      active = false;
+      window.clearInterval(id);
+    };
+  }, []);
+
+  return data;
+};
+```
+
+- [ ] **Step 2: 型チェック**
+
+Run: `pnpm --filter signage type-check`
+Expected: エラーなし（`TodaySessionsResponse` は `@tecnova/shared/schemas` からエクスポート済み）。
+
+- [ ] **Step 3: コミット**
+
+```bash
+git add apps/signage/src/lib/use-signage-data.ts
+git commit -m "feat(signage): poll /api/sessions/today and derive per-term counts"
+```
+
+---
+
+## Task 9: 動画プレイリスト ＋ Stage（動画レイヤ）
+
+**Files:**
+- Create: `apps/signage/src/config/playlist.ts`
+- Create: `apps/signage/src/components/stage.tsx`
+
+- [ ] **Step 1: プレイリスト設定**
+
+Create `apps/signage/src/config/playlist.ts`:
+
+```ts
+export interface VideoItem {
+  src: string;
+  type?: string;
+}
+
+// 動画はリポジトリに置かず、self-host/CDN の URL を列挙する。差し替えは本ファイル＋再デプロイ。
+// 例（実URLに差し替える）:
+//   { src: 'https://cdn.example.com/signage/intro.mp4', type: 'video/mp4' },
+// 空配列のままだと Stage は背景色のみを表示する。
+export const PLAYLIST: VideoItem[] = [];
+```
+
+- [ ] **Step 2: Stage（動画は常時マウント・active で再生/停止、unmuted で音声）**
+
+Create `apps/signage/src/components/stage.tsx`:
+
+```tsx
+'use client';
+
+import { useEffect, useRef } from 'react';
+import { PLAYLIST } from '@/config/playlist';
+
+interface Props {
+  active: boolean; // 活動フェーズ中のみ再生
+  unmuted: boolean; // 起動タップ後に音声ON
+}
+
+export function Stage({ active, unmuted }: Props) {
+  const ref = useRef<HTMLVideoElement>(null);
+  const indexRef = useRef(0);
+
+  // React は muted を DOM に確実に反映しないため ref 経由で設定する。
+  useEffect(() => {
+    const v = ref.current;
+    if (v) v.muted = !unmuted;
+  }, [unmuted]);
+
+  useEffect(() => {
+    const v = ref.current;
+    if (!v) return;
+    if (active) void v.play().catch(() => {});
+    else v.pause();
+  }, [active]);
+
+  const handleEnded = (): void => {
+    const v = ref.current;
+    if (!v || PLAYLIST.length <= 1) return;
+    indexRef.current = (indexRef.current + 1) % PLAYLIST.length;
+    const next = PLAYLIST[indexRef.current];
+    if (!next) return;
+    v.src = next.src;
+    void v.play().catch(() => {});
+  };
+
+  const first = PLAYLIST[0];
+
+  return (
+    <video
+      ref={ref}
+      className="absolute inset-0 h-full w-full bg-slate-950 object-cover"
+      playsInline
+      autoPlay
+      muted
+      loop={PLAYLIST.length === 1}
+      onEnded={handleEnded}
+      src={first?.src}
+    />
+  );
+}
+```
+
+- [ ] **Step 3: 型チェック**
+
+Run: `pnpm --filter signage type-check`
+Expected: エラーなし。
+
+- [ ] **Step 4: コミット**
+
+```bash
+git add apps/signage/src/config/playlist.ts apps/signage/src/components/stage.tsx
+git commit -m "feat(signage): playlist config and video stage layer"
+```
+
+---
+
+## Task 10: 表示コンポーネント（info-bar / break-screen / idle-screen / tap-to-start）
+
+**Files:**
+- Create: `apps/signage/src/components/info-bar.tsx`
+- Create: `apps/signage/src/components/break-screen.tsx`
+- Create: `apps/signage/src/components/idle-screen.tsx`
+- Create: `apps/signage/src/components/tap-to-start.tsx`
+
+- [ ] **Step 1: InfoBar（活動中の上部バー）**
+
+Create `apps/signage/src/components/info-bar.tsx`:
+
+```tsx
+'use client';
+
+import { TERM_LABELS, type TermId } from '@tecnova/shared/venue-schedule';
+import { jstHm, mmss } from '@/lib/time';
+
+interface Props {
+  term: TermId;
+  now: Date;
+  present: number;
+  secondsToBreak: number | null;
+}
+
+export function InfoBar({ term, now, present, secondsToBreak }: Props) {
+  return (
+    <div className="absolute inset-x-0 top-0 z-10 flex items-center gap-4 bg-slate-950/55 px-6 py-3 text-white backdrop-blur">
+      <span className="rounded-full bg-amber-400 px-3 py-0.5 text-sm font-extrabold text-slate-900">
+        {TERM_LABELS[term]}の部
+      </span>
+      <span className="text-2xl font-extrabold tabular-nums">{jstHm(now)}</span>
+      {secondsToBreak !== null && (
+        <span className="text-base text-slate-200">休憩まで {mmss(secondsToBreak)}</span>
+      )}
+      <span className="ml-auto text-base text-slate-200">
+        在館 <span className="text-xl font-extrabold">{present}</span> 人
+      </span>
+    </div>
+  );
+}
+```
+
+- [ ] **Step 2: BreakScreen（休憩中・カウントダウン主役、クロスフェード）**
+
+Create `apps/signage/src/components/break-screen.tsx`:
+
+```tsx
+'use client';
+
+import { mmss } from '@/lib/time';
+
+interface Props {
+  show: boolean;
+  secondsToResume: number | null;
+  present: number;
+}
+
+// 動画レイヤの上に重ね、opacity でクロスフェード。動画は裏で再生継続（再読込フラッシュ防止）。
+// prefers-reduced-motion 時は globals 側のトランジション無効化に委ねつつ、ここでも duration を短縮。
+export function BreakScreen({ show, secondsToResume, present }: Props) {
+  return (
+    <div
+      className={`absolute inset-0 z-20 flex flex-col items-center justify-center gap-6 bg-slate-950 text-white transition-opacity duration-500 motion-reduce:transition-none ${
+        show ? 'opacity-100' : 'pointer-events-none opacity-0'
+      }`}
+    >
+      <p className="text-3xl font-extrabold text-amber-300">休憩中</p>
+      <p className="text-[10rem] font-black leading-none tabular-nums">
+        {secondsToResume !== null ? mmss(secondsToResume) : '--:--'}
+      </p>
+      <p className="text-2xl text-slate-300">再開までの時間</p>
+      <p className="text-lg text-slate-400">
+        在館 <span className="font-extrabold text-slate-200">{present}</span> 人
+      </p>
+    </div>
+  );
+}
+```
+
+- [ ] **Step 3: IdleScreen（待機・営業時間外／稼働前）**
+
+Create `apps/signage/src/components/idle-screen.tsx`:
+
+```tsx
+'use client';
+
+import { jstHm } from '@/lib/time';
+
+interface Props {
+  show: boolean;
+  soon: boolean; // ターム内だが未稼働（初回チェックイン前）＝「まもなく開始」
+  now: Date;
+  nextStartAt: Date | null; // 次の活動開始（境界）。ターム外のときのみ算出。
+  present: number;
+}
+
+export function IdleScreen({ show, soon, now, nextStartAt, present }: Props) {
+  return (
+    <div
+      className={`absolute inset-0 z-20 flex flex-col items-center justify-center gap-6 bg-slate-950 text-white transition-opacity duration-500 motion-reduce:transition-none ${
+        show ? 'opacity-100' : 'pointer-events-none opacity-0'
+      }`}
+    >
+      <p className="text-5xl font-black tracking-wide">tec-nova Nagasaki</p>
+      <p className="text-6xl font-extrabold tabular-nums">{jstHm(now)}</p>
+      <p className="text-2xl text-slate-300">
+        {soon
+          ? 'まもなく開始'
+          : nextStartAt
+            ? `次は ${jstHm(nextStartAt)} から`
+            : '本日は終了しました'}
+      </p>
+      {present > 0 && <p className="text-lg text-slate-400">在館 {present} 人</p>}
+    </div>
+  );
+}
+```
+
+- [ ] **Step 4: TapToStart（音声解放ゲート）**
+
+Create `apps/signage/src/components/tap-to-start.tsx`:
+
+```tsx
+'use client';
+
+interface Props {
+  onStart: () => void;
+}
+
+export function TapToStart({ onStart }: Props) {
+  return (
+    <button
+      type="button"
+      onClick={onStart}
+      className="absolute inset-0 z-30 flex flex-col items-center justify-center gap-4 bg-slate-950 text-white"
+    >
+      <span className="text-6xl">▶</span>
+      <span className="text-3xl font-extrabold">タップして開始</span>
+      <span className="text-base text-slate-400">音声と全画面表示を有効にします</span>
+    </button>
+  );
+}
+```
+
+- [ ] **Step 5: 型チェック**
+
+Run: `pnpm --filter signage type-check`
+Expected: エラーなし。
+
+- [ ] **Step 6: コミット**
+
+```bash
+git add apps/signage/src/components
+git commit -m "feat(signage): info-bar, break/idle screens, tap-to-start overlay"
+```
+
+---
+
+## Task 11: 状態機械の結線 `page.tsx`
+
+**Files:**
+- Modify: `apps/signage/src/app/page.tsx`
+
+- [ ] **Step 1: 本体を実装（暫定プレースホルダを置き換え）**
+
+Replace `apps/signage/src/app/page.tsx` の全内容:
+
+```tsx
+'use client';
+
+import {
+  type ChimeEvent,
+  classifyCycleMoment,
+  msUntilNextBoundary,
+} from '@tecnova/shared/activity-cycle';
+import { useCallback, useEffect, useState } from 'react';
+import { BreakScreen } from '@/components/break-screen';
+import { IdleScreen } from '@/components/idle-screen';
+import { InfoBar } from '@/components/info-bar';
+import { Stage } from '@/components/stage';
+import { TapToStart } from '@/components/tap-to-start';
+import { ensureAudioRunning, playChime, resumeAudio } from '@/lib/chimes';
+import { getNow } from '@/lib/now';
+import { useChimeScheduler } from '@/lib/use-chime-scheduler';
+import { useNow } from '@/lib/use-now';
+import { useSignageData } from '@/lib/use-signage-data';
+import { useWakeLock } from '@/lib/use-wake-lock';
+
+export default function SignagePage() {
+  const [started, setStarted] = useState(false);
+  const now = useNow(1000);
+  const data = useSignageData();
+  const moment = classifyCycleMoment(now);
+
+  const isTermActive = useCallback(
+    (term: 'morning' | 'afternoon' | 'evening') => data.termCounts[term] > 0,
+    [data.termCounts],
+  );
+
+  // 現タームが稼働中（初回チェックイン済み）なら moment.phase、未稼働/ターム外は idle。
+  const active = moment.term !== null && isTermActive(moment.term);
+  const phase = active ? moment.phase : 'idle';
+
+  useWakeLock(started);
+
+  const onChime = useCallback((e: ChimeEvent) => {
+    playChime(e.kind);
+  }, []);
+  useChimeScheduler({ enabled: started, isTermActive, onChime, getNow });
+
+  // タブ復帰時に AudioContext が suspended に戻っていれば再開する（spec §6）。
+  useEffect(() => {
+    if (!started) return;
+    const onVisible = (): void => {
+      if (document.visibilityState === 'visible') void ensureAudioRunning();
+    };
+    document.addEventListener('visibilitychange', onVisible);
+    return () => document.removeEventListener('visibilitychange', onVisible);
+  }, [started]);
+
+  const handleStart = async (): Promise<void> => {
+    await resumeAudio();
+    try {
+      await document.documentElement.requestFullscreen?.();
+    } catch {
+      // 全画面はベストエフォート（dev では拒否されうる）。
+    }
+    setStarted(true);
+  };
+
+  // フェーズ終端までの秒（活動→休憩 / 休憩→再開）。
+  const phaseSecondsLeft =
+    moment.phaseEndsAt === null
+      ? null
+      : Math.ceil((moment.phaseEndsAt.getTime() - now.getTime()) / 1000);
+
+  // idle の理由を区別：ターム内・未稼働なら「まもなく開始」、ターム外なら次タームの開始時刻。
+  const inUnstartedTerm = moment.term !== null && !active;
+  // 次の活動開始（次境界＝次タームの resume）はターム外のときだけ算出する
+  // （ターム内・未稼働で算出すると次境界が break になり「次は HH:MM から」が誤表示になるため）。
+  const msNext = moment.term === null ? msUntilNextBoundary(now) : null;
+  const nextStartAt = msNext === null ? null : new Date(now.getTime() + msNext);
+
+  return (
+    <main className="relative h-svh w-screen overflow-hidden bg-slate-950 text-white">
+      <Stage active={started && phase === 'activity'} unmuted={started} />
+
+      {phase === 'activity' && moment.term && (
+        <InfoBar
+          term={moment.term}
+          now={now}
+          present={data.currentlyPresent}
+          secondsToBreak={phaseSecondsLeft}
+        />
+      )}
+
+      <BreakScreen
+        show={phase === 'break'}
+        secondsToResume={phaseSecondsLeft}
+        present={data.currentlyPresent}
+      />
+
+      <IdleScreen
+        show={phase === 'idle'}
+        soon={inUnstartedTerm}
+        now={now}
+        nextStartAt={nextStartAt}
+        present={data.currentlyPresent}
+      />
+
+      {!started && <TapToStart onStart={handleStart} />}
+    </main>
+  );
+}
+```
+
+- [ ] **Step 2: 型チェック**
+
+Run: `pnpm --filter signage type-check`
+Expected: エラーなし。
+
+- [ ] **Step 3: 手動 E2E（時刻上書きで全状態を確認）**
+
+Run: `pnpm --filter signage dev` ＋ api 起動 ＋ ログイン済み。
+確認（`?now=` で擬似時刻、ローカル D1 に当日セッションを1件入れて稼働させる）:
+- `http://localhost:3002/?now=2026-05-30T09:30:00` → 「タップして開始」→ 当該タームに当日チェックインがあれば activity（動画＋情報バー「休憩まで …」）。チェックインが無ければ idle で「**まもなく開始**」（「次は …から」ではない）になることを確認。
+- `?now=2026-05-30T09:49:50` → 数秒後に :50 へ → break 画面にクロスフェード＋休憩チャイム。
+- `?now=2026-05-30T09:59:50` → :00 で activity に戻り再開チャイム。
+- `?now=2026-05-30T12:30:00` → idle（「次は 13:00 から」）。
+- OS/ブラウザの reduce-motion をON → クロスフェードが瞬時切替になることを確認。
+Expected: 各状態遷移とチャイムが設計通り。
+
+- [ ] **Step 4: 全体型チェック＆Lint**
+
+Run: `pnpm type-check`
+Run: `pnpm biome check .`
+Expected: いずれもエラーなし（必要なら `pnpm biome check --write .` で整形）。
+
+- [ ] **Step 5: コミット**
+
+```bash
+git add apps/signage/src/app/page.tsx
+git commit -m "feat(signage): wire phase state machine (video/break/idle + chimes)"
+```
+
+---
+
+## Task 12: ドキュメント（アプリ docs ＋ architecture 追記）
+
+**Files:**
+- Create: `apps/signage/AGENTS.md`
+- Create: `apps/signage/CLAUDE.md`
+- Modify: `docs/architecture.md`
+
+- [ ] **Step 1: `AGENTS.md`（checkin と同一）**
+
+Create `apps/signage/AGENTS.md`:
+
+```markdown
+# This is NOT the Next.js you know
+
+This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` before writing any code. Heed deprecation notices.
+```
+
+- [ ] **Step 2: `CLAUDE.md`**
+
+Create `apps/signage/CLAUDE.md`:
+
+```markdown
+@AGENTS.md
+
+# signage（会場サイネージ / 大型モニター・キオスク）
+
+- **Next.js 16 / React 19**。App Router の API がトレーニングデータと乖離しているため、実装前に `node_modules/next/dist/docs/` を確認すること。
+- **dev ポート**: `3002`（`next dev --port 3002`）。api は `8787`、checkin は `3000`、admin は `3001`。
+- **認証あり**: checkin/admin と同じメンター・ホワイトリスト（`MeProvider`/`auth-client`）。運用は**テクノバ共有の管理用 Google アカウント**で1回ログイン（セッション既定7日）。`useMe` はツリー内に `MeProvider` 必須。
+- **データ**: 認証付き `GET /api/sessions/today` を再利用（新規エンドポイントなし）。ターム別チェックイン数は `sessions[].term` から算出し、**現タームに当日チェックインが入った時点で稼働開始**（ターム終了まで sticky）。
+- **時刻ロジック**: `@tecnova/shared/activity-cycle`（50分活動/10分休憩・チャイム時刻）。表示の時刻上書きは `?now=ISO`（手動検証用）。
+- **動画**: `src/config/playlist.ts` に URL を列挙（リポジトリにバイナリを置かない）。
+- **キオスク**: 横向き・フルスクリーン。起動時「タップして開始」で音声/全画面/wake lock を解放（ブラウザの自動再生制約）。本番は Chromium を `--kiosk` 等で起動。
+- **必須 env**: `NEXT_PUBLIC_API_URL`（未設定時 `http://localhost:8787`）。API 側 `TRUSTED_ORIGINS` にサイネージ origin（dev: `http://localhost:3002`、本番ドメイン）を登録すること。
+- 新しい `@tecnova/*` パッケージを使うときは `next.config.ts` の `transpilePackages` に追加。
+```
+
+- [ ] **Step 3: `docs/architecture.md` にサイネージを追記**
+
+`docs/architecture.md` のフロントエンドアプリ一覧（`apps checkin` / `apps admin` などが並ぶ箇所）に、認証ありの新規アプリとして `apps signage`（会場サイネージ・大型モニター・メンター認証・`/api/sessions/today` 再利用・`activity-cycle` 連動）を、既存エントリと同じ記法で1行追加する。拡張ロードマップ側にも一文（サイネージ＝Phase 拡張で追加、機微コンテンツは同じ認証配下で拡張予定）を加える。
+
+- [ ] **Step 4: Lint**
+
+Run: `pnpm biome check .`
+Expected: エラーなし。
+
+- [ ] **Step 5: コミット**
+
+```bash
+git add apps/signage/AGENTS.md apps/signage/CLAUDE.md docs/architecture.md
+git commit -m "docs(signage): add app CLAUDE.md/AGENTS.md and architecture entry"
+```
+
+---
+
+## 動作確認サマリ（全タスク後）
+
+1. `pnpm --filter @tecnova/shared test` … activity-cycle の単体テスト green。
+2. `pnpm type-check` … 全 workspace 型エラーなし。
+3. `pnpm biome check .` … lint/format クリーン。
+4. `pnpm dev` 後、`http://localhost:3002` で：未ログイン→/login→共有アカウントでログイン→「タップして開始」→ `?now=` で activity/break/idle 遷移とチャイムを確認。
+5. 実機キオスク：音付き動画・wake lock・全画面、タブ復帰で音声復帰、セッション維持（再読込でログイン不要）を確認。
+
+## 留意点（spec §9 由来）
+
+- 端末ローカル時計依存（NTP 同期推奨）。
+- セッション既定7日（長期運用は `apps/api/src/lib/auth.ts` に `session.expiresIn` 追加で延長可）。
+- 稼働判定はポーリング間隔（~20秒）分のラグあり。:50 直前の初チェックインは当該休憩チャイムを逃しうる（許容）。
+- v1 は `/api/sessions/today` の PII を画面に出さない。将来の機微コンテンツは同じ認証配下の新エンドポイントで。
+- 起動タップ後の動画 unmute/再生は React effect 経由（タップと同一ジェスチャ内の同期呼び出しではない）。ページの sticky activation ＋ キオスクの autoplay policy で実用上は問題なし。非キオスクの素のブラウザで初回 unmuted 再生がブロックされた場合は Stage の muted フォールバック（`play()` 失敗を握る）に依存する。より厳密にするなら handleStart 内で video へ imperative に `muted=false; play()` してから `setStarted(true)` する。
+```
+

From 0465973771dda4b630fc97b88e3d18ac0408452a Mon Sep 17 00:00:00 2001
From: tmba <ut42.nu@gmail.com>
Date: Sat, 30 May 2026 00:52:32 +0900
Subject: [PATCH 04/11] fix: add missing tailwindCSS lint configuration to
 settings

---
 .vscode/settings.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index d35e09e..2d31296 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -2,5 +2,6 @@
   "js/ts.preferences.importModuleSpecifier": "non-relative",
   "files.associations": {
     "*.css": "tailwindcss"
-  }
+  },
+  "tailwindCSS.lint.suggestCanonicalClasses": "ignore"
 }

From e51942089f13e9070b8f45e7fa3d013800f0603c Mon Sep 17 00:00:00 2001
From: tmba <ut42.nu@gmail.com>
Date: Sat, 30 May 2026 02:02:54 +0900
Subject: [PATCH 05/11] docs: add checkin redesign spec and plan

Spec and task-by-task plan for elevating the checkin screens with a shared motion vocabulary.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../plans/2026-05-29-checkin-redesign.md      | 1109 +++++++++++++++++
 .../2026-05-29-checkin-redesign-design.md     |  181 +++
 2 files changed, 1290 insertions(+)
 create mode 100644 docs/superpowers/plans/2026-05-29-checkin-redesign.md
 create mode 100644 docs/superpowers/specs/2026-05-29-checkin-redesign-design.md

diff --git a/docs/superpowers/plans/2026-05-29-checkin-redesign.md b/docs/superpowers/plans/2026-05-29-checkin-redesign.md
new file mode 100644
index 0000000..cfd0256
--- /dev/null
+++ b/docs/superpowers/plans/2026-05-29-checkin-redesign.md
@@ -0,0 +1,1109 @@
+# checkin リデザイン Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** プロフィール画面の motion + Cohesive Elevation 語彙を `apps/checkin` の残り 7 画面へ統一展開し、各高インパクト画面に 1 つのシグネチャーモーメントを与える。
+
+**Architecture:** 先に再利用プリミティブ（motion 定数 / `Reveal` / `StatTile` / `LiveDot` / `PageShell`）を `apps/checkin/src/components` と `src/lib` に用意し、Home を実機ディレクションスライスとして組んで承認を取る。承認後、確定した語彙を残り 6 画面へ展開し、デザイン整合性の敵対的レビューを通す。視覚回帰防止のためプロフィール画面と `AppShell` は触らない。
+
+**Tech Stack:** Next.js 16 (App Router) / React 19 / `motion`（`motion/react`）/ Tailwind v4 / shadcn(`@tecnova/ui`) / `@tabler/icons-react` / Biome / TypeScript strict。
+
+**設計書:** `docs/superpowers/specs/2026-05-29-checkin-redesign-design.md`
+
+**検証パターン（全タスク共通）:**
+- 型: `pnpm type-check`
+- Lint/format: `pnpm biome check --write apps/checkin`
+- 目視: `pnpm --filter checkin dev` → 該当画面 + reduced-motion（OS 設定 ON）を確認
+
+**重要な制約:**
+- App Router API を触る箇所（`useSearchParams` / `Suspense` / metadata 等）は実装前に `node_modules/next/dist/docs/` を確認（`apps/checkin/AGENTS.md`）。
+- モーションは必ず `useReducedMotion()` でゲート。transform/opacity のみ。
+- プロフィール画面 `src/app/reception/participants/[id]/page.tsx` と `src/components/app-shell.tsx` は変更しない。
+
+---
+
+## ファイル構成（新規 / 変更）
+
+**新規（プリミティブ）**
+- `apps/checkin/src/lib/motion.ts` — モーション定数・transition ファクトリ
+- `apps/checkin/src/components/reveal.tsx` — フェードアップ入場ラッパ
+- `apps/checkin/src/components/stat-tile.tsx` — 数値タイル
+- `apps/checkin/src/components/live-dot.tsx` — 脈動プレゼンスドット
+- `apps/checkin/src/components/page-shell.tsx` — グラデーション地 `<main>`
+
+**新規（画面固有シグネチャー）**
+- `apps/checkin/src/components/scan-reticle.tsx` — Home の QR スキャン演出
+- `apps/checkin/src/components/segmented-control.tsx` — Manual のモード切替
+
+**変更（7 画面）**
+- `src/app/page.tsx`（Home）/ `login/page.tsx` / `manual/page.tsx` / `first-time/page.tsx` / `guideline/page.tsx` / `history/page.tsx` / `settings/page.tsx`
+
+---
+
+## Phase 0 — 準備
+
+### Task 0: フィーチャーブランチ作成
+
+- [ ] **Step 1: develop から作業ブランチを切る**
+
+```bash
+git checkout develop
+git pull --ff-only
+git checkout -b feat/checkin-redesign
+```
+
+- [ ] **Step 2: 起点を確認**
+
+Run: `git status && git log --oneline -1`
+Expected: クリーン、`develop` 先端から分岐。
+
+---
+
+## Phase 1 — 共有プリミティブ
+
+### Task 1: モーション定数モジュール
+
+**Files:**
+- Create: `apps/checkin/src/lib/motion.ts`
+
+- [ ] **Step 1: 定数とファクトリを実装**
+
+```ts
+import type { Transition } from 'motion/react';
+
+// 入場・小要素演出のイージングは全画面でこの値に統一する（プロフィール画面と同値）。
+const EASE_OUT = 'easeOut' as const;
+
+// セクション/カードのフェードアップ入場。
+export const revealInitial = { opacity: 0, y: 12 } as const;
+export const revealAnimate = { opacity: 1, y: 0 } as const;
+export const REVEAL_STAGGER_STEP = 0.06;
+export const revealTransition = (index = 0): Transition => ({
+  duration: 0.4,
+  ease: EASE_OUT,
+  delay: index * REVEAL_STAGGER_STEP,
+});
+
+// 主要ボタンの押下フィードバック。
+export const tapScale = { scale: 0.97 } as const;
+
+// タイル/小要素のポップ（来場ヒートマップと同値）。スタッガーは間延びしないよう頭打ち。
+export const popInitial = { opacity: 0, scale: 0.6 } as const;
+export const popAnimate = { opacity: 1, scale: 1 } as const;
+export const POP_STAGGER_STEP = 0.012;
+export const POP_STAGGER_MAX = 0.5;
+export const popTransition = (index = 0): Transition => ({
+  duration: 0.25,
+  ease: EASE_OUT,
+  delay: Math.min(index * POP_STAGGER_STEP, POP_STAGGER_MAX),
+});
+
+// 検索結果・候補・履歴行など、行数が多いリスト向けの大きめスタッガー。
+export const LIST_STAGGER_STEP = 0.04;
+export const LIST_STAGGER_MAX = 0.4;
+export const listItemTransition = (index = 0): Transition => ({
+  duration: 0.3,
+  ease: EASE_OUT,
+  delay: Math.min(index * LIST_STAGGER_STEP, LIST_STAGGER_MAX),
+});
+```
+
+- [ ] **Step 2: 型チェック**
+
+Run: `pnpm type-check`
+Expected: PASS（エラーなし）。
+
+- [ ] **Step 3: commit**
+
+```bash
+git add apps/checkin/src/lib/motion.ts
+git commit -m "feat(checkin): add shared motion constants"
+```
+
+### Task 2: Reveal コンポーネント
+
+**Files:**
+- Create: `apps/checkin/src/components/reveal.tsx`
+
+- [ ] **Step 1: 実装**
+
+```tsx
+'use client';
+
+import { motion, useReducedMotion } from 'motion/react';
+import type { ReactNode } from 'react';
+import { revealAnimate, revealInitial, revealTransition } from '@/lib/motion';
+
+// 子をフェードアップで入場させる薄いラッパ。index でスタッガーをずらす。
+// prefers-reduced-motion 時は initial を無効化して即表示する。
+export function Reveal({
+  index = 0,
+  className,
+  children,
+}: {
+  index?: number;
+  className?: string;
+  children: ReactNode;
+}) {
+  const prefersReduced = useReducedMotion();
+  return (
+    <motion.div
+      className={className}
+      initial={prefersReduced ? false : revealInitial}
+      animate={revealAnimate}
+      transition={revealTransition(index)}
+    >
+      {children}
+    </motion.div>
+  );
+}
+```
+
+- [ ] **Step 2: 型チェック + lint**
+
+Run: `pnpm type-check && pnpm biome check --write apps/checkin/src/components/reveal.tsx`
+Expected: PASS。
+
+- [ ] **Step 3: commit**
+
+```bash
+git add apps/checkin/src/components/reveal.tsx
+git commit -m "feat(checkin): add Reveal entrance wrapper"
+```
+
+### Task 3: StatTile コンポーネント
+
+**Files:**
+- Create: `apps/checkin/src/components/stat-tile.tsx`
+
+- [ ] **Step 1: 実装**
+
+```tsx
+import { cn } from '@tecnova/ui/lib/utils';
+import type { ReactNode } from 'react';
+
+type StatTone = 'neutral' | 'emerald';
+
+// 集計値タイル。value は ReactNode（AnimatedNumber + 単位サフィックス等）を想定。
+export function StatTile({
+  label,
+  value,
+  icon,
+  tone = 'neutral',
+  className,
+}: {
+  label: ReactNode;
+  value: ReactNode;
+  icon?: ReactNode;
+  tone?: StatTone;
+  className?: string;
+}) {
+  const isEmerald = tone === 'emerald';
+  return (
+    <div
+      className={cn(
+        'rounded-lg p-4',
+        isEmerald ? 'border border-emerald-200 bg-emerald-50' : 'border bg-white',
+        className,
+      )}
+    >
+      <p
+        className={cn(
+          'flex items-center gap-1.5 text-sm font-bold',
+          isEmerald ? 'text-emerald-700' : 'text-muted-foreground',
+        )}
+      >
+        {icon}
+        {label}
+      </p>
+      <p
+        className={cn(
+          'mt-2 break-words text-4xl font-black leading-tight tabular-nums',
+          isEmerald && 'text-emerald-700',
+        )}
+      >
+        {value}
+      </p>
+    </div>
+  );
+}
+```
+
+- [ ] **Step 2: 型チェック + lint**
+
+Run: `pnpm type-check && pnpm biome check --write apps/checkin/src/components/stat-tile.tsx`
+Expected: PASS。
+
+- [ ] **Step 3: commit**
+
+```bash
+git add apps/checkin/src/components/stat-tile.tsx
+git commit -m "feat(checkin): add StatTile component"
+```
+
+### Task 4: LiveDot コンポーネント
+
+**Files:**
+- Create: `apps/checkin/src/components/live-dot.tsx`
+
+- [ ] **Step 1: 実装**
+
+```tsx
+'use client';
+
+import { cn } from '@tecnova/ui/lib/utils';
+import { motion, useReducedMotion } from 'motion/react';
+
+// 滞在中=emerald の脈動、未滞在=slate の静止。プロフィール画面の在席ドットと同じ演出。
+export function LiveDot({ active, className }: { active: boolean; className?: string }) {
+  const prefersReduced = useReducedMotion();
+
+  if (!active) {
+    return (
+      <span className={cn('size-2.5 rounded-full bg-slate-400', className)} aria-hidden="true" />
+    );
+  }
+
+  return (
+    <motion.span
+      className={cn('size-2.5 rounded-full bg-emerald-500', className)}
+      animate={prefersReduced ? undefined : { scale: [1, 1.35, 1], opacity: [1, 0.5, 1] }}
+      transition={
+        prefersReduced
+          ? undefined
+          : { duration: 2, repeat: Number.POSITIVE_INFINITY, ease: 'easeInOut' }
+      }
+      aria-hidden="true"
+    />
+  );
+}
+```
+
+- [ ] **Step 2: 型チェック + lint**
+
+Run: `pnpm type-check && pnpm biome check --write apps/checkin/src/components/live-dot.tsx`
+Expected: PASS。
+
+- [ ] **Step 3: commit**
+
+```bash
+git add apps/checkin/src/components/live-dot.tsx
+git commit -m "feat(checkin): add LiveDot presence indicator"
+```
+
+### Task 5: PageShell コンポーネント
+
+**Files:**
+- Create: `apps/checkin/src/components/page-shell.tsx`
+
+- [ ] **Step 1: 実装**
+
+```tsx
+import { cn } from '@tecnova/ui/lib/utils';
+import type { ReactNode } from 'react';
+
+// 全画面共通のグラデーション地。中央寄せ等は className で上書きする。
+export function PageShell({ children, className }: { children: ReactNode; className?: string }) {
+  return (
+    <main
+      className={cn(
+        'flex flex-1 flex-col bg-gradient-to-b from-sky-50 to-white p-4 sm:p-6',
+        className,
+      )}
+    >
+      {children}
+    </main>
+  );
+}
+```
+
+- [ ] **Step 2: 型チェック + lint**
+
+Run: `pnpm type-check && pnpm biome check --write apps/checkin/src/components/page-shell.tsx`
+Expected: PASS。
+
+- [ ] **Step 3: commit**
+
+```bash
+git add apps/checkin/src/components/page-shell.tsx
+git commit -m "feat(checkin): add PageShell gradient ground"
+```
+
+---
+
+## Phase 2 — Home ディレクションスライス（承認ゲート）
+
+### Task 6: ScanReticle コンポーネント
+
+**Files:**
+- Create: `apps/checkin/src/components/scan-reticle.tsx`
+
+- [ ] **Step 1: 実装**
+
+```tsx
+'use client';
+
+import { motion, useReducedMotion } from 'motion/react';
+
+// 映像枠に重ねる QR スキャン演出。角ブラケット + 上下に走る走査線。
+// pointer-events-none で下のビデオ操作を妨げない。reduced 時は走査線を止めブラケットのみ。
+const CORNER_CLASSES = [
+  'left-0 top-0 rounded-tl-xl border-l-4 border-t-4',
+  'right-0 top-0 rounded-tr-xl border-r-4 border-t-4',
+  'left-0 bottom-0 rounded-bl-xl border-b-4 border-l-4',
+  'right-0 bottom-0 rounded-br-xl border-b-4 border-r-4',
+] as const;
+
+export function ScanReticle() {
+  const prefersReduced = useReducedMotion();
+  return (
+    <div className="pointer-events-none absolute inset-0 flex items-center justify-center p-6 sm:p-10">
+      <div className="relative aspect-square h-full max-h-[72%] max-w-[72%]">
+        {CORNER_CLASSES.map((pos) => (
+          <span key={pos} className={`absolute size-10 border-white/90 ${pos}`} aria-hidden="true" />
+        ))}
+        {!prefersReduced && (
+          <motion.span
+            className="absolute inset-x-2 h-0.5 rounded-full bg-sky-300/90 shadow-[0_0_12px_2px_rgba(125,211,252,0.7)]"
+            initial={{ top: '6%' }}
+            animate={{ top: ['6%', '94%', '6%'] }}
+            transition={{ duration: 3, repeat: Number.POSITIVE_INFINITY, ease: 'easeInOut' }}
+            aria-hidden="true"
+          />
+        )}
+      </div>
+    </div>
+  );
+}
+```
+
+- [ ] **Step 2: 型チェック + lint**
+
+Run: `pnpm type-check && pnpm biome check --write apps/checkin/src/components/scan-reticle.tsx`
+Expected: PASS。
+
+- [ ] **Step 3: commit**
+
+```bash
+git add apps/checkin/src/components/scan-reticle.tsx
+git commit -m "feat(checkin): add ScanReticle QR overlay"
+```
+
+### Task 7: Home 画面の再構成
+
+**Files:**
+- Modify: `apps/checkin/src/app/page.tsx`
+
+- [ ] **Step 1: import を更新**
+
+`@tabler/icons-react` の import から `IconBug` を削除し `IconKeyboard` を追加。あわせて新規コンポーネントを import。
+
+変更後の import 群（先頭付近）:
+
+```tsx
+import {
+  IconArrowRight,
+  IconCamera,
+  IconCameraRotate,
+  IconClipboardCheck,
+  IconKeyboard,
+  IconQrcode,
+  IconRefresh,
+  IconUserPlus,
+} from '@tabler/icons-react';
+import { Button } from '@tecnova/ui/components/button';
+import { Card, CardContent, CardDescription } from '@tecnova/ui/components/card';
+import { BrowserMultiFormatReader, type IScannerControls } from '@zxing/browser';
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import { type ReactNode, useCallback, useEffect, useRef, useState } from 'react';
+import { PageShell } from '@/components/page-shell';
+import { PanelHeader, type PanelTone } from '@/components/panel-header';
+import { Reveal } from '@/components/reveal';
+import { ScanReticle } from '@/components/scan-reticle';
+import { PARTICIPANT_ID_PATTERN, participantProfilePath } from '@/lib/participant-id';
+```
+
+- [ ] **Step 2: `<main>` を PageShell に置換し、レイアウトを Reveal で包む**
+
+`return (` 内の最上位 `<main className="flex flex-1 flex-col bg-sky-50 p-4">` を次へ置換（グラデーション地化）。`<section>` 内の QR カードと右側アクション列をそれぞれ `Reveal` でラップしてスタッガー入場させる。
+
+QR カード（左）: `Reveal index={0}` で包む。アクション列（右の `<div class="grid h-full ...">`）の **各 `ActionPanel` を個別に `Reveal` で包む**（index=1,2,3）と段階的に出る。`ActionPanel` 自身を `Reveal` でラップする形にする：
+
+```tsx
+return (
+  <PageShell>
+    <div className="mx-auto flex w-full max-w-6xl flex-1 flex-col">
+      <section className="grid flex-1 gap-3 lg:grid-cols-[minmax(0,1.55fr)_minmax(320px,0.65fr)]">
+        <Reveal index={0} className="flex">
+          <Card className="flex h-full w-full flex-col border-sky-200 shadow-sm">
+            <PanelHeader
+              icon={<IconQrcode className="size-8" />}
+              title="QRコードをかざしてね"
+              tone="sky"
+            />
+            <CardContent className="flex flex-1 flex-col gap-4">
+              <div className="relative min-h-72 w-full flex-1 overflow-hidden rounded-lg bg-slate-950 lg:h-[clamp(280px,calc(100svh-340px),560px)] lg:flex-none">
+                <video ref={videoRef} className="h-full w-full object-cover" muted playsInline />
+                {!navigatingId && !cameraError && <ScanReticle />}
+                {navigatingId && (
+                  <div className="absolute inset-0 flex flex-col items-center justify-center gap-3 bg-slate-950/85 p-6 text-center text-white">
+                    <IconQrcode className="size-12" aria-hidden="true" />
+                    <p className="text-2xl font-black">プロフィールを開いています</p>
+                    <p className="text-4xl font-black tracking-widest tabular-nums">
+                      {navigatingId}
+                    </p>
+                  </div>
+                )}
+                {cameraError && (
+                  <div className="absolute inset-0 flex items-center justify-center bg-slate-950/85 p-6 text-center text-lg font-bold text-white">
+                    <IconCamera className="mr-3 size-8" aria-hidden="true" />
+                    カメラを起動できませんでした
+                  </div>
+                )}
+              </div>
+              <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="lg"
+                  className="h-12 text-base"
+                  disabled={navigatingId !== null}
+                  onClick={() => setScannerAttempt((attempt) => attempt + 1)}
+                >
+                  <IconRefresh className="size-5" data-icon="inline-start" />
+                  カメラを再起動
+                </Button>
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="lg"
+                  className="h-12 text-base"
+                  disabled={navigatingId !== null}
+                  onClick={() => void switchCamera()}
+                >
+                  <IconCameraRotate className="size-5" data-icon="inline-start" />
+                  カメラ切り替え
+                </Button>
+              </div>
+            </CardContent>
+          </Card>
+        </Reveal>
+
+        <div className="grid h-full gap-2 sm:grid-cols-3 lg:grid-cols-1 lg:grid-rows-3">
+          <ActionPanel
+            index={1}
+            title="初めての人"
+            description="IDカードがない人はこちら。"
+            icon={<IconUserPlus className="size-8" />}
+            tone="emerald"
+            href="/first-time"
+            action="初回登録へ"
+          />
+          <ActionPanel
+            index={2}
+            title="受付りれき"
+            description="今日の受付状況を確認します。"
+            icon={<IconClipboardCheck className="size-8" />}
+            tone="sky"
+            href="/history"
+            action="履歴を見る"
+          />
+          <ActionPanel
+            index={3}
+            title="マニュアル入力"
+            description="QRコードが読めないときはこちら。"
+            icon={<IconKeyboard className="size-8" />}
+            tone="slate"
+            href="/manual"
+            action="入力へ"
+            buttonVariant="outline"
+          />
+        </div>
+      </section>
+    </div>
+  </PageShell>
+);
+```
+
+- [ ] **Step 3: `ActionPanel` に `index` を追加し Reveal で包む**
+
+`ActionPanel` の props 型に `index: number;` を追加し、返り値を `Reveal` でラップ：
+
+```tsx
+function ActionPanel({
+  index,
+  title,
+  description,
+  icon,
+  tone,
+  href,
+  action,
+  buttonVariant = 'default',
+}: {
+  index: number;
+  title: string;
+  description: string;
+  icon: ReactNode;
+  tone: PanelTone;
+  href: string;
+  action: string;
+  buttonVariant?: 'default' | 'outline';
+}) {
+  return (
+    <Reveal index={index} className="flex">
+      <Card size="sm" className="flex h-full w-full flex-col gap-2 py-4 shadow-sm">
+        <PanelHeader icon={icon} title={title} tone={tone} />
+        <CardContent className="flex flex-1 flex-col gap-2">
+          <CardDescription className="text-sm leading-relaxed text-foreground lg:text-base">
+            {description}
+          </CardDescription>
+          <div className="flex-1" />
+          <Button asChild variant={buttonVariant} size="lg" className="h-11 w-full text-base">
+            <Link href={href}>
+              {action}
+              <IconArrowRight className="size-5" data-icon="inline-end" />
+            </Link>
+          </Button>
+        </CardContent>
+      </Card>
+    </Reveal>
+  );
+}
+```
+
+- [ ] **Step 4: 型チェック + lint**
+
+Run: `pnpm type-check && pnpm biome check --write apps/checkin/src/app/page.tsx`
+Expected: PASS。`IconBug` の未使用警告が消えていること。
+
+- [ ] **Step 5: 目視確認**
+
+Run: `pnpm --filter checkin dev` → `http://localhost:3000/`
+確認: グラデーション地、QR カード→アクションカードのスタッガー入場、走査線アニメ、`IconKeyboard` 表示。OS の reduced-motion ON で走査線停止・即表示。
+
+- [ ] **Step 6: commit**
+
+```bash
+git add apps/checkin/src/app/page.tsx
+git commit -m "feat(checkin): elevate home screen with motion and scan reticle"
+```
+
+### 🚦 承認ゲート
+
+> **STOP.** Home をユーザーが実機で確認し、見た目・モーション感・走査線の強さを承認するまで Phase 3 に進まない。
+> フィードバックがあれば該当プリミティブ／Home を調整し、確定した語彙を Phase 3 の基準とする。
+
+---
+
+## Phase 3 — 残り 6 画面への展開
+
+> 各画面共通の「基本変換」: ①`<main className="...bg-sky-50...">` を `PageShell`（中央寄せ画面は `className` で `items-center justify-center` を付与）に置換 ②ルート直下のカード／セクションを `Reveal`（index でスタッガー）で包む ③主要送信ボタンを `motion.div`+`whileTap={tapScale}` でラップ（プロフィール画面と同じ手法）。Loading/Error 画面も地をグラデーションへ統一（Error は `bg-rose-50` 維持）。
+> 各タスクは基本変換 + そのシグネチャー実装 + 検証 + commit。
+
+### Task 8: Guideline（ショーケース）
+
+**Files:**
+- Modify: `apps/checkin/src/app/guideline/page.tsx`
+
+- [ ] **Step 1: 基本変換**
+
+`GuidelineSlideView` / `LoadingScreen` / `ActivatingScreen` の `<main ... bg-sky-50 ...>` を `PageShell`（`p-3 sm:p-4` を保つため `className="p-3 sm:p-4"` を渡す）に置換。`ErrorScreen` は `bg-rose-50` のまま。
+
+- [ ] **Step 2: シグネチャー① 方向付きスライド遷移**
+
+`slideIndex` の増減方向を保持する state を追加し、スライド本体（`<section class="grid min-h-[300px] ...">` のビジュアル+本文）を `AnimatePresence` + `motion.div` で包む。`useReducedMotion` 時は x 移動を 0 にしてクロスフェードのみ。
+
+`GuidelinePageContent` に方向 state を追加：
+
+```tsx
+const [direction, setDirection] = useState(1);
+const goPrev = () => {
+  setDirection(-1);
+  setSlideIndex((index) => Math.max(0, index - 1));
+};
+const goNext = () => {
+  setDirection(1);
+  setSlideIndex((index) => Math.min(GUIDELINE_SLIDES.length - 1, index + 1));
+};
+```
+
+`GuidelineSlideView` の props を `onPrev: goPrev` / `onNext: goNext` に差し替え、`current`（=`slideIndex+1`）と `direction` を渡す。スライド本体を次でラップ（`import { AnimatePresence, motion, useReducedMotion } from 'motion/react';`）：
+
+```tsx
+const prefersReduced = useReducedMotion();
+const offset = prefersReduced ? 0 : 40;
+// ...
+<div className="relative">
+  <AnimatePresence mode="wait" custom={direction}>
+    <motion.section
+      key={current}
+      custom={direction}
+      initial={{ opacity: 0, x: direction * offset }}
+      animate={{ opacity: 1, x: 0 }}
+      exit={{ opacity: 0, x: direction * -offset }}
+      transition={{ duration: 0.28, ease: 'easeOut' }}
+      className="grid min-h-[300px] items-stretch gap-3 lg:grid-cols-[260px_minmax(0,1fr)]"
+    >
+      {/* 既存のビジュアルパネル + 本文パネルをそのまま内側へ */}
+    </motion.section>
+  </AnimatePresence>
+</div>
+```
+
+- [ ] **Step 3: シグネチャー② 進捗バーの幅アニメーション**
+
+進捗バーの内側 `<div>` を `motion.div` 化し幅をアニメート：
+
+```tsx
+<div className="h-2 overflow-hidden rounded-full bg-white ring-1 ring-slate-200">
+  <motion.div
+    className={cn('h-full rounded-full', tone.progress)}
+    initial={false}
+    animate={{ width: progress }}
+    transition={prefersReduced ? { duration: 0 } : { duration: 0.4, ease: 'easeOut' }}
+  />
+</div>
+```
+
+- [ ] **Step 4: シグネチャー③ アイコンのポップ入場 + キーボード操作**
+
+ビジュアルパネルのアイコン円を `motion.div` にし、`popInitial`/`popAnimate`/`popTransition(0)` を適用（`@/lib/motion` から import、reduced 時は `initial={false}`）。
+`GuidelineSlideView` に矢印キー操作を追加：
+
+```tsx
+useEffect(() => {
+  const onKey = (e: KeyboardEvent) => {
+    if (e.key === 'ArrowRight' && !isLast) onNext();
+    if (e.key === 'ArrowLeft' && current > 1) onPrev();
+  };
+  window.addEventListener('keydown', onKey);
+  return () => window.removeEventListener('keydown', onKey);
+}, [current, isLast, onNext, onPrev]);
+```
+
+- [ ] **Step 5: 検証**
+
+Run: `pnpm type-check && pnpm biome check --write apps/checkin/src/app/guideline/page.tsx`
+目視: `/guideline?preRegistrationId=<existing>` で 前/次 のスライド方向、進捗バーの伸び、アイコンのポップ、←/→ キー、reduced-motion 即時化。
+
+- [ ] **Step 6: commit**
+
+```bash
+git add apps/checkin/src/app/guideline/page.tsx
+git commit -m "feat(checkin): elevate guideline carousel with slide transitions"
+```
+
+### Task 9: Login（ウェルカムヒーロー）
+
+**Files:**
+- Modify: `apps/checkin/src/app/login/page.tsx`
+
+- [ ] **Step 1: 基本変換 + ヒーロー化**
+
+`<main ... bg-sky-50 ...>` を `PageShell`（`className="items-center justify-center"`）へ。カードを `Reveal` で包む。カード上部に TECNOVA ロゴ + やさしい見出しのヒーローを追加（装飾背景なし、フラット）。Google ボタンを `motion.div`+`whileTap={tapScale}` で包む。
+
+```tsx
+import { IconBrandGoogleFilled } from '@tabler/icons-react';
+import { Alert, AlertDescription, AlertTitle } from '@tecnova/ui/components/alert';
+import { Button } from '@tecnova/ui/components/button';
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@tecnova/ui/components/card';
+import { motion, useReducedMotion } from 'motion/react';
+import Image from 'next/image';
+import { useState } from 'react';
+import { PageShell } from '@/components/page-shell';
+import { Reveal } from '@/components/reveal';
+import { tapScale } from '@/lib/motion';
+import { authClient } from '@/lib/auth-client';
+// signIn は既存実装のまま
+
+const prefersReduced = useReducedMotion();
+return (
+  <PageShell className="items-center justify-center">
+    <Reveal className="w-full max-w-md">
+      <Card className="w-full border-sky-200 shadow-sm">
+        <CardHeader className="items-center gap-4 text-center">
+          <Image src="/logo_tecnova.png" alt="TECNOVA" width={180} height={47} priority className="h-12 w-auto" />
+          <div className="flex flex-col gap-1.5">
+            <CardTitle className="text-3xl">ようこそ</CardTitle>
+            <p className="text-base font-bold text-muted-foreground">
+              うけつけシステムにサインインしてください
+            </p>
+          </div>
+        </CardHeader>
+        {error && (
+          <CardContent>
+            <Alert variant="destructive">
+              <AlertTitle>ログインエラー</AlertTitle>
+              <AlertDescription>{error}</AlertDescription>
+            </Alert>
+          </CardContent>
+        )}
+        <CardFooter className="flex-col gap-3">
+          <motion.div className="w-full" whileTap={prefersReduced ? undefined : tapScale}>
+            <Button type="button" size="lg" onClick={signIn} disabled={busy} className="h-14 w-full text-lg">
+              <IconBrandGoogleFilled data-icon="inline-start" />
+              {busy ? 'リダイレクト中...' : 'Google でログイン'}
+            </Button>
+          </motion.div>
+          <p className="text-center text-sm font-bold text-muted-foreground">
+            許可リストに登録されたメンターのみ利用できます
+          </p>
+        </CardFooter>
+      </Card>
+    </Reveal>
+  </PageShell>
+);
+```
+
+> 注: `useReducedMotion`/`prefersReduced` は `LoginPage` 関数本体の先頭で取得する。
+
+- [ ] **Step 2: 検証**
+
+Run: `pnpm type-check && pnpm biome check --write apps/checkin/src/app/login/page.tsx`
+目視: `/login` でロゴ + 見出し + カード入場、ボタン押下感。reduced-motion 即時化。
+
+- [ ] **Step 3: commit**
+
+```bash
+git add apps/checkin/src/app/login/page.tsx
+git commit -m "feat(checkin): add welcoming hero to login screen"
+```
+
+### Task 10: Manual（モード切替の作り込み）
+
+**Files:**
+- Create: `apps/checkin/src/components/segmented-control.tsx`
+- Modify: `apps/checkin/src/app/manual/page.tsx`
+
+- [ ] **Step 1: SegmentedControl を作成**
+
+```tsx
+'use client';
+
+import { cn } from '@tecnova/ui/lib/utils';
+import { motion, useReducedMotion } from 'motion/react';
+import type { ReactNode } from 'react';
+
+type SegmentedOption<T extends string> = { value: T; label: string; icon?: ReactNode };
+
+// 2 値以上のモード切替。選択中インジケータが layoutId でスライドする。reduced 時は即切替。
+export function SegmentedControl<T extends string>({
+  options,
+  value,
+  onChange,
+  ariaLabel,
+}: {
+  options: SegmentedOption<T>[];
+  value: T;
+  onChange: (value: T) => void;
+  ariaLabel: string;
+}) {
+  const prefersReduced = useReducedMotion();
+  return (
+    <div
+      role="tablist"
+      aria-label={ariaLabel}
+      className="grid grid-cols-2 gap-2 rounded-2xl bg-white p-2 shadow-sm"
+    >
+      {options.map((option) => {
+        const active = option.value === value;
+        return (
+          <button
+            key={option.value}
+            type="button"
+            role="tab"
+            aria-selected={active}
+            onClick={() => onChange(option.value)}
+            className={cn(
+              'relative flex h-14 items-center justify-center gap-2 rounded-xl text-lg font-bold transition-colors',
+              active ? 'text-primary-foreground' : 'text-foreground hover:bg-muted',
+            )}
+          >
+            {active && (
+              <motion.span
+                layoutId="segmented-active"
+                className="absolute inset-0 rounded-xl bg-primary"
+                transition={
+                  prefersReduced ? { duration: 0 } : { type: 'spring', stiffness: 400, damping: 32 }
+                }
+                aria-hidden="true"
+              />
+            )}
+            <span className="relative flex items-center gap-2">
+              {option.icon}
+              {option.label}
+            </span>
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+```
+
+- [ ] **Step 2: Manual の基本変換 + ModeToggle 置換**
+
+`<main ... bg-sky-50 ...>` を `PageShell` に。`ModeToggle`/`ToggleButton` を削除し `SegmentedControl` を使用。`IdEntryPanel`/`NameSearchPanel` の切替を `AnimatePresence`+`motion.div`（`key={mode}`、フェード+わずかな y）で包む。`IdEntryPanel` の `IconBug` を `IconKeyboard` に変更。
+
+`ManualPage`:
+
+```tsx
+import { AnimatePresence, motion, useReducedMotion } from 'motion/react';
+import { IconKeyboard, IconSearch /* ほか既存 */ } from '@tabler/icons-react';
+import { PageShell } from '@/components/page-shell';
+import { SegmentedControl } from '@/components/segmented-control';
+
+export default function ManualPage() {
+  const [mode, setMode] = useState<Mode>('id');
+  const prefersReduced = useReducedMotion();
+  return (
+    <PageShell>
+      <div className="mx-auto flex w-full max-w-3xl flex-1 flex-col gap-4">
+        <SegmentedControl
+          ariaLabel="入力方法"
+          value={mode}
+          onChange={setMode}
+          options={[
+            { value: 'id', label: 'IDで入力', icon: <IconKeyboard className="size-6" /> },
+            { value: 'name', label: '名前で探す', icon: <IconSearch className="size-6" /> },
+          ]}
+        />
+        <AnimatePresence mode="wait">
+          <motion.div
+            key={mode}
+            initial={prefersReduced ? false : { opacity: 0, y: 8 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={prefersReduced ? { opacity: 0 } : { opacity: 0, y: -8 }}
+            transition={{ duration: 0.2, ease: 'easeOut' }}
+          >
+            {mode === 'id' ? <IdEntryPanel /> : <NameSearchPanel />}
+          </motion.div>
+        </AnimatePresence>
+      </div>
+    </PageShell>
+  );
+}
+```
+
+`IdEntryPanel` 内: `PanelHeader icon={<IconBug .../>}` を `icon={<IconKeyboard className="size-8" />}` に変更。
+
+- [ ] **Step 3: シグネチャー 検索結果のスタッガー**
+
+`SearchResults` の結果 `<ul>` 内 `<li>` を `motion.li`（`listItemTransition(index)`、reduced 時 `initial={false}`）に変更。`import { listItemTransition } from '@/lib/motion';`。
+
+```tsx
+{state.results.map((participant, index) => (
+  <motion.li
+    key={participant.id}
+    initial={prefersReduced ? false : { opacity: 0, y: 8 }}
+    animate={{ opacity: 1, y: 0 }}
+    transition={listItemTransition(index)}
+  >
+    {/* 既存 ResultRow */}
+  </motion.li>
+))}
+```
+
+> `SearchResults` 内で `const prefersReduced = useReducedMotion();` を先頭に追加。
+
+- [ ] **Step 4: 検証**
+
+Run: `pnpm type-check && pnpm biome check --write apps/checkin/src/app/manual/page.tsx apps/checkin/src/components/segmented-control.tsx`
+目視: `/manual` でトグルのスライド、パネルのクロスフェード、検索結果のスタッガー、`IconKeyboard` 表示。reduced-motion 即時化。
+
+- [ ] **Step 5: commit**
+
+```bash
+git add apps/checkin/src/app/manual/page.tsx apps/checkin/src/components/segmented-control.tsx
+git commit -m "feat(checkin): add sliding segmented control and result stagger to manual"
+```
+
+### Task 11: History（生きているダッシュボード）
+
+**Files:**
+- Modify: `apps/checkin/src/app/history/page.tsx`
+
+- [ ] **Step 1: 基本変換**
+
+`<main ... bg-sky-50 ...>`（本体・LoadingScreen）を `PageShell` に。`ErrorScreen` は `bg-rose-50` 維持。本体の 2 枚のカードを `Reveal`（index 0,1）で包む。
+
+- [ ] **Step 2: シグネチャー サマリ + LiveDot + StatTile**
+
+サマリ 3 枚を `StatTile` に置換し数値を `AnimatedNumber` 化、「滞在中」は emerald トーン + `LiveDot active`。
+
+```tsx
+import { AnimatedNumber } from '@/components/animated-number';
+import { LiveDot } from '@/components/live-dot';
+import { StatTile } from '@/components/stat-tile';
+
+<div className="grid gap-3 sm:grid-cols-3">
+  <StatTile
+    label="今日の受付"
+    value={<><AnimatedNumber value={summary.totalCheckedIn} /><span className="ml-1 text-2xl">人</span></>}
+  />
+  <StatTile
+    tone="emerald"
+    label={<span className="flex items-center gap-2"><LiveDot active={summary.currentlyPresent > 0} />滞在中</span>}
+    value={<><AnimatedNumber value={summary.currentlyPresent} /><span className="ml-1 text-2xl">人</span></>}
+  />
+  <StatTile
+    label="退室済み"
+    value={<><AnimatedNumber value={summary.checkedOut} /><span className="ml-1 text-2xl">人</span></>}
+  />
+</div>
+```
+
+- [ ] **Step 3: シグネチャー 行のスタッガー入場**
+
+テーブルの `<TableBody>` 内 `filteredSessions.map` の各 `<TableRow>` を `motion.tr` 化（`@tecnova/ui` の `TableRow` は `<tr>` レンダリングのため `asChild` 不可。`motion.tr` を直接使い、`TableCell` は維持）。reduced 時 `initial={false}`、`listItemTransition(index)`。
+
+```tsx
+{filteredSessions.map((session, index) => {
+  const stayDurationMinutes = getSessionStayDurationMinutes(session, nowMs);
+  return (
+    <motion.tr
+      key={session.sessionId}
+      className="border-b transition-colors hover:bg-muted/50"
+      initial={prefersReduced ? false : { opacity: 0, y: 8 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={listItemTransition(index)}
+    >
+      {/* 既存の TableCell 群をそのまま */}
+    </motion.tr>
+  );
+})}
+```
+
+> `HistoryPage` 先頭で `const prefersReduced = useReducedMotion();` を取得。`motion`/`useReducedMotion`/`listItemTransition` を import。`motion.tr` の className はテーブル行のスタイルを `@tecnova/ui` の `TableRow` 実装に合わせる（`node_modules/@tecnova/ui` または生成元の table.tsx を確認して border/hover クラスを移植）。
+
+- [ ] **Step 4: 検証**
+
+Run: `pnpm type-check && pnpm biome check --write apps/checkin/src/app/history/page.tsx`
+目視: `/history` でサマリのカウントアップ、滞在中の脈動ドット、行のスタッガー、空状態。reduced-motion 即時化。
+
+- [ ] **Step 5: commit**
+
+```bash
+git add apps/checkin/src/app/history/page.tsx
+git commit -m "feat(checkin): animate history summary and rows"
+```
+
+### Task 12: First-time（ステップ + 候補のスタッガー）
+
+**Files:**
+- Modify: `apps/checkin/src/app/first-time/page.tsx`
+
+- [ ] **Step 1: 基本変換**
+
+本体・LoadingScreen の `<main ... bg-sky-50 ...>` を `PageShell` に。`ErrorScreen` は `bg-rose-50` 維持。メインカードを `Reveal` で包む。
+
+- [ ] **Step 2: シグネチャー 件数バッジ + ステップ + 候補グリッド**
+
+未登録件数を `AnimatedNumber` 化：
+
+```tsx
+<Badge variant="secondary" style={{ height: 'auto' }} className="w-fit px-4 py-2 text-base">
+  未登録 <AnimatedNumber value={state.items.length} className="mx-1 tabular-nums" />人
+</Badge>
+```
+
+`RegistrationSteps` の各 `<li>` と、候補 `<ul className="grid ...">` の各 `<li>` を `motion.li`（`listItemTransition(index)`、reduced 時 `initial={false}`）化。`FirstTimePage`/`RegistrationSteps` 先頭で `useReducedMotion()` 取得、`@/lib/motion` と `@/components/animated-number` を import。
+
+- [ ] **Step 3: 検証**
+
+Run: `pnpm type-check && pnpm biome check --write apps/checkin/src/app/first-time/page.tsx`
+目視: `/first-time` で件数カウントアップ、ステップ/候補のスタッガー、ダイアログ動作維持。reduced-motion 即時化。
+
+- [ ] **Step 4: commit**
+
+```bash
+git add apps/checkin/src/app/first-time/page.tsx
+git commit -m "feat(checkin): stagger first-time steps and candidate grid"
+```
+
+### Task 13: Settings（メンター ID カード）
+
+**Files:**
+- Modify: `apps/checkin/src/app/settings/page.tsx`
+
+- [ ] **Step 1: 基本変換 + ヘッダのアイデンティティカード化**
+
+`<main ... bg-sky-50 ...>` を `PageShell` に。カードを `Reveal` で包む。`CardHeader` の素の歯車を、メンターのアバター（頭文字 or `IconUser`）+ 名前 + ロールバッジのヘッダに差し替え：
+
+```tsx
+<CardHeader className="gap-3">
+  <div className="flex items-center gap-4">
+    <div className="flex size-16 shrink-0 items-center justify-center rounded-full bg-sky-100 text-2xl font-black text-sky-700">
+      {me.mentor.name.slice(0, 1)}
+    </div>
+    <div className="min-w-0">
+      <CardTitle className="break-words text-2xl">{me.mentor.name}</CardTitle>
+      <div className="mt-1.5 flex flex-wrap items-center gap-2">
+        <Badge variant="secondary">{me.mentor.role}</Badge>
+        <span className="truncate text-sm font-bold text-muted-foreground">{me.user.email}</span>
+      </div>
+    </div>
+  </div>
+</CardHeader>
+```
+
+> 既存の情報テーブル（`rows`）とログアウトダイアログはそのまま残す。`IconSettings` import が未使用になれば削除。
+
+- [ ] **Step 2: 検証**
+
+Run: `pnpm type-check && pnpm biome check --write apps/checkin/src/app/settings/page.tsx`
+目視: `/settings` でアイデンティティカード、入場モーション、ログアウト動作維持。
+
+- [ ] **Step 3: commit**
+
+```bash
+git add apps/checkin/src/app/settings/page.tsx
+git commit -m "feat(checkin): add mentor identity header to settings"
+```
+
+---
+
+## Phase 4 — 整合性レビューと最終検証
+
+### Task 14: デザイン整合性の敵対的レビュー
+
+- [ ] **Step 1: 並列レビューをディスパッチ**
+
+ultracode 方針: Workflow で画面横断のレビュアーを並列起動し、各画面が「Home で確定した語彙」に一致しているかを照合（地のグラデーション、`border-sky-200 shadow-sm`、Reveal スタッガーの index 連番、reduced-motion ゲートの抜け、トーン整合、タッチサイズ）。各指摘を別エージェントで真偽判定し、確定分のみ修正。
+
+- [ ] **Step 2: 指摘を反映してコミット**
+
+```bash
+git add -A && git commit -m "fix(checkin): resolve design-consistency review findings"
+```
+
+### Task 15: 最終検証 + PR
+
+- [ ] **Step 1: 全体検証**
+
+```bash
+pnpm type-check
+pnpm biome check apps/checkin
+pnpm --filter checkin build
+```
+Expected: すべて PASS。
+
+- [ ] **Step 2: 回帰確認**
+
+`pnpm --filter checkin dev` で プロフィール画面 `/reception/participants/<id>` と全画面共通ヘッダに視覚回帰が無いことを確認（地・カード・モーションが従来どおり）。
+
+- [ ] **Step 3: PR 作成（ユーザー承認後）**
+
+```bash
+git push -u origin feat/checkin-redesign
+gh pr create --base develop --title "feat(checkin): redesign all screens except profile" --body "<本プラン要約 + スクショ>"
+```
+
+---
+
+## Self-Review（記入済み）
+
+- **Spec coverage:** §4 プリミティブ → Task1-5/6/10。§5 モーション契約 → Task1。§6 各画面 → Home Task7 / Guideline Task8 / Login Task9 / Manual Task10 / History Task11 / First-time Task12 / Settings Task13。§7 回帰防止 → Task15 Step2 + 全タスクでプロフィール/シェル不変更。§10 検証 → 各タスク検証 + Task15。網羅。
+- **Placeholder scan:** TBD/TODO 無し。各コード手順に実コードを記載。Task11 の `motion.tr` のみ `@tecnova/ui` table.tsx の border/hover クラス移植を要確認と明記（プレースホルダではなく確認指示）。
+- **Type consistency:** `Reveal({index,className,children})`、`StatTile({label,value,icon,tone,className})`、`LiveDot({active,className})`、`PageShell({children,className})`、`SegmentedControl<T>({options,value,onChange,ariaLabel})`、`motion.ts` の `revealTransition/popTransition/listItemTransition/tapScale` — 利用箇所と一致。
diff --git a/docs/superpowers/specs/2026-05-29-checkin-redesign-design.md b/docs/superpowers/specs/2026-05-29-checkin-redesign-design.md
new file mode 100644
index 0000000..9385f49
--- /dev/null
+++ b/docs/superpowers/specs/2026-05-29-checkin-redesign-design.md
@@ -0,0 +1,181 @@
+# checkin リデザイン設計書
+
+- 日付: 2026-05-29
+- 対象アプリ: `apps/checkin`（受付端末 / iPad PWA）
+- ステータス: 設計（実装前レビュー待ち）
+
+---
+
+## 1. 背景と目的
+
+`apps/checkin` の参加者プロフィール画面（`/reception/participants/[id]`）は直近のコミット
+（`efd0aed` / `790aaf5` / `49ea36f`）で **motion + Cohesive Elevation** の演出が施され、アプリ内の
+「仕上がりの基準線」になっている。一方で **それ以外の 7 画面は構造・配色は揃っているが演出が無い**：
+
+- すべてフラットな `bg-sky-50`（プロフィールの `from-sky-50 to-white` グラデーション地ではない）
+- 入場モーションがゼロ（カードもリストも静的に出る）
+- 数値が静的（カウントアップ無し）、リストにスタッガー無し
+- ガイドラインの進捗バーは固定幅、スライドはハード切り替え
+- 「マニュアル入力」アイコンが `IconBug`（`page.tsx:217` / `manual/page.tsx:106`）＝置き去りのプレースホルダ
+
+**目的**: プロフィール画面の演出語彙を残り 7 画面へ展開し、アプリ全体を一つの製品として統一する。
+さらに高インパクトな画面には 1 つずつ「シグネチャーモーメント」を与え、統一感に加えて体験の質を引き上げる。
+
+方針はブレインストーミングで合意済み：**「統一の土台 + シグネチャーモーメント」**。
+
+---
+
+## 2. スコープ
+
+### 対象（7 画面）
+
+`/`（Home / QR スキャナ）、`/login`、`/manual`、`/first-time`、`/guideline`、`/history`、`/settings`
+
+### 対象外（回帰させない）
+
+- **プロフィール画面** `/reception/participants/[id]` — 基準線。視覚は変更しない。
+  - ただし新設の共有プリミティブ（`Reveal` 等）への **無風リファクタ**（見た目を一切変えない差し替え）は任意。
+    本リデザインでは原則手を入れず、安全に確認できる範囲で別途検討する。
+- **`AppShell`（共通ヘッダ）** `src/components/app-shell.tsx` — 全画面（プロフィール含む）を包むため、
+  視覚回帰を避ける。変更するとしても加算的・中立的なものに限る。
+
+### 非対象（YAGNI）
+
+- 装飾的な背景テクスチャ・モチーフ（ブループリント/ドット/グロー/メッシュ等）は **入れない**。
+  土台はグラデーション地とカードのみ。演出とレイアウトで格上げする（ユーザー判断: "Keep it flat"）。
+- 新しい API・データモデルの追加は無し（既存エンドポイント・スキーマのまま）。
+
+---
+
+## 3. デザイン原則（基準線 = プロフィール画面）
+
+1. **地** は `bg-gradient-to-b from-sky-50 to-white`（全対象画面に統一）。エラー画面は従来どおり `bg-rose-50`。
+2. **カード** は `border-sky-200 shadow-sm`、見出しは既存 `PanelHeader`（tone 付き丸アイコン + `text-3xl` タイトル）。
+3. **トーン体系**（既存を踏襲）: emerald=成功/滞在中、sky=情報/主要、amber=警告/チェックアウト、rose=危険、slate=中立。
+4. **モーションは必ず `useReducedMotion()` でゲート**。reduced 時は `initial={false}` で即表示し、ループ演出は止める。
+5. **タッチ前提のサイズ**（`h-14`/`h-16`/`h-20`、`text-xl`〜`text-2xl`）と `tabular-nums` を維持。
+6. 演出は **transform/opacity のみ**（GPU 合成、レイアウトスラッシュ回避）。
+
+---
+
+## 4. 共有プリミティブ（新規追加）
+
+すべて `apps/checkin/src/components/`（既存 `AnimatedNumber`/`PanelHeader`/`ResultSummaryCard` と同居の checkin ローカル）。
+複数アプリで必要になったら `packages/ui` へ昇格する（現時点ではミニマム優先で昇格しない）。
+
+| ファイル | 役割 | 備考 |
+|---|---|---|
+| `src/lib/motion.ts` | モーション定数・variant ファクトリを 1 箇所に集約 | 値は §5。reduced-motion 判定は各コンポーネント側 |
+| `src/components/reveal.tsx` | `<Reveal index>` フェードアップ入場ラッパ | reduced 時は素の要素。`index` でスタッガー。`as`/`className` 可 |
+| `src/components/stat-tile.tsx` | ラベル + 数値タイル（`rounded-lg border bg-white p-4`） | `tone`/`icon` 任意。数値は `AnimatedNumber` 連携可 |
+| `src/components/live-dot.tsx` | 滞在中を示す脈動ドット | `active` で emerald 脈動 / slate 静止。reduced 対応 |
+| `src/components/page-shell.tsx` | グラデーション地の `<main>` 既定 | `className` で上書き可。中央寄せ等はオプション |
+| `src/components/scan-reticle.tsx` | Home の QR スキャン演出（静的な角ブラケット） | アニメーションなし（走査線はユーザー判断で不採用） |
+| `src/components/segmented-control.tsx` | Manual のモード切替（スライドする選択インジケータ） | `motion` の `layoutId` でスライド。reduced 時は即切替 |
+
+> Next.js 16 / React 19 / `motion`（`motion/react`）は既に利用中。`AGENTS.md` のとおり、App Router 系 API を触る箇所は
+> 実装前に `node_modules/next/dist/docs/` を確認する。
+
+---
+
+## 5. モーション契約（`src/lib/motion.ts`）
+
+| 名前 | 値 | 用途 |
+|---|---|---|
+| `reveal(index)` | `initial {opacity:0, y:12}` → `animate {opacity:1, y:0}`、`{duration:0.4, ease:'easeOut', delay: index*0.06}` | カード/セクションの入場（プロフィールと同値） |
+| `tap` | `whileTap {scale:0.97}` | 主要ボタンの押下フィードバック |
+| `pop(index)` | `initial {opacity:0, scale:0.6}` → `{opacity:1, scale:1}`、`{duration:0.25, ease:'easeOut', delay: min(index*0.012, 0.5)}` | タイル/小要素のポップ（プロフィール来場ヒートマップと同値） |
+| `listItem(index)` | フェードアップ + 大きめスタッガー（`delay: min(index*0.04, 0.4)`） | 検索結果・候補・履歴行 |
+| `slide(direction)` | `AnimatePresence` で `x: ±40, opacity:0` の方向付き出入り | ガイドラインのスライド遷移。reduced 時はクロスフェード/即時 |
+
+すべて reduced-motion 時は無効化（即表示・ループ停止）。
+
+---
+
+## 6. 画面ごとの設計
+
+各画面共通: 地をグラデーションへ、ルート直下を `Reveal` でスタッガー入場、主要ボタンに `tap`、カードは `border-sky-200 shadow-sm`。
+以下は「土台 + シグネチャー + 個別修正」。
+
+### 6.1 Home `/`（ディレクションスライス）
+
+- 土台: グラデーション地。右の 3 アクションカードを `Reveal` で順次入場。
+- **シグネチャー: QR スキャン演出**。映像枠にスキャン対象を示す静的な角ブラケット（`ScanReticle`）。
+  検出→遷移中のオーバーレイ（ID 表示）も合わせて磨く。走査線アニメーションはユーザー判断で不採用（アニメーションを持たない）。
+- 個別修正: 「マニュアル入力」カードの `IconBug` → `IconKeyboard`（`page.tsx:217`）。
+
+### 6.2 Guideline `/guideline`（ショーケース）
+
+- 土台: グラデーション地、既存のスライド別トーン体系を維持。
+- **シグネチャー: スライド体験の作り込み**。
+  - `AnimatePresence` による **方向付きスライド遷移**（次へ=左へ送り、前へ=右へ戻す）。
+  - 進捗バーの **幅アニメーション**（現状は固定幅）。
+  - アイコンの軽いポップ入場、最後の同意ステップにささやかな達成感の強調。
+  - **キーボード矢印**（←/→）でのスライド送り対応。
+- reduced 時はスライドをクロスフェード or 即時、進捗は即反映。
+
+### 6.3 Login `/login`
+
+- 土台: グラデーション地、入場モーション。Google ボタンに `tap`。
+- **シグネチャー: 温かいウェルカムヒーロー**。TECNOVA ロゴ + やさしい見出し + 余白設計で「最初に見る画面」を歓迎的に。
+  装飾背景は無し（フラット指定）。レイアウトとロゴ、モーションで魅せる。
+
+### 6.4 Manual `/manual`
+
+- 土台: グラデーション地、入場モーション。
+- **シグネチャー: モード切替の作り込み**。`SegmentedControl` のスライドする選択インジケータ + ID/名前パネルのクロスフェード。
+  ID 入力の押下感、検索結果は `listItem` でスタッガー。
+- 個別修正: ID パネルの `IconBug` → `IconKeyboard`（`manual/page.tsx:106`）。
+
+### 6.5 History `/history`
+
+- 土台: グラデーション地、入場モーション。
+- **シグネチャー: 生きているダッシュボード**。サマリ 3 数値を `AnimatedNumber` 化、「滞在中」に `LiveDot`（脈動）。
+  テーブル行 / 空状態を磨き、`StatTile` で集計カードを統一。
+
+### 6.6 First-time `/first-time`
+
+- 土台: グラデーション地、入場モーション。
+- **シグネチャー**: 登録ステップ（1-2-3）と候補グリッドをスタッガー入場、未登録人数バッジを `AnimatedNumber`、候補カードの押下感。
+
+### 6.7 Settings `/settings`
+
+- 土台: グラデーション地、入場モーション。
+- **シグネチャー: メンターのアイデンティティカード**。素の歯車見出しの代わりに、アバター + 名前 + ロールバッジのヘッダ。控えめだが統一感。
+
+---
+
+## 7. 触らないもの・回帰防止
+
+- プロフィール画面・`AppShell` ヘッダは視覚回帰させない（§2）。
+- 既存の状態機械・データ取得・`apiFetch`・Zod 型アサートは変更しない（演出と見た目のレイヤのみ）。
+- `ResultSummaryCard` は emerald/amber トーンの完了画面で使われ続ける。必要なら入場モーションのみ加算。
+
+---
+
+## 8. 制約
+
+- **Next.js 16 / React 19**: App Router API を触る箇所は実装前に `node_modules/next/dist/docs/` を確認（`AGENTS.md`）。
+- **a11y**: reduced-motion ゲート必須、ガイドラインはキーボード操作、`aria-label`/フォーカス可視を維持、明るい環境向けの十分なコントラスト。
+- **コード規約**: TypeScript strict、`any` 禁止、arrow function、import は先頭集約、Biome（2 スペース / セミコロン / シングルクォート）。
+- **パフォーマンス**: transform/opacity のみで演出、装飾画像を増やさない（フラット）。`motion` の既存利用に倣う。
+
+---
+
+## 9. 作業順序とディレクションスライス
+
+1. 共有プリミティブ（`motion.ts` / `Reveal` / `StatTile` / `LiveDot` / `PageShell`）を先に用意。
+2. **Home を実機で動くディレクションスライスとして実装** → ユーザーが起動して見た目・モーション感を承認。
+3. 承認後、確定した語彙を残り 6 画面へ展開（**Guideline を 2 番目** = ショーケース、続いて Login/Manual/History/First-time/Settings）。
+4. ultracode 方針に従い、展開フェーズは並列ワークフローで実行し、**デザイン整合性の敵対的レビュー**を通す。
+
+---
+
+## 10. 検証方法
+
+フロント視覚タスクのため自動テストは限定的。各段階で以下を満たす：
+
+- `pnpm type-check` と `pnpm biome check`（lint/format）がパス。
+- `pnpm --filter checkin dev` で各画面を起動し、見た目・モーション・reduced-motion（OS 設定）を目視確認。
+- 主要ブレークポイント（iPad 縦/横、`sm`/`lg`）でレイアウト崩れが無いこと。
+- プロフィール画面と `AppShell` に視覚回帰が無いこと。

From da48a6d8b37cfdee843c26eaf7e4b910cde992b4 Mon Sep 17 00:00:00 2001
From: tmba <ut42.nu@gmail.com>
Date: Sat, 30 May 2026 02:02:54 +0900
Subject: [PATCH 06/11] feat(checkin): add shared motion primitives

Reusable motion constants plus Reveal, StatTile, LiveDot, and PageShell, all reduced-motion aware.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 apps/checkin/src/components/live-dot.tsx   | 28 +++++++++++++
 apps/checkin/src/components/page-shell.tsx | 16 ++++++++
 apps/checkin/src/components/reveal.tsx     | 29 +++++++++++++
 apps/checkin/src/components/stat-tile.tsx  | 48 ++++++++++++++++++++++
 apps/checkin/src/lib/motion.ts             | 37 +++++++++++++++++
 5 files changed, 158 insertions(+)
 create mode 100644 apps/checkin/src/components/live-dot.tsx
 create mode 100644 apps/checkin/src/components/page-shell.tsx
 create mode 100644 apps/checkin/src/components/reveal.tsx
 create mode 100644 apps/checkin/src/components/stat-tile.tsx
 create mode 100644 apps/checkin/src/lib/motion.ts

diff --git a/apps/checkin/src/components/live-dot.tsx b/apps/checkin/src/components/live-dot.tsx
new file mode 100644
index 0000000..ff10452
--- /dev/null
+++ b/apps/checkin/src/components/live-dot.tsx
@@ -0,0 +1,28 @@
+'use client';
+
+import { cn } from '@tecnova/ui/lib/utils';
+import { motion, useReducedMotion } from 'motion/react';
+
+// 滞在中=emerald の脈動、未滞在=slate の静止。プロフィール画面の在席ドットと同じ演出。
+export function LiveDot({ active, className }: { active: boolean; className?: string }) {
+  const prefersReduced = useReducedMotion();
+
+  if (!active) {
+    return (
+      <span className={cn('size-2.5 rounded-full bg-slate-400', className)} aria-hidden="true" />
+    );
+  }
+
+  return (
+    <motion.span
+      className={cn('size-2.5 rounded-full bg-emerald-500', className)}
+      animate={prefersReduced ? undefined : { scale: [1, 1.35, 1], opacity: [1, 0.5, 1] }}
+      transition={
+        prefersReduced
+          ? undefined
+          : { duration: 2, repeat: Number.POSITIVE_INFINITY, ease: 'easeInOut' }
+      }
+      aria-hidden="true"
+    />
+  );
+}
diff --git a/apps/checkin/src/components/page-shell.tsx b/apps/checkin/src/components/page-shell.tsx
new file mode 100644
index 0000000..f40503c
--- /dev/null
+++ b/apps/checkin/src/components/page-shell.tsx
@@ -0,0 +1,16 @@
+import { cn } from '@tecnova/ui/lib/utils';
+import type { ReactNode } from 'react';
+
+// 全画面共通のグラデーション地。中央寄せ等は className で上書きする。
+export function PageShell({ children, className }: { children: ReactNode; className?: string }) {
+  return (
+    <main
+      className={cn(
+        'flex flex-1 flex-col bg-gradient-to-b from-sky-50 to-white p-4 sm:p-6',
+        className,
+      )}
+    >
+      {children}
+    </main>
+  );
+}
diff --git a/apps/checkin/src/components/reveal.tsx b/apps/checkin/src/components/reveal.tsx
new file mode 100644
index 0000000..6057cf3
--- /dev/null
+++ b/apps/checkin/src/components/reveal.tsx
@@ -0,0 +1,29 @@
+'use client';
+
+import { motion, useReducedMotion } from 'motion/react';
+import type { ReactNode } from 'react';
+import { revealAnimate, revealInitial, revealTransition } from '@/lib/motion';
+
+// 子をフェードアップで入場させる薄いラッパ。index でスタッガーをずらす。
+// prefers-reduced-motion 時は initial を無効化して即表示する。
+export function Reveal({
+  index = 0,
+  className,
+  children,
+}: {
+  index?: number;
+  className?: string;
+  children: ReactNode;
+}) {
+  const prefersReduced = useReducedMotion();
+  return (
+    <motion.div
+      className={className}
+      initial={prefersReduced ? false : revealInitial}
+      animate={revealAnimate}
+      transition={prefersReduced ? undefined : revealTransition(index)}
+    >
+      {children}
+    </motion.div>
+  );
+}
diff --git a/apps/checkin/src/components/stat-tile.tsx b/apps/checkin/src/components/stat-tile.tsx
new file mode 100644
index 0000000..aa8319e
--- /dev/null
+++ b/apps/checkin/src/components/stat-tile.tsx
@@ -0,0 +1,48 @@
+import { cn } from '@tecnova/ui/lib/utils';
+import type { ReactNode } from 'react';
+
+export type StatTone = 'neutral' | 'emerald';
+
+// 集計値タイル。value は ReactNode（AnimatedNumber + 単位サフィックス等）を想定。
+export function StatTile({
+  label,
+  value,
+  icon,
+  tone = 'neutral',
+  className,
+}: {
+  label: ReactNode;
+  value: ReactNode;
+  icon?: ReactNode;
+  tone?: StatTone;
+  className?: string;
+}) {
+  const isEmerald = tone === 'emerald';
+  return (
+    <div
+      className={cn(
+        'rounded-lg p-4',
+        isEmerald ? 'border border-emerald-200 bg-emerald-50' : 'border bg-white',
+        className,
+      )}
+    >
+      <p
+        className={cn(
+          'flex items-center gap-1.5 text-sm font-bold',
+          isEmerald ? 'text-emerald-700' : 'text-muted-foreground',
+        )}
+      >
+        {icon}
+        {label}
+      </p>
+      <p
+        className={cn(
+          'mt-2 break-words text-4xl font-black leading-tight tabular-nums',
+          isEmerald && 'text-emerald-700',
+        )}
+      >
+        {value}
+      </p>
+    </div>
+  );
+}
diff --git a/apps/checkin/src/lib/motion.ts b/apps/checkin/src/lib/motion.ts
new file mode 100644
index 0000000..4dbea4e
--- /dev/null
+++ b/apps/checkin/src/lib/motion.ts
@@ -0,0 +1,37 @@
+import type { Transition } from 'motion/react';
+
+// 入場・小要素演出のイージングは全画面でこの値に統一する（プロフィール画面と同値）。
+const EASE_OUT = 'easeOut' as const;
+
+// セクション/カードのフェードアップ入場。
+export const revealInitial = { opacity: 0, y: 12 } as const;
+export const revealAnimate = { opacity: 1, y: 0 } as const;
+export const REVEAL_STAGGER_STEP = 0.06;
+export const revealTransition = (index = 0): Transition => ({
+  duration: 0.4,
+  ease: EASE_OUT,
+  delay: index * REVEAL_STAGGER_STEP,
+});
+
+// 主要ボタンの押下フィードバック。
+export const tapScale = { scale: 0.97 } as const;
+
+// タイル/小要素のポップ（来場ヒートマップと同値）。スタッガーは間延びしないよう頭打ち。
+export const popInitial = { opacity: 0, scale: 0.6 } as const;
+export const popAnimate = { opacity: 1, scale: 1 } as const;
+export const POP_STAGGER_STEP = 0.012;
+export const POP_STAGGER_MAX = 0.5;
+export const popTransition = (index = 0): Transition => ({
+  duration: 0.25,
+  ease: EASE_OUT,
+  delay: Math.min(index * POP_STAGGER_STEP, POP_STAGGER_MAX),
+});
+
+// 検索結果・候補・履歴行など、行数が多いリスト向けの大きめスタッガー。
+export const LIST_STAGGER_STEP = 0.04;
+export const LIST_STAGGER_MAX = 0.4;
+export const listItemTransition = (index = 0): Transition => ({
+  duration: 0.3,
+  ease: EASE_OUT,
+  delay: Math.min(index * LIST_STAGGER_STEP, LIST_STAGGER_MAX),
+});

From 009b298c5c99b619882c399d4b1708cf9c81258d Mon Sep 17 00:00:00 2001
From: tmba <ut42.nu@gmail.com>
Date: Sat, 30 May 2026 02:02:54 +0900
Subject: [PATCH 07/11] feat(checkin): add success icon and animate result card

Extract the sonar success icon and choreograph the result card (icon pop + ring, staggered rows, footer settle).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../src/components/result-summary-card.tsx    | 107 ++++++++++++++----
 apps/checkin/src/components/success-icon.tsx  |  47 ++++++++
 2 files changed, 129 insertions(+), 25 deletions(-)
 create mode 100644 apps/checkin/src/components/success-icon.tsx

diff --git a/apps/checkin/src/components/result-summary-card.tsx b/apps/checkin/src/components/result-summary-card.tsx
index 4f393ac..2488d1e 100644
--- a/apps/checkin/src/components/result-summary-card.tsx
+++ b/apps/checkin/src/components/result-summary-card.tsx
@@ -1,10 +1,12 @@
 'use client';
 
 import { Card, CardContent, CardFooter } from '@tecnova/ui/components/card';
-import { Table, TableBody, TableCell, TableRow } from '@tecnova/ui/components/table';
+import { Table, TableBody, TableCell } from '@tecnova/ui/components/table';
 import { cn } from '@tecnova/ui/lib/utils';
+import { motion, useReducedMotion } from 'motion/react';
 import type { ReactNode } from 'react';
 import { PanelHeader, type PanelTone } from '@/components/panel-header';
+import { SuccessIcon } from '@/components/success-icon';
 
 export type SummaryRow = {
   label: string;
@@ -27,32 +29,87 @@ export function ResultSummaryCard({
   note?: ReactNode;
   footer: ReactNode;
 }) {
+  const prefersReduced = useReducedMotion();
+  const footerDelay = 0.15 + rows.length * 0.05 + 0.05;
+
   return (
-    <main className="flex flex-1 bg-sky-50 p-4 sm:p-6">
+    <main className="flex flex-1 bg-gradient-to-b from-sky-50 to-white p-4 sm:p-6">
       <div className="mx-auto flex w-full max-w-6xl flex-1 items-center justify-center">
-        <Card className="w-full max-w-2xl shadow-sm">
-          <PanelHeader icon={icon} title={title} tone={tone} />
-          <CardContent className="flex flex-col gap-5">
-            <div className="overflow-hidden rounded-lg border bg-white">
-              <Table>
-                <TableBody className="text-lg sm:text-xl">
-                  {rows.map((row) => (
-                    <TableRow key={row.label}>
-                      <TableCell className="w-36 bg-muted/40 font-bold text-muted-foreground sm:w-44">
-                        {row.label}
-                      </TableCell>
-                      <TableCell className={cn('font-bold', row.valueClassName)}>
-                        {row.value}
-                      </TableCell>
-                    </TableRow>
-                  ))}
-                </TableBody>
-              </Table>
-            </div>
-            {note ? <p className="text-center text-lg font-bold text-foreground">{note}</p> : null}
-          </CardContent>
-          <CardFooter>{footer}</CardFooter>
-        </Card>
+        <motion.div
+          className="w-full max-w-2xl"
+          initial={prefersReduced ? false : { opacity: 0, scale: 0.96, y: 8 }}
+          animate={{ opacity: 1, scale: 1, y: 0 }}
+          transition={prefersReduced ? undefined : { duration: 0.35, ease: 'easeOut' }}
+        >
+          <Card className="w-full border-sky-200 shadow-sm">
+            <PanelHeader
+              icon={
+                <SuccessIcon tone={tone} prefersReduced={!!prefersReduced}>
+                  {icon}
+                </SuccessIcon>
+              }
+              title={title}
+              tone={tone}
+            />
+            <CardContent className="flex flex-col gap-5">
+              <div className="overflow-hidden rounded-lg border bg-white">
+                <Table>
+                  <TableBody className="text-lg sm:text-xl">
+                    {rows.map((row, index) => (
+                      <motion.tr
+                        key={row.label}
+                        data-slot="table-row"
+                        className="border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted"
+                        initial={prefersReduced ? false : { opacity: 0, y: 6 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        transition={
+                          prefersReduced
+                            ? undefined
+                            : { duration: 0.3, ease: 'easeOut', delay: 0.15 + index * 0.05 }
+                        }
+                      >
+                        <TableCell className="w-36 bg-muted/40 font-bold text-muted-foreground sm:w-44">
+                          {row.label}
+                        </TableCell>
+                        <TableCell className={cn('font-bold', row.valueClassName)}>
+                          {row.value}
+                        </TableCell>
+                      </motion.tr>
+                    ))}
+                  </TableBody>
+                </Table>
+              </div>
+              {note ? (
+                <motion.p
+                  className="text-center text-lg font-bold text-foreground"
+                  initial={prefersReduced ? false : { opacity: 0, y: 8 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={
+                    prefersReduced
+                      ? undefined
+                      : { duration: 0.3, ease: 'easeOut', delay: footerDelay - 0.05 }
+                  }
+                >
+                  {note}
+                </motion.p>
+              ) : null}
+            </CardContent>
+            <CardFooter>
+              <motion.div
+                className="w-full"
+                initial={prefersReduced ? false : { opacity: 0, y: 8 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={
+                  prefersReduced
+                    ? undefined
+                    : { duration: 0.3, ease: 'easeOut', delay: footerDelay }
+                }
+              >
+                {footer}
+              </motion.div>
+            </CardFooter>
+          </Card>
+        </motion.div>
       </div>
     </main>
   );
diff --git a/apps/checkin/src/components/success-icon.tsx b/apps/checkin/src/components/success-icon.tsx
new file mode 100644
index 0000000..619acd2
--- /dev/null
+++ b/apps/checkin/src/components/success-icon.tsx
@@ -0,0 +1,47 @@
+'use client';
+
+import { cn } from '@tecnova/ui/lib/utils';
+import { motion } from 'motion/react';
+import type { ReactNode } from 'react';
+
+export const ringToneClasses: Record<'emerald' | 'amber', string> = {
+  emerald: 'border-emerald-400',
+  amber: 'border-amber-400',
+};
+
+export function SuccessIcon({
+  tone,
+  prefersReduced,
+  children,
+}: {
+  tone: 'emerald' | 'amber';
+  prefersReduced: boolean;
+  children: ReactNode;
+}) {
+  return (
+    <span className="relative flex items-center justify-center">
+      {!prefersReduced && (
+        <motion.span
+          aria-hidden="true"
+          className={cn(
+            'pointer-events-none absolute inset-0 rounded-full border-2',
+            ringToneClasses[tone],
+          )}
+          initial={{ scale: 1, opacity: 0.7 }}
+          animate={{ scale: 2.4, opacity: 0 }}
+          transition={{ duration: 0.7, ease: 'easeOut', delay: 0.1 }}
+        />
+      )}
+      <motion.span
+        className="relative flex items-center justify-center"
+        initial={prefersReduced ? false : { scale: 0.5, opacity: 0 }}
+        animate={{ scale: 1, opacity: 1 }}
+        transition={
+          prefersReduced ? undefined : { type: 'spring', stiffness: 420, damping: 18, delay: 0.05 }
+        }
+      >
+        {children}
+      </motion.span>
+    </span>
+  );
+}

From 7ccb1a34eecba065b24db8f81dd2c2019e484c09 Mon Sep 17 00:00:00 2001
From: tmba <ut42.nu@gmail.com>
Date: Sat, 30 May 2026 02:02:54 +0900
Subject: [PATCH 08/11] feat(checkin): redesign home screen with scan reticle

Gradient ground, staggered card entrance, a static scan reticle, and a scan-lock confirmation puck; fix the manual-entry icon.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 apps/checkin/src/app/page.tsx                | 196 ++++++++++++-------
 apps/checkin/src/components/scan-reticle.tsx |  24 +++
 2 files changed, 146 insertions(+), 74 deletions(-)
 create mode 100644 apps/checkin/src/components/scan-reticle.tsx

diff --git a/apps/checkin/src/app/page.tsx b/apps/checkin/src/app/page.tsx
index f080874..0407721 100644
--- a/apps/checkin/src/app/page.tsx
+++ b/apps/checkin/src/app/page.tsx
@@ -2,10 +2,11 @@
 
 import {
   IconArrowRight,
-  IconBug,
   IconCamera,
   IconCameraRotate,
+  IconCircleCheck,
   IconClipboardCheck,
+  IconKeyboard,
   IconQrcode,
   IconRefresh,
   IconUserPlus,
@@ -13,13 +14,18 @@ import {
 import { Button } from '@tecnova/ui/components/button';
 import { Card, CardContent, CardDescription } from '@tecnova/ui/components/card';
 import { BrowserMultiFormatReader, type IScannerControls } from '@zxing/browser';
+import { motion, useReducedMotion } from 'motion/react';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
-import { type ReactNode, useCallback, useEffect, useRef, useState } from 'react';
+import { type ReactNode, useCallback, useEffect, useRef, useState, ViewTransition } from 'react';
+import { PageShell } from '@/components/page-shell';
 import { PanelHeader, type PanelTone } from '@/components/panel-header';
+import { Reveal } from '@/components/reveal';
+import { ScanReticle } from '@/components/scan-reticle';
 import { PARTICIPANT_ID_PATTERN, participantProfilePath } from '@/lib/participant-id';
 
 function ActionPanel({
+  index,
   title,
   description,
   icon,
@@ -28,6 +34,7 @@ function ActionPanel({
   action,
   buttonVariant = 'default',
 }: {
+  index: number;
   title: string;
   description: string;
   icon: ReactNode;
@@ -37,26 +44,29 @@ function ActionPanel({
   buttonVariant?: 'default' | 'outline';
 }) {
   return (
-    <Card size="sm" className="flex h-full flex-col gap-2 py-4 shadow-sm">
-      <PanelHeader icon={icon} title={title} tone={tone} />
-      <CardContent className="flex flex-1 flex-col gap-2">
-        <CardDescription className="text-sm leading-relaxed text-foreground lg:text-base">
-          {description}
-        </CardDescription>
-        <div className="flex-1" />
-        <Button asChild variant={buttonVariant} size="lg" className="h-11 w-full text-base">
-          <Link href={href}>
-            {action}
-            <IconArrowRight className="size-5" data-icon="inline-end" />
-          </Link>
-        </Button>
-      </CardContent>
-    </Card>
+    <Reveal index={index} className="flex">
+      <Card size="sm" className="flex h-full w-full flex-col gap-2 py-4 shadow-sm">
+        <PanelHeader icon={icon} title={title} tone={tone} />
+        <CardContent className="flex flex-1 flex-col gap-2">
+          <CardDescription className="text-sm leading-relaxed text-foreground lg:text-base">
+            {description}
+          </CardDescription>
+          <div className="flex-1" />
+          <Button asChild variant={buttonVariant} size="lg" className="h-11 w-full text-base">
+            <Link href={href}>
+              {action}
+              <IconArrowRight className="size-5" data-icon="inline-end" />
+            </Link>
+          </Button>
+        </CardContent>
+      </Card>
+    </Reveal>
   );
 }
 
 export default function Home() {
   const router = useRouter();
+  const prefersReduced = useReducedMotion();
   const [cameraError, setCameraError] = useState<string | null>(null);
   const [scannerAttempt, setScannerAttempt] = useState(0);
   const [videoDevices, setVideoDevices] = useState<MediaDeviceInfo[]>([]);
@@ -65,6 +75,7 @@ export default function Home() {
   const videoRef = useRef<HTMLVideoElement | null>(null);
   const controlsRef = useRef<IScannerControls | null>(null);
   const navigatingRef = useRef(false);
+  const navTimerRef = useRef<number | null>(null);
 
   const refreshVideoDevices = useCallback(async () => {
     if (!navigator.mediaDevices?.enumerateDevices) return [];
@@ -98,7 +109,9 @@ export default function Home() {
           navigatingRef.current = true;
           controlsRef.current?.stop();
           setNavigatingId(value);
-          router.push(participantProfilePath(value));
+          navTimerRef.current = window.setTimeout(() => {
+            router.push(participantProfilePath(value));
+          }, 450);
         })
         .then((controls) => {
           if (cancelled) {
@@ -125,6 +138,16 @@ export default function Home() {
     };
   }, [navigatingId, refreshVideoDevices, router, scannerAttempt, selectedDeviceId]);
 
+  // ナビゲーション遅延タイマーはアンマウント時のみ掃除する。
+  // スキャナ effect の cleanup（navigatingId 変更で毎回走る）で消すと遷移がキャンセルされるため分離する。
+  useEffect(() => {
+    return () => {
+      if (navTimerRef.current) {
+        window.clearTimeout(navTimerRef.current);
+      }
+    };
+  }, []);
+
   const switchCamera = async () => {
     const devices = videoDevices.length > 0 ? videoDevices : await refreshVideoDevices();
     if (devices.length <= 1) {
@@ -140,63 +163,88 @@ export default function Home() {
   };
 
   return (
-    <main className="flex flex-1 flex-col bg-sky-50 p-4">
+    <PageShell>
       <div className="mx-auto flex w-full max-w-6xl flex-1 flex-col">
         <section className="grid flex-1 gap-3 lg:grid-cols-[minmax(0,1.55fr)_minmax(320px,0.65fr)]">
-          <Card className="flex h-full flex-col shadow-sm">
-            <PanelHeader
-              icon={<IconQrcode className="size-8" />}
-              title="QRコードをかざしてね"
-              tone="sky"
-            />
-            <CardContent className="flex flex-1 flex-col gap-4">
-              <div className="relative min-h-72 w-full flex-1 overflow-hidden rounded-lg bg-slate-950 lg:h-[clamp(280px,calc(100svh-340px),560px)] lg:flex-none">
-                <video ref={videoRef} className="h-full w-full object-cover" muted playsInline />
-                {navigatingId && (
-                  <div className="absolute inset-0 flex flex-col items-center justify-center gap-3 bg-slate-950/85 p-6 text-center text-white">
-                    <IconQrcode className="size-12" aria-hidden="true" />
-                    <p className="text-2xl font-black">プロフィールを開いています</p>
-                    <p className="text-4xl font-black tracking-widest tabular-nums">
-                      {navigatingId}
-                    </p>
-                  </div>
-                )}
-                {cameraError && (
-                  <div className="absolute inset-0 flex items-center justify-center bg-slate-950/85 p-6 text-center text-lg font-bold text-white">
-                    <IconCamera className="mr-3 size-8" aria-hidden="true" />
-                    カメラを起動できませんでした
-                  </div>
-                )}
-              </div>
-              <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
-                <Button
-                  type="button"
-                  variant="outline"
-                  size="lg"
-                  className="h-12 text-base"
-                  disabled={navigatingId !== null}
-                  onClick={() => setScannerAttempt((attempt) => attempt + 1)}
-                >
-                  <IconRefresh className="size-5" data-icon="inline-start" />
-                  カメラを再起動
-                </Button>
-                <Button
-                  type="button"
-                  variant="outline"
-                  size="lg"
-                  className="h-12 text-base"
-                  disabled={navigatingId !== null}
-                  onClick={() => void switchCamera()}
-                >
-                  <IconCameraRotate className="size-5" data-icon="inline-start" />
-                  カメラ切り替え
-                </Button>
-              </div>
-            </CardContent>
-          </Card>
+          <Reveal index={0} className="flex">
+            <Card className="flex h-full w-full flex-col border-sky-200 shadow-sm">
+              <PanelHeader
+                icon={<IconQrcode className="size-8" />}
+                title="QRコードをかざしてね"
+                tone="sky"
+              />
+              <CardContent className="flex flex-1 flex-col gap-4">
+                <div className="relative min-h-72 w-full flex-1 overflow-hidden rounded-lg bg-slate-950 lg:h-[clamp(280px,calc(100svh-340px),560px)] lg:flex-none">
+                  <video ref={videoRef} className="h-full w-full object-cover" muted playsInline />
+                  {!navigatingId && !cameraError && <ScanReticle />}
+                  {navigatingId && (
+                    <div className="absolute inset-0 flex items-center justify-center bg-slate-950/80 p-6">
+                      <ViewTransition name="participant-portal">
+                        <motion.div
+                          className="flex flex-col items-center gap-3 rounded-2xl bg-emerald-500 px-10 py-7 text-center text-white shadow-xl"
+                          initial={prefersReduced ? false : { scale: 0.9, opacity: 0 }}
+                          animate={{ scale: 1, opacity: 1 }}
+                          transition={
+                            prefersReduced ? undefined : { duration: 0.25, ease: 'easeOut' }
+                          }
+                        >
+                          <motion.span
+                            initial={prefersReduced ? false : { scale: 0.5, opacity: 0 }}
+                            animate={{ scale: 1, opacity: 1 }}
+                            transition={
+                              prefersReduced
+                                ? undefined
+                                : { type: 'spring', stiffness: 420, damping: 18, delay: 0.05 }
+                            }
+                          >
+                            <IconCircleCheck className="size-14" aria-hidden="true" />
+                          </motion.span>
+                          <p className="text-lg font-black">プロフィールを開いています</p>
+                          <p className="text-4xl font-black tracking-widest tabular-nums">
+                            {navigatingId}
+                          </p>
+                        </motion.div>
+                      </ViewTransition>
+                    </div>
+                  )}
+                  {cameraError && (
+                    <div className="absolute inset-0 flex items-center justify-center bg-slate-950/85 p-6 text-center text-lg font-bold text-white">
+                      <IconCamera className="mr-3 size-8" aria-hidden="true" />
+                      カメラを起動できませんでした
+                    </div>
+                  )}
+                </div>
+                <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="lg"
+                    className="h-12 text-base"
+                    disabled={navigatingId !== null}
+                    onClick={() => setScannerAttempt((attempt) => attempt + 1)}
+                  >
+                    <IconRefresh className="size-5" data-icon="inline-start" />
+                    カメラを再起動
+                  </Button>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="lg"
+                    className="h-12 text-base"
+                    disabled={navigatingId !== null}
+                    onClick={() => void switchCamera()}
+                  >
+                    <IconCameraRotate className="size-5" data-icon="inline-start" />
+                    カメラ切り替え
+                  </Button>
+                </div>
+              </CardContent>
+            </Card>
+          </Reveal>
 
           <div className="grid h-full gap-2 sm:grid-cols-3 lg:grid-cols-1 lg:grid-rows-3">
             <ActionPanel
+              index={1}
               title="初めての人"
               description="IDカードがない人はこちら。"
               icon={<IconUserPlus className="size-8" />}
@@ -204,8 +252,8 @@ export default function Home() {
               href="/first-time"
               action="初回登録へ"
             />
-
             <ActionPanel
+              index={2}
               title="受付りれき"
               description="今日の受付状況を確認します。"
               icon={<IconClipboardCheck className="size-8" />}
@@ -213,11 +261,11 @@ export default function Home() {
               href="/history"
               action="履歴を見る"
             />
-
             <ActionPanel
+              index={3}
               title="マニュアル入力"
               description="QRコードが読めないときはこちら。"
-              icon={<IconBug className="size-8" />}
+              icon={<IconKeyboard className="size-8" />}
               tone="slate"
               href="/manual"
               action="入力へ"
@@ -226,6 +274,6 @@ export default function Home() {
           </div>
         </section>
       </div>
-    </main>
+    </PageShell>
   );
 }
diff --git a/apps/checkin/src/components/scan-reticle.tsx b/apps/checkin/src/components/scan-reticle.tsx
new file mode 100644
index 0000000..0cc004c
--- /dev/null
+++ b/apps/checkin/src/components/scan-reticle.tsx
@@ -0,0 +1,24 @@
+// 映像枠に重ねる QR スキャン演出。スキャン対象の四隅を示す角ブラケットを静的に表示する。
+// pointer-events-none で下のビデオ操作を妨げない。アニメーションは持たない。
+const CORNER_CLASSES = [
+  'left-0 top-0 rounded-tl-xl border-l-4 border-t-4',
+  'right-0 top-0 rounded-tr-xl border-r-4 border-t-4',
+  'left-0 bottom-0 rounded-bl-xl border-b-4 border-l-4',
+  'right-0 bottom-0 rounded-br-xl border-b-4 border-r-4',
+] as const;
+
+export function ScanReticle() {
+  return (
+    <div className="pointer-events-none absolute inset-0 flex items-center justify-center p-6 sm:p-10">
+      <div className="relative aspect-square h-full max-h-[72%] max-w-[72%]">
+        {CORNER_CLASSES.map((pos) => (
+          <span
+            key={pos}
+            className={`absolute size-10 border-white/90 ${pos}`}
+            aria-hidden="true"
+          />
+        ))}
+      </div>
+    </div>
+  );
+}

From 08a7d1dca2d878e219a15bf0b52aa5a68a96a2a3 Mon Sep 17 00:00:00 2001
From: tmba <ut42.nu@gmail.com>
Date: Sat, 30 May 2026 02:02:54 +0900
Subject: [PATCH 09/11] feat(checkin): redesign remaining checkin screens

Apply the motion vocabulary to login, manual (sliding segmented control), first-time, history (animated summary + live dot), settings, and the guideline carousel (directional slides).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 apps/checkin/src/app/first-time/page.tsx      | 309 ++++++------
 apps/checkin/src/app/guideline/page.tsx       | 140 ++++--
 apps/checkin/src/app/history/page.tsx         | 458 ++++++++++--------
 apps/checkin/src/app/login/page.tsx           |  86 ++--
 apps/checkin/src/app/manual/page.tsx          | 103 ++--
 apps/checkin/src/app/settings/page.tsx        | 168 ++++---
 .../src/components/segmented-control.tsx      |  62 +++
 7 files changed, 754 insertions(+), 572 deletions(-)
 create mode 100644 apps/checkin/src/components/segmented-control.tsx

diff --git a/apps/checkin/src/app/first-time/page.tsx b/apps/checkin/src/app/first-time/page.tsx
index 508a985..6354c30 100644
--- a/apps/checkin/src/app/first-time/page.tsx
+++ b/apps/checkin/src/app/first-time/page.tsx
@@ -29,10 +29,15 @@ import { Input } from '@tecnova/ui/components/input';
 import { Skeleton } from '@tecnova/ui/components/skeleton';
 import { Table, TableBody, TableCell, TableRow } from '@tecnova/ui/components/table';
 import { apiFetch, readErrorMessage } from '@tecnova/ui/lib/api-client';
+import { motion, useReducedMotion } from 'motion/react';
 import Link from 'next/link';
 import { useCallback, useEffect, useMemo, useState } from 'react';
+import { AnimatedNumber } from '@/components/animated-number';
+import { PageShell } from '@/components/page-shell';
 import { PanelHeader } from '@/components/panel-header';
+import { Reveal } from '@/components/reveal';
 import { formatJapaneseDate } from '@/lib/format';
+import { listItemTransition } from '@/lib/motion';
 
 type State =
   | { kind: 'loading' }
@@ -73,6 +78,7 @@ function ParticipantDetails({ item }: { item: PreRegisteredParticipant }) {
 }
 
 function RegistrationSteps() {
+  const prefersReduced = useReducedMotion();
   const steps = [
     {
       number: '1',
@@ -93,8 +99,14 @@ function RegistrationSteps() {
 
   return (
     <ol className="grid gap-3 sm:grid-cols-3">
-      {steps.map((step) => (
-        <li key={step.number} className="flex items-center gap-3 rounded-lg border bg-white p-3">
+      {steps.map((step, index) => (
+        <motion.li
+          key={step.number}
+          className="flex items-center gap-3 rounded-lg border bg-white p-3"
+          initial={prefersReduced ? false : { opacity: 0, y: 8 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={listItemTransition(index)}
+        >
           <span className="flex size-9 shrink-0 items-center justify-center rounded-full bg-emerald-100 text-lg font-black text-emerald-700 tabular-nums">
             {step.number}
           </span>
@@ -104,13 +116,14 @@ function RegistrationSteps() {
               {step.description}
             </span>
           </span>
-        </li>
+        </motion.li>
       ))}
     </ol>
   );
 }
 
 export default function FirstTimePage() {
+  const prefersReduced = useReducedMotion();
   const [state, setState] = useState<State>({ kind: 'loading' });
   const [query, setQuery] = useState('');
 
@@ -151,7 +164,7 @@ export default function FirstTimePage() {
 
   if (state.kind === 'loading') {
     return (
-      <main className="flex flex-1 flex-col bg-sky-50 p-4 sm:p-6">
+      <PageShell>
         <div className="mx-auto flex w-full max-w-6xl flex-1 flex-col gap-4">
           <Card className="border-sky-200 shadow-sm">
             <CardHeader className="gap-4">
@@ -170,7 +183,7 @@ export default function FirstTimePage() {
             </CardContent>
           </Card>
         </div>
-      </main>
+      </PageShell>
     );
   }
 
@@ -201,158 +214,170 @@ export default function FirstTimePage() {
   }
 
   return (
-    <main className="flex flex-1 flex-col bg-sky-50 p-4 sm:p-6">
+    <PageShell>
       <div className="mx-auto flex w-full max-w-5xl flex-1 flex-col gap-4">
-        <Card className="border-sky-200 shadow-sm">
-          <PanelHeader icon={<IconUserPlus className="size-8" />} title="初回登録" tone="emerald" />
-          <CardContent className="flex flex-col gap-5">
-            <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
-              <CardDescription className="text-lg text-foreground">
-                IDカードをまだ持っていない人を、事前登録の一覧から選んでください。
-              </CardDescription>
-              <Badge
-                variant="secondary"
-                style={{ height: 'auto' }}
-                className="w-fit px-4 py-2 text-base"
-              >
-                未登録 {state.items.length}人
-              </Badge>
-            </div>
+        <Reveal>
+          <Card className="border-sky-200 shadow-sm">
+            <PanelHeader
+              icon={<IconUserPlus className="size-8" />}
+              title="初回登録"
+              tone="emerald"
+            />
+            <CardContent className="flex flex-col gap-5">
+              <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
+                <CardDescription className="text-lg text-foreground">
+                  IDカードをまだ持っていない人を、事前登録の一覧から選んでください。
+                </CardDescription>
+                <Badge
+                  variant="secondary"
+                  style={{ height: 'auto' }}
+                  className="w-fit px-4 py-2 text-base"
+                >
+                  未登録 <AnimatedNumber value={state.items.length} className="mx-1 tabular-nums" />
+                  人
+                </Badge>
+              </div>
 
-            <RegistrationSteps />
+              <RegistrationSteps />
 
-            {state.items.length === 0 ? (
-              <Alert className="border-sky-200 bg-white">
-                <IconAlertCircle className="size-5" aria-hidden="true" />
-                <AlertTitle>今、登録できる人はいません</AlertTitle>
-                <AlertDescription>
-                  名前が見つからないときはスタッフに声をかけてください。
-                </AlertDescription>
-              </Alert>
-            ) : (
-              <>
-                <div className="grid gap-3 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center">
-                  <div className="relative">
-                    <IconSearch
-                      className="pointer-events-none absolute top-1/2 left-4 size-5 -translate-y-1/2 text-muted-foreground"
-                      aria-hidden="true"
-                    />
-                    <Input
-                      aria-label="事前登録者検索"
-                      type="search"
-                      value={query}
-                      onChange={(e) => setQuery(e.target.value)}
-                      placeholder="氏名・ニックネーム・学年・登録日で検索"
-                      className="h-14 rounded-lg bg-white pr-5 pl-12 text-lg"
-                    />
-                  </div>
-                  <div className="grid gap-3 sm:grid-cols-2 lg:flex">
-                    {query ? (
+              {state.items.length === 0 ? (
+                <Alert className="border-sky-200 bg-white">
+                  <IconAlertCircle className="size-5" aria-hidden="true" />
+                  <AlertTitle>今、登録できる人はいません</AlertTitle>
+                  <AlertDescription>
+                    名前が見つからないときはスタッフに声をかけてください。
+                  </AlertDescription>
+                </Alert>
+              ) : (
+                <>
+                  <div className="grid gap-3 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center">
+                    <div className="relative">
+                      <IconSearch
+                        className="pointer-events-none absolute top-1/2 left-4 size-5 -translate-y-1/2 text-muted-foreground"
+                        aria-hidden="true"
+                      />
+                      <Input
+                        aria-label="事前登録者検索"
+                        type="search"
+                        value={query}
+                        onChange={(e) => setQuery(e.target.value)}
+                        placeholder="氏名・ニックネーム・学年・登録日で検索"
+                        className="h-14 rounded-lg bg-white pr-5 pl-12 text-lg"
+                      />
+                    </div>
+                    <div className="grid gap-3 sm:grid-cols-2 lg:flex">
+                      {query ? (
+                        <Button
+                          type="button"
+                          variant="outline"
+                          size="lg"
+                          onClick={() => setQuery('')}
+                          className="h-14 text-lg"
+                        >
+                          <IconX className="size-6" data-icon="inline-start" />
+                          検索をクリア
+                        </Button>
+                      ) : null}
                       <Button
                         type="button"
                         variant="outline"
                         size="lg"
-                        onClick={() => setQuery('')}
+                        onClick={() => void loadParticipants()}
                         className="h-14 text-lg"
                       >
-                        <IconX className="size-6" data-icon="inline-start" />
-                        検索をクリア
+                        <IconRefresh className="size-6" data-icon="inline-start" />
+                        更新
                       </Button>
-                    ) : null}
-                    <Button
-                      type="button"
-                      variant="outline"
-                      size="lg"
-                      onClick={() => void loadParticipants()}
-                      className="h-14 text-lg"
-                    >
-                      <IconRefresh className="size-6" data-icon="inline-start" />
-                      更新
-                    </Button>
+                    </div>
                   </div>
-                </div>
 
-                {filteredItems.length === 0 ? (
-                  <Alert className="border-amber-200 bg-amber-50 text-amber-950">
-                    <IconAlertCircle className="size-5" aria-hidden="true" />
-                    <AlertTitle>一致する人がいません</AlertTitle>
-                    <AlertDescription>
-                      検索を消して、一覧からニックネームと学年を確認してください。
-                    </AlertDescription>
-                  </Alert>
-                ) : (
-                  <ul className="grid gap-3 sm:grid-cols-2">
-                    {filteredItems.map((item) => (
-                      <li key={item.preRegistrationId}>
-                        <AlertDialog>
-                          <AlertDialogTrigger asChild>
-                            <Button
-                              type="button"
-                              variant="outline"
-                              className="h-auto min-h-28 w-full justify-between gap-4 whitespace-normal rounded-lg border-2 bg-white px-5 py-4 text-left hover:bg-emerald-50"
-                            >
-                              <span className="flex min-w-0 flex-col gap-2">
-                                <span className="break-words text-2xl font-black leading-tight">
-                                  {item.nickname}
+                  {filteredItems.length === 0 ? (
+                    <Alert className="border-amber-200 bg-amber-50 text-amber-950">
+                      <IconAlertCircle className="size-5" aria-hidden="true" />
+                      <AlertTitle>一致する人がいません</AlertTitle>
+                      <AlertDescription>
+                        検索を消して、一覧からニックネームと学年を確認してください。
+                      </AlertDescription>
+                    </Alert>
+                  ) : (
+                    <ul className="grid gap-3 sm:grid-cols-2">
+                      {filteredItems.map((item, index) => (
+                        <motion.li
+                          key={item.preRegistrationId}
+                          initial={prefersReduced ? false : { opacity: 0, y: 8 }}
+                          animate={{ opacity: 1, y: 0 }}
+                          transition={listItemTransition(index)}
+                        >
+                          <AlertDialog>
+                            <AlertDialogTrigger asChild>
+                              <Button
+                                type="button"
+                                variant="outline"
+                                className="h-auto min-h-28 w-full justify-between gap-4 whitespace-normal rounded-lg border-2 bg-white px-5 py-4 text-left hover:bg-emerald-50"
+                              >
+                                <span className="flex min-w-0 flex-col gap-2">
+                                  <span className="break-words text-2xl font-black leading-tight">
+                                    {item.nickname}
+                                  </span>
+                                  <span className="break-words text-base font-bold text-muted-foreground">
+                                    {item.fullName}
+                                  </span>
+                                  <span className="flex items-center gap-2 text-base text-muted-foreground">
+                                    <IconCalendar className="size-5 shrink-0" aria-hidden="true" />
+                                    事前登録 {formatJapaneseDate(item.registeredAt)}
+                                  </span>
                                 </span>
-                                <span className="break-words text-base font-bold text-muted-foreground">
-                                  {item.fullName}
+                                <span className="flex shrink-0 items-center gap-2">
+                                  <Badge
+                                    variant="secondary"
+                                    style={{ height: 'auto' }}
+                                    className="px-4 py-2 text-base"
+                                  >
+                                    {item.grade}
+                                  </Badge>
+                                  <IconArrowRight
+                                    className="size-6 text-muted-foreground"
+                                    aria-hidden="true"
+                                  />
                                 </span>
-                                <span className="flex items-center gap-2 text-base text-muted-foreground">
-                                  <IconCalendar className="size-5 shrink-0" aria-hidden="true" />
-                                  事前登録 {formatJapaneseDate(item.registeredAt)}
-                                </span>
-                              </span>
-                              <span className="flex shrink-0 items-center gap-2">
-                                <Badge
-                                  variant="secondary"
-                                  style={{ height: 'auto' }}
-                                  className="px-4 py-2 text-base"
-                                >
-                                  {item.grade}
-                                </Badge>
-                                <IconArrowRight
-                                  className="size-6 text-muted-foreground"
-                                  aria-hidden="true"
-                                />
-                              </span>
-                            </Button>
-                          </AlertDialogTrigger>
-                          <AlertDialogContent>
-                            <AlertDialogHeader>
-                              <AlertDialogMedia className="bg-emerald-100 text-emerald-700">
-                                <IconUserPlus className="size-9" aria-hidden="true" />
-                              </AlertDialogMedia>
-                              <AlertDialogTitle>{item.nickname}さんで進みますか</AlertDialogTitle>
-                              <AlertDialogDescription>
-                                次に参加ガイドラインを確認します。最後に同意するとIDが発行されます。
-                              </AlertDialogDescription>
-                            </AlertDialogHeader>
-                            <ParticipantDetails item={item} />
-                            <AlertDialogFooter>
-                              <AlertDialogCancel size="lg">キャンセル</AlertDialogCancel>
-                              <Button asChild size="lg">
-                                <Link
-                                  href={`/guideline?preRegistrationId=${encodeURIComponent(
-                                    item.preRegistrationId,
-                                  )}`}
-                                >
-                                  ガイドラインへ
-                                  <IconArrowRight className="size-5" data-icon="inline-end" />
-                                </Link>
                               </Button>
-                            </AlertDialogFooter>
-                          </AlertDialogContent>
-                        </AlertDialog>
-                      </li>
-                    ))}
-                  </ul>
-                )}
-              </>
-            )}
-          </CardContent>
-        </Card>
+                            </AlertDialogTrigger>
+                            <AlertDialogContent>
+                              <AlertDialogHeader>
+                                <AlertDialogMedia className="bg-emerald-100 text-emerald-700">
+                                  <IconUserPlus className="size-9" aria-hidden="true" />
+                                </AlertDialogMedia>
+                                <AlertDialogTitle>{item.nickname}さんで進みますか</AlertDialogTitle>
+                                <AlertDialogDescription>
+                                  次に参加ガイドラインを確認します。最後に同意するとIDが発行されます。
+                                </AlertDialogDescription>
+                              </AlertDialogHeader>
+                              <ParticipantDetails item={item} />
+                              <AlertDialogFooter>
+                                <AlertDialogCancel size="lg">キャンセル</AlertDialogCancel>
+                                <Button asChild size="lg">
+                                  <Link
+                                    href={`/guideline?preRegistrationId=${encodeURIComponent(
+                                      item.preRegistrationId,
+                                    )}`}
+                                  >
+                                    ガイドラインへ
+                                    <IconArrowRight className="size-5" data-icon="inline-end" />
+                                  </Link>
+                                </Button>
+                              </AlertDialogFooter>
+                            </AlertDialogContent>
+                          </AlertDialog>
+                        </motion.li>
+                      ))}
+                    </ul>
+                  )}
+                </>
+              )}
+            </CardContent>
+          </Card>
+        </Reveal>
       </div>
-    </main>
+    </PageShell>
   );
 }
diff --git a/apps/checkin/src/app/guideline/page.tsx b/apps/checkin/src/app/guideline/page.tsx
index ab5bf62..95557dd 100644
--- a/apps/checkin/src/app/guideline/page.tsx
+++ b/apps/checkin/src/app/guideline/page.tsx
@@ -42,12 +42,15 @@ import { Skeleton } from '@tecnova/ui/components/skeleton';
 import { Table, TableBody, TableCell, TableRow } from '@tecnova/ui/components/table';
 import { apiFetch, readErrorMessage } from '@tecnova/ui/lib/api-client';
 import { cn } from '@tecnova/ui/lib/utils';
+import { AnimatePresence, motion, useReducedMotion } from 'motion/react';
 import Link from 'next/link';
 import { useSearchParams } from 'next/navigation';
 import { type ReactNode, Suspense, useCallback, useEffect, useMemo, useState } from 'react';
+import { PageShell } from '@/components/page-shell';
 import { PanelHeader } from '@/components/panel-header';
 import { ResultSummaryCard } from '@/components/result-summary-card';
 import { formatJapaneseDate, formatJapaneseDateTime } from '@/lib/format';
+import { popAnimate, popInitial, popTransition } from '@/lib/motion';
 
 type State =
   | { kind: 'loading' }
@@ -376,7 +379,7 @@ function ParticipantStatusChip({ item }: { item: PreRegisteredParticipant }) {
 
 function LoadingScreen() {
   return (
-    <main className="flex flex-1 flex-col bg-sky-50 p-4 sm:p-6">
+    <PageShell>
       <div className="mx-auto flex w-full max-w-6xl flex-1 flex-col gap-4">
         <Card className="border-sky-200 shadow-sm">
           <CardContent className="flex flex-col gap-4 p-6">
@@ -389,7 +392,7 @@ function LoadingScreen() {
           </CardContent>
         </Card>
       </div>
-    </main>
+    </PageShell>
   );
 }
 
@@ -449,7 +452,7 @@ function ErrorScreen({
 
 function ActivatingScreen({ item }: { item: PreRegisteredParticipant }) {
   return (
-    <main className="flex flex-1 items-center justify-center bg-sky-50 p-4 sm:p-6">
+    <PageShell className="items-center justify-center">
       <Card className="w-full max-w-xl border-emerald-200 shadow-sm">
         <PanelHeader
           icon={<IconRefresh className="size-8 animate-spin" />}
@@ -463,7 +466,7 @@ function ActivatingScreen({ item }: { item: PreRegisteredParticipant }) {
           </p>
         </CardContent>
       </Card>
-    </main>
+    </PageShell>
   );
 }
 
@@ -474,6 +477,7 @@ function GuidelineSlideView({
   total,
   isLast,
   agreed,
+  direction,
   onAgreeChange,
   onPrev,
   onNext,
@@ -485,6 +489,7 @@ function GuidelineSlideView({
   total: number;
   isLast: boolean;
   agreed: boolean;
+  direction: number;
   onAgreeChange: (checked: boolean) => void;
   onPrev: () => void;
   onNext: () => void;
@@ -492,9 +497,21 @@ function GuidelineSlideView({
 }) {
   const tone = guidelineToneClasses[slide.tone];
   const progress = `${(current / total) * 100}%`;
+  const prefersReduced = useReducedMotion();
+  const offset = 40;
+
+  // 矢印キーでスライドを前後に移動できるようにする（iPad の外付けキーボード運用を想定）。
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'ArrowRight' && !isLast) onNext();
+      if (e.key === 'ArrowLeft' && current > 1) onPrev();
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [current, isLast, onNext, onPrev]);
 
   return (
-    <main className="flex flex-1 flex-col bg-sky-50 p-3 sm:p-4">
+    <PageShell className="p-3 sm:p-4">
       <div className="mx-auto flex w-full max-w-6xl flex-1 flex-col gap-4">
         <Card className="flex flex-1 border-sky-200 py-4 shadow-sm">
           <PanelHeader
@@ -525,42 +542,64 @@ function GuidelineSlideView({
                 </span>
               </div>
               <div className="h-2 overflow-hidden rounded-full bg-white ring-1 ring-slate-200">
-                <div
+                <motion.div
                   className={cn('h-full rounded-full', tone.progress)}
-                  style={{ width: progress }}
+                  initial={false}
+                  animate={{ width: progress }}
+                  transition={prefersReduced ? { duration: 0 } : { duration: 0.4, ease: 'easeOut' }}
                 />
               </div>
             </div>
 
-            <section className="grid min-h-[300px] items-stretch gap-3 lg:grid-cols-[260px_minmax(0,1fr)]">
-              <div
-                className={cn(
-                  'flex flex-col items-center justify-center gap-4 rounded-lg border p-4 text-center',
-                  tone.panel,
-                )}
-              >
-                <div
-                  aria-hidden="true"
-                  className={cn('flex size-24 items-center justify-center rounded-full', tone.icon)}
+            <div className="relative min-h-[300px]">
+              <AnimatePresence mode="wait" custom={direction}>
+                <motion.section
+                  key={current}
+                  custom={direction}
+                  initial={prefersReduced ? false : { opacity: 0, x: direction * offset }}
+                  animate={{ opacity: 1, x: 0 }}
+                  exit={prefersReduced ? { opacity: 0 } : { opacity: 0, x: direction * -offset }}
+                  transition={
+                    prefersReduced ? { duration: 0 } : { duration: 0.28, ease: 'easeOut' }
+                  }
+                  className="grid min-h-[300px] items-stretch gap-3 lg:grid-cols-[260px_minmax(0,1fr)]"
                 >
-                  {slide.icon}
-                </div>
-                <p className="text-2xl font-semibold leading-tight">{slide.visual}</p>
-              </div>
+                  <div
+                    className={cn(
+                      'flex flex-col items-center justify-center gap-4 rounded-lg border p-4 text-center',
+                      tone.panel,
+                    )}
+                  >
+                    <motion.div
+                      aria-hidden="true"
+                      className={cn(
+                        'flex size-24 items-center justify-center rounded-full',
+                        tone.icon,
+                      )}
+                      initial={prefersReduced ? false : popInitial}
+                      animate={popAnimate}
+                      transition={popTransition(0)}
+                    >
+                      {slide.icon}
+                    </motion.div>
+                    <p className="text-2xl font-semibold leading-tight">{slide.visual}</p>
+                  </div>
 
-              <div className="flex flex-col justify-center rounded-lg border bg-white p-4 sm:p-5">
-                <p className="text-base font-semibold text-muted-foreground">{slide.group}</p>
-                <h1 className="mt-2 break-words text-3xl font-bold leading-tight sm:text-4xl">
-                  {slide.title}
-                </h1>
-                <p className="mt-4 rounded-lg border bg-slate-50 p-4 text-xl font-semibold leading-relaxed">
-                  {slide.rule}
-                </p>
-                <p className="mt-3 text-lg font-medium leading-relaxed text-foreground">
-                  {slide.explanation}
-                </p>
-              </div>
-            </section>
+                  <div className="flex flex-col justify-center rounded-lg border bg-white p-4 sm:p-5">
+                    <p className="text-base font-semibold text-muted-foreground">{slide.group}</p>
+                    <h1 className="mt-2 break-words text-3xl font-bold leading-tight sm:text-4xl">
+                      {slide.title}
+                    </h1>
+                    <p className="mt-4 rounded-lg border bg-slate-50 p-4 text-xl font-semibold leading-relaxed">
+                      {slide.rule}
+                    </p>
+                    <p className="mt-3 text-lg font-medium leading-relaxed text-foreground">
+                      {slide.explanation}
+                    </p>
+                  </div>
+                </motion.section>
+              </AnimatePresence>
+            </div>
 
             {isLast ? (
               <div className="grid gap-3 rounded-lg border border-emerald-200 bg-emerald-50 p-3">
@@ -620,7 +659,7 @@ function GuidelineSlideView({
           </CardContent>
         </Card>
       </div>
-    </main>
+    </PageShell>
   );
 }
 
@@ -630,6 +669,16 @@ function GuidelinePageContent() {
   const [state, setState] = useState<State>({ kind: 'loading' });
   const [slideIndex, setSlideIndex] = useState(0);
   const [agreed, setAgreed] = useState(false);
+  const [direction, setDirection] = useState(1);
+
+  const goPrev = () => {
+    setDirection(-1);
+    setSlideIndex((index) => Math.max(0, index - 1));
+  };
+  const goNext = () => {
+    setDirection(1);
+    setSlideIndex((index) => Math.min(GUIDELINE_SLIDES.length - 1, index + 1));
+  };
 
   const loadTarget = useCallback(async () => {
     if (!preRegistrationId) {
@@ -719,22 +768,12 @@ function GuidelinePageContent() {
         tone="emerald"
         icon={<IconCircleCheck className="size-8" />}
         rows={[
-          {
-            label: 'ID',
-            value: state.data.participantId,
-            valueClassName: 'tabular-nums',
-          },
+          { label: 'ID', value: state.data.participantId, valueClassName: 'tabular-nums' },
           { label: '氏名', value: state.data.fullName },
           { label: 'ニックネーム', value: state.data.nickname },
           { label: '学年', value: state.data.grade },
-          {
-            label: '初回チェックイン',
-            value: formatJapaneseDateTime(state.data.checkedInAt),
-          },
-          {
-            label: '事前登録日',
-            value: formatJapaneseDate(state.registeredAt),
-          },
+          { label: '初回チェックイン', value: formatJapaneseDateTime(state.data.checkedInAt) },
+          { label: '事前登録日', value: formatJapaneseDate(state.registeredAt) },
         ]}
         note="表示されたIDでカードを作ってください"
         footer={
@@ -763,9 +802,10 @@ function GuidelinePageContent() {
       total={GUIDELINE_SLIDES.length}
       isLast={slideIndex === GUIDELINE_SLIDES.length - 1}
       agreed={agreed}
+      direction={direction}
       onAgreeChange={setAgreed}
-      onPrev={() => setSlideIndex((index) => Math.max(0, index - 1))}
-      onNext={() => setSlideIndex((index) => Math.min(GUIDELINE_SLIDES.length - 1, index + 1))}
+      onPrev={goPrev}
+      onNext={goNext}
       onSubmit={() => void activate()}
     />
   );
diff --git a/apps/checkin/src/app/history/page.tsx b/apps/checkin/src/app/history/page.tsx
index 71520d0..94f5ba3 100644
--- a/apps/checkin/src/app/history/page.tsx
+++ b/apps/checkin/src/app/history/page.tsx
@@ -43,15 +43,22 @@ import {
 } from '@tecnova/ui/components/table';
 import { TermBadge, UncountedBadge } from '@tecnova/ui/components/term-badge';
 import { apiFetch, readErrorMessage } from '@tecnova/ui/lib/api-client';
+import { motion, useReducedMotion } from 'motion/react';
 import Link from 'next/link';
 import { useCallback, useEffect, useMemo, useState } from 'react';
+import { AnimatedNumber } from '@/components/animated-number';
+import { LiveDot } from '@/components/live-dot';
+import { PageShell } from '@/components/page-shell';
 import { PanelHeader } from '@/components/panel-header';
+import { Reveal } from '@/components/reveal';
+import { StatTile } from '@/components/stat-tile';
 import {
   formatDuration,
   formatJapaneseDate,
   formatJapaneseDateTime,
   formatJapaneseDateTimeWithYear,
 } from '@/lib/format';
+import { listItemTransition } from '@/lib/motion';
 import { participantProfilePath } from '@/lib/participant-id';
 
 const fetchTodayHistory = async (): Promise<TodaySessionsResponse> => {
@@ -83,7 +90,7 @@ const getSessionStayDurationMinutes = (session: TodaySessionItem, nowMs: number)
 
 function LoadingScreen() {
   return (
-    <main className="flex flex-1 flex-col bg-sky-50 p-4 sm:p-6">
+    <PageShell>
       <div className="mx-auto flex w-full max-w-6xl flex-1 flex-col gap-4">
         <Card className="border-sky-200 shadow-sm">
           <CardContent className="grid gap-4 p-6">
@@ -97,7 +104,7 @@ function LoadingScreen() {
           </CardContent>
         </Card>
       </div>
-    </main>
+    </PageShell>
   );
 }
 
@@ -177,6 +184,7 @@ function CheckoutDialog({
 }
 
 export default function HistoryPage() {
+  const prefersReduced = useReducedMotion();
   const [data, setData] = useState<TodaySessionsResponse | null>(null);
   const [isLoading, setIsLoading] = useState(true);
   const [isSubmitting, setIsSubmitting] = useState(false);
@@ -302,227 +310,255 @@ export default function HistoryPage() {
   const eventLabel = data?.event ? formatJapaneseDate(data.event.date) : '今日';
 
   return (
-    <main className="flex flex-1 flex-col bg-sky-50 p-4 sm:p-6">
+    <PageShell>
       <div className="mx-auto flex w-full max-w-6xl flex-1 flex-col gap-4">
-        <Card className="border-sky-200 shadow-sm">
-          <PanelHeader
-            icon={<IconClipboardCheck className="size-8" />}
-            title="受付りれき"
-            tone="sky"
-          />
-          <CardContent className="flex flex-col gap-5">
-            <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
-              <div className="min-w-0">
-                <CardDescription className="text-lg text-foreground">
-                  {eventLabel}の受付履歴と参加者の状態を確認できます。
-                  「滞在中全員をチェックアウト」は12:00や各タームの終わりに締めるときに使います。
-                </CardDescription>
-              </div>
-              <div className="grid gap-3 sm:grid-cols-2 lg:flex lg:flex-wrap lg:justify-end">
-                <Button
-                  type="button"
-                  variant="outline"
-                  size="lg"
-                  disabled={isSubmitting}
-                  onClick={() => void loadSessions({ showLoading: false })}
-                  className="h-14 text-lg"
-                >
-                  <IconRefresh className="size-6" data-icon="inline-start" />
-                  更新
-                </Button>
-                <CheckoutDialog
-                  buttonLabel="滞在中全員をチェックアウト"
-                  count={presentIds.length}
-                  disabled={presentIds.length === 0 || isSubmitting}
-                  onConfirm={() => void checkoutParticipants(presentIds)}
-                />
+        <Reveal index={0}>
+          <Card className="border-sky-200 shadow-sm">
+            <PanelHeader
+              icon={<IconClipboardCheck className="size-8" />}
+              title="受付りれき"
+              tone="sky"
+            />
+            <CardContent className="flex flex-col gap-5">
+              <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
+                <div className="min-w-0">
+                  <CardDescription className="text-lg text-foreground">
+                    {eventLabel}の受付履歴と参加者の状態を確認できます。
+                    「滞在中全員をチェックアウト」は12:00や各タームの終わりに締めるときに使います。
+                  </CardDescription>
+                </div>
+                <div className="grid gap-3 sm:grid-cols-2 lg:flex lg:flex-wrap lg:justify-end">
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="lg"
+                    disabled={isSubmitting}
+                    onClick={() => void loadSessions({ showLoading: false })}
+                    className="h-14 text-lg"
+                  >
+                    <IconRefresh className="size-6" data-icon="inline-start" />
+                    更新
+                  </Button>
+                  <CheckoutDialog
+                    buttonLabel="滞在中全員をチェックアウト"
+                    count={presentIds.length}
+                    disabled={presentIds.length === 0 || isSubmitting}
+                    onConfirm={() => void checkoutParticipants(presentIds)}
+                  />
+                </div>
               </div>
-            </div>
 
-            <div className="grid gap-3 sm:grid-cols-3">
-              <div className="rounded-lg border bg-white p-4">
-                <p className="text-sm font-bold text-muted-foreground">今日の受付</p>
-                <p className="mt-2 text-4xl font-black tabular-nums">
-                  {summary.totalCheckedIn}
-                  <span className="ml-1 text-2xl">人</span>
-                </p>
-              </div>
-              <div className="rounded-lg border border-emerald-200 bg-emerald-50 p-4">
-                <p className="text-sm font-bold text-emerald-700">滞在中</p>
-                <p className="mt-2 text-4xl font-black text-emerald-700 tabular-nums">
-                  {summary.currentlyPresent}
-                  <span className="ml-1 text-2xl">人</span>
-                </p>
-              </div>
-              <div className="rounded-lg border bg-white p-4">
-                <p className="text-sm font-bold text-muted-foreground">退室済み</p>
-                <p className="mt-2 text-4xl font-black tabular-nums">
-                  {summary.checkedOut}
-                  <span className="ml-1 text-2xl">人</span>
-                </p>
+              <div className="grid gap-3 sm:grid-cols-3">
+                <StatTile
+                  label="今日の受付"
+                  value={
+                    <>
+                      <AnimatedNumber value={summary.totalCheckedIn} />
+                      <span className="ml-1 text-2xl">人</span>
+                    </>
+                  }
+                />
+                <StatTile
+                  tone="emerald"
+                  label={
+                    <span className="flex items-center gap-2">
+                      <LiveDot active={summary.currentlyPresent > 0} />
+                      滞在中
+                    </span>
+                  }
+                  value={
+                    <>
+                      <AnimatedNumber value={summary.currentlyPresent} />
+                      <span className="ml-1 text-2xl">人</span>
+                    </>
+                  }
+                />
+                <StatTile
+                  label="退室済み"
+                  value={
+                    <>
+                      <AnimatedNumber value={summary.checkedOut} />
+                      <span className="ml-1 text-2xl">人</span>
+                    </>
+                  }
+                />
               </div>
-            </div>
 
-            {lastResult && (
-              <Alert className="border-emerald-200 bg-emerald-50 text-emerald-900">
-                <IconLogout2 className="size-5" aria-hidden="true" />
-                <AlertTitle>チェックアウトしました</AlertTitle>
-                <AlertDescription>
-                  {lastResult.checkedOutCount}人を
-                  {formatJapaneseDateTime(lastResult.checkedOutAt)}にチェックアウトしました。
-                </AlertDescription>
-              </Alert>
-            )}
+              {lastResult && (
+                <Alert className="border-emerald-200 bg-emerald-50 text-emerald-900">
+                  <IconLogout2 className="size-5" aria-hidden="true" />
+                  <AlertTitle>チェックアウトしました</AlertTitle>
+                  <AlertDescription>
+                    {lastResult.checkedOutCount}人を
+                    {formatJapaneseDateTime(lastResult.checkedOutAt)}にチェックアウトしました。
+                  </AlertDescription>
+                </Alert>
+              )}
 
-            {error && (
-              <Alert variant="destructive">
-                <IconAlertCircle className="size-5" aria-hidden="true" />
-                <AlertTitle>処理できませんでした</AlertTitle>
-                <AlertDescription>{error}</AlertDescription>
-              </Alert>
-            )}
+              {error && (
+                <Alert variant="destructive">
+                  <IconAlertCircle className="size-5" aria-hidden="true" />
+                  <AlertTitle>処理できませんでした</AlertTitle>
+                  <AlertDescription>{error}</AlertDescription>
+                </Alert>
+              )}
 
-            <div className="grid gap-3 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-end">
-              <Input
-                aria-label="参加者検索"
-                type="search"
-                value={query}
-                onChange={(e) => setQuery(e.target.value)}
-                placeholder="ID・ニックネーム・氏名・学年で検索"
-                className="h-14 rounded-lg bg-white px-5 text-lg"
-              />
-              <div className="grid gap-3 sm:grid-cols-2 lg:flex">
-                <Button
-                  type="button"
-                  variant="outline"
-                  size="lg"
-                  disabled={filteredPresentIds.length === 0 || isSubmitting}
-                  onClick={() => toggleFilteredPresent(!allFilteredPresentSelected)}
-                  className="h-14 text-lg"
-                >
-                  {allFilteredPresentSelected ? '表示中の選択を解除' : '表示中の滞在者を選択'}
-                </Button>
-                <CheckoutDialog
-                  buttonLabel={`選択中 ${selectedPresentIds.length}人をチェックアウト`}
-                  count={selectedPresentIds.length}
-                  disabled={selectedPresentIds.length === 0 || isSubmitting}
-                  onConfirm={() => void checkoutParticipants(selectedPresentIds)}
+              <div className="grid gap-3 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-end">
+                <Input
+                  aria-label="参加者検索"
+                  type="search"
+                  value={query}
+                  onChange={(e) => setQuery(e.target.value)}
+                  placeholder="ID・ニックネーム・氏名・学年で検索"
+                  className="h-14 rounded-lg bg-white px-5 text-lg"
                 />
+                <div className="grid gap-3 sm:grid-cols-2 lg:flex">
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="lg"
+                    disabled={filteredPresentIds.length === 0 || isSubmitting}
+                    onClick={() => toggleFilteredPresent(!allFilteredPresentSelected)}
+                    className="h-14 text-lg"
+                  >
+                    {allFilteredPresentSelected ? '表示中の選択を解除' : '表示中の滞在者を選択'}
+                  </Button>
+                  <CheckoutDialog
+                    buttonLabel={`選択中 ${selectedPresentIds.length}人をチェックアウト`}
+                    count={selectedPresentIds.length}
+                    disabled={selectedPresentIds.length === 0 || isSubmitting}
+                    onConfirm={() => void checkoutParticipants(selectedPresentIds)}
+                  />
+                </div>
               </div>
-            </div>
-          </CardContent>
-        </Card>
+            </CardContent>
+          </Card>
+        </Reveal>
 
-        <Card className="shadow-sm">
-          <CardContent className="p-0">
-            {filteredSessions.length === 0 ? (
-              <div className="flex flex-col items-center justify-center gap-4 p-10 text-center">
-                <div className="flex size-16 items-center justify-center rounded-full bg-slate-100 text-slate-600">
-                  <IconUser className="size-9" aria-hidden="true" />
+        <Reveal index={1}>
+          <Card className="shadow-sm">
+            <CardContent className="p-0">
+              {filteredSessions.length === 0 ? (
+                <div className="flex flex-col items-center justify-center gap-4 p-10 text-center">
+                  <div className="flex size-16 items-center justify-center rounded-full bg-slate-100 text-slate-600">
+                    <IconUser className="size-9" aria-hidden="true" />
+                  </div>
+                  <p className="text-xl font-bold text-muted-foreground">
+                    表示できる参加者はいません
+                  </p>
                 </div>
-                <p className="text-xl font-bold text-muted-foreground">
-                  表示できる参加者はいません
-                </p>
-              </div>
-            ) : (
-              <div className="overflow-x-auto">
-                <Table>
-                  <TableHeader>
-                    <TableRow>
-                      <TableHead className="w-16">
-                        <Checkbox
-                          aria-label="表示中の滞在者を選択"
-                          checked={allFilteredPresentSelected}
-                          disabled={filteredPresentIds.length === 0 || isSubmitting}
-                          onCheckedChange={(checked) => toggleFilteredPresent(checked === true)}
-                          className="size-6 rounded-md"
-                        />
-                      </TableHead>
-                      <TableHead className="min-w-48">参加者</TableHead>
-                      <TableHead className="min-w-36">状態</TableHead>
-                      <TableHead className="min-w-44">受付時刻</TableHead>
-                      <TableHead className="min-w-36">滞在時間</TableHead>
-                      <TableHead className="min-w-36">操作</TableHead>
-                    </TableRow>
-                  </TableHeader>
-                  <TableBody className="text-base">
-                    {filteredSessions.map((session) => {
-                      const stayDurationMinutes = getSessionStayDurationMinutes(session, nowMs);
-                      return (
-                        <TableRow key={session.sessionId}>
-                          <TableCell>
-                            {session.isPresent ? (
-                              <Checkbox
-                                aria-label={`${session.nickname}を選択`}
-                                checked={selectedIdSet.has(session.participantId)}
-                                disabled={isSubmitting}
-                                onCheckedChange={(checked) =>
-                                  toggleParticipant(session.participantId, checked === true)
-                                }
-                                className="size-6 rounded-md"
-                              />
-                            ) : null}
-                          </TableCell>
-                          <TableCell>
-                            <div className="flex min-w-0 flex-col gap-1">
-                              <span className="break-words text-lg font-bold">
-                                {session.nickname}
-                              </span>
-                              <span className="break-words text-sm font-bold text-muted-foreground">
-                                {session.fullName}
-                              </span>
-                              <span className="text-sm font-bold text-muted-foreground">
-                                <span className="tabular-nums">ID {session.participantId}</span>
-                                <span className="mx-2">/</span>
-                                {session.grade}
-                              </span>
-                            </div>
-                          </TableCell>
-                          <TableCell>
-                            <div className="flex flex-wrap items-center gap-2">
-                              <Badge
-                                variant="secondary"
-                                style={{ height: 'auto' }}
-                                className={
-                                  session.isPresent
-                                    ? 'bg-emerald-100 px-3 py-1.5 text-emerald-700'
-                                    : 'px-3 py-1.5'
-                                }
-                              >
-                                {session.isPresent ? '滞在中' : '退室済み'}
-                              </Badge>
-                              {session.term ? (
-                                <TermBadge term={session.term} counted={session.counted} />
+              ) : (
+                <div className="overflow-x-auto">
+                  <Table>
+                    <TableHeader>
+                      <TableRow>
+                        <TableHead className="w-16">
+                          <Checkbox
+                            aria-label="表示中の滞在者を選択"
+                            checked={allFilteredPresentSelected}
+                            disabled={filteredPresentIds.length === 0 || isSubmitting}
+                            onCheckedChange={(checked) => toggleFilteredPresent(checked === true)}
+                            className="size-6 rounded-md"
+                          />
+                        </TableHead>
+                        <TableHead className="min-w-48">参加者</TableHead>
+                        <TableHead className="min-w-36">状態</TableHead>
+                        <TableHead className="min-w-44">受付時刻</TableHead>
+                        <TableHead className="min-w-36">滞在時間</TableHead>
+                        <TableHead className="min-w-36">操作</TableHead>
+                      </TableRow>
+                    </TableHeader>
+                    <TableBody className="text-base">
+                      {filteredSessions.map((session, index) => {
+                        const stayDurationMinutes = getSessionStayDurationMinutes(session, nowMs);
+                        return (
+                          <motion.tr
+                            key={session.sessionId}
+                            data-slot="table-row"
+                            className="border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted"
+                            initial={prefersReduced ? false : { opacity: 0, y: 8 }}
+                            animate={{ opacity: 1, y: 0 }}
+                            transition={listItemTransition(index)}
+                          >
+                            <TableCell>
+                              {session.isPresent ? (
+                                <Checkbox
+                                  aria-label={`${session.nickname}を選択`}
+                                  checked={selectedIdSet.has(session.participantId)}
+                                  disabled={isSubmitting}
+                                  onCheckedChange={(checked) =>
+                                    toggleParticipant(session.participantId, checked === true)
+                                  }
+                                  className="size-6 rounded-md"
+                                />
                               ) : null}
-                              {!session.counted && <UncountedBadge />}
-                            </div>
-                          </TableCell>
-                          <TableCell className="font-bold">
-                            {formatJapaneseDateTimeWithYear(session.checkedInAt)}
-                          </TableCell>
-                          <TableCell className="font-bold">
-                            {session.isPresent
-                              ? `${formatDuration(stayDurationMinutes)} 経過`
-                              : formatDuration(stayDurationMinutes)}
-                          </TableCell>
-                          <TableCell>
-                            <Button asChild variant="outline" size="lg" className="h-12 text-base">
-                              <Link href={participantProfilePath(session.participantId)}>
-                                <IconArrowBack className="size-5" data-icon="inline-start" />
-                                ステータス
-                              </Link>
-                            </Button>
-                          </TableCell>
-                        </TableRow>
-                      );
-                    })}
-                  </TableBody>
-                </Table>
-              </div>
-            )}
-          </CardContent>
-        </Card>
+                            </TableCell>
+                            <TableCell>
+                              <div className="flex min-w-0 flex-col gap-1">
+                                <span className="break-words text-lg font-bold">
+                                  {session.nickname}
+                                </span>
+                                <span className="break-words text-sm font-bold text-muted-foreground">
+                                  {session.fullName}
+                                </span>
+                                <span className="text-sm font-bold text-muted-foreground">
+                                  <span className="tabular-nums">ID {session.participantId}</span>
+                                  <span className="mx-2">/</span>
+                                  {session.grade}
+                                </span>
+                              </div>
+                            </TableCell>
+                            <TableCell>
+                              <div className="flex flex-wrap items-center gap-2">
+                                <Badge
+                                  variant="secondary"
+                                  style={{ height: 'auto' }}
+                                  className={
+                                    session.isPresent
+                                      ? 'bg-emerald-100 px-3 py-1.5 text-emerald-700'
+                                      : 'px-3 py-1.5'
+                                  }
+                                >
+                                  {session.isPresent ? '滞在中' : '退室済み'}
+                                </Badge>
+                                {session.term ? (
+                                  <TermBadge term={session.term} counted={session.counted} />
+                                ) : null}
+                                {!session.counted && <UncountedBadge />}
+                              </div>
+                            </TableCell>
+                            <TableCell className="font-bold">
+                              {formatJapaneseDateTimeWithYear(session.checkedInAt)}
+                            </TableCell>
+                            <TableCell className="font-bold">
+                              {session.isPresent
+                                ? `${formatDuration(stayDurationMinutes)} 経過`
+                                : formatDuration(stayDurationMinutes)}
+                            </TableCell>
+                            <TableCell>
+                              <Button
+                                asChild
+                                variant="outline"
+                                size="lg"
+                                className="h-12 text-base"
+                              >
+                                <Link href={participantProfilePath(session.participantId)}>
+                                  <IconArrowBack className="size-5" data-icon="inline-start" />
+                                  ステータス
+                                </Link>
+                              </Button>
+                            </TableCell>
+                          </motion.tr>
+                        );
+                      })}
+                    </TableBody>
+                  </Table>
+                </div>
+              )}
+            </CardContent>
+          </Card>
+        </Reveal>
       </div>
-    </main>
+    </PageShell>
   );
 }
diff --git a/apps/checkin/src/app/login/page.tsx b/apps/checkin/src/app/login/page.tsx
index 9365ce5..829577a 100644
--- a/apps/checkin/src/app/login/page.tsx
+++ b/apps/checkin/src/app/login/page.tsx
@@ -3,20 +3,19 @@
 import { IconBrandGoogleFilled } from '@tabler/icons-react';
 import { Alert, AlertDescription, AlertTitle } from '@tecnova/ui/components/alert';
 import { Button } from '@tecnova/ui/components/button';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from '@tecnova/ui/components/card';
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@tecnova/ui/components/card';
+import { motion, useReducedMotion } from 'motion/react';
+import Image from 'next/image';
 import { useState } from 'react';
+import { PageShell } from '@/components/page-shell';
+import { Reveal } from '@/components/reveal';
 import { authClient } from '@/lib/auth-client';
+import { tapScale } from '@/lib/motion';
 
 export default function LoginPage() {
   const [error, setError] = useState<string | null>(null);
   const [busy, setBusy] = useState(false);
+  const prefersReduced = useReducedMotion();
 
   const signIn = async () => {
     setBusy(true);
@@ -39,27 +38,54 @@ export default function LoginPage() {
   };
 
   return (
-    <main className="flex flex-1 items-center justify-center bg-sky-50 p-8">
-      <Card className="w-full max-w-md border-sky-200 shadow-sm">
-        <CardHeader>
-          <CardTitle className="text-2xl">うけつけシステム</CardTitle>
-          <CardDescription>許可リストに登録されたメンターのみ利用できます</CardDescription>
-        </CardHeader>
-        {error && (
-          <CardContent>
-            <Alert variant="destructive">
-              <AlertTitle>ログインエラー</AlertTitle>
-              <AlertDescription>{error}</AlertDescription>
-            </Alert>
-          </CardContent>
-        )}
-        <CardFooter>
-          <Button type="button" size="lg" onClick={signIn} disabled={busy} className="w-full">
-            <IconBrandGoogleFilled data-icon="inline-start" />
-            {busy ? 'リダイレクト中...' : 'Google でログイン'}
-          </Button>
-        </CardFooter>
-      </Card>
-    </main>
+    <PageShell className="items-center justify-center">
+      <Reveal className="w-full max-w-md">
+        <Card className="w-full border-sky-200 shadow-sm">
+          <CardHeader>
+            <div className="flex flex-col items-center gap-4 text-center">
+              <Image
+                src="/logo_tecnova.png"
+                alt="TECNOVA"
+                width={180}
+                height={47}
+                priority
+                className="h-12 w-auto"
+              />
+              <div className="flex flex-col gap-1.5">
+                <CardTitle className="text-3xl">ようこそ</CardTitle>
+                <p className="text-base font-bold text-muted-foreground">
+                  うけつけシステムにサインインしてください
+                </p>
+              </div>
+            </div>
+          </CardHeader>
+          {error && (
+            <CardContent>
+              <Alert variant="destructive">
+                <AlertTitle>ログインエラー</AlertTitle>
+                <AlertDescription>{error}</AlertDescription>
+              </Alert>
+            </CardContent>
+          )}
+          <CardFooter className="flex-col gap-3">
+            <motion.div className="w-full" whileTap={prefersReduced ? undefined : tapScale}>
+              <Button
+                type="button"
+                size="lg"
+                onClick={signIn}
+                disabled={busy}
+                className="h-14 w-full text-lg"
+              >
+                <IconBrandGoogleFilled data-icon="inline-start" />
+                {busy ? 'リダイレクト中...' : 'Google でログイン'}
+              </Button>
+            </motion.div>
+            <p className="text-center text-sm font-bold text-muted-foreground">
+              許可リストに登録されたメンターのみ利用できます
+            </p>
+          </CardFooter>
+        </Card>
+      </Reveal>
+    </PageShell>
   );
 }
diff --git a/apps/checkin/src/app/manual/page.tsx b/apps/checkin/src/app/manual/page.tsx
index 06781a9..881d821 100644
--- a/apps/checkin/src/app/manual/page.tsx
+++ b/apps/checkin/src/app/manual/page.tsx
@@ -3,7 +3,6 @@
 import {
   IconAlertCircle,
   IconArrowRight,
-  IconBug,
   IconChevronRight,
   IconKeyboard,
   IconSearch,
@@ -18,73 +17,45 @@ import { Input } from '@tecnova/ui/components/input';
 import { Skeleton } from '@tecnova/ui/components/skeleton';
 import { apiFetch, readErrorMessage } from '@tecnova/ui/lib/api-client';
 import { cn } from '@tecnova/ui/lib/utils';
+import { AnimatePresence, motion, useReducedMotion } from 'motion/react';
 import { useRouter } from 'next/navigation';
-import { type FormEvent, type ReactNode, useEffect, useState } from 'react';
+import { type FormEvent, useEffect, useState } from 'react';
+import { PageShell } from '@/components/page-shell';
 import { PanelHeader } from '@/components/panel-header';
+import { SegmentedControl } from '@/components/segmented-control';
+import { listItemTransition } from '@/lib/motion';
 import { PARTICIPANT_ID_PATTERN, participantProfilePath } from '@/lib/participant-id';
 
 type Mode = 'id' | 'name';
 
 export default function ManualPage() {
   const [mode, setMode] = useState<Mode>('id');
-
+  const prefersReduced = useReducedMotion();
   return (
-    <main className="flex flex-1 flex-col bg-sky-50 p-4 sm:p-6">
+    <PageShell>
       <div className="mx-auto flex w-full max-w-3xl flex-1 flex-col gap-4">
-        <ModeToggle mode={mode} onChange={setMode} />
-        {mode === 'id' ? <IdEntryPanel /> : <NameSearchPanel />}
+        <SegmentedControl
+          ariaLabel="入力方法"
+          value={mode}
+          onChange={setMode}
+          options={[
+            { value: 'id', label: 'IDで入力', icon: <IconKeyboard className="size-6" /> },
+            { value: 'name', label: '名前で探す', icon: <IconSearch className="size-6" /> },
+          ]}
+        />
+        <AnimatePresence mode="wait">
+          <motion.div
+            key={mode}
+            initial={prefersReduced ? false : { opacity: 0, y: 8 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={prefersReduced ? { opacity: 0 } : { opacity: 0, y: -8 }}
+            transition={{ duration: 0.2, ease: 'easeOut' }}
+          >
+            {mode === 'id' ? <IdEntryPanel /> : <NameSearchPanel />}
+          </motion.div>
+        </AnimatePresence>
       </div>
-    </main>
-  );
-}
-
-function ModeToggle({ mode, onChange }: { mode: Mode; onChange: (mode: Mode) => void }) {
-  return (
-    <div
-      role="tablist"
-      aria-label="入力方法"
-      className="grid grid-cols-2 gap-2 rounded-2xl bg-white p-2 shadow-sm"
-    >
-      <ToggleButton
-        active={mode === 'id'}
-        onClick={() => onChange('id')}
-        icon={<IconKeyboard className="size-6" data-icon="inline-start" />}
-        label="IDで入力"
-      />
-      <ToggleButton
-        active={mode === 'name'}
-        onClick={() => onChange('name')}
-        icon={<IconSearch className="size-6" data-icon="inline-start" />}
-        label="名前で探す"
-      />
-    </div>
-  );
-}
-
-function ToggleButton({
-  active,
-  onClick,
-  icon,
-  label,
-}: {
-  active: boolean;
-  onClick: () => void;
-  icon: ReactNode;
-  label: string;
-}) {
-  return (
-    <Button
-      type="button"
-      role="tab"
-      aria-selected={active}
-      variant={active ? 'default' : 'ghost'}
-      size="lg"
-      className="h-14 text-lg font-bold"
-      onClick={onClick}
-    >
-      {icon}
-      {label}
-    </Button>
+    </PageShell>
   );
 }
 
@@ -103,7 +74,11 @@ function IdEntryPanel() {
   return (
     <form onSubmit={submitManual} className="w-full">
       <Card className="shadow-sm">
-        <PanelHeader icon={<IconBug className="size-8" />} title="マニュアル入力" tone="slate" />
+        <PanelHeader
+          icon={<IconKeyboard className="size-8" />}
+          title="マニュアル入力"
+          tone="slate"
+        />
         <CardContent className="flex flex-col gap-4">
           <CardDescription className="text-lg text-foreground">
             参加者IDがわかる場合は、5桁の数字を入力してください。
@@ -242,6 +217,7 @@ function SearchResults({
   navigatingId: string | null;
   onSelect: (id: string) => void;
 }) {
+  const prefersReduced = useReducedMotion();
   if (state.kind === 'idle') {
     return (
       <p className="rounded-lg border border-dashed bg-white px-5 py-8 text-center text-base text-muted-foreground">
@@ -286,15 +262,20 @@ function SearchResults({
         {state.results.length}件の候補（タップして開く）
       </p>
       <ul className="flex max-h-[60vh] list-none flex-col gap-2 overflow-y-auto p-0">
-        {state.results.map((participant) => (
-          <li key={participant.id}>
+        {state.results.map((participant, index) => (
+          <motion.li
+            key={participant.id}
+            initial={prefersReduced ? false : { opacity: 0, y: 8 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={listItemTransition(index)}
+          >
             <ResultRow
               participant={participant}
               isNavigating={navigatingId === participant.id}
               disabled={navigatingId !== null && navigatingId !== participant.id}
               onSelect={() => onSelect(participant.id)}
             />
-          </li>
+          </motion.li>
         ))}
       </ul>
     </div>
diff --git a/apps/checkin/src/app/settings/page.tsx b/apps/checkin/src/app/settings/page.tsx
index 2509159..791b10c 100644
--- a/apps/checkin/src/app/settings/page.tsx
+++ b/apps/checkin/src/app/settings/page.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { IconLogout2, IconSettings } from '@tabler/icons-react';
+import { IconLogout2 } from '@tabler/icons-react';
 import { Alert, AlertDescription, AlertTitle } from '@tecnova/ui/components/alert';
 import {
   AlertDialog,
@@ -28,6 +28,8 @@ import {
 } from '@tecnova/ui/components/table';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
+import { PageShell } from '@/components/page-shell';
+import { Reveal } from '@/components/reveal';
 import { authClient } from '@/lib/auth-client';
 
 export default function SettingsPage() {
@@ -59,89 +61,99 @@ export default function SettingsPage() {
   ];
 
   return (
-    <main className="flex flex-1 flex-col bg-sky-50 p-4 sm:p-6">
+    <PageShell>
       <div className="mx-auto flex w-full max-w-3xl flex-1 flex-col justify-center gap-4">
-        <Card className="border-sky-200 shadow-sm">
-          <CardHeader className="gap-3">
-            <div className="flex items-center gap-3">
-              <div className="flex size-12 items-center justify-center rounded-full bg-sky-100 text-sky-700">
-                <IconSettings className="size-7" aria-hidden="true" />
+        <Reveal>
+          <Card className="border-sky-200 shadow-sm">
+            <CardHeader className="gap-3">
+              <div className="flex items-center gap-4">
+                <div className="flex size-16 shrink-0 items-center justify-center rounded-full bg-sky-100 text-2xl font-black text-sky-700">
+                  {me.mentor.name.slice(0, 1)}
+                </div>
+                <div className="min-w-0">
+                  <CardTitle className="break-words text-2xl">{me.mentor.name}</CardTitle>
+                  <div className="mt-1.5 flex flex-wrap items-center gap-2">
+                    <Badge variant="secondary">{me.mentor.role}</Badge>
+                    <span className="truncate text-sm font-bold text-muted-foreground">
+                      {me.user.email}
+                    </span>
+                  </div>
+                </div>
               </div>
-              <CardTitle className="text-2xl">設定</CardTitle>
-            </div>
-          </CardHeader>
-          <CardContent className="flex flex-col gap-6">
-            {error && (
-              <Alert variant="destructive">
-                <AlertTitle>ログアウトエラー</AlertTitle>
-                <AlertDescription>{error}</AlertDescription>
-              </Alert>
-            )}
-            <div className="overflow-hidden rounded-lg border bg-white">
-              <Table>
-                <TableHeader>
-                  <TableRow>
-                    <TableHead className="w-40 bg-muted/40">項目</TableHead>
-                    <TableHead>内容</TableHead>
-                  </TableRow>
-                </TableHeader>
-                <TableBody className="text-base">
-                  {rows.map((row) => (
-                    <TableRow key={row.label}>
-                      <TableCell className="bg-muted/30 font-bold text-muted-foreground">
-                        {row.label}
-                      </TableCell>
-                      <TableCell className="break-all whitespace-normal font-bold">
-                        {row.value}
-                      </TableCell>
+            </CardHeader>
+            <CardContent className="flex flex-col gap-6">
+              {error && (
+                <Alert variant="destructive">
+                  <AlertTitle>ログアウトエラー</AlertTitle>
+                  <AlertDescription>{error}</AlertDescription>
+                </Alert>
+              )}
+              <div className="overflow-hidden rounded-lg border bg-white">
+                <Table>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead className="w-40 bg-muted/40">項目</TableHead>
+                      <TableHead>内容</TableHead>
                     </TableRow>
-                  ))}
-                </TableBody>
-              </Table>
-            </div>
-            <div className="flex justify-end">
-              <AlertDialog>
-                <AlertDialogTrigger asChild>
-                  <Button
-                    type="button"
-                    variant="destructive"
-                    size="lg"
-                    disabled={isSigningOut}
-                    className="h-14 px-6 text-lg"
-                  >
-                    <IconLogout2 className="size-6" data-icon="inline-start" />
-                    ログアウト
-                  </Button>
-                </AlertDialogTrigger>
-                <AlertDialogContent>
-                  <AlertDialogHeader>
-                    <AlertDialogMedia className="bg-destructive/10 text-destructive">
-                      <IconLogout2 className="size-9" aria-hidden="true" />
-                    </AlertDialogMedia>
-                    <AlertDialogTitle>ログアウトしますか</AlertDialogTitle>
-                    <AlertDialogDescription>
-                      受付システムを使うには、もう一度 Google ログインが必要です。
-                    </AlertDialogDescription>
-                  </AlertDialogHeader>
-                  <AlertDialogFooter>
-                    <AlertDialogCancel size="lg" disabled={isSigningOut}>
-                      キャンセル
-                    </AlertDialogCancel>
-                    <AlertDialogAction
-                      size="lg"
+                  </TableHeader>
+                  <TableBody className="text-base">
+                    {rows.map((row) => (
+                      <TableRow key={row.label}>
+                        <TableCell className="bg-muted/30 font-bold text-muted-foreground">
+                          {row.label}
+                        </TableCell>
+                        <TableCell className="break-all whitespace-normal font-bold">
+                          {row.value}
+                        </TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </div>
+              <div className="flex justify-end">
+                <AlertDialog>
+                  <AlertDialogTrigger asChild>
+                    <Button
+                      type="button"
                       variant="destructive"
+                      size="lg"
                       disabled={isSigningOut}
-                      onClick={() => void signOut()}
+                      className="h-14 px-6 text-lg"
                     >
-                      {isSigningOut ? 'ログアウト中' : 'ログアウトする'}
-                    </AlertDialogAction>
-                  </AlertDialogFooter>
-                </AlertDialogContent>
-              </AlertDialog>
-            </div>
-          </CardContent>
-        </Card>
+                      <IconLogout2 className="size-6" data-icon="inline-start" />
+                      ログアウト
+                    </Button>
+                  </AlertDialogTrigger>
+                  <AlertDialogContent>
+                    <AlertDialogHeader>
+                      <AlertDialogMedia className="bg-destructive/10 text-destructive">
+                        <IconLogout2 className="size-9" aria-hidden="true" />
+                      </AlertDialogMedia>
+                      <AlertDialogTitle>ログアウトしますか</AlertDialogTitle>
+                      <AlertDialogDescription>
+                        受付システムを使うには、もう一度 Google ログインが必要です。
+                      </AlertDialogDescription>
+                    </AlertDialogHeader>
+                    <AlertDialogFooter>
+                      <AlertDialogCancel size="lg" disabled={isSigningOut}>
+                        キャンセル
+                      </AlertDialogCancel>
+                      <AlertDialogAction
+                        size="lg"
+                        variant="destructive"
+                        disabled={isSigningOut}
+                        onClick={() => void signOut()}
+                      >
+                        {isSigningOut ? 'ログアウト中' : 'ログアウトする'}
+                      </AlertDialogAction>
+                    </AlertDialogFooter>
+                  </AlertDialogContent>
+                </AlertDialog>
+              </div>
+            </CardContent>
+          </Card>
+        </Reveal>
       </div>
-    </main>
+    </PageShell>
   );
 }
diff --git a/apps/checkin/src/components/segmented-control.tsx b/apps/checkin/src/components/segmented-control.tsx
new file mode 100644
index 0000000..643f22d
--- /dev/null
+++ b/apps/checkin/src/components/segmented-control.tsx
@@ -0,0 +1,62 @@
+'use client';
+
+import { cn } from '@tecnova/ui/lib/utils';
+import { motion, useReducedMotion } from 'motion/react';
+import { type ReactNode, useId } from 'react';
+
+type SegmentedOption<T extends string> = { value: T; label: string; icon?: ReactNode };
+
+// 2 値のモード切替。選択中インジケータが layoutId でスライドする。reduced 時は即切替。
+export function SegmentedControl<T extends string>({
+  options,
+  value,
+  onChange,
+  ariaLabel,
+}: {
+  options: SegmentedOption<T>[];
+  value: T;
+  onChange: (value: T) => void;
+  ariaLabel: string;
+}) {
+  const prefersReduced = useReducedMotion();
+  const layoutId = useId();
+  return (
+    <div
+      role="tablist"
+      aria-label={ariaLabel}
+      className="grid grid-cols-2 gap-2 rounded-2xl bg-white p-2 shadow-sm"
+    >
+      {options.map((option) => {
+        const active = option.value === value;
+        return (
+          <button
+            key={option.value}
+            type="button"
+            role="tab"
+            aria-selected={active}
+            onClick={() => onChange(option.value)}
+            className={cn(
+              'relative flex h-14 items-center justify-center gap-2 rounded-xl text-lg font-bold outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring/70 focus-visible:ring-offset-2',
+              active ? 'text-primary-foreground' : 'text-foreground hover:bg-muted',
+            )}
+          >
+            {active && (
+              <motion.span
+                layoutId={layoutId}
+                className="absolute inset-0 rounded-xl bg-primary"
+                transition={
+                  prefersReduced ? { duration: 0 } : { type: 'spring', stiffness: 400, damping: 32 }
+                }
+                aria-hidden="true"
+              />
+            )}
+            <span className="relative flex items-center gap-2">
+              {option.icon}
+              {option.label}
+            </span>
+          </button>
+        );
+      })}
+    </div>
+  );
+}

From d83675ea3009b15d09425eac9bddd2a513403501 Mon Sep 17 00:00:00 2001
From: tmba <ut42.nu@gmail.com>
Date: Sat, 30 May 2026 02:02:54 +0900
Subject: [PATCH 10/11] feat(checkin): add scan-to-profile view transition

Enable React view transitions and morph the scan-lock puck into the participant profile header; reduced-motion safe.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 apps/checkin/next.config.ts                   |   3 +
 apps/checkin/src/app/layout.tsx               |   1 +
 .../app/reception/participants/[id]/page.tsx  | 253 +++++++++---------
 apps/checkin/src/app/view-transitions.css     |  22 ++
 4 files changed, 151 insertions(+), 128 deletions(-)
 create mode 100644 apps/checkin/src/app/view-transitions.css

diff --git a/apps/checkin/next.config.ts b/apps/checkin/next.config.ts
index 8c125ca..e8be3c8 100644
--- a/apps/checkin/next.config.ts
+++ b/apps/checkin/next.config.ts
@@ -3,6 +3,9 @@ import type { NextConfig } from 'next';
 const nextConfig: NextConfig = {
   // モノレポ内 workspace パッケージを Next の transpile 対象にする
   transpilePackages: ['@tecnova/shared', '@tecnova/ui'],
+  experimental: {
+    viewTransition: true,
+  },
 };
 
 export default nextConfig;
diff --git a/apps/checkin/src/app/layout.tsx b/apps/checkin/src/app/layout.tsx
index 4e729d0..678a33f 100644
--- a/apps/checkin/src/app/layout.tsx
+++ b/apps/checkin/src/app/layout.tsx
@@ -1,6 +1,7 @@
 import type { Metadata, Viewport } from 'next';
 import { LINE_Seed_JP } from 'next/font/google';
 import '@tecnova/ui/globals.css';
+import './view-transitions.css';
 import { cn } from '@tecnova/ui/lib/utils';
 import { AppShell } from '@/components/app-shell';
 
diff --git a/apps/checkin/src/app/reception/participants/[id]/page.tsx b/apps/checkin/src/app/reception/participants/[id]/page.tsx
index 74457b7..9682c81 100644
--- a/apps/checkin/src/app/reception/participants/[id]/page.tsx
+++ b/apps/checkin/src/app/reception/participants/[id]/page.tsx
@@ -38,7 +38,7 @@ import { apiFetch, readErrorMessage } from '@tecnova/ui/lib/api-client';
 import { motion, useReducedMotion } from 'motion/react';
 import Link from 'next/link';
 import { useParams } from 'next/navigation';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState, ViewTransition } from 'react';
 import { AnimatedNumber } from '@/components/animated-number';
 import { PanelHeader } from '@/components/panel-header';
 import { ResultSummaryCard } from '@/components/result-summary-card';
@@ -350,27 +350,20 @@ export default function ReceptionParticipantPage() {
             { label: '滞在時間', value: formatDuration(data.stayDurationMinutes) },
           ];
     return (
-      <motion.div
-        className="flex flex-1"
-        initial={prefersReduced ? false : { opacity: 0, scale: 0.98 }}
-        animate={{ opacity: 1, scale: 1 }}
-        transition={{ duration: 0.3, ease: 'easeOut' }}
-      >
-        <ResultSummaryCard
-          title={didCheckIn ? 'チェックイン' : 'チェックアウト'}
-          tone={didCheckIn ? 'emerald' : 'amber'}
-          icon={didCheckIn ? <IconLogin2 className="size-8" /> : <IconLogout2 className="size-8" />}
-          rows={resultRows}
-          footer={
-            <Button asChild size="lg" className="h-16 w-full text-xl">
-              <Link href="/">
-                <IconHome className="size-6" data-icon="inline-start" />
-                ホームに戻る
-              </Link>
-            </Button>
-          }
-        />
-      </motion.div>
+      <ResultSummaryCard
+        title={didCheckIn ? 'チェックイン' : 'チェックアウト'}
+        tone={didCheckIn ? 'emerald' : 'amber'}
+        icon={didCheckIn ? <IconLogin2 className="size-8" /> : <IconLogout2 className="size-8" />}
+        rows={resultRows}
+        footer={
+          <Button asChild size="lg" className="h-16 w-full text-xl">
+            <Link href="/">
+              <IconHome className="size-6" data-icon="inline-start" />
+              ホームに戻る
+            </Link>
+          </Button>
+        }
+      />
     );
   }
 
@@ -380,122 +373,126 @@ export default function ReceptionParticipantPage() {
     <main className="flex flex-1 flex-col bg-gradient-to-b from-sky-50 to-white p-4 sm:p-6">
       <div className="mx-auto flex w-full max-w-6xl flex-1 flex-col gap-4">
         <section className="grid gap-4 lg:grid-cols-[minmax(0,1fr)_360px]">
-          <motion.div
-            className="h-full"
-            initial={prefersReduced ? false : { opacity: 0, y: 12 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.4, ease: 'easeOut', delay: 0 }}
-          >
-            <Card className="h-full border-sky-200 shadow-sm">
-              <CardContent className="flex h-full flex-col gap-6 p-6">
-                <div className="flex flex-col gap-5 sm:flex-row sm:items-start sm:justify-between">
-                  <div className="flex min-w-0 items-center gap-4">
-                    <div className="flex size-20 shrink-0 items-center justify-center rounded-full bg-sky-100 text-sky-700">
-                      <IconUser className="size-11" aria-hidden="true" />
-                    </div>
-                    <div className="min-w-0">
-                      <CardTitle className="break-words text-4xl leading-tight sm:text-5xl">
-                        {profile.participant.nickname}
-                      </CardTitle>
-                      <p className="mt-1 break-words text-lg font-bold text-muted-foreground">
-                        {profile.participant.fullName}
-                      </p>
-                      <div className="mt-3 flex flex-wrap gap-2">
-                        <Badge
-                          variant="secondary"
-                          style={{ height: 'auto' }}
-                          className="px-4 py-2 text-base tabular-nums"
-                        >
-                          ID {profile.participant.id}
-                        </Badge>
-                        <Badge
-                          variant="secondary"
-                          style={{ height: 'auto' }}
-                          className="px-4 py-2 text-base"
-                        >
-                          {profile.participant.grade}
-                        </Badge>
+          <ViewTransition name="participant-portal">
+            <motion.div
+              className="h-full"
+              initial={prefersReduced ? false : { opacity: 0, y: 12 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.4, ease: 'easeOut', delay: 0 }}
+            >
+              <Card className="h-full border-sky-200 shadow-sm">
+                <CardContent className="flex h-full flex-col gap-6 p-6">
+                  <div className="flex flex-col gap-5 sm:flex-row sm:items-start sm:justify-between">
+                    <div className="flex min-w-0 items-center gap-4">
+                      <div className="flex size-20 shrink-0 items-center justify-center rounded-full bg-sky-100 text-sky-700">
+                        <IconUser className="size-11" aria-hidden="true" />
+                      </div>
+                      <div className="min-w-0">
+                        <CardTitle className="break-words text-4xl leading-tight sm:text-5xl">
+                          {profile.participant.nickname}
+                        </CardTitle>
+                        <p className="mt-1 break-words text-lg font-bold text-muted-foreground">
+                          {profile.participant.fullName}
+                        </p>
+                        <div className="mt-3 flex flex-wrap gap-2">
+                          <Badge
+                            variant="secondary"
+                            style={{ height: 'auto' }}
+                            className="px-4 py-2 text-base tabular-nums"
+                          >
+                            ID {profile.participant.id}
+                          </Badge>
+                          <Badge
+                            variant="secondary"
+                            style={{ height: 'auto' }}
+                            className="px-4 py-2 text-base"
+                          >
+                            {profile.participant.grade}
+                          </Badge>
+                        </div>
                       </div>
                     </div>
+                    <div
+                      className={
+                        profile.current.isPresent
+                          ? 'flex w-fit items-center gap-2 rounded-full bg-emerald-100 px-4 py-2 text-base font-bold text-emerald-700'
+                          : 'flex w-fit items-center gap-2 rounded-full bg-slate-100 px-4 py-2 text-base font-bold text-slate-600'
+                      }
+                    >
+                      {profile.current.isPresent ? (
+                        <motion.span
+                          className="size-2.5 rounded-full bg-emerald-500"
+                          animate={
+                            prefersReduced
+                              ? undefined
+                              : { scale: [1, 1.35, 1], opacity: [1, 0.5, 1] }
+                          }
+                          transition={
+                            prefersReduced
+                              ? undefined
+                              : { duration: 2, repeat: Number.POSITIVE_INFINITY, ease: 'easeInOut' }
+                          }
+                          aria-hidden="true"
+                        />
+                      ) : (
+                        <span className="size-2.5 rounded-full bg-slate-400" aria-hidden="true" />
+                      )}
+                      {profile.current.isPresent ? 'チェックイン中' : '未チェックイン'}
+                    </div>
                   </div>
-                  <div
-                    className={
-                      profile.current.isPresent
-                        ? 'flex w-fit items-center gap-2 rounded-full bg-emerald-100 px-4 py-2 text-base font-bold text-emerald-700'
-                        : 'flex w-fit items-center gap-2 rounded-full bg-slate-100 px-4 py-2 text-base font-bold text-slate-600'
-                    }
-                  >
-                    {profile.current.isPresent ? (
-                      <motion.span
-                        className="size-2.5 rounded-full bg-emerald-500"
-                        animate={
-                          prefersReduced ? undefined : { scale: [1, 1.35, 1], opacity: [1, 0.5, 1] }
-                        }
-                        transition={
-                          prefersReduced
-                            ? undefined
-                            : { duration: 2, repeat: Number.POSITIVE_INFINITY, ease: 'easeInOut' }
-                        }
-                        aria-hidden="true"
-                      />
-                    ) : (
-                      <span className="size-2.5 rounded-full bg-slate-400" aria-hidden="true" />
-                    )}
-                    {profile.current.isPresent ? 'チェックイン中' : '未チェックイン'}
-                  </div>
-                </div>
 
-                <div className="rounded-lg border bg-white p-4">
-                  <p className="flex items-center gap-1.5 text-sm font-bold text-muted-foreground">
-                    <IconLogin2 className="size-4" aria-hidden="true" />
-                    今日の入室
-                  </p>
-                  <p className="mt-2 text-xl font-bold">
-                    {profile.current.checkedInAt
-                      ? formatJapaneseDateTime(profile.current.checkedInAt)
-                      : 'まだありません'}
-                  </p>
-                </div>
-
-                <div className="grid gap-3 sm:grid-cols-2">
-                  <div className="rounded-xl border border-emerald-200 bg-gradient-to-br from-emerald-50 to-sky-50 p-5 shadow-sm sm:col-span-2">
-                    <p className="flex items-center gap-1.5 text-sm font-bold text-emerald-700">
-                      <IconAward className="size-4" aria-hidden="true" />
-                      参加回数
+                  <div className="rounded-lg border bg-white p-4">
+                    <p className="flex items-center gap-1.5 text-sm font-bold text-muted-foreground">
+                      <IconLogin2 className="size-4" aria-hidden="true" />
+                      今日の入室
                     </p>
-                    <p className="mt-1 text-6xl font-bold leading-none text-emerald-900 tabular-nums">
-                      <AnimatedNumber value={profile.stats.participationCount} />
-                      <span className="ml-1 text-2xl text-emerald-700">回</span>
+                    <p className="mt-2 text-xl font-bold">
+                      {profile.current.checkedInAt
+                        ? formatJapaneseDateTime(profile.current.checkedInAt)
+                        : 'まだありません'}
                     </p>
-                    <dl className="mt-4 grid grid-cols-3 gap-2 border-emerald-200/70 border-t pt-4">
-                      {participationBreakdown.map((item) => (
-                        <div key={item.label} className="rounded-lg bg-white/70 px-3 py-2">
-                          <dt className="flex items-center gap-1 text-xs font-bold text-muted-foreground">
-                            <item.Icon className="size-3.5 shrink-0" aria-hidden="true" />
-                            <span className="truncate">{item.label}</span>
-                          </dt>
-                          <dd className="mt-1 break-words text-lg font-bold leading-tight tabular-nums">
-                            {item.value}
-                          </dd>
-                        </div>
-                      ))}
-                    </dl>
                   </div>
-                  {stats.map((item) => (
-                    <div key={item.label} className="rounded-lg border bg-white p-4">
-                      <p className="flex items-center gap-1.5 text-sm font-bold text-muted-foreground">
-                        <item.Icon className="size-4 shrink-0" aria-hidden="true" />
-                        {item.label}
+
+                  <div className="grid gap-3 sm:grid-cols-2">
+                    <div className="rounded-xl border border-emerald-200 bg-gradient-to-br from-emerald-50 to-sky-50 p-5 shadow-sm sm:col-span-2">
+                      <p className="flex items-center gap-1.5 text-sm font-bold text-emerald-700">
+                        <IconAward className="size-4" aria-hidden="true" />
+                        参加回数
                       </p>
-                      <p className="mt-2 break-words text-2xl font-bold leading-tight">
-                        {item.value}
+                      <p className="mt-1 text-6xl font-bold leading-none text-emerald-900 tabular-nums">
+                        <AnimatedNumber value={profile.stats.participationCount} />
+                        <span className="ml-1 text-2xl text-emerald-700">回</span>
                       </p>
+                      <dl className="mt-4 grid grid-cols-3 gap-2 border-emerald-200/70 border-t pt-4">
+                        {participationBreakdown.map((item) => (
+                          <div key={item.label} className="rounded-lg bg-white/70 px-3 py-2">
+                            <dt className="flex items-center gap-1 text-xs font-bold text-muted-foreground">
+                              <item.Icon className="size-3.5 shrink-0" aria-hidden="true" />
+                              <span className="truncate">{item.label}</span>
+                            </dt>
+                            <dd className="mt-1 break-words text-lg font-bold leading-tight tabular-nums">
+                              {item.value}
+                            </dd>
+                          </div>
+                        ))}
+                      </dl>
                     </div>
-                  ))}
-                </div>
-              </CardContent>
-            </Card>
-          </motion.div>
+                    {stats.map((item) => (
+                      <div key={item.label} className="rounded-lg border bg-white p-4">
+                        <p className="flex items-center gap-1.5 text-sm font-bold text-muted-foreground">
+                          <item.Icon className="size-4 shrink-0" aria-hidden="true" />
+                          {item.label}
+                        </p>
+                        <p className="mt-2 break-words text-2xl font-bold leading-tight">
+                          {item.value}
+                        </p>
+                      </div>
+                    ))}
+                  </div>
+                </CardContent>
+              </Card>
+            </motion.div>
+          </ViewTransition>
 
           <div className="flex flex-col gap-4">
             <motion.div
diff --git a/apps/checkin/src/app/view-transitions.css b/apps/checkin/src/app/view-transitions.css
new file mode 100644
index 0000000..63bebd3
--- /dev/null
+++ b/apps/checkin/src/app/view-transitions.css
@@ -0,0 +1,22 @@
+/* View Transitions（experimental.viewTransition）の調整。
+   ルート間の既定クロスフェードと、スキャン→プロフィールの共有要素モーフの時間を整える。 */
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation-duration: 0.28s;
+}
+
+/* スキャン→プロフィールの共有要素モーフ（name="participant-portal"） */
+::view-transition-group(participant-portal) {
+  animation-duration: 0.4s;
+  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+/* アクセシビリティ: モーション低減時はビュー遷移アニメーションを無効化する */
+@media (prefers-reduced-motion: reduce) {
+  ::view-transition-group(*),
+  ::view-transition-old(*),
+  ::view-transition-new(*) {
+    /* biome-ignore lint/complexity/noImportantStyles: モーション低減時のアクセシビリティ上書き。上の named morph 規則（participant-portal）に確実に勝つため !important が必要。 */
+    animation-duration: 0s !important;
+  }
+}

From 1bafe8bcf78bafc155ce82de98cc56b67444bc7e Mon Sep 17 00:00:00 2001
From: tmba <ut42.nu@gmail.com>
Date: Sat, 30 May 2026 02:09:21 +0900
Subject: [PATCH 11/11] fix(checkin): gate manual mode-switch transition under
 reduced-motion

The exit crossfade still played a 0.2s fade when motion is reduced; make it instant for consistency with the rest of the app.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 apps/checkin/src/app/manual/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/checkin/src/app/manual/page.tsx b/apps/checkin/src/app/manual/page.tsx
index 881d821..b78c74e 100644
--- a/apps/checkin/src/app/manual/page.tsx
+++ b/apps/checkin/src/app/manual/page.tsx
@@ -49,7 +49,7 @@ export default function ManualPage() {
             initial={prefersReduced ? false : { opacity: 0, y: 8 }}
             animate={{ opacity: 1, y: 0 }}
             exit={prefersReduced ? { opacity: 0 } : { opacity: 0, y: -8 }}
-            transition={{ duration: 0.2, ease: 'easeOut' }}
+            transition={prefersReduced ? { duration: 0 } : { duration: 0.2, ease: 'easeOut' }}
           >
             {mode === 'id' ? <IdEntryPanel /> : <NameSearchPanel />}
           </motion.div>