| 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 内で更新する
- 変更履歴セクションがある仕様書は、日付・変更箇所・内容を末尾の表に追記する
