コンテンツ量の多いサイトで多く使われているメガメニュー。
メガドロップダウンメニューとも呼ばれ、欲しい情報にすばやくアクセスできるのが利点です。
しかし、項目を単なる箇条書きで羅列していると、探しづらくてユーザーにストレスを与えてしまうことも…。
そこで今回は、見やすく工夫されたデザインのメガメニューをご紹介します。
通販サイトのような項目多めのサイトと、コーポレートサイトのような項目少なめのサイトをそれぞれご紹介するので、サイトの規模や用途に合わせて参考にしてみてください。
リンクが多めのメガメニュー
・REISS
https://www.reiss.com/
文字は小さいですが、項目が左半分に収まっているので、視線の移動が少なくすみます。
・ETUDE HOUSE
https://www.etudehouse.com/kr/ko/
縦に分割したデザイン。商品カテゴリの多いコスメでも探しやすいです。
カテゴリを細分化させすぎないことで、大量のリンクから目当てのものを探すストレスが軽減されます。
▼参考：日本語訳したメガメニュー
・野村不動産ホールディングス
https://www.nomura-re-hd.co.jp/
背景画像を使ったリンクとテキストだけのリンクを使った、メリハリのあるデザインです。
・zutto
https://www.zutto.co.jp/
たくさんの商品カテゴリがありますが、写真と一緒に見せることで目当てのアイテムを直感的に探すことができます。
リンクが少なめのメガメニュー
・audi
https://www.audi.co.jp/
メガメニューを大胆に商品カタログのように使った例です。
ページ遷移の手間なくサクサクと商品の概要を見られるので、商品の比較もしやすいです。
・ハウスウェルネスフーズ株式会社
https://www.house-wf.co.jp/
カテゴリについての説明が添えられており、ページ遷移前に内容がわかり便利です。
・AMORE PACIFIC
http://www.apgroup.com/
こちらも遷移先ページの内容を要約して伝えているメニューです。
メガメニュー内のリンクにマウスオンすると、さらに下の階層のリンクが現れます。
リンクの多いサイトは見せ方が重要です。文字が多いとユーザーが探し疲れてしまうので、画像を使ったりレイアウトを工夫して、より直感的にリンクを辿れるように心がけたいですね。
