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

メガメニューとは？

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ここは結構重要。

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

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

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

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

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

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

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

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

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

5. タブレットを考慮しておく。

PCでメガメニューをグローバルナビのマウスオーバー表示させる場合、タブレットの考慮も必要です。タブレットではマウスオーバという概念がありません。タップした時にどういう挙動をするかを決めておく必要がありますが、タブレットでは基本PCサイトを表示させることがほとんどだと思います。

タブレットでグローバルナビゲーションをタップした際に、メガメニューが開くのは不自然ですし、ユーザビリティ的にも良いと言えません。タップしたら、そのコンテンツのカテゴリトップにリンクするのが自然です。

となるとメガメニューからしか行けないページはもちろんあってはいけないということです。 メガメニューはなくても問題ないあくまで補足導線であるべきです。

6. メガメニュー内にもカテゴリトップにリンクする導線を設けておく。ただすぐ押せる、ユーザー視点の先に置く。

例えば「会社情報」というリンクがグローバルナビゲーションにあったとして、それにマウスオーバーしたらメガメニューが開くとします。そのメガメニューの中にも「会社情報」トップへのリンクは置いておいたほうが良いです。

ユーザーはメガメニューが開いた時点で、グローバルナビゲーションのリンクが押せる状態だと認識していないかもしれません。

繰り返しますがメガメニューはあくまで補足導線であり、webサイトの構造はツリー状になっているべきです。ユーザーは目的のものが見当たらなければツリーを辿って情報を探そうとします。 そのツリーの分岐になる目次ページに辿り着けないということがあってはいけません。

なので、そのカテゴリトップにリンクする導線の配置の仕方ですが、メガメニュー内の分かりやすい位置に置きましょう。メガメニューの最上部。もしくはメガメニューの最下部に、幅100%で置くことをお勧めします。

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

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

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

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

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

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

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