メガメニュー・メガドロップメニューを実装しているWebデザインのショーケース

メガメニュー・メガドロップメニューを実装しているWebデザインのショーケース

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

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

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

Amazon

Amazon Amazon

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

楽天市場

楽天市場 楽天市場

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

Tiffany & Co.

Tiffany & Co. Tiffany & Co.

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

Olympics

Olympics Olympics

Nike

Nike Nike

adidas

adidas adidas

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

Columbia Sportswear

Columbia Sportswear Columbia Sportswear

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

電通

電通 電通

日産自動車

日産自動車 日産自動車

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

トヨタ自動車

トヨタ自動車 トヨタ自動車

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

シャープ株式会社

シャープ株式会社 シャープ株式会社

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

株式会社クレハ

株式会社クレハ 株式会社クレハ

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

アサヒビール

アサヒビール アサヒビール

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

キリン

キリン キリン

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

ヤマサ醤油株式会社

ヤマサ醤油株式会社 ヤマサ醤油株式会社

Häagen-Dazs

Häagen-Dazs Häagen-Dazs

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

Starbucks Coffee Japan

Starbucks Coffee Japan Starbucks Coffee Japan

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

東急電鉄

東急電鉄 東急電鉄

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

kuraline(クラリネ)

kuraline(クラリネ) kuraline(クラリネ)

KDDI株式会社

KDDI株式会社 KDDI株式会社

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

Back to Top

メガメニュー・メガドロップメニューを実装しているWebデザインのショーケース

メガメニュー・メガドロップメニューを実装しているWebデザインのショーケース

/ Inspiration

Tagged with:

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。