• LIGの広告成功事例
WEB

スペースを活用!メガメニューを使用した国内参考サイトまとめ

スペースを活用!メガメニューを使用した国内参考サイトまとめ

こんにちは、デザイナーの藤田です。気候が暖かくなってきたせいなのか、最近ペットとして飼っている猫が私の近くに寄り沿って来なくなり、猫肌恋しい今日この頃です。

さて、今回はスペースを十分に使用することで、ユーザビリティを向上させ、同時に私の心の隙間までも綺麗に埋めてくれる「メガメニュー」を使用したサイトをまとめてみました。

メガメニューとは
メガナビゲーションメニュー・メガドロップダウンとも呼ばれる。広いスペースを使用し、多層構造のリンクを一目で分かりやすく表示したり、商品画像やアイコンをメニュー内に表示し、ユーザをうまく目的とするページに誘導したりするのに便利なナビゲーション。

ここ数年、目にする機会が増えた一方で、いざ自身でメガメニューのデザインを行おうと思うと、それらをまとめた参考サイト(特に国内サイト)が極端に少なくて困った、なんて経験をお持ちの方も多いのではないでしょうか?

かく言う私もその一人で、自身の備忘録も兼ね、国内サイトで「メガメニュー」を使用したサイトをまとめてみました。

メガメニューを使用した国内参考サイトまとめ

多層構造一覧表示型

以下の「メガメニュー」は、トップページから最下層に移動する際に2クリック以上必要とするサイト構造でも、ユーザが1クリックで目的とする情報にたどり着くことが可能だったり、目的とする情報がどこにあるのかをユーザに分かりやすく表示していたりする参考例です。

 

専科

jpeg

リンクのグルーピングが明確で、最下層のページにどのような情報が入っているか分かりやすくなっております。

 

株式会社クレハ

jpeg-1

多数のリンクをとてもきれいにレイアウト・グルーピングしており、「メガメニュー」を作る際に非常に参考になるかと思います。

 

電通ウェブサイト

jpeg-2

デザインや情報のまとめ方はとてもきれいなのです。やや第3階層のリンクをクリックしづらい印象を受けました。

 

富士ゼロックス株式会社

jpeg-3

第2階層のリンクを見出しの様に目立たせ、第3階層との階層構造をはっきりつけております。

 

大阪経済法科大学

5

第2階層・第3階層・第4階層と、階層構造が深くなってもこのようなレイアウトならわかりやすいですね。

 

日本電産株式会社

6

背景画像を使用することで、弱くなりがちな第2階層のリンクを目立たせており、第3階層のリンクには画像・第4階層のリンクにはアイコンを使用するなど、階層構造の強弱もしっかりしていて、とても情報が整理された印象を受けるメガメニューです。

 

シャープ株式会社

7

サイトのデザイン同様に、グリットで明確に情報をグルーピングし、レイアウトを行っております。

画像 or アイコン or テキスト表示型

以下は恐らく「多層構造一覧表示型」の派生で生まれたものだと思いますが、2階層構造のウェブサイト、もしくはドロップダウンメニューでも、メガメニューの様にスペースを広く使うことにより、リンクに画像やアイコン、説明文を使用することができるようになり、ユーザビリティを向上させた参考例です。

 

アマゾン

8

珍しい縦型配置のメガドロップダウンです。

 

KIRIN

9

画像を使用することにより、下層ページの内容を一目でわかりやすく表示しております。

 

ヤマサ醤油株式会社

10

企業情報のボタンにホバーするとメガメニュー内に問い合わせ先の電話番号が表示されているのが特徴的です。

 

サッポロビール株式会社

11

メガメニュー内にタブやスライダーが実装されております。

 

ジューテックホールディングス株式会社

12

画像を使用しているものと、そうではないもので、リンクに強弱をつけております。

 

KDDI株式会社

13

アイコンを使用することにより、下層ページの内容を一目でわかりやすく表示しております。

 

オムロンヘルスケア

14

リンクに商品画像を使用することで、目的とする情報が分かりやすくなっております。

 

京セラ株式会社

15

メガメニュー表示中はサイト全体をグレースケールにすることで、視線がメガメニューに集まりやすいように工夫されております。

 

三菱地所

16

メガメニュー表示箇所には三角矢印のアイコンが付いている、そんなちょっとした心遣いが素敵です。

 

帝人株式会社

17

大量のリンクもこのように余白を十分に利用すればすっきり見せることができます。

 

大阪国際 大和田中学校・高等学校

18

中高一貫校のサイトですが、中学校に関する情報へのリンクと高校へのリンクとではっきりとグループ分けをすることで、ユーザが目的とする情報へ明確に誘導しております。

番外編

メガメニュー、またはドロップダウンメニューを使用するということは、大量のリンクをマウスオーバー(クリック)するまで、それらを隠すということになります。だったら下層ページのリンクを隠さずに最初から表示しよう、というのが以下の参考サイトになります。

メガメニュー(ドロップダウンメニュー)を使用したサイトをこれから作成しようとしている方は、本当にそのサイトにメガメニュー(ドロップダウンメニュー)が必要なのか、一度、再考してみるのも良いかもしれません。

 

ダイハツ工業株式会社

19

 

成蹊学園

20

まとめ

オムロンヘルスケアさんの様に、文字だけでは伝わりづらい商品名を画像で目に見えてわかりやすくしたり、日本電産株式会社さんの様に、他数のリンクを一目で解りやすく表示したりと、メガメニューはとても便利です。

でも、メガメニューを採用する際は、情報設計やUIをしっかりと考えてからデザインを行わないと、逆にユーザにとって不親切なサイトになりかねないので、このまとめを作りながら、改めてデザインをする前の段階の作業の大切さに気づかされました。

是非、皆様もメガメニューをデザインする際はこちらの参考事例をご活用ください。それでは、また。

この記事を書いた人

藤田
藤田 デザイナー 2013年入社
デザイナーの藤田です。 野球とビールと猫が好きです。 ジョブズの「来る日も来る日もこれが人生最後の日と思って生きるとしよう。」という言葉が好きです。言葉の通り毎日、全力投球で頑張っております。 どうぞ、よろしくお願い致します。