DESIGN.md@examples/notification-settings git:20261103.ff96b46A

Immutable. This exact content never changes and is served at /api/v1/blob/f1337ddfd7cfb91e.

# DESIGN.md — 通知設定の比較例

## Contract Metadata

- **Locale**: `ja-JP`
- **Profile**: `saas`
- **Review status**: `draft`

## Product Use

利用者が通知先の表示名と受信設定を確認・変更する合成例。実際の利用頻度は未確認。保存はページ内の模擬状態だけを変え、外部送信・永続保存をしない。

主操作は「変更を保存」、補助操作は「元に戻す」。設定項目は一つのフォームとしてまとめる。前後で文言、初期値、入力制約、処理を共有し、見た目のために内容・機能を削除しない。

## 表現と状態

- MUST: 日本語ラベルを省略せず、通常・長文・空・エラーで表示する。
- MUST: 空の表示名で保存するとエラーを表示し、入力へフォーカスを戻す。取消は初期値を復元し、古い成功・エラーを消す。
- MUST: Tab、Enter、Spaceで操作でき、focusの輪郭を表示する。
- DEFAULT: 一つの主操作を強調し、補助操作を同じ強さにしない。比較例のbeforeはこの推奨とラベルの収まりに故意に反する。
- OPTION: ブランド色・装飾は用途の根拠があれば採用できる。特定の色を禁止しない。
- 対象幅: 320px、412px、1440px。Chromium。200%ブラウザズーム、実IME、実機・読み上げは手動確認が必要。
- 動きは不要なためアニメーションを入れない。実サービスの保存、通信失敗、認証・権限は対象外。

## Measured Elements

この表が機械計測の唯一の編集元。Min font px / Min line-heightは、この合成例の対象要素だけに適用する下限値。収まりの検査は自身のボックス内にある単純テキストが対象であり、任意のDOMの完全可視性ではない。

| Selector | Min font px | Min line-height | Overflow |
|---|---|---|---|
| #delivery-label | 16 | 1.5 | fit |
| #name-label | 16 | 1.5 | fit |
| #save | 16 | 1.5 | fit |
| #reset | 16 | 1.5 | fit |

## Validation Targets

- beforeの長文ラベルは文書の横はみ出しがなくても局所の収まり検査でFAILになる。
- afterの全対象要素は320px、412px、1440pxで文字サイズ・行間・収まり条件を満たす。
- 前後で同じデータ・入力制約を使用し、通常・長文・空・エラーの表示内容を保存する。
- afterでTab移動、Space切替、Enter保存、エラー時フォーカス、取消による復旧を検査する。
- 色・カード・美観は自動合否の対象外。条件付き視覚レビューと機械検査を別記する。