megamenu_mv1

メガメニューを利用した国内Webサイトのデザインのまとめ

  • このエントリーをはてなブックマークに追加

「メガメニュー(または、メガドロップダウン)」と呼ばれ、広いスペースを利用し、多層構造のリンクを一目で誘導できると、情報量の多いサイトを中心に取り入れているサイトを見ることがあります。

今回はメガメニューを利用している国内のサイトのまとめになります。

メガメニューを使うことによって、ユーザーが目的の情報まで簡単に辿り着けるようになるとユーザービリティ的には効果的ですが、少し間違った使い方をしていまうとユーザーが誤った情報を受け取ってしまう場合があります。そのことについてこちらの記事がとても参考になります。

メガメニューを利用した国内Webサイトのデザインのまとめ

スターバックス コーヒー ジャパン

Megamenu 01

http://www.starbucks.co.jp/

テキスト中心で、注目コンテンツはバナーを使ってリンクしています。

ハーゲンダッツ Häagen-Dazs

Megamenu 02

http://www.haagen-dazs.co.jp/

左カラムにカテゴリー名、下層リンクが入っており、右カラムには主力商品が画像で一覧になって見ることできます。

株式会社クレハ

Megamenu 03

http://www.kureha.co.jp/

各コンテンツにがグルーピングされ、イメージが入っているので、どんな情報なのかが受け取りやすい構造になっております。

大阪経済法科大学

Megamenu 04

http://www.keiho-u.ac.jp/

同カテゴリーの、注目コンテンツはアイキャッチの画像が入っているので、クリックしたくなりますね。大学サイトのサイトはとっても情報量が多いのでメガメニューがあるのはとってもいいですね!

東急電鉄

Megamenu 05

http://www.tokyu.co.jp/

各路線図と、恐らく人気のある駅がイメージ付きでメインビジュアルのエリアを目一杯使って表示しています。

ペルノ・リカール・ジャパン: Pernod Ricard Japan

Megamenu 06

http://www.pernod-ricard-japan.com/

すべての下層リンクにイメージ画像が入っています。下層コンテンツ自体、多くない場合はこのぐらいリッチに使うことができますね!

CKD 空気圧機器 制御機器 自動機械装置 総合メーカー

Megamenu 07

http://www.ckd.co.jp/

レイアウトがとっても綺麗です。ドロップダウンの中に検索機能も入っていたりと「こういう使い方もできるのか!」と使い方は無限大!

KDDI

Megamenu 08

http://www.kddi.com/

イメージ写真ではなくアイコンを使っている珍しいタイプです。

C1000 公式ブランドサイト

Megamenu 09

http://c1000.jp/

本田翼ちゃんがとっても可愛いです。

amazon

Megamenu 10

http://www.amazon.co.jp/

いつもお世話になっているamazonさんの「カテゴリーからさがす」部分も取り入れています。

おすすめ記事

  1. クリエイティブでカッコイイ!メニューブックデザイン
  2. 斜体を取り入れたWebデザインのまとめ
  3. 新米webデザイナーにおすすめしたい本
  4. Google Maps APIの特設公式サイトが面白い!
  5. 資料請求がしたくなる、デザインが素敵な専門学校のwebサイト

関連記事

PAGE TOP