ガジェットやアプリの紹介/webディレクター向けのナレッジを発信するブログです。

メガメニューの使いどころ。コンテンツカテゴリごとの「補足導線」。

2020年10月31日 2020年11月15日

メガメニューとは?

メガメニューはwebサイトのグローバルメニューのボタンをクリックもしくは
マウスオーバーしたときに表示される下層コンテンツへの導線をまとめたもの。
「メガ」というのは、概念的なもので明確な定義はない。
ビジュアルや表示するリンクテキストの量を含めて「大きく表示されるもの」というようなニュアンスです。

メガメニューは、あくまで補足導線であるべきです。

閲覧頻度の高いページ、推したい情報を掲載するショートカット的なものとしてら捉えるのが良いと考えます。
では、そのメガメニューを補足導線として定義するにあたり、注意すべき点を具体的に見てきます。

1. メガメニューを設計するタイミングは最後。トップページと同時である必然性ゼロ。

メガメニューはあくまで補足導線です。主導線として考えるのは危険です。
なぜなら基本的にメガメニューはデフォルト隠れているものであり、必ずユーザーが目にすると保証されないからです。
なので、それを検討するタイミングがいつかというと、設計フェーズの最後の方で問題ありません。

たまに、トップページの画面設計と同時に提示しようとするwebディレクターを見かけますが、反対です。

なぜならトップページの検討をしている時に、下層のページのコンテンツやページ数を十分検討しきれていないことが多いから。
その状態で決めてもメガメニューに表示されるコンテンツは結構な確率で変更になる可能性が高いですからね。。
なので、揺らがない軸となる部分から固めていった方が良いですよ。

2. メガメニューに配置するリンクは優先度の高いものに絞る。

メガメニューは、表示領域が大きいです。
パッとユーザーが見たときに、それが

「ページ上に重なっているもの」と認識されないといけません。

注意すべきは、ユーザーが開いているブラウザのウィンドウサイズは様々だということ。

小さいウィンドウで見ている人は、「メガメニューとして表示されているもの」か「ローディングされて表示された1ページ」か認識出来ないというケースは普通に考えられます。

ユーザーが見ているものが何なのか、理解出来ない状態は、ユーザービリティ的に良いとは言えません。
なので、盲目に「第●階層までの情報を表示する」と決める必要はありません。
そのコンテンツカテゴリの中で優先度の高いコンテンツや埋もれがちなコンテンツに絞り、それとあわせて「●●トップへ」という導線も提示してあげるのです。

そうしておけばメガメニューから到達出来るページが限定されることはありません。

3. メガメニューを表示させるなら簡単に閉じられるかも考えておくべき。

メガメニューは、ページの上に重なって表示させるものなので、開いたら閉じる必要があります。

通常はメニューの領域外でマウスクリックだったりウィンドウタップという感じだと思います。

このメガメニューの領域外でマウスクリックという操作ですが、前述の通り、ユーザーが開いているウィンドウサイズは様々なので、メニューの外側という部分の認識が難しいケースも考えられます。

その場合どうなるかというと「メガメニューを閉じる」というボタンをつけざるを得ません。

ここは結構重要。

開いたものが閉じられない、閉じる方法がパッと分からない状況はユーザーにとって大きなデメリットです。

こういう状況に直面したユーザーはどうするでしょうか?

ただ静かに離脱していくだけです。

こういう状況は絶対に避けるべきです。
しかし、そうなりがちなwebサイト、実は多いです。なんなんでしょうね。

メガメニュー付けることで、ちょっと凝った感を出したいのでしょうか、、なにかとメガメニューを出したがるディレクターが多いのは気になります。

4. カテゴリトップと差別化するべき。

「結局それ、カテゴリトップの情報全部をメガメニューで出してるだけだよね?」

というのだと意味がありません。

通信環境の高速化やwebサイトを閲覧するデバイスのスペック向上により、ページの表示スピードにさほどストレスを感じなくなったいま、メニューを「ロード無しで表示できる」ということに、どの程度価値があるのかやや疑問です。

ただ、一応お断りをしておきますが、快適であることは正義です。否定するものではありません。

結論。メガメニューは補足導線として振る舞いで、ユーザビリティ向上に貢献すべし。

私の経験上メガメニューは

  • カテゴリトップの導線を捕捉するレベルでコンテンツをピックアップする
  • ページの上に重なっているということが認識できるレベルで小さく出す。

という使い方が良さそうです。
なぜならカテゴリトップは、「訴求」と「下層ページへのナビゲーション」とい2つの役割を担うからです。

使い勝手を考えるとそれくらいの扱いが良いと思います。

モーダルと同様閉じられるものと認識できること、あとは、使いようかなと思います。

カテゴリトップの導線補足的な使い方が個人的には現実的かつ、ユーザビリティを担保する有効な使い方かな思います。