screen-design

name	screen-design
description	anytime-markdown の UI / 画面コンポーネントを新規実装・修正する際のデザインシステム指針。design.md（/Shared/anytime-markdown-docs/spec/10.web-app/design.md）参照義務・トークン駆動・ダーク/ライト両モード対応・アクセシビリティを定義。新規ページ/コンポーネント作成・スタイル変更・レイアウト変更・アニメーション追加・a11y 対応の時に使用する。

画面デザイン指針

更新日: 2026-04-18

UI / 画面コンポーネントの新規実装・修正時は、プロジェクトのデザインシステム仕様書を必ず参照して実装する。

適用タイミング

以下の作業では着手前にデザインシステム仕様書を Read すること。

• 新規ページ・コンポーネントの作成
• 既存 UI のスタイル変更（色・余白・タイポグラフィ・角丸・シャドウ等）
• レイアウト変更（ブレークポイント・グリッド・コンテナ幅）
• アニメーション・トランジション追加
• アクセシビリティ対応（フォーカス・aria-*・コントラスト）

プロジェクト別デザインシステム

プロジェクト	デザインシステム仕様書
anytime-markdown	/Shared/anytime-markdown-docs/spec/10.web-app/design.md

プロジェクトに対応する仕様書がない場合、または上記表に未掲載のプロジェクトでは、まずプロジェクトの CLAUDE.md を確認する。
それでも仕様書が見つからない場合は、ユーザーにデザイン指針を確認する。

実装ルール

1. トークン駆動

• ハードコーディングされた色・余白・サイズを直接書かない。仕様書で定義されたトークン（ACCENT_COLOR 等の定数、または MUI theme.palette.*）を使用する
• 仕様書にないカラー・サイズが必要な場合、まず仕様書追記の妥当性を検討する。独自値追加はユーザーに確認する

2. ダーク／ライト両モード対応

• 仕様書がダーク／ライト両モード対応を定義している場合、片方のみ実装することは禁止する
• モード判定には useTheme().palette.mode === 'dark' 等のテーマ系 API を使用し、prefers-color-scheme を直接参照しない（テーマ切り替え機能を破壊するため）

3. アクセシビリティ

• フォーカスリング・タッチターゲット 44px 以上・aria-* 属性は仕様書のルールに従う
• 色のみで情報を伝えない（アイコン + ラベル + 色の三重表現）

4. 仕様書と実装の乖離

• 仕様書に「実装ステータス: v2.x で対応予定」等の注記がある項目は、現状コードと仕様書が異なる。新規実装は仕様書の値（移行ターゲット）に寄せ、既存箇所の修正はユーザーに方針を確認する

仕様書の更新

• デザイン変更を伴う実装をした場合、対応する仕様書を同じ PR 内で更新する
• 変更履歴セクションがある仕様書は、日付・変更箇所・内容を末尾の表に追記する