8つの事例から学ぶ！優れたナビゲーションメニューの作り方

本稿は、Designmodeのブログ記事を了解を得て日本語翻訳し掲載した記事になります。

本記事は、Jake Rocheleau氏によって投稿されました。

モダンなJavaScriptとCSS3の効果によって、ドロップダウンメニューは進歩しています。しかし、すべてのドロップダウンメニューが同じように設計されているとは限りません。

この記事では、ユーザーにとって分かりやすいドロップダウンメニューを構築するためのデザインテクニックを紹介します。デザイン例の中には、多階層のドロップダウンメニュー、メガドロップダウンメニューなども含まれていますが、応用しているデザインルールは同じです。

サブメニューのための目印

サブメニューのあるリンクには、目印となるものを付けましょう。こうした視覚的な小さな目印を配置することで、ユーザーにとってリンクの場所がわかりやすく、アクセスしやすくなります。

このルールは設計するリンクが1階層でも4階層でも適用されます。

目印には、矢印、ドット、四角形など目立ちやすい記号を使用します。一般的な記号を使用している限り、ユーザーはその記号の意味を理解できるでしょう。

例として、上記Threadbirdの優れたナビゲーションメニューを見てみましょう。

このメニューのリンクには、サブメニューがあるものとないものがあります。サブメニューのあるリンクにだけ、目印が表示されています。

目印には、右向きの二重山括弧引用記号「（»）」が使われています。この記号はシングル矢印よりも目立ちやすいため、Webデザイナーに好まれています。

また、小さなサイズにしても、変形する心配もありません。

TutsPlusのナビゲーションメニューも同じような設計です。ドロップダウン形式には下向きの矢印、フライアウト形式には右向きの矢印が使われています。

ただし、サブメニューに使われている矢印の記号に、1つ残念な点があります。

それは、すべてのリンクにサブメニューがあるにもかかわらず、矢印アイコンは、メニューアイテム上でマウスホバーされた時にしか表示されないことです。この場合、矢印アイコンは常に表示されたままにしておくことが、デザインのベストプラクティスです。

しかし、TutsPlusのシンプルなデザインは個人的には好きです。小さな目印がユーザビリティ向上に役立つことを示している、完璧な例といえます。

リンクのスペースには、paddingを使用する

ほとんどのドロップダウンメニューでは、リンク間にスペースが設けられています。しかし、マージン（margin）とパディング（padding）は区別しましょう。

marginを使用した場合、リンクのテキストそのものをクリック/タップすることになります。クリック可能な領域は、テキストとほぼ同じ面積になります。一方、paddingを使用した場合、全体をクリック可能な領域にすることができ、より大きなターゲット要素をユーザーに提供できます。

ドロップダウンメニューでは、より大きな領域を確保する方が良いでしょう。

Webdesigner Depotは、昨年のデザイン変更で、クールなアニメーションのドロップダウンメニューを実現しました。blogというリンクをクリックすると、2カラムのドロップダウンメニューが表示されます。これらのリンクをクリックすれば、スペースにpaddingが使用されていることに気づくでしょう。

リンクのテキスト周辺の領域もクリック可能になっていることで、サイトのナビゲーションが向上しています。

ほとんどのドロップダウンメニューは、「スペースにpaddingを使用するもの」「スペースにmarginを使用するもの」の2つに分類されます。

どちらのタイプであるかは、リンク近くのスペースをホバーした時に、マウスのカーソルがクリック可能を示す「手袋アイコン」に変化するかどうかによって確かめることができます。

次のWebサイトは、paddingを使用していない例です。

The Philadelphia Orchestraは美しいデザインのWebサイトです。しかし、ドロップダウンメニューのリンクは、テキスト部分しかクリックできません。しかも最悪なことに、ドロップダウンメニューの面積が広いのに、リンクのテキストがとても小さいのです。

marginがpaddingよりも優れた選択になるケースは考えられません。ただし、リンクをブロックレベル要素にした場合、リンクはドロップダウンメニューの100%の領域を占領します。このことは、ユーザーがリンクのボックスの領域内であれば、どこでもクリック可能になることを意味します。

どちらを選択するべきかは明らかです。ドロップダウンメニュー内のリンクをクリック/タップ可能な領域を広くすれば、ナビゲーションの使いやすさを大きく向上させることができるでしょう。

ホバー状態を明確に示す

ホバーされたメニューの「アクティブな」クラスを設計すれば、所属関係の構造が明らかになります。ほとんどのデザイナーは、ホバーされた時のリンクに、「:hover擬似クラス」を使用しています。

しかし、ユーザーがサブメニューのリンクをホバーした時に、メインのリンクを強調して表示したままにするのも効果的な方法です。これにより辿った構造が明らかになり、どのサブメニューのリンクがホバーされているかが一目でわかります。

ホバー状態を設計するには、フォントの色の変更、背景色の変更、テキストの下線、ハイライトなど多くのテクニックがあります。

目的は、親リンクを、ホバーされていない時にもアクティブな状態に保つことです。

例として、上のDePauw UniversityのWebサイトは、白と黒のシンプルなコントラストカラーを使っています。ナビゲーションメニューは、デフォルトでは黒い背景に白いテキストですが、ホバー時にはこれらの色が逆転します。

設計ごとにスタイルがあるので、必ずしも白黒のスタイルにする必要はありません。しかし、コントラストをはっきりさせて、アクティブな状態を目立たせることが大切です。

Comedy CentralのWebサイトにも同じ効果が使われています。この場合、白の代わりに、ライムカラーの黄緑色が使われています。

もちろん、このアクティブ状態を示すハイライト効果なしのドロップダウンメニューを構築することも可能です。しかし、単に機能するからといって、それが必ずしも最善の選択であるとは限らないことをデザイナーは理解しておくべきです。

私は、すべてのドロップダウンメニューはアクティブ状態を示すハイライト効果を、親リンクに使用するべきだと思います。2～3階層のサブ-サブメニューになっているものも含めて。

ドロップダウンのアニメーションは迅速にする

jQueryとCSS3を組み合わせると、Web上で強力なアニメーションを作成できます。スライド効果であれフェードアウト効果であれ、ドロップダウンメニューは、アニメーションで進化します。

しかし、アニメーションは常に目的に合ったものにするべきです。UI/UXデザイナーであれば、実践的にアニメーションを使用できることが望ましいです。ただし、アニメーションは、見た目に活気を与えることができますが、実行を遅くしてユーザー体験を低下させないように注意しましょう。

最も優れたドロップダウンアニメーションのための2つの要素は、「速いこと」と「よく目立つこと」に要約できます。

例として、上のESPNのナビゲーションを見てみましょう。どのスポーツ部門からでも、チームや関連するリンクのドロップダウンメニューを表示できます。

このドロップダウンメニューは、上から下に向かって表示されます。しかし処理は迅速で、リンクをクリックするまでに2〜3秒もかかりません。

一般的には、メニューのアニメーションは1.5秒以下に保つことをおすすめします。このルールは、メニューのアニメーションにのみ適用されます。必要があれば、他のページのアニメーションを最大3〜5秒（またはそれ以上）に延長しても構いません。

CSS MenuMakerのWebサイトは、素晴らしいドロップダウンメニューを設計しています。ドロップダウンメニューは、所属している親リンクを示すために、吹き出しのようなデザインをした引用の矢印となっています。

また、これらのドロップダウンのアニメーションは迅速です。フェードイン＆アウト効果は高速に処理され、おそらく300ミリ秒くらいしかかかりません。

カーソルが他の場所に移動したときにのみアニメーションが生成され、リンクは明確に表示されます。

このことは素晴らしいドロップダウンメニューアニメーションの鍵です。アニメーションは誰もが好む魔法のような効果を実現できるものですが、アニメーション要素をページの構成要素の一部として考えることも重要です。

結論

優れたドロップダウンメニューでは、「機能」と「ビジュアル」の両方が考慮されています。 つまり、外観のデザインも大切ですが、ユーザーのために分かりやすく構築することも大切です。

どのルールもシンプルで、小さなコードを追加するだけで簡単に実装できるでしょう。

また、TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。自分でデザインを形にしたい、デザインのスキルを上げたいという方はぜひご覧ください。