ux-selection-controls

選択コントロールスキル

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

これは生成型のスキルです。デフォルトの失敗モードは誤ったコントロールの選択です。3つの選択肢にドロップダウン、送信が必要なものにトグル、四角形に再スタイルされたラジオボタン、精度が重要な場面でのスライダーなどです。コントロールは選択の構造（選択肢の数、選択可能な数、即時効果か遅延効果か）によって決まるのであって、見た目によって決まるのではありません。このスキルは以下をゲートします：

1. 選択の構造を確定する — これがほぼコントロールを決定します。スタイリングの疑問は二の次です。
2. 常に当てはまるコアを適用する — 慣習的な形状、インタラクティブなラベル、明確な配置、デフォルト。
3. 文脈依存の判断（ドロップダウンの代替案、スライダーのバリエーション、プリセット範囲）をトレードオフとともに浮き彫りにします。

その後、検証のために ux-heuristics-audit、ux-accessibility-audit、ux-aesthetics-audit、ux-microcopy-audit に引き継ぎます。

---

ステップ 0 — 選択の構造を確定する

4つの質問が本質的にコントロールを選びます：

• ユーザーはいくつの選択肢を選択できますか？ 1つ → ラジオボタン。複数（またはゼロ）→ チェックボックス。ちょうどオン/オフ → トグルまたは単独のチェックボックス。
• 選択は即時に効果を発揮しますか、それとも送信後ですか？ 即時（設定、ライブ更新されるフィルター）→ トグルスイッチ / スライダー。送信/確認まで遅延 → チェックボックスまたはラジオ。
• 選択肢はいくつありますか？ 5以下 → すべて表示する（ラジオ/チェックボックス — 表示される選択肢は隠されたものに勝ります）。長いリスト → オートサジェスト検索付きのドロップダウン、またはテキスト入力。
• 値はスケール上の点/範囲ですか？ おおよその感覚（音量、明るさ、価格帯）→ スライダー。正確な値が重要 → テキスト入力（またはスライダー + 連動する入力ボックス）。

プラットフォームも確定してください — モバイルでは配置（スイッチは右、ラベルは左）、タッチターゲットの要件、ピッカーの選択（生年月日のような遠い日付には入力ピッカー、1年以内の日付にはカレンダーピッカー）が変わります。

---

常に適用するコア（ほぼすべてのケースで正しい）

慣習的な形状を保つ — それらは構造を支えている

• 四角 = チェックボックス、円 = ラジオ、角丸長方形 = スイッチ。 色、境界線、影は自由に再スタイルしてかまいませんが、基本的な形状は決して変えないでください — ユーザーはそれに基づいて操作方法を判断します。
  • ❌ 「ブランドの一貫性のために」丸いチェックボックス ✅ チェックマーク付きの四角いボックス、円はラジオのみ
• グループ内でコントロールのサイズを統一する。 サイズを変えると、ユーザーを特定の選択肢に微妙に誘導してしまいます — ガイダンスは操作的であってはならず、透明でなければなりません。
• ネストされたリストの親チェックボックスには不確定状態を使用する：空 = 未選択、横線 = 一部選択、チェックマーク = すべて選択。すべてを平坦化するのではなく、サブオプションを親の下にインデントしてネストしてください。

ラベルが重要な役割を担う

• ラベルはクリック/タップ可能 — ラベル + コントロールの領域全体がそのオプションを有効化します（デスクトップではポインターカーソル、モバイルでは快適なタッチ領域）。
• キーワードから始め、残りは削る。 疑問文にしない、曖昧さをなくす。スイッチの場合、ラベルはそれがオンのときに何が起こるかを述べます — ラベルを読み上げて + 「オン/オフ」と続けてテストしてください：❌「通知を受け取りますか？」 ✅「メール通知」
• ラベルサイズは約14px、本文テキストより控えめでありながら読みやすく、コントロールとラベルの間隔はペアリングが決して曖昧にならない程度に詰める。

スキャンのために整列する

• 垂直、単一列、左揃えのリスト — 追いやすく、左端のスキャンに一致します。水平レイアウトは、ラベルとコントロールのペアリングが明瞭であり続けるよう、十分な間隔を取る場合にのみ使用します。
• コントロールをラベルの前に（LTR）：連続クリックが速くなり、パターンが予測可能になります。
• 複数行のラベル： コントロールはテキストの最初の行に揃えます。折り返された行は上の行に揃えます（箇条書きスタイル）。
• 小見出しはコントロールに揃えます、ラベルテキストではなく。
• モバイルのスイッチ： スイッチは右揃え、ラベルは左揃え。

デフォルトと状態

• 必須のラジオグループには常にデフォルトが選択されている — 「オプションが未選択」エラーを防ぎます。デフォルトは、実際に最も多い選択肢に基づいて設定します。
• トグルは即座に反映され、常にデフォルト値を持ちます。 操作に確認と送信が必要な場合、それはトグルではありません — チェックボックスを使用します。
• 単独のチェックボックスは単一のオプトイン（利用規約、ニュースレター）に使用します — 同意を求める種類の選択肢では決して事前にチェックを入れないでください（→ ダークパターンの領域です）。

スライダー（値が範囲や感覚的な場合）

• 構造: トラック、つまみ（十分に大きなタッチターゲット — 運動障害のある方や高齢のユーザーのため）、塗りつぶし部分、最小/最大ラベル（価格や時間など直感的でない単位には必須）、指で隠れない値の表示。
• 変更は即座に反映されます — 適用ボタンは不要です。それがスライダーの最大の利点です。
• 連続スライダーは感覚的な値（音量、明るさ）に使用します。離散的な値のみが有効な場合は目盛り + 自動スナップを使用します。範囲（価格フィルター）には2つのつまみを使用します。ユーザーが精度を必要とする可能性がある場合は、連動するテキスト入力を追加します。
• 認識しやすいつまみのスタイルと、隣接するスライダー間に誤操作を防ぐ十分な間隔を確保します。
• RTL ロケール: スライダーは右から左に動作します。

---

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

判断	適用する場合	避ける／適応させる場合	デフォルトの推奨
ドロップダウン vs. 表示される選択肢	長いリスト（国名） — スペースを節約。自動候補表示 + よく使う選択肢を上部に追加	5つ以下の選択肢（選択肢が隠れ、操作コストが増える）	約5つまではラジオ/チェックボックス。それ以上は検索可能なドロップダウン
トグル vs. チェックボックス	即時反映の設定 → トグル	選択肢を確認してまとめて送信する → チェックボックス	見た目ではなく効果のタイミングで判断
スライダー vs. プリセット範囲	デスクトップ／精度を許容するユーザー → スライダー	モバイル／外出先: タップしやすいプリセット（「50ドル未満」「100〜200ドル」）	よく使う範囲がわかっている場合はプリセットを提供。カスタムにはスライダー
スライダー vs. ラジオ/ドロップダウン	多くの値を持つ真の範囲	少数の明確な選択肢または正確な値が必要な場合	選択肢が片手で数えられるなら、スライダーを使わない
ヒストグラムスライダー	データの文脈が選択に役立つ（Airbnb のような価格分布）	データがシグナルではなくノイズを加える	分布が判断の助けにならない限り、通常の2つまみスライダー
ピッカーの種類（モバイルの日付）	遠い日付（生年月日）には入力ピッカー + マスク。約1年以内（予約）にはカレンダーピッカー	生年月日にカレンダーピッカー（延々とスクロール）。ネストされたドロップダウン	ピッカーを日付の距離に合わせる
デフォルト選択（ラジオ）	必須フィールド。調査に基づく最も一般的な選択肢	有料または同意を求める選択に誘導するデフォルト（→ ダークパターン）	本当に最も一般的な選択肢をデフォルトにする
ビデオ形式のスライダー	メディアのスクラビング — サムネイルのプレビュー、クリック可能なつまみ、キーボードショートカット	標準的なフォームの文脈	タイムラインのナビゲーションにのみ使用

---

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

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

生成または修正を行った後は、完了と宣言するのではなく、結果を監査レンズに引き渡してください。これらは候補レンズです — 姿勢は docs/orchestration-policy.md で設定するか、全体を ux-design-review 経由でルーティングしてください。ここでは、**heuristics、microcopy、dark-patterns は Tier A（自動実行）、accessibility、aesthetics、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) — ラベルの言い回し（キーワードを先頭に、スイッチのオン状態の表現）、グループの小見出し。
• ux-dark-patterns-audit (Tier A) — デフォルトや事前選択が同意、支払い、データ共有の選択を誘導している場合：サイズによるバイアス、事前チェックされたオプトイン、誘導するデフォルト。
• ux-mobile-responsiveness-audit (Tier B — 提案。モバイルでのみ適用) — コンテキストがモバイルの場合：スイッチの整列、ピッカーの選択、親指のターゲット。

監査で競合が表面化した場合は、主タスクに向けて解決してください：ユーザーが選択構造を一目で把握し、エラーなく選択できるようにする必要があります。

---

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

❌ しない	✅ する
3つの支払い方法にドロップダウン	ラジオボタン — すべての選択肢が見え、ワンタップ
「保存」後にのみ適用されるトグル	チェックボックス + 送信。トグル = 即時効果
スタイル目的で丸いチェックボックス／四角いラジオ	従来の形状。色と境界線のみスタイル変更
ラベルを質問形式にする（「メールを受け取りますか？」）	キーワードを先頭にしたオン状態のラベル（「メール通知」）
小さなコントロールの四角だけがクリック可能	ラベル全体 + コントロールでオプションを有効化
何も選択されていない必須ラジオグループ	調査に基づくデフォルトを事前選択
4つのプランから1つを選ぶスライダー	ラジオボタン。スライダーは範囲／感覚に使う
適用ボタン付きのスライダー	即時効果 — それがスライダーの目的
min/max ラベルのない価格フィルター	min/max を表示。デュアルサム。モバイル用プリセット
「デフォルト」として事前チェックされた同意チェックボックス	チェックなしの同意。デフォルトは事実を事前入力するもので、決定ではない（→ dark-patterns）
確認せずに出荷	ヒューリスティクス + アクセシビリティ + 美学 + マイクロコピーに引き渡す

---

出典レッスン（Uxcel）

• Selection Controls & When to Use Them
• Best Practices for Designing Selection Controls
• Designing Mobile Selection Controls
• UI Sliders & When to Use Them
• Best Practices for Designing UI Sliders