- コンテキストメニューは視覚的ノイズを減らし、インタラクションのコストを下げる一方で、情報香りが弱く、発見しにくいというトレードオフを持つ
- 投稿・写真・カレンダーイベントなど特定のオブジェクトに結び付いた補助的・付加的なアクションをまとめて提供する用途に適しており、**ケバブ（⋮）・ミートボール（⋯）アイコンは一般に「詳細表示／追加アクション」**として認識される
- アイコンのサイズ・コントラスト・配置が不適切だと、アイコン自体が見えなかったり、意味を誤解されたりすることが多く、重要なアクションを隠すと見つけにくい中核機能となってユーザー体験を悪化させる
- 効果的に使うには、二次的なアクションだけを入れる、関連コンテンツの近くに配置する、一つか二つのアクションだけを隠さない、ハンバーガーとの役割を分ける、アクセシビリティを確保するなど、一貫したルールが必要
- よく設計されたコンテキストメニューはレイアウトを単純化し、集中度を高めるための手段になるが、乱用や誤用をすると混乱・追加クリック・学習負荷を増やす要因になるため、慎重な利用が必要
コンテキストメニューの概要
- コンテキストメニューは、特定のUI要素、画面領域、データ片、アプリケーションビューに結び付いた関連アクションの集合をまとめたメニュー
- 投稿にはEdit, Pin, Delete、写真にはShare, Download, Set as Background、カレンダーイベントにはDelete, Reschedule, Duplicate, Inviteのようなアクションが含まれることがある
- こうしたメニューは通常、たまに必要だが常に表示しておく必要はない二次的な機能を手の届く場所に置く目的で使われる
- デスクトップでは右クリック・トラックパッドの二本指クリック、タッチ環境ではロングプレス、そして近年ではケバブ（⋮）・ミートボール（⋯）アイコンがトリガーとしてますます多く使われている
ケバブ・ミートボールアイコンの認識と限界
- 調査参加者は、ケバブ（⋮）・ミートボール（⋯）アイコンを全体として**「より多くのオプション／別のアクションが隠れている」という意味**で認識していた
- モバイル・デスクトップの両方でこの認識は維持され、ガイドラインが適切に守られている場合ほど一貫して理解される
- このアイコンは、**「一時的に隠してある機能／アイコンのセットを開くスイッチ」**として受け取られる
- 同時に、これらのアイコンは情報香りが弱く、ユーザーはその背後に具体的にどのようなオプションがあるのかほとんど分からない状態でクリックを試みることになる
- アイコンがコンテンツから遠すぎる、非常に小さい、低コントラストで設計されている場合には、コンテキストメニュー自体にまったく気づかないケースも観察された
コンテキストメニューの利点とトレードオフ
- 利点として、コンテキストメニューは視覚的ノイズの削減、レイアウトの簡素化、フォーカスの維持に役立つ構造
- 一方で、次のようなユーザビリティ上の問題を伴う
- 見つけにくさ（findabilityの低下）: アイコンが小さくて目立たなかったり、作業の焦点領域から離れていたりすると、完全に見落としやすい要素になる
- 情報香り（Information Scent）の不足: メニューに何が入っているか予測しづらく、押す価値があるか判断しにくい状態を生む
- 誤解の可能性: 配置や使い方が適切でないと、ユーザーが進行状況インジケーターやカルーセルのコントロールと誤認するケースが発生する
- したがって、コンテキストメニューを使うかどうかは、レイアウト上の制約、ユーザーの期待、タスクの優先順位とのバランスの中で決めるべき
1. コンテキストメニューには二次的・非中核的なアクションだけを入れる
- コンテキストメニューは、利用頻度の高い中核アクションのための場所ではなく、補助的で優先順位の低いアクションのための場所
- 中核フローには含まれないが、ある程度はよく使われる機能を調査に基づいて選別し、隠す方法が推奨される
- 頻繁に使う必須アクションをコンテキストメニューの背後に隠さないことが重要
- 例として、AT&TのチャットインターフェースでEnd Chatがコンテキストメニュー内に入っていたケースは、中核となる終了アクションを隠した悪い例
- 重要な操作をメニューの背後に隠すと、ユーザーは機能を見つけられなかったり、頻繁に行う作業で繰り返し不便を感じたりすることになる
2. コンテキストメニューは影響を与えるコンテンツの近くに置く
- ユーザーは空間的近接性によって要素間の関係を解釈するため、コンテキストメニューアイコンの位置は、どのオブジェクトに属するアクションなのかを明確に示す必要がある
- 特定の要素にのみ適用されるメニューであれば、そのアイコンをその要素の内部またはすぐ横に配置すべき
- フィールド全体やトランザクション全体に適用されるアクションであれば、関連情報が集まっている領域の近くに置く必要がある
- アイコンをランダムな位置に置いたり、どの要素とも結び付いていない不自然な位置に置いたりするのは避けるべき
- Ramp.comの事例のように、小さく低コントラストなケバブアイコンが画面右下に離れている場合、どの要素のためのものか分かりにくく、発見性も関連性も低い例になる
3. アイコンのサイズとコントラストを十分に確保して視認性を保証する
- コンテキストメニューアイコンは、しばしば情報が密集した画面や複雑なアプリケーションで見えないほど微妙に表現されてしまうことが多い
- アイコンは十分なサイズとコントラストを持つべきで、可能であればホバーしなくても常に見える状態を保つのが望ましい
- 実証済みの視覚デザインガイドラインに従い、明確な色のコントラストと分かりやすい境界線・背景を使う方法が推奨される
- ホバー時にしか見えないようにしたり、ミニマリズムを理由に過度に薄くしたりする試みは発見性を損なう
- Rampの例のように、小さく低コントラストで遠い位置にあるケバブアイコンは見落としやすく、
- 一方でRipplingのモバイルアプリのように、枠線付きボックスで囲み、黒い点と白い背景を組み合わせてコントラストを高めた事例は、タップ可能性と情報香りを高める良い例
4. コンテキストメニューは関連するアクションだけをまとめて構成する
- コンテキストメニューに含めるオプションは、一つのオブジェクト／要素／階層に論理的に属するアクションとしてまとめるべき
- たとえばファイルであれば、Duplicate, Share, Deleteのようなファイル関連アクションだけを含める
- 可能であれば、メニューアイコンの横に一部のアクションを直接表示して、**「どの系統のアクションがさらに隠れているのか」**を示唆する情報香りを加えるのも推奨される
- グローバルアクションと特定要素のアクションを一つのメニューに混在させたり、無関係なアクションを混ぜたりするのは避けるべき
- こうした混在は、明確さ・見つけやすさ・空間記憶・認知負荷のすべての面で不利に働く
- Slackのデスクトップアプリのように、メッセージに付いたメニューではメッセージ関連アクションだけを隠し、スレッド全体を扱うアクションは別の位置に置く構造は良い例
5. アイコンと動作をインターフェース全体で一貫して保つ
- コンテキストメニューアイコンは、製品全体で同じ機能・動作・外観を維持すべき
- ミートボールまたはケバブアイコンをコンテキストメニューに使うと決めたなら、別用途に再利用せず、その意味にのみ使うべき
- ある場所では隠れたコンテンツの展開、別の場所ではポップアップの呼び出し、さらに別の場所ではサイドパネルを開くために同じアイコンを使うような再利用は避けるべき
- こうした使い方は、ユーザーのメンタルモデルと信頼を損ない、学習しやすさや記憶しやすさを低下させる要因になる
- Google検索結果を見ると、スポンサー付き結果のケバブアイコンはMy Ad Centerモーダルを開き、通常結果のケバブは右側パネルを開くなど、動作も位置もばらばらになっている
- その結果、Like/Block/Report/Share/Saveのような有用なアクションが隠れて見つかりにくくなり、ユーザーは同じアイコンをクリックしたときに何が起こるのか予測しにくい体験をすることになる
6. アイコンが曖昧ならツールチップやラベルで意味を補強する
- ケバブ・ミートボールアイコンはそれ自体の意味が弱い抽象的なアイコンなので、短いテキストヒントだけでもユーザビリティが大きく改善する
- 可能であれば見えるラベルやホバー時のツールチップを付けて、メニューにどの種類のアクションが入っているのかを具体的に伝えるのがよい
- たとえばPost Actions, Message Optionsのように、対象要素を含む明確な表現を使う
- 単なるOptionsのように曖昧な表現や、Ellipsesのようにアイコンの形だけを説明するラベルは避けるべき
- Patagoniaの例のように、画像の拡大アクションをミートボールアイコンに割り当て、ホバー時ラベルをEllipsesと表示したケースは、意味の伝達に失敗した例
- 一方でNotionのデスクトップアプリのように、ホバー時に「Style, Export, and more…」のようにメニュー内のアクション系統を具体的に示唆するツールチップは、情報香りを大きく高める良いパターン
- このツールチップは、メニュー内容に応じてコンテキストごとに変化する形で動作する
7. コンテキストメニューアイコンはアクション表示専用にし、コンテンツ展開には使わない
- ミートボール・ケバブアイコンは追加アクション／オプションを開く合図として認識されるため、テキストや画像を展開する用途には使わないほうがよい
- 一部のテキストを展開したり画像を拡大したりする場合には、Read more, Expandのような明示的なテキストラベルを使う方法が推奨される
- Etsyのレビューの例のように、レビュー下のミートボールアイコンで全文を開くパターンは、情報香りが不足した悪い例
- 同じ機能がGoogleレビューではMoreというテキストリンクで提供されているケースは、コンテキスト拡張アクションにより適した表現
- Googleレビュー上部のケバブアイコンがReportという一つのアクションだけを提供する構造は、後述の**「一つか二つのアクションだけを隠さないこと」**というガイドラインに違反する例でもある
8. 一つか二つのアクションのためだけにコンテキストメニューを使わない
- 可能であれば、一つまたは少数のアクションしか提供しない状況では、そのアクションをインターフェースに直接表示するのがよい
- 一つか二つのオプションをわざわざメニューの背後に隠すと、節約できるスペースはほとんどなく、クリック数と発見性のコストだけが増える
- とくに**「x」・ゴミ箱・通報フラグ**のようなよく知られた標準アイコンがある場合、それを再びミートボール／ケバブの下に隠すのは得るものがない
- Weather.comの事例では、ケバブアイコンをクリックするとDeleteボタン一つだけが入った黒いボタンに変わるが、
- この場合、最初からDeleteを直接表示した場合と画面スペースの使用量がほとんど変わらず、隠す理由がない構造
- 一方でPinterestの例では、ピンにマウスを重ねたとき**Save（右上ボタン）とShare（右下アイコン）**のような重要なアクションを直接表示している
- こうした方法は、中核アクションをコンテキストメニューに隠さず、必要なときにすぐ使えるようにする良いパターン
9. ハンバーガーアイコンをコンテキストメニュートリガーとして使わない
- ハンバーガーアイコン（☰）はグローバル／メインナビゲーションを表す記号として広く認識されており、
- ケバブ・ミートボールアイコン（⋮・⋯）は特定要素・アイテムに紐づくコンテキストアクションを意味するパターンとして定着している
- ハンバーガーアイコンはサイト／アプリのグローバルナビゲーションにのみ使い、コンテキストアクションにはケバブ・ミートボールを使うことが推奨される
- ハンバーガーをコンテンツの近くに置いてコンテキストアクションを入れたり、逆にケバブ・ミートボールにアカウント設定やサイト全体の設定のようなグローバルアクションを入れたりする使い方は避けるべき
- こうした混用は両方のパターンの意味を曖昧にし、ユーザーのメンタルモデルを壊して、ためらいや見落としを引き起こす
- Banana Republicのチャットの例では、チャットウィンドウ左下のハンバーガーアイコンを押すとSave Transcriptという一つのコンテキストアクションだけが出る構造が見られる
- これはハンバーガーをグローバルナビではなくコンテキストメニューに使っているだけでなく、一つのアクションだけを隠している点で8番のガイドラインにも違反する例
10. キーボードとスクリーンリーダーのアクセシビリティを必ず確保する
- コンテキストメニューはマウスやタッチの利用者以外の人でも使える必要があり、キーボードとスクリーンリーダーでも開いて操作できる構造が求められる
- メニューはTab・Enter・矢印キーで開いて移動できる必要があり、メニュー内の項目もスクリーンリーダーで読み上げられ、フォーカス移動と実行が可能でなければならない
- クリックやタップでしかアクセスできないメニューや、標準的なアクセシビリティパターンを壊すカスタムインタラクションは避けるべき
- アクセシビリティを優先した設計は、障害のあるユーザーだけでなくパワーユーザーにも効率性を提供し、包括的デザインの基準順守にも寄与する
結論
- コンテキストメニューは、インターフェースをシンプルに保ちながら、補助的なアクションを必要なときに提供できる強力な手段
- とくにレイアウトを整理し、作業に集中した状態で必要なときだけ追加オプションを開くパターンとして有用
- しかし、発見性と明確さが制限されやすい構造であるため、利用には常に注意が必要
- 本当に二次的なアクションにだけ使い、位置・一貫性・情報香り・アクセシビリティをすべて考慮した設計が求められる
- 核心メッセージは、視覚的ミニマリズムと実際の使いやすさのバランスを取ることであり、
- コンテキストメニューは中核フローを隠さない範囲でインターフェースを整える手段として使われるときに最も効果を発揮する
1件のコメント
社内イントラネットで動くフロントエンドをたまに手直しすることがあるのですが、役員の方々が見るダッシュボードに ☰ ⋮ ⋯ + みたいなアイコンを入れたら怒られたことがあります。どこそこ機能はどこへ行ったんだと聞かれて、このボタンを押せばいいですと言うと、見えない、普通にテキストで書けと言われて……。結局また元々使っていた2000年代風のインターフェースに戻したことがあります。何でもそうですが、フロントエンドは難しいですね。