効果的なコンテキストメニューのデザイン：
10のガイドライン
コンテキストメニューは画面の雑然さとインタラクションコストを減らすが、情報の匂いは弱い。明確さ、一貫性、近接性を優先して、このトレードオフのバランスを取ろう。
コンテキストメニューは、適切に使えば、視覚的なノイズを軽減し、レイアウトをすっきりさせ、インタラクションに集中しやすくする。しかし、使い方に一貫性がなかったり、ラベルが不適切だったり、配置が間違っていたり、内容を詰め込みすぎたりすると、混乱を招き、ユーザーの作業スピードを低下させることもある。
コンテキストメニューとは
コンテキストメニューとは、特定のUI要素、インタフェースのある領域、アプリケーション内のデータの一部、またはアプリケーションのビューに関連するアクションのセットのことだ。ユーザーがときどき使う必要があるかもしれず、そのため、すぐにアクセスできる場所に置いておくべき二次的な機能を収めるために一般に使用される。
これらのメニューは、ユーザーが操作している対象に応じて内容が変わるため、コンテキストに依存している。たとえば：
- 投稿のコンテキストメニューには、「編集」、「ピン留め」、「削除」などの選択肢が表示されることがある。
- 写真のコンテキストメニューには、「共有」、「ダウンロード」、「背景として設定」などが表示されることがある。
- カレンダーのイベントのコンテキストメニューには、「削除」、「日程変更」、「複製」、「招待」などが表示されることがある。
コンテキストメニューはインタフェースにどのように表示すべきか
コンテキストメニューは、デバイスやインタラクションモデルに応じて、複数の方法で表示できる。デスクトップでは、多くの場合、右クリックやトラックパッドでの2本指クリックによって表示される。タッチインタフェースでは、特定の要素を長押しすると表示されることがある。ただし、最近では、コンテキストメニューの存在を視覚的に示すために、デザイナーが小さなアイコン（最も一般的なのはケバブアイコン（⋮）やミートボールアイコン（⋯））を使用するケースが増えている。
こうしたアイコンベースのトリガーは、もともとモバイルデザインのパターンとして始まったが、その後、デスクトップアプリケーション全般でも一般的になり、「関連アクション」や「追加の選択肢」を表す認識しやすい省略表現として使われている。
ケバブアイコンとミートボールアイコンは認識されやすい
私が著書『Digital Icons that Work』のために実施した調査では、参加者にケバブアイコンやミートボールアイコンを含むさまざまなアイコンが配置されたインタフェースを見せ、各アイコンについて説明してもらい、その機能を予測してもらった。
全体として、ケバブアイコン（⋮）とミートボールアイコン（⋯）はどちらも、本記事で挙げるガイドラインに従っている限り、「その他の選択肢」や「他のアクション」を意味するものとして一般的に認識されていた。これは、モバイルアプリとデスクトップアプリの両方で当てはまった。
あるユーザーは、そうしたアイコンの機能について次のように説明した：
「これはたいてい、一時的に非表示になっている別の機能やアイコンのセットがあり、クリックすればそこにアクセスできる、ということですね。」
ケバブアイコンもミートボールアイコンも、インタフェース内のコンテキストメニューを表すには良い選択である。
コンテキストメニューのトレードオフ
こうした一般的な認識があるにもかかわらず、ユーザーはケバブアイコンやミートボールアイコンの背後にどのような具体的な選択肢が隠されているのか、ほとんど見当がついていないことが多かった。アイコン自体は認識できたとしても、その情報の匂い（訳注：その先に何があるかを推測する手がかり）が弱いからである。
さらに、コンテキストメニューに対応するアイコンが次のような場合、コンテキストメニュー自体が完全に見落とされることもあった：
- 対象とするコンテンツから離れすぎた位置に配置されている
- 非常に小さく表示されている
- 低コントラストのデザインになっている
このようにコンテキストメニューは柔軟性を提供する一方、次のような、実際のユーザビリティ上の課題ももたらす：
- 探しやすさの低下：コンテキストメニューを表すアイコンは、特に小さかったり、色が薄かったり、タスクの焦点となる領域から遠く離れていたりすると、完全に見落とされることがある。
- 情報の匂いの弱さ：ユーザーはメニューに何が含まれているかを予測しにくいため、メニュー内をくまなく確認することに時間を費やすべきかどうかを判断しにくい。
- 誤解釈のリスク：コンテキストメニューのアイコンの配置が不適切だったり、使い方が一貫していなかったりすると、ユーザーはそのアイコンをプログレスインジケーターやカルーセルコントロールなどの他の機能と混同してしまう可能性がある（下の例を参照）。
コンテキストメニューを効果的に活用するには、デザイナーは、その限界を、レイアウト上の制約やユーザーの期待、タスクの優先順位と比較検討しなければならない。
コンテキストメニューの使用ガイドライン
1. コンテキストメニューは、二次的な、重要でないアクションに使用する
コンテキストメニューは、ユーザーが頻繁に利用するアクションには適していない。必要なときにアクセスできるものの、主要なタスクフローを妨げてはならない、二次的か優先度の低い選択肢に使用するのが最適である。
- すべきこと：調査に裏打ちされた判断をする。主要なアクションではないものの必要なときにアクセスできるようにしておくべきアクションを隠す。
- すべきでないこと：必須かつ使用頻度の高いアクションを、追加のタップやクリックが必要な場所に隠す。
理由：特にユーザーがそれらのアクションがデフォルトで表示されていることを期待している場合、コンテキストメニューに隠されたアクションは見つけにくく、使用しにくい。重要なアクションを隠してしまうと、そのタスクを頻繁に実行するユーザーをイライラさせることになる。
2. コンテキストメニューは、対象とするコンテンツの近くに配置する
ユーザーは、ページ上の要素同士の関連性を解釈する際、空間的近接性を利用する。コンテキストメニューのアイコンの位置は、そのアイコンが関連する対象を明確に示すものでなければならない。
- すべきこと：コンテキストメニューが（画面全体やページ全体ではなく）特定の要素に適用される場合は、そのアイコンを、それが制御またはサポートするオブジェクト自体の中、またはそのすぐ横に配置する。
- すべきでないこと：そのアイコンをインタフェース上のランダムな場所や曖昧な位置に配置したり、関連する要素から遠く離れた場所に配置する。
理由：近接性はコンテキストを補強し、ユーザーがメニューに含まれるアクションを予測するのに役立つ。
3. コンテキストメニューアイコンは、十分なサイズとコントラストで視認性を確保する
コンテキストメニューのアイコンは、特に小さなモバイルインタフェースや複雑なアプリケーションのような情報が密集した領域において、視覚的に目立たず、ほとんど見えなくなることがよくある。
- すべきこと：アイコンは十分な大きさにして、コントラストも確保し、可能であればマウスオーバーしなくても見えるようにする。確立された、実績のあるビジュアルデザインの標準やガイドラインに従う。
- すべきでないこと：インタフェースを軽やかでミニマルに見せようとして、アイコンをマウスオーバー時のみ表示するようにしたり、目立ちにくくする。
理由：過度に控えめなビジュアルデザインは、発見されやすさを低下させる。コンテキストメニューを表すアイコンが目立たないと、見落とされがちになる。
4. コンテキストメニューによって、関連のある、コンテキストに応じたアクションをグループ化する
コンテキストメニューでは、同じオブジェクト、要素、階層に結びつけて考えられるアクションをまとめて配置する必要がある。無関係な選択肢を混在させると、混乱を招くためである。
- すべきこと：論理的に関連性のある選択肢をグループ化する（例：ファイルに対する「複製」、「共有」、「削除」）。可能であれば、オーバーフローアイコンの手前のスペースに、アクションに関連するアイコンをいくつか表示し、コンテキストを追加して、メニュー内に他にどのような種類のアクションがありそうかについて「情報の匂い」を強化するとよい。
- すべきでないこと：関連のない選択肢同士をグループ化したり、グローバルなアクションと要素固有のアクションを同じコンテキストメニュー内に混在させたりする。
理由：関連のない選択肢がグループになっていると、明確さが損なわれ、探しやすさが低下し、位置を記憶しにくくなり、認知負荷が増大する。
5. インタフェース全体でコンテキストメニューの表示と動作の一貫性を保つ
コンテキストメニューのアイコンは、プロダクト全体で機能、動作、外観が一貫している必要がある。インタフェース全体でコンテキストメニューを表すためにミートボールアイコンやケバブアイコンを使用することにしたのであれば、そうしたアイコンを一貫して使用しつづけ、コンテキストメニュー専用にしよう。
- すべきこと：コンテキストメニューを表すアイコンには、同じものを一貫して使用する。
- すべきでないこと：そのアイコンを無関係なインタラクションに転用する（例：ある箇所では非表示コンテンツを展開するため、別の箇所ではポップアップを起動するため、さらに別の箇所ではサイドパネルを開くために使用する）。
理由：一貫性のない使用は、ユーザーのメンタルモデルやインタフェースへの信頼を損なうだけでなく、学習しやすさや記憶しやすさも低下させる。
6. 曖昧なコンテキストメニューアイコンは、ツールチップやラベルで明確にする
ケバブアイコンやミートボールアイコンは、それ自体には固有の意味がないため、ちょっとした手がかりによって、ユーザビリティを大幅に向上させることができる。
- すべきこと：可能であれば、有用なラベルやツールチップを表示する。できるだけ具体的に記述する。たとえば、アクションが特定の要素に限定される場合は、「投稿アクション」や「メッセージオプション」などの説明的な文言を追加する。可能なら、これらの説明をアイコンのラベルとして表示する。それが不可能な場合は、マウスオーバー時に説明的なツールチップを表示するようにする。
- すべきでないこと：ラベルやマウスオーバー時の説明を入れず、アイコンの意味をユーザーの解釈に委ねたり、「オプション」のような曖昧なラベルに依存したり、さらに悪いことに、追加のコンテキストをまったく提供しない「省略記号」のような記号名だけのラベルを使用する。
理由：オーバーフローアイコンは情報の匂いが弱い。しかし、テキストによる手がかりがあれば、明確になる。
7. コンテキストメニューアイコンは、コンテンツの展開には使わず、アクションの表示に使用する
ミートボールアイコンやケバブアイコンを、非表示のテキストを表示したり、画像を拡大したりするために、使用してはならない。
- すべきこと：ミートボールやケバブのメニューアイコンは、追加のアクションや選択肢を表示するためだけに使用する。一部だけが表示されているテキストコンテンツ（例：レビューや商品説明の一部）を展開してさらに表示できる場合は、「続きを読む」や「さらに表示」などの明示的なラベルを使用しよう。
- すべきでないこと：これらのアイコンを使って、テキストや画像を展開する。
理由：これらのアイコンはアクションのシグナルであり、コンテンツの展開を示すものではない。コンテンツを表示するためにこれらを使用すると、ユーザーを混乱させ、明確さを損なうことになる。
8. 1つの（またはごく少数の）アクションにコンテキストメニューを使用するのは避ける
実行可能なアクションが1つか2つしかない場合は、ユーザーにそのアクションをアイコンの背後で探させるべきではない。そのようなやり方は、インタラクションコストを不必要に増大させるからだ。
- すべきこと：可能であれば、単一のアクション（または少数のアクション）をインタフェース上にそのまま表示する。
- すべきでないこと：利用可能なスペース内に無理なく収まる1つか2つの項目を隠すために、コンテキストメニューを使用する。
理由：1つか2つのアクションをケバブアイコンやミートボールアイコンの背後に恣意的に隠してもスペースは節約できず、ユーザーの労力を増やし、気づきやすさを低下させるだけである。特に、そのアクションに広く認知されている標準化されたアイコン（例：アイテム削除用の「×」やゴミ箱アイコン、投稿の報告用の旗アイコン）がある場合、そのような機能をあいまいなアイコンの背後に隠しても、スペースを節約したことにはならない。
9. コンテキストメニューの起動にハンバーガーアイコンを使用するのは避ける
ハンバーガーアイコン（☰）は、グローバルナビゲーションやメインナビゲーションを表す広く認知された記号である。それに対して、ケバブやミートボールのアイコン（⋮ や ⋯）は、特定の要素や関連するアクションのグループに紐づく、コンテキストに応じたアクションを表すものとして認識されている。一方を他方の用途で誤用すると、混乱を招き、両方のパターンの明確さが薄れる。
- すべきこと：ハンバーガーアイコンは、サイトやアプリのメインナビゲーションへのアクセスのためだけに使用する。ケバブアイコンやミートボールアイコンは、二次的な、その項目固有のアクションを表示するために使用する。
- すべきでないこと：コンテキストに応じたアクションを表示するために、コンテンツの近くでハンバーガーアイコンを使用する。同様に、アカウント設定やサイト全体のプリファレンス設定といったグローバルなアクションを入れるために、ケバブアイコンやミートボールアイコンを使用する。
理由：これらのアイコンには、それぞれ異なる、十分に確立された意味がある。役割を入れ替えると、ユーザーのメンタルモデルが崩れてしまい、操作をためらったり、機能を見落としたりすることになる。
10. コンテキストメニューをキーボードやスクリーンリーダーで操作できるようにする
コンテキストメニューは、すべてのユーザーが利用できるようにしなければならない。マウスでクリックしたり、指でタップしたりしないユーザーには、これらのメニューに効率的にアクセスし、その内容を把握できる方法が必要である。
- すべきこと：コンテキストメニューをキーボードショートカット（例：Tabキー、Enterキー、矢印キー）で開き、メニュー内を移動できるようにする。また、その内容をスクリーンリーダーを通じて完全に読み取れ、その項目を操作できるようにする。
- すべきでないこと：クリックやタップでのみ利用可能なメニューをデザインする。標準的なアクセシビリティの動作を損なう独自のインタラクション方式を採用する。
理由：アクセシビリティを優先することは、障害のあるユーザーだけでなく、すべてのユーザーに有益である。そうすることでパワーユーザーの効率も向上するし、インタフェースをインクルーシブデザイン基準に準拠させることにもなる。
結論
コンテキストメニューは、適切に使用すれば、インタフェースをすっきりさせ、認知的なノイズを軽減し、インタラクションに集中しやすくする。しかし、その発見されやすさと明確さには限界があるため、慎重な使用が求められる。ミニマリズムとユーザビリティのバランスを取り、真に二次的なアクションだけに用いて、わかりやすく、一貫性のある配置にして、認識しやすいトリガーを使用しよう。
記事で述べられている意見・見解は執筆者等のものであり、株式会社イードの公式な立場・方針を示すものではありません。
