ux-menus

メニュースキル

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

これは生成型のスキルです。デフォルトの失敗モードは、何でも詰め込んだドロップダウン（無関係なアクションを 1 つのメニューにまとめてしまう）、深く曖昧なネスト（ユーザーが迷い込むカスケード階層）、順序のない項目リスト（優先順位もグループ化もなく、専門用語のラベルが並ぶ）です。メニューとは厳選され、順序付けられた関連アクションの集合であり、それが成り立たなくなったときの解決策は、階層を追加することではなくフローを変えることです。このスキルは以下をゲートします:

1. アクションセットを確立する — どのようなアクションか、どの程度関連しているか、いくつあるか、選択かコマンドか？
2. 常に当てはまる核心を適用する — 構造からの型、優先順位付け、グループ化、ラベル、状態。
3. 文脈依存の判断（カスケード、文脈依存、メニュー内検索、ショートカット）をトレードオフとともに表面化する。

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

スコープと構成（docs/orchestration-policy.md §9 準拠）: このスキルはメニューの構造と解剖を担います。サブパートを担うピア（委譲 — 到達した場合はそれぞれがサブパートを処理します）: ux-navigation はナビゲーションシステム全体の中でメニューがどこに位置するか（ハンバーガーの配置、メガメニュー、トップバーかサイドバーか）を担い、ux-selection-controls はフォーム選択におけるメニューかラジオ/チェックボックスかの選択を担います。

---

ステップ 0 — アクションセットを確立する

不明な場合は質問してください。回答なしで進める場合は前提を明示してください:

• コマンドか選択か？ アクションの実行（コピー、削除）か値の選択（フィルターオプション）か — 選択メニューには選択インジケーターと単一/複数選択の決定が必要で、コマンドメニューには動詞と場合によってはショートカットが必要です。
• 項目数はいくつか、どの程度関連しているか？ メニューは項目がまとまっている場合にのみ存在価値があります。無関係なアクション → 分割するかフローを再考します。非常に長いリスト → 検索メニューか別のコントロールです。
• サブ構造はあるか？ 実際の親子カテゴリはカスケードを正当化するかもしれません — ただし子が増えすぎるなら、ユーザーフローを変えてください。
• プラットフォーム — 文脈（右クリック）メニューはデスクトップネイティブであり、複数選択メニューはモバイルでは困難で、ホバー状態にはタッチ相当が必要です。

---

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

選択の構造から型を選ぶ

• 基本ドロップダウン — シンプルなリストからの 1 つの選択。選択で閉じます。
• 単一選択 — 明確な選択インジケーター（チェックマーク、太字、オーバーレイ）を備えた相互排他的なオプション。モーダルや動的コントロールを起動するために使わないでください。
• 複数選択 — 組み合わせ可能なオプション用のチェックボックス/タグ。選択済み項目は常に表示され、メニュー入力内で削除可能 — 選択解除のために戻ることを決して強制しないでください。
• 検索メニュー — 長いリスト（国、言語）: ユーザーが入力するにつれて自動候補でフィルタリングします。
• 文脈メニュー — クリックされた要素に対する頻繁なアクション（右クリック/長押し）。ポインターの位置に表示され、オプションは対象によって変わります。
• インライン / オーバーフロー（⋮）メニュー — ビューを離れずにテーブルやリストの行ごとのアクション（編集、削除、ダウンロード）。
• カスケードメニュー — 真にカテゴリ化されたアクション（新規 → ドキュメントの種類）にのみ。ゲート付きの表を参照してください。

順序とグループ化 — ここでメニューの勝敗が決まる

• 最も使われる項目を上部に。 スペースがあるのに重要なオプションを余分な階層の背後に隠さないでください。ワーキングメモリは約 5〜9 項目なので、主要リストに重要なアクションを載せ、残りは 1 階層下か外に出します。
• 区切り線が関連項目をまとめる — 別々のメニューではなく淡い線。グループ化により、煩雑さなくリストをスキャン可能にします。
• スクロールは危険信号: スクロールするならスクロールバーは必須ですが、数回のホイール操作を超えるオプションがある場合は、検索を追加するかフローを変えてください。

ラベルとアイコン

• ラベルは何が起きるかを示す — 短く、慣習的な表現（「挿入」ではなく「貼り付け」）にし、専門用語や言葉遊びは避けます。やむを得ず長くなるラベルはツールチップで全体を確認できるようにして切り詰めます。折り返されるラベルは書き直しが必要なラベルです。ラベルをテストしましょう（カードソーティング）— あなたにとって明確なものでも、ユーザーは混乱します。
• ラベルの前に先頭アイコンを置く（LTR）— 親しみのある普遍的なアイコンのみ（はさみ = 切り取り）。馴染みのないアイコンは、アイコンがない場合よりもユーザーの操作を遅らせます。
• 見慣れた選択マーク — チェックマークまたは ×。奇抜なものは使わません。

状態と動作

• すべての項目にホバー/フォーカスのフィードバック（控えめなオーバーレイ、浮き上がり、または境界線）を付け、選択状態/無効状態を可視化します。
• 予測可能な開閉: タップ/クリックで開き、外側のクリックで閉じます。予想外の動作は避けます。
• 項目は 48×48px 以上で、余裕のあるパディングを確保します — 可読性と運動機能障害のある方のアクセスのためです。
• 浮き上がり（約 8dp）でメニューをページから分離します — 浮遊する操作可能なサーフェスとして認識されるべきです。

---

状況に応じた判断（表面化はするが、自動適用はしない）

判断	適用する場合	避ける／適応させる場合	デフォルトの推奨
カスケードメニュー	真の親子関係にあるアクションカテゴリ。展開する余地のあるデスクトップ	多数/深い子項目（煩雑で圧倒的）。モバイル。狭いレイアウト — モックアップで展開スペースを確認	子レベルは最大 1 つ。増える場合はフローを再構築
コンテキスト（右クリック）メニュー	デスクトップのパワーユーザーワークフロー。要素固有の頻繁なアクション	機能への唯一のアクセス手段として（発見不可能）。タッチ優先の製品	コンテキストメニューはアクセラレータとして。すべてのアクションは可視的にも到達可能に
メニュー内検索	スクロールが面倒な長いリスト	短いリスト（オーバーヘッド）	リストが数回のスクロールを超える場合に追加
メニューに表示するキーボードショートカット	繰り返しアクション（コピー/切り取り/貼り付け）のある生産性ツール	非標準のショートカットを発明すること。ショートカットのみのアクセス	最も一般的なコマンドに標準ショートカットを設定し、メニューに表示
複数選択パターン	ホットキー+クリック、チェックボックス、またはタグ収集 — 対象ユーザーとプラットフォームで選択	モバイルやカジュアルなユーザー向けのホットキーベースの複数選択	チェックボックス/タグ。選択内容はその場で可視化し、削除可能に
アイコンのみのインラインメニュー（⋮）	行ごとのアクションが必要な高密度テーブル	行の最も重要な単一アクションをオーバーフローに埋めること	主要な行アクションは可視化。副次的なアクションは ⋮ に

---

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

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

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

• ux-heuristics-audit (Tier A) — 想起よりも認識（重要な選択肢の可視化）、動作の一貫性、ユーザーコントロール（簡単な選択解除、予測可能な閉じ方）。
• ux-accessibility-audit (Tier B — 提供。デザインシステムがある場合は絞る) — 項目間のキーボードナビゲーション、48px のタッチターゲット、ラベルと区切り線のコントラスト、すべてへの非ホバーでのアクセス。
• ux-aesthetics-audit (Tier B — 提供。デザインシステムがある場合は抑制) — 余白、エレベーション、グルーピングのリズム。メニューがひとつのクリーンな面として読めるかどうか。
• ux-microcopy-audit (Tier A) — ラベルの明瞭さ、慣習的な動詞、省略の選択。
• ux-information-architecture-audit (Tier B — 提供) — メニューのグルーピング、階層、ラベル体系がユーザーのメンタルモデルと一致し、情報の手がかりを伝えているかどうか。このスキルはメニュー面を構造化し、IA はその背後にあるカテゴリモデルを担います。
• ux-mobile-responsiveness-audit (Tier B — 提供。モバイルの場合にのみ適用) — コンテキストがモバイルの場合：タッチターゲット、ホバー依存の排除、複数選択パターンの適合。

監査がコンフリクト（例：網羅性とスキャンしやすさ）を表面化させた場合は、主タスクに立ち返って解決します。ユーザーは素早く行動するためにメニューを開くのです。すべての項目は同じスキャンのために競合します。

---

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

❌ しない	✅ する
あらゆる雑多なアクションをひとつのドロップダウンに入れる	関連するアクションのみ。ひとつの集合でなくなったら再構成する
3 階層のカスケード子メニュー	子は 1 階層。増えるならフローを変える
用途を無視したアルファベット順	最も使うものを先頭に。二次的な項目は 1 階層下へ
グループ化されていない 14 項目のフラットなリスト	関連するアクションをまとめる区切り線
誰もが「Paste」と言うのに「Insert」	慣習的でテスト済みのラベル
項目ごとの装飾的または気の利いたアイコン	普遍的なアイコンのみ、またはアイコンなし
削除の唯一の方法が右クリック	コンテキストメニューはアクセラレーターとして。可視の経路が存在する
選択解除には再度開いて探す必要がある	選択中の項目を表示し、その場で削除できる
外側をクリックしてもメニューが開いたまま	標準的な開閉動作
32px の窮屈な行	余裕のある 48px 以上の項目
確認せずに出荷	heuristics + accessibility + aesthetics + microcopy に引き渡す

---

出典のレッスン（Uxcel）

• Types of UI Menus
• Best Practices for Designing UI Menus