From bfa8f26570c039572c4707be0859cb04c8f27d62 Mon Sep 17 00:00:00 2001 From: tkc310 Date: Fri, 23 Oct 2026 11:25:36 +0000 Subject: [PATCH] =?UTF-8?q?docs(design-principles):=20=E4=B8=8D=E8=A6=81?= =?UTF-8?q?=E3=81=AA=E3=82=BB=E3=82=AB=E3=83=B3=E3=83=80=E3=83=AA=E3=83=A9?= =?UTF-8?q?=E3=83=99=E3=83=AB=E3=82=84=E8=AA=AC=E6=98=8E=E3=82=92=E9=81=BF?= =?UTF-8?q?=E3=81=91=E3=80=81=E3=83=AC=E3=82=A4=E3=82=A2=E3=82=A6=E3=83=88?= =?UTF-8?q?=E3=81=AB=E8=AA=AC=E6=98=8E=E3=81=95=E3=81=9B=E3=82=8B=E3=83=AB?= =?UTF-8?q?=E3=83=BC=E3=83=AB=E3=82=92=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 原則「削る」に、部品を組み合わせたページで適用するルールを追加した。 - 必須: 見出し・配置・まとまりで伝わることを、小見出し・補助ラベル・説明文で繰り返さない - 必須: 項目どうしの関係（グループ・主従）はレイアウトで示し、説明文で補わない - 必須: 削るのは重複した表示だけ。入力欄の見えるラベル（WCAG 3.3.2）と構造（1.3.1）、アイコンだけの操作の名前は残す - 推奨: 補足文が要りそうなら、先に配置・見出し・ラベルの語を直す - 出典カタログ（ゲシュタルトの近接・共通地域）、ルールブック 01・05、DESIGN.md の Don't に反映 Co-Authored-By: Claude Opus 5.5 Claude-Session: https://claude.ai/code/session_01Yb44feYKDNj2ukQeT2j8Ks --- DESIGN.md | 1 + docs/design-principles/principles.md | 20 +++++++++++++++----- docs/improvement/log.md | 1 + docs/rulebook/01-principles.md | 2 +- docs/rulebook/05-writing.md | 2 +- 5 files changed, 19 insertions(+), 7 deletions(-) diff --git a/DESIGN.md b/DESIGN.md index 97a3ec7b..8b9a81f0 100644 --- a/DESIGN.md +++ b/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"` を付けて作り直す diff --git a/docs/design-principles/principles.md b/docs/design-principles/principles.md index 425e49f0..1250230a 100644 --- a/docs/design-principles/principles.md +++ b/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 がインタラクティブシステムの評価用に整理した | 法則 | 内容 | 吸収先 | | --- | --- | --- | -| 近接 | 近い要素は一つのグループに見える | まとまり | +| 近接 | 近い要素は一つのグループに見える | まとまり、削る（関係をレイアウトで伝える） | | 類同 | 色、形、サイズが似た要素は一つのグループに見える | まとまり | -| 共通地域 | 枠や背景で囲まれた要素は一つのグループに見える | まとまり | +| 共通地域 | 枠や背景で囲まれた要素は一つのグループに見える | まとまり、削る（関係をレイアウトで伝える） | | 連続 | 線や並びに沿った要素は一つの連なりに見える | まとまり | ### 視線のパターン diff --git a/docs/improvement/log.md b/docs/improvement/log.md index e34fbae5..99fcdb3b 100644 --- a/docs/improvement/log.md +++ b/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 の中心に置かれていることを検査 | diff --git a/docs/rulebook/01-principles.md b/docs/rulebook/01-principles.md index 625641c7..bb94d428 100644 --- a/docs/rulebook/01-principles.md +++ b/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` で見せ、関係を文で説明しない | 画面ごとの要素の取捨、ページで重複したラベルや説明を削ること | | 助けの場所 | — | ヘッダーの配置（プロダクト側） | | 短い経路 | ネイティブ要素でキーボード操作を保証 | ショートカット、一括操作（プロダクト側） | | 自律的な処理の範囲 | — | 該当する処理があるプロダクト側で決める | diff --git a/docs/rulebook/05-writing.md b/docs/rulebook/05-writing.md index 9abcf2ca..33739c95 100644 --- a/docs/rulebook/05-writing.md +++ b/docs/rulebook/05-writing.md @@ -28,7 +28,7 @@ design-principles の原則「文言」「誤りと撤回」「一貫性」の | 要素 | 書き方 | 例 | | ------------------- | -------------------------------------------- | ----------------------------- | | ラベル | 名詞で短く | 氏名、メールアドレス | -| 補足（supportText） | 入力形式・例・制約 | 半角数字 7 桁（ハイフンなし） | +| 補足（supportText） | 入力形式・例・制約。ラベルの言い換えは書かない（無ければ付けない） | 半角数字 7 桁（ハイフンなし） | | プレースホルダー | 入力例のみ。ラベルや説明の代わりにしない | 例: 1000001 | | 必須 | 「必須」バッジ。任意が少数なら「任意」を表示 | — |