メガメニューってどうやってデザインするんだっけ？意外と参考サイトを探すのに苦労する、、
自社サイトの回遊率を上げたい。メガメニューを導入したら改善するかな？
やあ悩める諸君たち。マスター参上である！
む、さてはメガメニューの参考サイトを探しているな？
そして導入することで具体的にどういう効果があるか知りたいのだろう。
良かろう、吾輩に任せなさい！
さて、今回の記事はメガメニューのまとめ記事となっています。
メガメニュー、昔からある定番のUIですよね。
本題に入る前に、おさらいも兼ねて下記で軽く説明しておきますね。
そもそもメガメニューとは？
動画のように、ヘッダーをホバーしたりクリックしたりするとベロっと出てくるメニュー群のことです。
メガドロップダウンとも言われます。
ドロップダウンメニューが大きくなってるから「メガ」とついている訳です。
牛丼と一緒ですね。
webサイトにこのUIを採用すると、多階層で膨大な数のメニューを一つのブロックに格納することができるので、階層の深いページにも、ユーザーが少ない手順でアクセスできる為ユーザビリティの向上が期待できます。
doneメガメニューの導入でどのような効果がある？回遊率は上がる？
当然、回遊率の上昇は期待できます。
ユーザーが目的のページにたどり着くまでのストレスを軽減することができ、通常のナビゲーションであれば埋もれてしまうようなページもメガメニューの中に格納できるので、直帰率の低下も期待できます。
BtoBでかつある程度の規模のサイトのように、膨大なメニューを載せなければならないwebサイトほど効果が期待できるでしょう。
そういう訳でめちゃくちゃ便利なメガメニューですが、webデザインをする上でメガメニューがまとまった記事があれば便利だなと思い、今回記事を書くことにしました。
多くの人の参考になってくれれば嬉しいです。
それでは早速どうぞ！
参考にしたい！「メガメニュー」を活用したWebサイト20選
珍しいグリッドタイプ
大阪観光大学
https://www.tourism.ac.jp/
第3階層が上手くグリッドになって敷き詰められています。
メニューの数が少ないですが、その少なさを逆手にとったレイアウトが見てて参考になりますね！
第2階層「大学紹介」をもっと目立たせてあげるとさらによくなりそう。
第二階層へのリンクが分かりやすい
第2階層へのリンクがボタンで実装されており、分かりやすいですね。
ホバー時にヘッダーのメニューとメガメニューの背景が同じ色になるのも繋がりが分かりやすくて親切です。
リンクのメリハリが分かりやすい
株式会社 東光高岳
https://www.tktk.co.jp/
第2階層にうっすらと背景色をつけるのが個人的にポイントだと思います。
画像のあり/なしでリンクに強弱をつけており、お手本のようなレイアウトに仕上がっていますね。
罫線がポイント
グッドパッチ
https://goodpatch.com/
こちらもリンクにメリハリがありとても分かりやすいです。
第2階層と第3階層の間に罫線を敷くことで、分かりやすさとバランスの両方を整えることができています。
メガメニューの中にスライダーが！
トヨタ自動車株式会社
https://toyota.jp/index.html
「ラインアップ」以下では、第3階層以下の商品が画像付きでデザインされているのが購買意欲をそそりますね！
子メニュー（コンパクト〜小型モビリティ）をホバーしても、スライダーのボタンを押してもどちらでも操作できる点が非常に優れています。
また「購入サポート」以下は各メニューがアイコン付きのブロックに分かれていて、とても見やすいですね。
ヘッダーのメニューとメガメニューの繋がりが少し弱い気がしますが、それ以外はとても親切に設計されていると思います。
メガメニューは縦並びのグロナビとも相性抜群！
三菱商事株式会社
https://www.mitsubishicorp.com/jp/ja/
縦並びのグローバルメニューともメガメニューは相性抜群ですね。
ホバーした際の背景色を地続きにすることでユーザビリティを高めています。
閉じるボタンが右上にあるのも親切ですね。
膨大なメニューを画像付きで格納できている
日本郵政株式会社
https://www.japanpost.jp/
第3階層はほぼ全てに画像がついていますが、左と右でブロックのデザインを変えることで上手く格納できています。
またメガメニュー自体に赤色のボーダーがついているのもアクセシビリティ的に良さそうです。
第2階層にはっきりとした背景色がついていて目立っていますが、クリックできることが分かりづらい印象を受けたのでもうちょっと改善できそうです。
たっぷり余白をとるのがコツ
豊田通商株式会社
https://www.toyota-tsusho.com/
第2階層はテキストリンクのみでシンプルですが、フォントサイズを大きくしていて矢印をつけているので十分目立っています。
また他も余白が十分に取られているのでそれぞれが立っていますね。
余白の重要性を教えてくれるデザインになっていると思います。
バナーっぽいのがいい感じ
株式会社デンソー
https://www.denso.com/jp/ja/
第3階層が画像リンクになっており、第4階層がぶら下がっているデザインです。
分かりやすくていいですね。
このサイトのメガメニューはホバーでなくクリックで出現しますが、クリックの場合はホバーした段階でメガメニューが展開するとユーザーに伝えるようなアニメーションがあると良きですね。
すっきり整理されていて見やすい
株式会社ブリヂストン
https://www.bridgestone.co.jp/
しっかりとグルーピングされていて見やすいですね。
画像では「製品情報」メニューに赤色のアンダーラインが引いてありますが、こうすると現在自分がどこにいるのか分かりやすいので素晴らしいです。
商品が探しやすい
株式会社スバル
https://www.subaru.jp/
第3階層が縦に並んでおり、それ以降の車のラインナップが見やすくレイアウトされています。
「NEW」や「販売終了」など販売状況がすぐ分かるのも良いですね。
第3階層がクリックではなくホバーでラインナップが変わってくれると、個人的にはもっと良いかなと思ったり。
吹き出しデザインが見やすい
住友電気工業株式会社
https://sei.co.jp/
デザイン的にはやや古さは感じるものの、メガメニューが吹き出しの形状になっていたり、中のメニューが明確にブロックで区切られているなどユーザビリティに配慮したデザインになっています。
メガメニュー内で製品が検索ができるのも良きですね。
「もっと見る」リンクに色がつけばもっとメリハリが出そうです。
吹き出しや、罫線がポイント
アサヒグループホールディングス株式会社
https://www.asahigroup-holdings.com/
画像などは使われていないものの、カレントのグロナビに吹き出しがつけられていたり、罫線で第2階層と第3階層が仕切られていたり親切さを感じます。
こうして余白が広大に取られていると洗練されている印象を与えることができますね。
第二階層が超目立つ！
旭化成株式会社
https://www.asahi-kasei.com/jp/
何かと目立たせることが難しい第二階層を、背景画像を使うことでしかも高さを押さえた状態で目立たせることができています。
第3階層との差もはっきりしており、お手本のようなメリハリの付け方だと思います。
画像を使ったグルーピングが素敵
日本通運株式会社
https://www.nittsu.co.jp/
第3階層に画像を使っていて、上手くグルーピングされています。
第2階層のテキストに矢印がついていたり、メガメニューの中で検索ができたりといろいろ親切にデザインされています。
また第2階層「会社情報」以下ではリンクの強弱が明確についており、非常に分かりやすいです。
リンクの強弱が明白
三菱自動車工業株式会社
https://www.mitsubishi-motors.co.jp/
第2階層が赤ベタで非常に視認性に優れています。
第3階層以降も大きさの違いが明白で、はっきりと情報に差をつけることができています。
同じようなデザインにも関わらず、サイズでメリハリをつけられているのが素晴らしいですね！
視認性に優れたレイアウト
株式会社スズケン
https://www.suzuken.co.jp/
グレー背景に白ブロックは鉄板ですね。
第2階層と第3階層の違いがやや分かりづらい以外はとても綺麗に仕上がっています。
ボタンを使った、優れたグルーピング
ブロードマインド株式会社
https://www.b-minded.com/strength.html
第3階層はテキストリンクで表現されることが多いですが、このサイトはボタンで表現されています。
列ごとに余白がきちんと取られているので煩雑な印象になっていません。
余白の大切さが分かりますね！
まとめ
いかがだったでしょうか。
今回は自分で探そうとすると時間がかかるメガメニューのデザインをまとめました。
制作・設計に関わるデザイナーさんやディレクターさんを始め、必要な人が見れるように随時更新していこうと思います。
UIは設計周りが特にキモになってくる為、手を動かす前からみんなで考えていきたいですね。
それではまた。
