コンテキストメニューUX：補助操作を見つけやすく、誤操作から戻れる設計

コンテキストメニューは、項目に関係する補助操作を、主タスクの邪魔にならない形で提示するときに役立ちます。名前変更、複製、移動、リンクのコピー、詳細表示などに使えます。項目の主操作は常に見えるようにし、メニューには明確なトリガーを置き、右クリックに依存しないタッチとキーボードの経路も用意します。

たとえばファイル一覧なら、行をクリックしてファイルを開き、オーバーフローボタンからそのファイルの操作を表示できます。PixsoのUIデザイン共同作業ワークスペースで、実装前にトリガー、メニューの状態、復旧経路をつないだ画面として比較できます。項目への適用範囲を予測し、操作を選び、間違いから戻れるとき、メニューは機能します。

見た目より先に役割を決める

三点アイコンから始めず、操作と対象を定義します。「このファイル行では、メニューからファイルを変更・共有する操作を選べる」のように契約を一文で書き、操作が本当にコンテキスト依存か確認します。

• 対象に紐づく：一つのファイル名変更やリンクのコピーなど、トリガーの隣にある項目へ適用される。
• 時々使う：必要なことはあるが、すべての行に常時表示すると主操作と競合する。
• 範囲が決まっている：短いメニューで完了するか、明確な名前の次画面へ移せる。

メニューをすっきり見せるために、目的地や必須タスクを隠さないでください。通知の確認、ワークスペースの切り替え、フローの次の手順が必要なら、固定ナビゲーションや明示的なページを使います。グローバル操作とコンテキスト操作の違いは、モバイルナビゲーションパターンのガイドで詳しく解説しています。ここでは一つのオブジェクトに紐づく操作を扱います。

注意を奪わず、トリガーを見つけやすくする

トリガーは、それが操作する行またはオブジェクトの中に置きます。ファイル名の横のボタンなら関係が伝わりますが、ページヘッダーに一つだけメニューを置いても、どのファイルを対象にするのかはわかりません。主操作とコンテキストトリガーの見た目を分け、クリック可能な行全体をメニューにしないでください。

アイコンだけでは意味が不確かな場合は、ラベルを表示します。ファイル行ではオーバーフローアイコンが使えますが、アクセシブルな名前は「第3四半期資料のその他の操作」のように対象を含めます。開閉してもラベルは安定させます。タスクを完了するために発見が必要な操作を、ホバー時のヒントだけで説明しないでください。

タッチ画面では、トリガーを押しやすい大きさにし、行の主操作から十分に離します。行が狭い場合は、精密な長押しではなく明示的な「その他」ボタンやアクションシートを使います。長押しは追加のショートカットにはできますが、唯一の経路にしないでください。

頻度とリスクで操作を整理する

安全で使用頻度の高い操作を上に置き、所有権、アクセス権、データを変更する操作とは分けます。メニューでは項目を段落のように読むのではなく、目で走査します。ラベルは短く、具体的で、文体をそろえます。

区切り線やグループ名は、走査を助ける場合だけ使います。5項目のメニューを小さな設定画面にしないでください。破壊的な操作は最後に置き、色だけでなく言葉でも明確にします。「削除」より「ファイルを削除」のほうが、「フォルダーから外す」と混同しにくくなります。

操作を使えない理由が理解でき、現在のコンテキストでは変更できない場合だけ無効化します。権限がないなら、アクセシブルな説明に「名前を変更できません：閲覧権限のみです」と示すか、アクセス権を申請する経路を用意します。説明のない無効アイコンは、メニューが壊れているように見えます。

ポインター、タッチ、キーボードの配置を設計する

右クリックは一つのポインター操作にすぎず、完全な操作モデルではありません。見えるトリガーから同じ操作を使えるようにし、キーボード経路を明示します。ビューポートが変わっても、メニューと対象の関係が保たれるようにします。

1. ポインター：行のトリガーまたは対象のコンテキスト操作で開きます。ビューポート内に収め、無関係な面へフォーカスやポインターが移ったら閉じます。
2. タッチ：アクセシブルなオーバーフローボタンか、説明された長押しで開きます。端で狭くなる場合は、同じラベルと順序を保ったまま、ボトムシートや横幅いっぱいのアクションリストに変えます。
3. キーボード：メニューまたは最初の項目へフォーカスを移し、現在の対象を示します。パターンに合う矢印キー操作を受け付け、Escで閉じ、閉じたらトリガーへフォーカスを戻します。

スクロール可能なパネルの四隅でトリガーをテストします。ドキュメント基準で配置したメニューは、スクロールコンテナ内の行から離れて表示されることがあります。ズーム、長いラベル、対応する場合は右から左へ読む文字、メニューより短いビューポートも確認します。選択中の項目がわかる表示をメニューで覆わないでください。

状態、権限、復旧を示す

メニューは一つの状態にすぎません。操作前、実行中、結果が不確かなときに何が起こるかを設計します。ファイルの場所、共有、表示状態を変える操作では特に重要です。

架空のデザインファイル例で「フォルダーへ移動」を選ぶと、移動先を選ぶ小さなピッカーを開きます。移動に成功したら「リサーチへ移動しました」と表示し、一定時間「移動を取り消す」を提供できます。タイムアウトした場合、破壊的な操作や複製操作をすぐに再提示しません。現在の場所を確認してから、再試行して安全かどうかを示します。

取り消せない操作は、確定前に結果を明確にします。「本当に実行しますか？」だけでなく、ファイル名と影響を確認文に含めます。取り消し、レビュー、ダイアログの使い分けは、削除確認UXガイドで詳しく説明しています。

Pixsoで一連のフローをプロトタイプする

メニューを一枚のスクリーンショットではなく、小さなコンポーネントセットとして作ります。デフォルトの行、開いたメニュー、フォーカス中の項目、権限で制限された操作、狭い画面での代替、成功と失敗の応答を用意します。レビュー担当者が文言の違いを調整せず挙動を判断できるよう、画面間でファイル名と操作ラベルをそろえます。

コンポーネントの横に、開き方、フォーカスの開始位置、閉じる経路、端での適応、操作失敗時の挙動をメモします。本当に共有できる状態にはバリアントを使い、メニュー、リストボックス、ダイアログなど意味の異なるものを一つにまとめ始めたら、コンポーネントを分けます。

レビュー担当者に「第3四半期資料をリサーチフォルダーへ移し、気が変わったら元に戻す」というタスクを説明なしで完了してもらいます。ファイルを識別し、右クリックなしでトリガーを見つけ、正しい操作を選び、復旧経路を探せるかを見ます。キーボードだけの入力と狭いビューポートでも繰り返します。このタスクに失敗するメニューは、見た目が整っていても引き継ぎの準備ができていません。

コンテキストメニューを収納場所にしない

コンテキストメニューは走査できる小ささと、開いた対象に固有のわかりやすさを保ちます。操作が増えたら、対象のモデルと主フローを見直します。固定の目的地はナビゲーションへ、長い設定はページへ、結果の大きい判断だけをダイアログへ移します。メニューを超えた面の分類には、ツールチップ、ポップオーバー、ダイアログの比較が役立ちます。

信頼できるコンテキストメニューUXでは、対象との関係、操作、状態、復旧が見えるようになっています。見つけやすいトリガーを置き、タスクとリスクで順序を決め、ポインター・タッチ・キーボードをサポートし、メニューと同じ丁寧さで結果を設計します。最後に、実装前の一連の操作をPixsoでレビューしましょう。

Pixsoを無料で試す