デザイン
デザイナーが参考にしたい！メガメニューを活用したサイトデザイン8選
2018年10月18日 12:00
こんにちは！社員Aです👩
今回は、WEBデザイナーが参考にしたくなるメガメニューを活用したサイトデザインを厳選しました。
メガメニューは広いスペースを活かしてコンテンツをアピールできるため、多くのサイトで使用されています。
私自身もデザインでメガメニューを作ることがあるのですが、参考サイトを探すのに苦労してしまったので、自分自身で良いなと思ったメガメニュー導入サイトをまとめてみました。
もくじ
メガメニュー（メガドロップメニュー）とは
メガメニュー（メガドロップメニュー）は、ヘッダーなどにあるグローバルナビゲーション部分をオンマウスした際に表示される広いスペースを活かしたメニューで、情報量の多い大規模サイトを中心に、よく見かけます。
ページ数やコンテンツが多い場合や、視覚的にアプローチしたい場合に使うことが多いです。
上手く利用すればスペースを有効活用して、ユーザビリティをアップすることができます。
メガメニューのメリット
- ユーザを目的とするページにうまく誘導できる（回遊率アップ）
- 多層的な選択肢をわかりやすく構造化できる
- ユーザーの視認性や可読性を向上できる
デザイナーが参考にしたい！メガメニューを活用したサイト
ここからは実際にメガメニューを導入しているサイトデザインを紹介していきたいと思います。
日本通運
大手なので、サービス展開も多種多様で「国内輸送」「国際輸送」などの大カテゴリで写真を使用し、その下に小カテゴリを表示する形で、非常に見やすいですね。大カテゴリにはイメージが入っているので文字を読まなくても雰囲気で伝わっているのも良いなと思いました。目的のページをひと目で探せます。
三菱商事
私は始めて見かけたのですが、サイドメニューのカテゴリをマウスオンするとメガメニューが表示されます。
サイト自体は最近良く見かける2カラム式のレイアウトですが、こういう活用の仕方でもすっきりとして見やすいですね。
WOODTEC
こちらのサイトではメガメニューを使って商品カテゴリを案内しています。
カテゴリのイメージとカテゴリ名だけですが、非常にすっきりとしてみやすく、目的の商品までたどり着けるのが良いですね。
また、「デジタルカタログ」「インテリアシミュレーション」などのサブカテゴリは差別化して表示しているのも見やすい理由かもしれません。
電通
第三層のカテゴリまである場合のメガメニュー作成時に参考になります。
事業紹介をマウスオンし、さらに中カテゴリ（第二層）の「マーケティング」をクリックすると、小カテゴリ（第三層）が表示されます。
大阪経済法科大学
こちらのサイトのメガメニューも主要メニューとその他のメニューで差別化を図っています。
「就職実績」や「就職支援」などの推したいカテゴリは写真を使ってアピールし、その他のカテゴリはテキストリンクのみとなっています。
サッポロビール株式会社
こちらのサイトでは、メガメニューの中でもさらにタブ切り替えさせてすっきりと見やすくしています。
また、カテゴリごとにもひとつずつの商品画像とタイトルが簡潔にまとまっているので、目的の商品を探しやすいですね。
KDDI
こちらのサイトでは、アイコンを使ってユーザーが探しているカテゴリへ誘導しています。
業種によっては写真を使うよりもアイコンの方が伝わりやすい場合もあると思います。
OMRON
とにかくシンプルで見やすさを重視したメガメニューです。
写真は白背景のものを使用し、写真とタイトルだけを使ってグリッド規則に沿って作られているので見やすいです。
まとめ
せっかくメガメニューを使うならよりわかりやすいデザインにしたいなと思って色んなサイトを見てみましたが、業種やコンテンツ量によってデザインにもかなりの幅があることが分かりました。
上手く利用すればスペースを有効活用して、ユーザビリティをアップすることができるので、参考にしたいと思います。
うまく活用していきたいです！
関連記事
この記事を書いた人
社員A
入社8年目。フロントエンドエンジニア・デザイナーの社員Aです。 小動物が好きで、デグー・チンチラと暮らしています！トレンドの情報を発信できるようにがんばります☺
