メニューのデザイン：
ユーザーを手助けする、15のUXガイドライン

ユーザーの移動の手助けは、ほとんどすべてのWebサイトやアプリケーションにとっての最優先事項である。つまるところ、この上なくかっこいい機能も強力なコンテンツも、ユーザーが見つけることができないなら無意味だからだ。また、検索機能を提供しているとしても、移動の手段として、検索だけに依存すべきでないことも多い。たいていのデザイナーはこのことを理解している。そこで、自分たちのデザインに何らかの形でナビゲーションメニューを組み込んでいるのである。

定義： ナビゲーションメニューとはコンテンツのカテゴリーや機能のリストのことで、一般にはリンクやアイコンの集まりという形で表示され、デザインのそれ以外の部分とは区別できる見た目になっているもの。

ナビゲーションメニューの例としては、ナビゲーションバーやハンバーガーメニューなどが挙げられる。

メニューは重要なものなので、あなた方が目にするほぼすべてのWebサイトやソフトウェアにあるが、そのどれもが同じ作りになっているわけではない。その結果、わかりにくかったり、操作が難しかったり、あるいは単純に見つけにくいメニューにユーザーが苦労することは非常に多い。

そこで、ユーザブルなナビゲーションメニューのための以下のガイドラインに従い、よくある間違いを防ごう：

表示しよう

1. 非常に小さなメニュー（あるいはメニューアイコン）は大型の画面では使わないようにしよう。表示用のスペースが豊富にある場合には、メニューは非表示にすべきではない。
2. メニューはユーザーにおなじみの場所に置こう。UI要素というのは他のサイトやアプリで前に見たことのある場所（たとえば、左カラムや画面トップなど）にあるだろう、とユーザーは思っている。ユーザーがあると思っている場所にメニューを配置することで、こうした期待をうまく利用しよう。
3. メニューのリンクはインタラクティブであることがわかる見た目にしよう。ユーザーはメニューのオプションがクリックできそう（あるいはタップできそう）に見えないと、それがメニューだと気づかないことすらある。メニューにグラフィックを入れすぎたり、フラットデザインの原則に厳格にこだわりすぎると、メニューが単なる装飾的な画像や見出しと思われてしまう可能性がある。
4. メニューは必ず視覚的に目立つようにしよう。とはいえ、メニューはおなじみの場所に置かれた場合には、目立たせるために、周りにスペースを作ったり、彩度を上げたりはあまりしないですむことも多い。しかし、全体のデザインが雑然としている場合に、ビジュアルとして強調されていないと、閲覧者の注目を競うライバルである、大量のグラフィックや広告、見出しの中にすぐ埋もれてしまうだろう。
5. リンクテキストの色は背景色と十分なコントラストのあるものにしよう。コントラストに関するガイドラインを無視するデザイナーの多さには驚くばかりだ。デジタル空間での移動は、メニューを読むのに目を細めて画面を見るまでもなく、自分がどこにいるか、わかりにくいものなのに。

こうしたガイドラインをすべてよく知っているデザイナーでも、ユーザーに見落とされるメニューを作ってしまうことはある。というのも、自分自身の作業の客観的な評価というのは非常に難しいからだ。評価の対象が、あるものが目につきやすいか、といった主観的な基準による場合は、特にそうだ。どこにそれがあるかがわかっているので（なぜならばそこに置いたのは自分だからだ）、もちろん目に入るでしょ！というわけだ。だからこそ、ユーザーによるメニューのテストが非常に重要なのである。

現在地を伝えよう

6. 今、表示されている画面がメニューオプション内の「どこ」に位置しているかをユーザーに知らせよう。「自分はどこにいるのか」というのは、ユーザーが思い通りに移動するためには答えがわかっていないとならない根本的な問題である。この重要な問題への回答を得るためにユーザーが頼りにするのが、メニュー（やパンくずリスト等のナビゲーション要素）から得られる視覚的な手がかりだ。しかし、現在地の表示がない、というのは、おそらく、Webサイトのメニューで我々が最も多く見かける間違いだと思う。そうしたメニューこそがユーザーに現在地を知らせなければならないものなのだが。なぜならば、サイトの訪問者はトップページから入ってこないことが多いからである。

メニューをユーザーのタスクに合わせよう

7. リンクラベルはわかりやすいものにしよう。ユーザーが何を求めているものかを明確にして、彼らにとってなじみがあり、かつ、求めているものに関連のあるカテゴリーラベルを使用しよう。メニューというのは気取ってでっち上げた言葉や社内で使っている用語を使うのにふさわしい場所ではない。コンテンツや機能が明確に伝わる用語だけを使おう。
8. リンクラベルは流し読みしやすいものにしよう。左寄せの縦メニューや重要な用語を先に出すことで、ユーザーがメニューを読むのにかかる時間は減らせる。
9. Webサイトが大規模な場合は、メニューを活用して、ユーザーが下位のレベルのコンテンツのプレビューを見られるようにしよう。レベルを何段か下がって、詳細を調べることが、ユーザーの行程に含まれていることが多いようなら、メガメニュー（あるいは従来のドロップダウンメニュー）によって、レベルを1（あるいは2）段飛ばして進めるようにすれば、ユーザーの時間の節約になる。
10. 密接に関連しているコンテンツにはローカルナビゲーションメニューを提供しよう。同一セクション内で、関連する商品同士を比較したい、あるいは複数のタスクを達成したい、というユーザーの希望が多いようなら、そうした関連のあるページはローカルナビゲーションメニューで見られるようにして、ユーザーが上下階層間の「ポゴスティッキング」（訳注：ページ間で行ったり来たりを繰り返すこと）をしないですむようにしよう。
11. ビジュアルコミュニケーションをうまく利用しよう。メニューのオプションをわかりやすくする画像やグラフィック、色はユーザーの理解の一助となる。しかし、そうした画像がユーザーのタスク達成をサポートするものであるかどうかはきちんと確認しよう（少なくとも、タスクをより難しくするようなことは避けよう）。

楽に操作できるようにしよう

12. メニューリンクはタップやクリックが楽にできる大きさにしよう。リンクが小さすぎたり、リンク同士の距離が近すぎると、モバイルユーザーをイライラさせる大きな原因となる。また、大画面の場合も、いたずらに使いにくいデザインになる。
13. ドロップダウンは必ず、小さすぎでも大きすぎでもないサイズにしよう。マウスオーバーでアクティブになるタイプのドロップダウンメニューがあまりに短いと、たちまちイライラの種となる。なぜならば、リンクのクリックのためにマウスオーバーしようとしている間に非表示になってしまいがちだからだ。反対に、垂直ドロップダウンは長すぎると、リストの下のほうにあるリンクにアクセスしにくい。画面の下端で断ち切られて、スクロールが必要になることがあるからだ。おまけに、マウスオーバー式のドロップダウンは、幅が広すぎると、それが新たなページであると勘違いされやすい。その結果、何もクリックしていないのにページが変わってしまったように見えるのはなぜだろう、とユーザーは混乱する。
14. 長いページには「スティッキー」メニューを検討しよう。長いページの最下部に到達したユーザーは、ページトップにあるメニューに戻ろうとすると、うんざりするほど延々とスクロールし続けねばなければならないことがある。しかし、スクロールした後でも、メニューがビューポートのトップに表示されたままなら、この問題は解決される。このタイプのメニューは小さい画面では特に歓迎されるだろう。
15. よく利用されるコマンドには、可能な限り、物理的に楽にアクセスできるようにしよう。ドロップダウンメニューなら、ドロップダウンを起動するリンクターゲットの近くに、最もよく利用されるアイテムを置くとよい（そうすれば、ユーザーがマウスや指をあまり移動させずにすむ）。モバイルアプリの中には、パイメニューを復活させ始めたところすら、最近は出てきている。パイメニューならオプションを円（あるいは半円）内に配置すれば、すべてのメニューオプションを近くに置けるからである。

革新的で面白いメニューのインタラクション方法によって、ユーザーを「あっと言わせよう」

…そんなわけはない。

かっこいいエフェクトを使ってユーザーを感心させようとするのが、メニュー作成中の優先事項であるはずが「ない」からだ。あなたの周りのデザイナーたちは目新しいデザインのメニューに感心してくれるかもしれない。しかし、見た目が魅力的で、おなじみのメニューによって楽にアクセスできるすてきなコンテンツのほうに、ユーザーははるかに感心するものである。

もちろん、新しいタイプのメニューによって、ユーザーエクスペリエンスが改善されることもある（メガメニューはその代表例だ）。あるいは、時折、新しいテクノロジーが大きく異なるために、そのいくつかは今回のガイドラインに当てはまらない、ということもあるだろう。たとえば、視覚的に目立たせること（ビジュアルウェイト）についてのガイドラインは音声認識システムには関係ない。しかし、このようなケースはまれだ。したがって、この記事で説明してきた原則を忠実に守れば、ほとんどのインタフェースは利用しやすいものになるだろう。

（メニューについてさらに詳しくは我々の1日トレーニングコース「ナビゲーションデザイン」にて）。

—

2月16日14:45修正： 記事タイトルを短くしました。