# apps/web モダンWeb準拠の改善 TODO - 対象: `apps/web/`（Next.js 16 + React 19 + Tailwind CSS 4） - 調査日: 2026-05-21 - 根拠: [`modern-web-guidance`](https://github.com/GoogleChrome/modern-web-guidance/tree/main/skills/modern-web-guidance/guides) の `dark-mode` / `cross-document-transitions` / `optimize-image-priority` / `optimize-preload-priority` / `visually-stable-font-fallbacks` ガイド（各項目に該当行リンクを掲載） - 結論: FOUC・LCP・フォント周りに Baseline 対応の伸びしろがあるので段階的に手を入れる ## High priority ### 1. ダークモード FOUC 対策 — [x] **該当ガイド** - [dark-mode.md?plain=1#L9](https://github.com/GoogleChrome/modern-web-guidance/blob/main/skills/modern-web-guidance/guides/user-experience/dark-mode.md?plain=1#L9) — MANDATORY: `` を `` に置いて FOUC を回避 - [dark-mode.md?plain=1#L18-L26](https://github.com/GoogleChrome/modern-web-guidance/blob/main/skills/modern-web-guidance/guides/user-experience/dark-mode.md?plain=1#L18-L26) — MANDATORY: `:root { color-scheme: light dark; }` で viewport 全体のテーマを宣言 - [dark-mode.md?plain=1#L132-L144](https://github.com/GoogleChrome/modern-web-guidance/blob/main/skills/modern-web-guidance/guides/user-experience/dark-mode.md?plain=1#L132-L144) — ユーザーピン留めの色スキームを反映するため inline script で hydrate 前に確定 **現状の問題** `ThemeProvider.tsx:22-33` で `colorMode` を `undefined` 初期化 → `useEffect` で確定、という流れ。`ToggleSwitch.tsx:13-15` が `colorMode === undefined` の間 `null` を返すため、初回ロードで一瞬トグルが消える。`layout.tsx:59` の `suppressHydrationWarning` で凌いでいるだけで、スクロールバー / canvas はネイティブテーマで一瞬ライトが出る。 **対応内容** - [x] `app/globals.css` の `:root` に `color-scheme: light dark;` を追加、`[data-theme='light' | 'dark']` でピン留め - [x] `layout.tsx` で `viewport` export の `colorScheme: 'light dark'` を宣言（Next.js 14 以降は `metadata.colorScheme` ではなく `viewport` が正） - [x] `` 内の明示的な `` に `next/script` の `