ux-settings

設定スキル

このスキルの動作 (最初にお読みください)

これは生成型のスキルです。設定はユーザーにとって馴染みのあるパターンであり、その役割は入って、1 つ変更して、出ることですが、既定の失敗例はそれに反します。すべてのオプションを平坦に羅列すること、他のどこにも収まらないリンクの雑多な置き場としてページを使うこと、技術用語のラベル、現在のステータスが表示されないこと、誤って触れてしまう上部に破壊的な操作が置かれること、フィードバックなしで保存される変更 (またはユーザーが意図的な保存を期待している場面での自動保存)。設定画面には 2 つの設計課題が 1 つに同居しています — オプションをどのように整理するかと変更をどのように保存するか — そしてそれぞれに独自のルールがあります。そこでこのスキルは以下をゲートします:

1. 規模、プラットフォーム、機密性を確立する — 設定がいくつあるか、モバイルか Web か、機密データが関与するかどうかが、構造と保存モデルを決定します。
2. 常に当てはまる核心を適用する — 関連性、グループ化、平易なラベル、見えるステータス、破壊的なものを最後に、明確な保存フィードバック。
3. 文脈依存の判断 (自動保存か保存ボタンか、検索、詳細設定の分割、確認/2FA) をトレードオフとともに提示します。

その後、検証のために ux-heuristics-audit、ux-accessibility-audit、ux-aesthetics-audit、ux-microcopy-audit、ux-information-architecture-audit、ux-dark-patterns-audit、ux-mobile-responsiveness-audit に引き継ぎます。

スコープと構成 (docs/orchestration-policy.md §9 に準拠): このスキルは設定ページとその保存モデルを対象とし、より狭いスコープのスキルを再導出するのではなく組み合わせます。コアとなる子 (ページの一部として構築): コントロールの選択 (トグル vs. チェックボックス vs. ラジオ vs. スライダー) は ux-selection-controls を経由します。サブパートを所有するピア (委譲): 検索入力そのものは ux-search に、通知設定の深さは ux-notifications-and-toasts に (到達した場合、それらのサブパートを所有します)。継承し、再生成しない: 既存のデザインシステムの下では、そのトークンから色/タイポグラフィ/スペーシングを取得します — ゼロからデザインする場合にのみ、それらを設定します。

---

ステップ 0 — 設計前に文脈を確立する

不明な場合は質問し、回答なしで進める場合は前提を明示します:

• 設定はいくつありますか? 少数ならグループ化だけで十分ですが、数十になると検索、詳細設定の分割、規律ある頻度順の並びが必要です。5 つのオプションのページに検索を追加しないでください。50 のオプションを 1 つの平坦なリストとして提供しないでください。
• プラットフォーム。 モバイルでは保存への期待が変わり、デバイス対アプリの権限の分割が加わります (通知/位置情報のトグルは一部 OS 側にあります)。macOS ユーザーは自動保存を期待し、Windows ユーザーは明示的な保存/適用を期待します — プラットフォームの習慣に合わせてください。
• 機密データはありますか? メール、パスワード、請求、支払い方法 — これらは確認を要し、変更が適用される前にしばしば二要素認証が必要です。
• 対象ユーザー。 一般ユーザーには平易な言葉が必要で、開発者向け製品のみが技術用語を前提にできます。

---

常に適用される核心 (ほぼすべての設定ページで正しい)

ユーザーが素早く入って出られるように整理する

• ここには本当の設定だけを置きます。 設定はユーザー設定 (通知、プライバシー、外観、アカウント) のためのものです。他のどこにも収まらないリンクの寄せ集めとして使わないでください — それは混乱を招き、注意を散らします。
• 関連する設定をグループ化する — 種類 (アカウント、セキュリティ、通知…) または用途別に、見出しと余白で区切り、1 つの連続したリストにせず、区切り線の壁 (視覚的ノイズ) にもしないでください。
• 頻度順に並べます。 ユーザーが最もよく変更する設定は上部に置き、明確に見えるようにします。めったに触れないものは下に置き、詳細/上級者専用のオプションは「詳細」の開示の背後に隠します。
• 設定に到達しやすくする — 既知の場所 (Web では上部隅、モバイルでは下部バーまたは上部隅) に置き、サブメニューに埋もれさせないでください。

各コントロールを自己説明的にする

• 平易な言葉のラベルと短い補足テキスト。 対象ユーザーが話すように書きます（サポートチケット、レビュー、フォーラムから実際の語彙を調査します）。自明でないコントロールは、コントロールのすぐ隣に配置した短い一行で説明します（近接性）。浮いた場所には置きません。
• 各設定のそばに現在の状態を表示する — トグルや選択値、あるいは現在の構成の一行要約 — これにより、ユーザーは詳細を開かなくても選択内容を確認できます。
• トグルは状態ではなくアクションでラベル付けする — 「フィードバック送信のためにシェイク」であり、「フィードバック送信のためにシェイクをオフ」ではありません。コントロールの視覚的な状態がオン/オフを示します。

ユーザーを保護する

• 破壊的なアクション（ログアウト、アカウントの削除・無効化）は最下部に配置し、 色、アイコン、または余分な空白で区別します — 誤タップを減らします。（注：ユーザーを引き留めるためにログアウトや削除を隠すのはダークパターンです — 最後に置くのであって、埋もれさせてはいけません。→ ダークパターン。）
• 緊急のシステムアラートは上部に表示する — プライバシーポリシーの変更、トライアルの期限切れ、ストレージ不足は、埋もれた一行ではなく、バッジと上部配置に値します。

保存のループを閉じる

• ボタンの状態を通じて明確な保存フィードバックを提供する： 何かが変更されるまで保存は無効 → 変更されると有効化（未保存の変更を知らせる）→ 保存中はローディング → 保存されたことを確認する控えめな成功トースト/バナー（可逆的な変更には元に戻すを用意）。
• ユーザーが保存せずに離脱できるようにする。 閉じるまたは戻るを押しても、変更が黙って永続化されてはいけません。未保存の機密性の高い編集を破棄する場合は、短く具体的な確認ダイアログを使用します。

---

文脈依存の判断（表面化させ、自動適用しない）

判断	適用する場合	避ける／適応させる場合	既定の推奨
自動保存 vs. 明示的な保存	単一アクションで元に戻しやすいコントロール（即座に反映される単独のトグルやチェックボックス）には自動保存	複数フィールドの変更、意図的な変更、またはユーザーが確認したい機密データ	原子的なトグルは自動保存。グループ化された／機密性の高い編集には明示的な保存。プラットフォームの慣習を尊重（macOS は自動保存／Windows は保存）
設定内検索	選択肢が多数ある場合、またはユーザーがスクロールしなければならないサブメニューがある場合。完全一致だけでなく関連結果を表示（「Siri」を検索 → アクセシビリティ、通知…）し、自動候補を表示	グループ化によってすべてがすでに見える短いページ	スクロールやサブメニューが現れた時点で追加 — まず選択肢の数を最小化した後に
詳細設定の分割（段階的開示）	一般的なオプションと専門的・複雑なオプションが混在する場合	よく必要とされる設定を「詳細」の背後に隠す	主要なものは全員に表示。詳細は要求に応じて開示 — ユーザーが追える深さ以下に
変更時の確認／二要素認証	機密データ（メール、パスワード、請求）の変更、または破壊的なアクション	些細で可逆的なトグル（確認疲れ）	機密性の高い／破壊的なものには確認＋2FA。日常的なトグルは自由に適用
確認ダイアログの文言	確認する場合、見出しはその1つのアクションを述べ、CTA は明確にする	一般的な「警告」／「よろしいですか？」。削除の隣の「キャンセル」（曖昧 — 何をキャンセル？）	具体的な見出し＋アクション語のボタン（離れる、とどまる、削除）→ マイクロコピー
モバイル：OS 設定へのディープリンク	権限（通知のオン/オフ、位置情報）が端末の設定にある場合	アプリが OS レベルの権限を完全に切り替えられると装う	アプリ内で管理できるものは管理し、残りは理由を説明してシステム設定へ誘導
既定値	ほとんどのユーザーが期待する体験に既定値を設定（調査やカードソートで検証）	チームの好みや思い込みから既定値を設定	調査に基づく既定値。不明な場合はグループ化と命名をカードソート

---

結果を検証する（オーケストレーション）

ハンドオフでは、各レンズをインストール可能なスキルの name で指定します。呼び出しはそのスキルがインストールされている場合のみ行ってください。インストールされていない場合でも、このスキル自体のコアにこれらのルールがすでに含まれているため、ブロックせずにそのまま進めてください。

生成または修正を行った後は、完了と宣言するのではなく、結果を監査レンズに引き渡してください。これらは候補のレンズです — 姿勢は docs/orchestration-policy.md で設定されるか、全体を ux-design-review 経由でルーティングします。ここでは、heuristics、microcopy、dark-patterns は Tier A（自動実行）、accessibility、aesthetics、information-architecture、mobile-responsiveness は Tier B（提案） です — 既存のデザインシステムがある場合、aesthetics は抑制され、accessibility は使用状況に絞られます。mobile-responsiveness はモバイルの場合にのみ適用されます。ユーザーが特定の目的でこのスキルを呼び出した場合は、その範囲を尊重してください。

• ux-heuristics-audit (Tier A) — システムステータスの可視性（現在の値、保存状態）、ユーザーの制御と自由度（保存せずに離れる、元に戻す）、エラー防止（機密性の高い／破壊的な変更の確認）、想起より認識。
• ux-accessibility-audit (Tier B — 提案、デザインシステムがある場合は絞る) — コントロールのラベルと状態の読み上げ、ターゲットサイズ、フォーカス順序、ステータスインジケーターのコントラスト。
• ux-aesthetics-audit (Tier B — 提案、デザインシステムがある場合は抑制) — グループ化の読みやすさ、区切り線のノイズよりも余白、平坦なリストではなくスキャンしやすい階層。
• ux-microcopy-audit (Tier A) — このスキルはコピーに大きく依存します。平易なラベル、アクションベースのトグルラベル、ヘルパーテキスト、確認ダイアログの見出し／CTA などです。
• ux-information-architecture-audit (Tier B — 提案) — グループ化の方式と並び順がユーザーのメンタルモデルに一致しているか（カードソートの証拠）、ラベルが scent を帯びているか。
• ux-dark-patterns-audit (Tier A) — 破壊的なアクションは最後に配置されているが隠されてはいない、キャンセル時に confirmshaming がない、強制的な引き止めの摩擦がない。
• ux-mobile-responsiveness-audit (Tier B — 提案) — タッチターゲット、アプリと OS の権限の分割、保存ボタンの到達性（下部固定）、片手での使用。

監査で競合が表面化した場合（例：セキュリティはすべてに確認を求める vs. 高速な設定）、主要なタスクに立ち返って解決してください：ユーザーは一つのことを変えて離れるために来ている — 危険な変更は保護し、それ以外では邪魔をしない。

---

よくある do/don't パターン

❌ Don't	✅ Do
すべてのオプションを一つの平坦なリストに詰め込む	見出し＋余白でタイプ／ユースケースごとにグループ化する
設定をはぐれリンクの雑多な引き出しとして使う	本当の設定のみ。それ以外は別の場所に置く
内部ロジックで並べる	ユーザーが各設定を変更する頻度で並べる。詳細設定は隠す
技術用語／専門用語のラベル	ユーザーが実際に話す言葉から取った平易な語。近くに短いヘルパーテキスト
現在の値を隠す	各設定のステータスをその横に表示する
トグルラベルとしての「通知: オフ」	アクションベースのラベル（「メール通知」）＋オン／オフの視覚的な状態
破壊的なアクションを最上部に — あるいは完全に隠す	最後に、色／余白で分離。存在させるが埋もれさせない（→ dark-patterns）
黙って保存する／まったく保存しない	保存状態：無効 → 有効 → 読み込み中 → 成功トースト（＋元に戻す）
複数フィールドまたは機密性の高い編集を自動保存する	意図的な／機密性の高いものには明示的な保存。自動保存はアトミックなトグルに
削除ダイアログの「よろしいですか？」／「キャンセル」	具体的な見出し＋曖昧さのないアクション語の CTA
5 項目のページに検索を後付けする	まずオプションを最小化。スクロール／サブメニューが現れたら検索を追加
確認せずに出荷する	heuristics + accessibility + aesthetics + microcopy + IA + dark-patterns + mobile-responsiveness に引き渡す

---

出典のレッスン（Uxcel）

• How to Design Useful Settings Pages
• Saving Changes
• Mobile Settings Design