情報量が多いサイトで特に見かけることが多い、メガメニュー・メガドロップメニューを実装しているwebデザインのまとめです。
メガメニュー・メガドロップメニューとは表示面積が広いドロップダウンメニューのことで、上手く利用すればスペースを有効活用して、ユーザーが目的のページまで容易に辿り着けるようなナビゲーションを実装することができます。

ホバー展開するもの、クリック展開するもの、テキストのみを使用したもの、わかりやすい画像・アイコンを用いたものなど、同じメガメニューでも様々な表示方法やデザインがあるので、自分がこういった動きやデザインをしたいときに参考にさせてもらえそうなwebデザインを備忘録兼ねてまとめました。

紹介しているサイトのキャプチャは、それぞれホバーしてもらうとメガメニュー表示時のデザインに切り替わります。

Amazon

「Amazon」 Before

「Amazon」 After

ページ左上のロゴ下にあるカテゴリーにホバーすると各カテゴリーが表示され、更に各カテゴリーにホバーするとサブカテゴリーが表示されるようになっています。
また、サブカテゴリーはただテキストリンクを並べて表示させるだけでなく、特集やおすすめ商品など注目してほしいものをイメージで大きく見せたりもしています。

楽天市場

「楽天市場」 Before

「楽天市場」 After

楽天市場もAmazonと同様に、各カテゴリーへのリンクが集まっているジャンル部分にメガメニューを取り入れています。
各カテゴリーにホバーするとサブカテゴリーが表示されるというように動きや見た目も似ていて、やはりテキストリンクを並べるだけでなくそのカテゴリーに関連するイメージを表示したり、特集ページに飛ぶリンク付きで配置したりしています。

Tiffany & Co.

「Tiffany & Co.」 Before

「Tiffany & Co.」 After

ナビゲーションにホバーすると大きなイメージ付きでメニューが表示されます。
また、メニューが表示されている状態で他のナビゲーションをホバーすると、スライドされるような動きで中身が変わります。

adidas

「adidas」 Before

「adidas」 After

スポーツとブランドの部分でシューズやアパレルといったサブカテゴリーを表すテキストリンクと共に各カテゴリーに関連するイメージを一緒に表示させています。
また、このキャプチャはアディダスジャパンのものですがオンラインショップでもメガメニューを採用しており、同じく各カテゴリーにホバーするとサブカテゴリーを表示するテキストリンクが多数表示され、スポーツやブランドの部分ではイメージが一緒に表示されています。

Columbia Sportswear

「Columbia Sportswear」 Before

「Columbia Sportswear」 After

メンズ・ウィメンズ・キッズなどにそれぞれホバーするとメニューが表示されるようになっており、テキストリンクだけでなくおすすめ商品や特集ページなどにリンクするバナーも一緒に配置されています。

日産自動車

「日産自動車」 Before

「日産自動車」 After

ホバーするとメニュー表示されるタイプで、カーラインアップなどではわかりやすく各車種がズラッとイメージ付きで並べられています。
ただ、若干ですがホバーしてからすぐ表示されないのが正直気になります...。

トヨタ自動車

「トヨタ自動車」 Before

「トヨタ自動車」 After

トヨタ自動車も日産自動車と同様でホバーするとメニューが表示されるタイプで、やはりカーラインナップでは各車種がイメージ付きで並べられています。
また、トヨタ自動車の場合はメニューが表示されている間はメインコンテンツ部分にマスクがかかるような動きをつけており、メニューに視線を集中させるためや現在メニューが表示されているというのがよりわかりやすいように(?)しています。

シャープ株式会社

「シャープ株式会社」 Before

「シャープ株式会社」 After

シャープでもトヨタと同様にメニューが表示されている間はコンテンツ部分にマスクがかかるような動きをつけています。
見た目は各情報毎にブロックが並べられているような感じで、製品情報の部分ではテレビやスマートフォンなどのイメージを付けることでパっと見で何のカテゴリー化をわかりやすくしています。

株式会社クレハ

「株式会社クレハ」 Before

「株式会社クレハ」 After

イメージを用いて全体的に綺麗に整列されているような見た目のメニューで、各下層ページなどにもすぐに飛べるような作りになっています。

アサヒビール

「アサヒビール」 Before

「アサヒビール」 After

商品情報から企業情報まで、全てのメニューで基本的にイメージを使った見た目にしています。

キリン

「キリン」 Before

「キリン」 After

こちらも商品情報やキャンペーンといった多くのユーザーが閲覧しそうな箇所についてのメニューは基本的にイメージを使用しています。

ヤマサ醤油株式会社

「ヤマサ醤油株式会社」 Before

「ヤマサ醤油株式会社」 After

Häagen-Dazs

「Häagen-Dazs」 Before

「Häagen-Dazs」 After

上で紹介したヤマサ醤油でもそうでしたが、こういった商品を販売している企業のサイトでは、わかりやすいように商品イメージをメニュー内に含めているところが多いですね。

Starbucks Coffee Japan

「Starbucks Coffee Japan」 Before

「Starbucks Coffee Japan」 After

スターバックスではクリックして展開するタイプのメニューを採用していて、ナビゲーションの位置もこれまでのものとは少し違ったところに表示されています。
メニューは基本的にテキストリンクが使用されていてシンプルな感じですが、キャンペーン情報等を表示するスライダー(カルーセル)がメニュー内に表示されています。

東急電鉄

「東急電鉄」 Before

「東急電鉄」 After

東急電鉄ではグローバルナビなどではなく、ビジュアル下に配置されている沿線・駅周辺ガイドの部分にメガメニューを実装しており、各線にホバーすると停車駅や沿線のおすすめスポットなどが表示されるようになっています。

KDDI株式会社

「KDDI株式会社」 Before

「KDDI株式会社」 After

ホバー+クリックで展開というタイプのメニューを採用しており、メニューではイメージではなくアイコンを多様しています。