2019/6/5 情報を更新いたしました。

最近、国内ウェブサイトでもよく目にするようになったメガメニュー。メガメニューは、一般的なグローバルメニューのドロップダウンより広く領域がとられています。その為、多くの情報をひと目でわかりやすく表示できます。スペースを効率的に活用できる為、情報量の多い大手のコーポレートサイトなどでよく利用されています。

グローバルメニュー
グローバルナビゲーションともよばれる。Webサイトの全てのページに共通して設置された案内リンク。Webサイト内の主要なページに対してリンクされていることで、サイト内のショートカット機能としてユーザーに活用される為に設置されている。
メガメニュー
グローバルメニューの中でも多数の選択肢を主にドロップダウンを用いて表示するものを指す。内容をアイコンなどを用いながら階層化させることで、大量の選択肢を提供したり、サイトの下層にあるコンテンツを一目で見えるようにしたい場合に採用される。従来のテキストメインのナビゲーションよりも主要リンクに優位性を持たせることが可能で、ユーザー、検索エンジンがコンテンツ全体を把握するのに役立つ。

メガメニューにはユーザーを目的のコンテンツページへ導くだけではなく、サイトマップのように全体のコンテンツ構成を分かりやすくすることや、ユーザーがWebサイトの中のどのコンテンツページを閲覧中であるかを伝える役割もあります。検索エンジンからWebサイトに訪れたユーザーはトップページにアクセスするとは限りません。メガメニューがあれば、末端ページにアクセスした場合でも瞬時にサイト全体のコンテンツが見渡せるようになります。サイトの階層構造が深くなるコンテンツでしたら採用した方がメリットが大きいでしょう。

しかし、ただ単に「情報量を増やすために導入する」というのはもったいないと私たちは考えます。メニューを展開した時にユーザーを驚かせ、遊びの要素を入れてこそ、メガメニューは活きてくるのではないかと考えるからです。そんな発想からTCDでも様々なメガメニューをWordPressテーマに実装してきました。この記事ではその一例をご紹介したいと思います。

汎用性と自由度を担保したオーソドックスなメガメニュー集

まず、TCDテーマはサイトテンプレートであるがゆえの汎用性と自由度を兼ね備えています。理由は多様なジャンル・ウェブサイトで利用されることを想定してデザインしているからです。よって、今から紹介する事例集は汎用性が高いという意味でウェブサイト制作の参考にもなるのではないかと思います。

全カテゴリー(親&子)をイメージ背景上に表示

事例サイトでは企業の事業内容を親&子カテゴリーの2階層で表示させています。たくさんの情報が掲載できるので、事業内容を細分化して表示させる際に便利です。背景に事業のイメージ画像があるので、ユーザーはその階層にどのような情報があるのか想像しやすいデザインです。
WordPressテーマ「NANO」

デモを見る NANO

カテゴリー表示(縦長サムネイル+メニュータイトル)

メニューにホバーした瞬間「お!」と思わせるメガメニューです。縦長の美しいサムネイルがクリックを誘います。階層構造を伝えるという意味合いではありませんが、回遊してもらう為に利のあるメガメニューの一例です。
WordPressテーマ「ROCK」

デモを見る ROCK

お店の紹介(ボックスサムネイル+メニュータイトル)

お店のカテゴリーを表示する為に使われたメガメニュー。グローバルメニューはサイト内にどんな情報があるのかを知らせるために有効なもの。領域を上手に活用します。
WordPress Theme TOKI

デモを見る TOKI

大きなサムネイル + 縦書きのタイトル紹介

特集記事など特別感のあるページにグローバルメニューから誘導したい時に使えるメガメニューです。
WordPress Theme MIKADO

デモを見る MIKADO

会社概要 + 下層ページ

代表あいさつや企業理念、会社概要など企業情報を1つのメガメニューでまとめてみました。ホームページに中の人の表情を出すとユーザーの安心感に繋がりますが、デザイン上表には出しにくいという場合があります。トップには社長の顔が表示されないけど、メニューをホバーすると見られる。という提案です。メガメニューのコンテンツとしてユーザーに安心感を表現しています。
WordPress Theme NANO

デモを見る NANO

タブメニュー + 記事一覧

左にカテゴリー、右にサムネイル付の記事を表示。メガメニューを使ってより露出させたい記事だけを表示させる手法です。階層構造+主要コンテンツが伝わるだけではなく、見た目もよく、クリックしたくなりますね。主要記事にダイレクトに遷移してもらえることがこのメガメニューのメリットです。
WordPress Theme ROCK

デモを見る ROCK

WordPress Theme MIKADO

デモを見る MIKADO

オーソドックスで使い勝手の良いサムネイル+タイトル

カテゴリーアイキャッチ付きで表示。サムネイルがあるのでイメージがつきやすいです。あまり一般的ではない単語でカテゴリー分けをしている場合や、カテゴリーがたくさんあるサイトでユーザビリティの高いメガメニューです。

WordPress Theme ONE

デモを見る ONE

お次はECサイト用のメガメニュー。任意の商品カテゴリーにサムネイルを付けて表示させてます。オーソドックスなタイプなので用途の幅は広そうです。サムネイル画像には取り扱い商品の中でもユーザーに馴染みのある商品を採用するとより中身をイメージしてもらえるでしょう。
WordPress Theme ICONIC

デモを見る ICONIC

ブログ記事一覧(アイキャッチ付)

ブログメニュー上のメガメニューに記事一覧を表示。マウスホバーでいいねの数を表示します。グローバルメニュー上にブログの一覧情報を掲載しているサイトはあまり見かけません。これもメガメニューならではの使い方です。
NUMERO

デモを見る NUMERO

カテゴリーをテーブル表示

こちらもオーソドックスなタイプのメガメニュー。通常のグローバルメニューのように階層化して表示するのではなく、このように一覧で表示した方が優位な場合もあります。ユーザーがコンテンツをくまなく見て回りたいという場合の検索性、視認性が上がります。
WordPress Theme Bloom

デモを見る Bloom

こちらはカテゴリー(タグ)に公開記事数を表示させたタイプ。ギャラリーサイトなど、記事のカテゴリー(タグ)分類がユーザーにとって重要なサイトでは便利です。
WordPress Theme STYLY

デモを見る STYLY

まとめ

いかがだったでしょうか。メガメニューがいかにユーザーにとって使い心地が良く、楽しいものであるかご体感頂けたのではないでしょうか。但し、メガメニューはユーザーの目を引きつけるがゆえに、どんなサイトにもマッチするかと言うとそれは違います。合う合わないがあるのです。その為、全体の整合感、バランスを見て実装するのが良いでしょう。TCDテーマのメガメニューはそのテーマを採用したからといって、絶対使わなくてはいけないというものではありません。コンテンツが少ないうちはメガメニューを採用することで逆に中身がないサイトである印象を与えることもあります。最初のコンテンツ量次第では、サイトの成長に応じて採用をすることも選択肢の内のひとつでしょう。

メガメニューを使用する時はサイト設計の時点からコンテンツの内容を整理し、設置をすることでより良質なウェブサイトを作ることが可能です。運営の途中からサイト設計を見直すと、全体を見渡した時にちぐはぐした印象を残すことがあります。最初にどのようなコンテンツを拡充していく予定か、未来に向けた設計をする可能な場合は、しっかりとした検討をすることをお勧めします。