docs(design-principles): 不要なセカンダリラベルや説明を避け、レイアウトに説明させるルールを追加

DESIGN.md

@@ -377,6 +377,7 @@ DTCG では `{"colorSpace": "oklch", "components": [L, C, H], "hex": "#..."}` 
 - 14px 未満の文字、純黒の本文、中間ウェイト（500 / 600）
 - hover で太さ・大きさを変える
 - プレースホルダーをラベル代わりにする
+- 見出しや配置で分かることを、補助ラベルや説明文で繰り返す（ラベルの言い換えだけの `supportText`、見出しを言い直す導入文）。関係はレイアウトで示す
 - アイコンだけのボタン（閉じるボタンなど慣習的なもの以外）。使う場合は `aria-label`
 - `outline-none` でフォーカス表示を消す（代わりに `focus-ring`）
 - `div` に `role="button"` を付けて作り直す

docs/design-principles/principles.md

@@ -25,7 +25,7 @@
 | 誤りと撤回 | 失敗を防ぐか。失敗の内容と戻り方を示すか。操作を中断できるか |
 | 再認 | 思い出させず、見せて選ばせるか |
 | 文言 | ラベルと文が、操作の結果と入力の意味を言うか |
-| 削る | その画面の主タスクに不要な要素を置かないか |
+| 削る | その画面の主タスクに不要な要素を置かないか。レイアウトで伝わることを文字で繰り返さないか |
 | 助けの場所 | ヘルプと検索を、サイト内の同じ場所に置くか |
 | 短い経路 | 繰り返す操作に、より短い別経路があるか |
 | 自律的な処理の範囲 | 人の操作を待たずに進む処理の境界が分かるか |
@@ -321,19 +321,29 @@
 
 ### 削る
 
-その画面の主タスクに不要な要素を置かないかを決める。選択肢の個数は「一度に出す数」、残した要素の文言は「文言」である。
+その画面の主タスクに不要な要素を置かないかを決める。部品を組み合わせたページでは、配置とまとまりで伝わることを、ラベルや説明で繰り返さないかも決める。選択肢の個数は「一度に出す数」、グループの見せ方は「まとまり」、残した要素の文言は「文言」である。
 
 **必須**
 
 - その画面の主タスク（利用者がその画面で終えたい作業）に使わない装飾、説明、動く要素を置かない。
+- 見出し、配置、まとまりで既に伝わることを、セカンダリラベル（小見出し、見出しの上の補助ラベル、項目名の前置き）や説明文で繰り返さない。例: 入力欄のラベルを言い換えただけの補足文、ページの見出しを言い直すだけの導入文、カードの中の「詳細」「情報」だけの小見出し、表の列見出しと同じ語を各セルに付けた前置き。
+- 項目どうしの関係（どれが同じグループか、どれが主でどれが従か）は、レイアウト（近さ、並び、枠や背景、大きさの差）で示す。関係を説明する文を足して補わない。
+- 削ってよいのは重複している表示だけである。入力欄の見えるラベル（WCAG 3.3.2）、見出しや表の見出しセルなど構造を表す要素（1.3.1）、アイコンだけの操作の名前は残す。見た目で示したグループには、読み上げでも取り出せる名前（`fieldset` と `legend`、区画の見出しなど）を付ける。
 - 主タスクを遮るポップアップは、利用者の判断が要る場合（未保存の変更の破棄など）に限る。それ以外の通知は、主タスクを遮らない位置に出す。
 - 自動で再生・移動する要素は、主タスクの妨げになる場合は初期状態で動かさない。
 
-**出典**: ニールセン「最小限で美しいデザイン」、情報提示の原則「注意を逸らさないようにする」「簡潔にする」、対話の原則「タスクへの適合性」
+**推奨**
+
+- 補足文が要りそうに見えたら、先に配置、見出しの段、ラベルの語を直して、補足なしで伝わらないか確かめる。補足は、形式や制約のように見た目から分からないことに使う。
+
+**出典**: ニールセン「最小限で美しいデザイン」、情報提示の原則「注意を逸らさないようにする」「簡潔にする」、対話の原則「タスクへの適合性」、ゲシュタルトの法則（近接、共通地域）
 
 **レビュー**
 
 - [ ] 各要素が、その画面の主タスクに必要か
+- [ ] 見出しや配置で分かることを、小見出し、補助ラベル、説明文で繰り返していないか
+- [ ] グループや主従の関係を、文ではなくレイアウトで示しているか
+- [ ] 削った結果、入力欄の見えるラベルやグループの名前まで消えていないか
 - [ ] 動く要素や通知が、主タスクから注意をずらしていないか
 - [ ] スクロールしないと見えない場所に、主タスクの完了手段が隠れていないか
 
@@ -479,9 +489,9 @@ Jakob Nielsen がインタラクティブシステムの評価用に整理した
 
 | 法則 | 内容 | 吸収先 |
 | --- | --- | --- |
-| 近接 | 近い要素は一つのグループに見える | まとまり |
+| 近接 | 近い要素は一つのグループに見える | まとまり、削る（関係をレイアウトで伝える） |
 | 類同 | 色、形、サイズが似た要素は一つのグループに見える | まとまり |
-| 共通地域 | 枠や背景で囲まれた要素は一つのグループに見える | まとまり |
+| 共通地域 | 枠や背景で囲まれた要素は一つのグループに見える | まとまり、削る（関係をレイアウトで伝える） |
 | 連続 | 線や並びに沿った要素は一つの連なりに見える | まとまり |
 
 ### 視線のパターン

docs/improvement/log.md

@@ -4,6 +4,7 @@
 
 | 日付       | 種別     | 内容                                                                                                                                                                                                                                                              | 再発防止                                                                                                      |
 | ---------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- |
+| 2026-10-23 | 文書 | design-principles の原則「削る」に、部品を組み合わせたページで不要なセカンダリラベルや説明を避け、関係をレイアウトで伝えるルールを追加（必須 3・推奨 1・レビュー 3）。WCAG 3.3.2・1.3.1 を緩めないよう、見えるラベルと構造は残す条件を明記。ルールブック 01・05 と DESIGN.md の Don't に反映 | 原則のレビュー項目に追加（design-review で確認される）。05 文言で `supportText` をラベルの言い換えに使わないと明記 |
 | 2026-10-21 | 開発体験 | スキルの一覧 `docs/skills.md` を追加し、README・AGENTS.md・CONTRIBUTING・ai-agents.md からリンク（重複していた表は一覧へのリンクに置き換え）。文書を必要なときだけ読み込むよう、大きいスキル（design-principles・ds-factory・ds-slides・ds-storybook-preview）を本体と段階ごとの文書に分け、AGENTS.md に読み込みの方針を追加 | ADR-0018。`scripts/check-skills.ts`（name・description・一覧の網羅・本体 2,000 字以内・リンク切れ・参照されない文書）を `make check` に追加 |
 | 2026-10-20 | 機能 | 発表用のスライドを作るスキル `ds-slides` を追加。HTML のデッキを semantic トークンだけで組み（`scripts/slides/`）、design-principles の原則をスライドに落としたルールを 07 章にまとめた | ADR-0017。`make slides-check`（ソースの S1〜S20 の検査と deck.css の監査）を `make check` に組み込み、見本 `scripts/slides/examples/sample.html` を毎回検査 |
 | 2026-10-20 | 不具合 | Checkbox のチェックのアイコンが枠の中心から下にずれていた。Indicator（span）が本文の行の高さを引き継いだ行ボックスになり、`align-middle` の SVG がベースライン基準で置かれていたため。Indicator を flex にして行ボックスを作らない | 単体テストでアイコンが flex の中心に置かれていることを検査 |

docs/rulebook/01-principles.md

@@ -32,7 +32,7 @@ UI の方向性とサービス種別は、8341-ui を使う各プロダクトの
 | 誤りと撤回         | FormField（Base UI の Field）の補足とエラー、Base UI の Form による送信時の検証とフォーカス移動、`validationMode="onBlur"`、送信ボタンを無効化しない規約、danger ボタン                                   | 確認ダイアログ（Base UI の AlertDialog）、エラー一覧（バックログ）。入力用の Dialog は提供済み |
 | 再認               | Select、RadioGroup、アイコン単体利用時の `label` 必須、Truncate（省略した全文をホバーとフォーカスで出す）                                                                                                  | コンボボックス・汎用のツールチップ（Base UI にあり、バックログ）   |
 | 文言               | [05 文言](./05-writing.md)、`label` / `legend` を必須 props にする契約                                                                                                                                    | —                                                                  |
-| 削る               | 影は 3 段階・ボタンに使わない、`prefers-reduced-motion` で動きを止める                                                                                                                                    | 画面ごとの要素の取捨                                               |
+| 削る               | 影は 3 段階・ボタンに使わない、`prefers-reduced-motion` で動きを止める。FormField の `supportText` はラベルの言い換えに使わない（05 文言）。グループは Stack・Card・RadioGroup の `legend` で見せ、関係を文で説明しない | 画面ごとの要素の取捨、ページで重複したラベルや説明を削ること |
 | 助けの場所         | —                                                                                                                                                                                                         | ヘッダーの配置（プロダクト側）                                     |
 | 短い経路           | ネイティブ要素でキーボード操作を保証                                                                                                                                                                      | ショートカット、一括操作（プロダクト側）                           |
 | 自律的な処理の範囲 | —                                                                                                                                                                                                         | 該当する処理があるプロダクト側で決める                             |

docs/rulebook/05-writing.md

@@ -28,7 +28,7 @@ design-principles の原則「文言」「誤りと撤回」「一貫性」の
 | 要素                | 書き方                                       | 例                            |
 | ------------------- | -------------------------------------------- | ----------------------------- |
 | ラベル              | 名詞で短く                                   | 氏名、メールアドレス          |
-| 補足（supportText） | 入力形式・例・制約                           | 半角数字 7 桁（ハイフンなし） |
+| 補足（supportText） | 入力形式・例・制約。ラベルの言い換えは書かない（無ければ付けない） | 半角数字 7 桁（ハイフンなし） |
 | プレースホルダー    | 入力例のみ。ラベルや説明の代わりにしない     | 例: 1000001                   |
 | 必須                | 「必須」バッジ。任意が少数なら「任意」を表示 | —                             |