ナビゲーションのUI設計に、正常進化するメガメニューの実装を提案

ビー・オー・スタジオでは、ときに2,000ページを超えるウェブサイトのリニューアルを手掛けることがあります。そういった場合は、キックオフのフェーズでディレクターからクライアントへメガメニューを提案します。
「メガメニュー？」グローバルメニューは聞いたことがあっても、メガメニューはあまりなじみのあるワードではないようで、相手から聞き返されることが多々あります。

そんなメガメニューは、メガドロップダウンメニュー、ドロップダウンナビ、ドロップダウンメニュー、メガナビと、さまざまな呼ばれ方をしています。WordPressのポピュラーなプラグインでは「マックスメガメニュー」という名称で、使い方のチュートリアルとともに国内外のブロガーやメディアで広く紹介されています。

メガメニューがどんなサイトで使われているかといえば、スターバックスコーヒージャパンや、総合研究大学院大学（総研大）で、目にすることができます。どちらも右側に情報一覧を展開する仕様ですが、下方向に表示がされる東京大学が採用するメガメニューの方が、一般的かもしれません。

なぜメガメニューがいい？

メガメニューの利点は、一度に多くの情報が得られることにあります。

サイトナビゲーションをグループ化してあり、初見でもわかりやすい
ナビゲーションを選択し、レイアウトや画像、アイコンを使って構造化ができる
スクロールが不要なのでサイトのすべてがひと目で見渡せる

サイト訪問者に、探している項目や関連する情報を素早く提供することを目指し、メガメニューを実装します。

PC閲覧表示の王道ともいえる、横一列のグローバルナビ。項目が7つに満たないようなら、ナビバーの中に「タイトル」として挿入できますが、業種によっては30、40でも足りないことがあります。
例えば金融系のウェブサイトの場合なら、個人、法人、貯める、借りる、店舗案内、手数料、外国為替と、すでにグローバルナビへの設置要素が7つもあります。それぞれのタイトルにぶら下がる形で、次に各項目が並びます。例えば【個人】の配下なら銀行系アプリの紹介、投資信託、住宅ローンや老後の資産運用…といった具合です。グローバルナビだけの表示では、「住宅ローン」の情報を探しにやってきた訪問者だったら、目的に到達するまでにどれだけの時間を費やすのか。クリックと遷移を繰り返し、結局目的のページが見つけられないことも。また、いくつもあるバナーから選ばせたり、サイト内検索にテキスト入力させたりするのは、ホスピタリティに欠けるのでは。

これらを解消する意味で、ビー・オー・スタジオでは、コンテンツの多いサイトにはメガメニューの実装を提案しています。サイト訪問時から、メニューをテキストリンクで表示してあげた方が、目的を見つけやすい。しかもサイトとサイトをつなぐグローバルナビを、画像ではなくテキストリンクで渡すようにすると、検索エンジンにとってもクロールしやすく、結果としてSEOの点からもメリットが得られるようになります。

モダンブラウザのメガメニュー

ウェブデザインの変遷とともに、メガメニューもブラッシュアップをしています。少し前なら、グローバルナビから階段式にサブメニューが展開される形が一般的でした。

航空会社のウェブサイトで、新旧の比較をしてみましょう。
ターキッシュエアラインズのウェブサイトは、グローバルナビの一段下に、サブナビバーを設置した、2段式のUIを実装しています。グローバルナビの左端のみ、メガメニューになっていますが、ここはクリックをしないと子サイトが表れません。人によっては、親カテゴリーをマウスオーバーすると子カテゴリーが出現するサイトの方が、使いやすく感じられるかもしれません。

ターキッシュエアラインズウェブサイト-PC表示-

一方、ルフトハンザドイツ航空のUIはグローバルナビがありません。右端のメニューアイコンをクリックするとすべての項目が一覧で表示され、次のアクションを促します。

ルフトハンザドイツ航空ウェブサイト-PC表示-

情報量の多さと使いやすさが、そのままCSの評価にもつながりかねない航空会社のサイトは、新しさだけでなく「訪問者を迷わせない構造」も求められています。

モダンなメガメニューはNIKEやPUMAのサイトでも用いられています。
またエンターテイメント系やメディアのウェブサイトでは、メガメニューにサムネールを埋め込み、より閲覧者がアクションを起こしやすくする施策を取り入れています。

レスポンシブデザインのメガメニューは?

メガメニューを設置したサイトが、ユーザーの目的に到達するまでの時間短縮に役立つことがおわかりいただけたかと思います。ただしこれはPC閲覧時において。スマートフォンで、メガメニューを実装するとしたら？
ユーザーにモバイルフレンドリーなサイトを提供するため、アパレルのウェブサイトなどは、スマートフォン専用のサイトを設置したり、またアプリをローンチしたりと、レスポンシブデザイン以外の方法※で、アプローチをしています。
※レスポンシブデザインは共通のHTMLファイルを使うため、SEOやSNSのシェアに強いという利点がある一方で、ページの読み込みに時間がかかるという弱点があります。表示を速くするために、ビー・オー・スタジオでは画像の最適化をはじめソースコードの圧縮など、表示スピードの高速化に務めています。

レスポンシブデザインで、メニュー一覧をスマートフォン表示で閲覧できるようにした例が、こちらです。