メガドロップダウンメニューって？

以前にBest Buyを例にあげてUSにおけるTOPページの変化について少し触れました（解析しやすいは作れる！）。これだけではなく、もう１つ大きい変化と考えているのがメガドロップダウンメニュー（メガメニュー）です。

ということで、ここのところずっと気になっていたメガドロップダウンメニューについて少し調べてみたことを書いてみます。

メガドロップダウンメニュー？

そもそもメガドロップダウンメニューが何かという話です。基本的にはヘッダなどにあるグローバルナビゲーション部分をオンマウスした時に、表示されるドロップダウンメニューの内容が多くなったものを指しています。

ちなみにユーザビリティの大家であるJakob Nielsenが挙げているメガドロップダウンメニューの特徴は下記の通りです。

• 大きな二次元のパネルでナビゲーションの選択肢をグループ化できる。
• ナビゲーションの選択対象をレイアウトやタイポグラフィ、（時には）アイコンによって構造化できる。
• すべてが一目で見渡せる。つまり、スクロールが不要である。
• トップのナビゲーションバーからの起動時、垂直あるいは水平方向に要素を整列させる。左側のナビゲーションバーからの起動時にはメガフライアウト（図示せず）として表示されることもある。

メガドロップダウン式のナビゲーションメニューは効果あり – U-Site

ということでなんとなく分かっていただけたでしょうか。

メガドロップダウンメニューの種類

実際にUSの上位のサイトをいくつか確認するといくつかの種類がありそうだなぁということがわかりました。ここでは勝手に名前をつけながら分類をしてみたいと思います。

まずは垂直グルーピング型です。割とメガドロップダウンメニュー形式では多いほうだと思います。下記は先ほどのJakob Nielsenのエントリでも紹介されているFood Networkです。エントリで指定されていた「閉じるアイコン」は無くなってましたね。

次が水平型です。下記は両方に展開してしまっているパターンですが、ここ最近このパターンも非常に多くあります。下記はSony Store USAのサイトでのナビゲーションです。

メガドロップダウンメニューは割と上部に展開しているグローバルナビゲーションに多い（と感じている）のですが、縦メニューで展開しているパターンもありました。下記は大型書店のBarnes & Nobleです。

通常のドロップダウンメニューのように表示したあとに、さらにその中の項目をオンマウスすると横に展開する2段階展開型もありました。下記はBest Buyのキャプチャ画像です。

結構色々ありますね。あと発展型として、メニューだけではなく、バナーやそのカテゴリのトピックを出してしまうというパターンも見受けられました。下記はスポーツ情報を配信するESPNのものです。各カテゴリのアップデートが入っていたりします。

また下記は先ほどご紹介したSony Store USAの別メニューの部分です。バナー的な利用をされている感じですね。

ということで一言に結構メガドロップダウンメニューも色々ありますね。日本ではまだあまり見ることが出来ないドロップダウンメニューですが、USではそれなりに普及してきてます。

ユーザビリティ的に

Jakob Nielsenは「メガドロップダウン式のナビゲーションメニューは効果あり」というエントリをアップしています。実際にメニューの内容が膨らみすぎてしまっている時には非常に有用な方法の１つだと思います。

Jakob Nielsenはもう１つ「うまくいっていないメガメニュー」というエントリもアップしています。こちらではグルーピングと並び方について言及がされています。実際にメガドロップダウンを展開する場合はこの２つの要素は最重要項目とも言えます。この辺りをうまく考慮しておけばユーザビリティ的には大丈夫そうですね。

最適化的に

ちなみにサイトを最適化するという視点で見た場合ですが、やはりパッと見のスッキリ感を出せるのが大きな特徴だと考えています。メガドロップダウンメニューの特徴としてリンクの数はそれほど減らさず、各ページへのダイレクトアクセスは考慮しつつ、全体の要素数はすっきりさせられます。

冒頭でも触れた解析しやすいは作れる！で紹介させて頂いたBestBuyの変化などは、やはり最適化のしやすさ、ターゲティングのしやすさを狙ったものになります。シンプル化をして、要素を減らすという意味では、このメガドロップダウンメニューも役立っているのではと思っています。

以前に興味本位で日本のとあるコマースサイトで特にリンク数が多いであろうサイトののTOPページのリンクを調べたところ約580リンクありました。これに対してシンプル化しているBest Buyでは約240リンクです。

比べると少ないとはいえ、それなりに多い感じもします。実はこれらのうちぱっと計算すると約７割ぐらいががメガドロップダウンメニューの中に含まれるリンクなんですよね。

まとめ

色々とドバーッと書いてしまったのですが、最近気になっていたメガドロップダウンメニューについて少しまとめてみました。ほとんど解析関係ないですが、お役に立てばこれ幸い。