ドロップダウンメニューは、近年のJavaScriptとCSS3のおかげでずいぶんと発展してきました。しかし、すべてのドロップダウンメニューが同じように制作されているわけではなく、その機能性にはばらつきがあります。
この記事では、使いやすいドロップダウンのナビゲーションメニューを作るための手段をいくつか紹介します。また、基本的には同じデザイン原則に則っているマルチドロップダウンや、メガメニューについても触れていきます。
サブメニューにマーカーを付ける
サブメニューのリンクに、マーカーをつけるのは良いアイデアです。このちょっとした視覚的なシグナルがあることで、どこにリンクがあり、どのようにアクセスするのか、ユーザーに知らせることができます。
デザインするメニューが１段だろうと４段のリンクであろうと、これらのルールはすべてのメニューに適応できます。
マーカーの種類には、矢印や四角、ドットなどさまざまなものがあります。しかし、普遍的なものが使用されていれば、ユーザーの多くはそのシンボルが何を意味するのか十分に理解できます。
Threadbirdのナビゲーションは、この効果を実践している素晴らしい例です。
サブメニューをもつリンクもあれば、もたないものもあります。実際には３つ階層をもつサブメニューもあり、それぞれのリンクの隣にあるマーカーを使わないと明確に区別することができません。
Threadbirdでは、右向きの二重矢印を使用しています。Webデザイナーは、一重の矢印よりもこの記号を好んで使います。なぜなら、太いので遠くからでも見つけやすく、サイズが小さくても形が崩れないからです。
同様のデザインをTutsPlusのナビゲーションでも見ることができます。このサイトでは、ドロップダウンに下向きの矢印を使い、フライアウトメニューには右向きの矢印（大なり記号）を使っています。
このデザインで一点私が好きではないのが、サブメニューの矢印のスタイルです。すべてのリンクにはサブメニューがあるのに、矢印のアイコンはメニューのアイテム上でホバーしたときだけ出現します。これらの矢印はつねに表示したほうが優れたデザインだと思います。
しかし、このTutsPlusのデザインのシンプルさはとても気に入っています。小さなマーカーが、優れたユーザビリティに大きく貢献している素晴らしい事例です。
パディングでリンクの余白を作る
ナビゲーションメニューで間違った余白設定をしているのを見ると、私は気が狂いそうになります。
ほとんどのドロップダウンメニューでは、リンクの間に少し余白を入れています。しかし、マージンとパディングの間には大きな違いがあるのです。
マージンの場合、リンクテキストを直接クリック、タップする必要があります。クリック可能な範囲は、そのテキスト自体だけです。しかしパディングなら、エリア全体をクリック可能にすることができます。つまり、ユーザーがクリックできる範囲がより広くなります。メニューリンクという話なら、範囲はつねに大きいほど良いでしょう。
Webdesigner Depotは最近デザインを見直して、かっこいいアニメーションのドロップダウンを作成しました。「BLOG」のリンク上でホバーすると、２列のドロップダウンメニューが表示されます。どのリンク上でホバーしても、スペースを作るのにパディングを利用していることに気付くでしょう。
つまり、リンクテキストのまわりの余白もクリックできるのです。そのため、サイトをよりスムーズに移動できます。
ドロップダウンメニューの余白には、パディングを使うものとマージンを使うものの２つのタイプがありますが、多くのドロップダウンメニューはどちらか１つのみを採用しています。
カーソルがクリック可能なことを示す手のデザインに変化するかどうかを見るために、リンクのまわりの余白をホバーすることで知らせることができます。以下のサイトはパディングを使用していないサイトの例です。
フィラデルフィア管弦楽団のWebサイトは魅力的です。すっきりした見た目で使いやすく、文字も読みやすいです。
しかしドロップダウンのリンク上でホバーをすると、クリックできるのはテキストの部分だけだとわかります。一番良くないのは、ドロップダウンのメニューはとても大きいのに、リンクのテキストはとても小さいことです。
私はパディングよりマージンが適しているケースを思いつきません。リンクをブロックの要素にすることで、ドロップダウンメニューのすべての範囲がリンクになります。つまり、リンクのボックス内のどの部分でもユーザーはクリックでき、ページを訪れることができるのです。
どちらを選択すれば良いかは明白です。ドロップダウンメニューで、リンクのクリック、タップできる範囲を広くすれば、ナビゲーションの体験を素晴らしく改善することができるでしょう。
ホバー状態を明確にする
ホバーしているメニューの「アクティブ」状態をデザインすることで、選択中のメニューに注目させ続けることができます。ほとんどのデザイナーが使用しているCSSの:hover擬似クラスは、ホバー状態のリンクをデザインするのに適しています。
しかし、ユーザーがサブメニューのリンク上でホバーしているときに、メインリンクを強調し続けるのも良いアイデアです。こうすることで、メニューを見たときにどの一次リンクがアクティブであり、どのサブメニューのリンクにホバーしているかを、素早く認識することができます。
ホバーの状態は多くの方法でデザイン可能です。たとえば、フォント色や背景色の変更や、テキストのアンダーラインや強調、ボックスのシャドウ効果などが挙げられます。目的は、親リンクが直接ホバーされていないときでも、親リンクをアクティブにすることです。
DePauw Universityのサイトでは、白と黒というシンプルな対照色を使っています。デフォルトのナビゲーションでは、黒の背景色に白のテキストを使用しています。そしてリンクがホバーされると、その色が反対になります。
そして、一次リンクでホバーして、サブメニューを表示している間、メインリンクがつねに白色に反転しているままなのがわかるでしょう。またサブメニュー内のリンクをホバーしても、メインメニューは強調されたままです。
それぞれのデザインにはそれぞれのスタイルがあります。そのため、DePauw Universityのような白黒のコントラストを使う必要はありません。しかし、アクティブスタイルは、リンクのデフォルトと明らかに違うものである必要があります。
Comedy CentralのWebサイトでも同様の効果を使っています。白を使った強調の代わりに、ここでは黄色とライムグリーンのコントラストが使われています。
アクティブ状態に強調効果を使わずに、ドロップダウンメニューを作ることもできます。しかし、機能しているからといって、必ずしも最適に機能しているわけではないことをUXデザイナーは知っています。
私は、すべてのドロップダウンメニューは親リンクのアクティブ状態を強調し続けるべきだと思います。これは、階層が２つや３つになるサブメニューでも同じです。
ドロップダウンの素早いアニメーション
jQueryとCSS3要素を組み合わせることで、Webで強力なアニメーションを作成することができます。スライドするものであれ徐々に表示されるものであれ、ドロップダウンメニューはアニメーションから多くの効果を得られます。
しかし、アニメーションには必ず目的がなくてはいけません。UIやUXのデザイナーは、アニメーションを実践的に使う必要があります。インターフェイスは生き生きとしたものにするべきですが、アニメーションによってユーザー体験の速度が遅くなっていけません。
もっとも優れたドロップダウンのアニメーションとは、２つの単語に集約できます。素早く、認識しやすいことです。
ESPNのトップナビゲーションを見てみましょう。どのスポーツの分野にホバーしても、チームや関連リンクのドロップダウンメニューが表示されます。
ドロップダウンはわかりやすく上から下へとスライドされます。しかし、この表示は瞬時に行われるので、リンクにインタラクションするのに２秒も３秒も待つことはありません。
一般的に、メニューのアニメーションの長さは、1.5秒以内に収めることをおすすめします。この経験的なルールは、インタラクティブな要素であるメニューのアニメーションにのみ適用されます。しかし、ほかのページのアイテムに対して、３～５秒（またはそれ以上）のアニメーションを使う明確な理由があるのなら、秒数をのばすことも可能です。
皮肉なことに、CSS MenuMakerのWebサイトはとても素敵なトップメニューのデザインです。ドロップダウンは吹き出しのような形のコールアウトの矢印で、その中に一次リンクが含まれています。
アニメーションの観点からすると、このドロップダウンは早すぎます。表示されて消えるまでのアニメーションの表示時間は、300ミリ秒ではないかと思います。
しかし、アニメーションが消えるのはフォーカスが別に移るときだけなので、一度表示されればリンクははっきりしており、操作しにくく感じることはありません。
これは、優れたドロップダウンのアニメーションで重要な点です。アニメーションは、私たちが好きな魔法のようなものであるべきですが、そこで表示される要素はページと一体化しているべきです。
まとめ
質の良いドロップダウンメニューを作るには、見た目と機能の両方を考慮する必要があります。見た目の美しさは大切です。しかし、同時に機能的で、訪問者に対して素敵な体験を生み出すものでなくてはいけません。
これらのヒントには、私自身がデザインの作業で活用しているものもあります。とてもシンプルなものなので、ほんの少しのコーディングであなたのドロップダウンメニューにも加えることができます。もしほかにも、優れたナビゲーションメニューの事例を探している場合は、私たちのインスピレーションの項目を覗いてみてください。
