お問い合わせお問い合わせはこちら

ユーザビリティ・機能性◎!メガドロップダウン6選

2021/09/09

今回の記事ではサイトの交通網、ドロップダウンメニューの中でも、

ECサイトで用いられることの多い「メガドロップダウン」(別名「メガメニュー」)の参考デザインをまとめていきます。

 

メガドロップダウンを採用するメリット

ECサイトは特性上、サイト内のページ数が多かったり、商品ページの階層が深くなってしまうことが多々あります。

ユーザー目線に立つと、自分の目当ての商品、またはサービスに早くたどり着きたいですよね。

そんな時にメガメニューを設置しておけば、ユーザーがTOPページから目当てのページに行くまでのクリック数を減らすことが可能です。

クリック数を減らすことでユーザーの離脱率(サイトを途中で離れてしまうこと)も下げれるので、

ページ数が多いECサイトでは「メガドロップダウン」は必須と言ってもいいでしょう。

 

 

メガドロップダウン6

 

1.PLAZA ONLINE STORE

メガドロップダウン(メガメニュー)

PLAZA online store

テキストだけのオーソドックスなパターンです。

アイコンとラインで装飾することにより、シンプルながら美しく、使いやすいデザインとなっています。

またメインビジュアルのスライダーの動きも面白いサイトとなっています。

 

 

2.ニトリ公式通販 ニトリネット

メガドロップダウン(メガメニュー)

ニトリ公式通販 ニトリネット

メニュー内が2カラムに分かれ、スクロール機能も付いています。

表示したいリンク数が膨大な際に、ユーザビリティが高いメニュー構成です。

 

 

3.LOWYA

メガドロップダウン(メガメニュー)

LOWYA

ニトリさんと同じインテリアの通販サイトです。こちらも2カラム構成ですね。

項目がアイコンで表示されていてサイトに洗練された雰囲気を与えています。

 

 

4.MoMA Design Store

メガドロップダウン(メガメニュー)

MoMA Design store

こちらは選択したカテゴリーごとにメニュー内に新着商品が並びます。

新着商品のPRにもなりますし、色んなカテゴリーをクリックしたくなるのでサイト内の回遊率も上がる

素晴らしいデザインです。

 

 

5.LOTTE 公式オンラインモール

メガドロップダウン(メガメニュー)

LOTTE 公式オンラインモール

項目の画像が商品画像になっています。

カテゴリー内にどういった商品があるのか、イメージが付きやすい良いデザインです。

 

 

6.TOYOTA 自動車

メガドロップダウン(メガメニュー)

TOYOTA自動車

サブメニューやスライダーなど、ドロップダウンメニュー内のこだわりが光ります。

車種名だけではどんな車種か分からない人にも、写真のおかげで一目で分かるので使いやすいですね。

 

 

メガドロップダウン(メガメニュー)

商品ラインアップ以外のメニューはボタン風のデザインになっており、

見やすく、クリックしやすい良いデザインです。

 

 

 

以上、メガドロップダウン6選をご紹介しました。

ECサイトはメニュー部分をきちんと整備し、ユーザビリティやサイト内の回遊率を上げることが非常に重要です。

新規でECサイトを作る際や、ECサイトリニューアルの際には是非参考にしてください!

 

この記事をSNSでシェア!

サイト運営のコツ

« »

サイト運営のコツの記事一覧へ

全記事一覧へ