2019/06/05*情報を更新いたしました。
2020/05/02*動画解説を更新いたしました。
最近、国内ウェブサイトでもよく目にするようになったメガメニュー。メガメニューは、一般的なグローバルメニューのドロップダウンより広く領域がとられています。その為、多くの情報をひと目でわかりやすく表示できます。スペースを効率的に活用できる為、情報量の多い大手のコーポレートサイトなどでよく利用されています。
- グローバルメニュー
- グローバルナビゲーションともよばれる。Webサイトの全てのページに共通して設置された案内リンク。Webサイト内の主要なページに対してリンクされていることで、サイト内のショートカット機能としてユーザーに活用される為に設置されている。
- メガメニュー
- グローバルメニューの中でも多数の選択肢を主にドロップダウンを用いて表示するものを指す。内容をアイコンなどを用いながら階層化させることで、大量の選択肢を提供したり、サイトの下層にあるコンテンツを一目で見えるようにしたい場合に採用される。従来のテキストメインのナビゲーションよりも主要リンクに優位性を持たせることが可能で、ユーザー、検索エンジンがコンテンツ全体を把握するのに役立つ。
メガメニューにはユーザーを目的のコンテンツページへ導くだけではなく、サイトマップのように全体のコンテンツ構成を分かりやすくすることや、ユーザーがWebサイトの中のどのコンテンツページを閲覧中であるかを伝える役割もあります。検索エンジンからWebサイトに訪れたユーザーはトップページにアクセスするとは限りません。メガメニューがあれば、末端ページにアクセスした場合でも瞬時にサイト全体のコンテンツが見渡せるようになります。サイトの階層構造が深くなるコンテンツでしたら採用した方がメリットが大きいでしょう。
しかし、ただ単に「情報量を増やすために導入する」というのはもったいないと私たちは考えます。メニューを展開した時にユーザーを驚かせ、遊びの要素を入れてこそ、メガメニューは活きてくるのではないかと考えるからです。そんな発想からTCDでも様々なメガメニューをWordPressテーマに実装してきました。この記事ではその一例をご紹介したいと思います。
目次
汎用性と自由度を担保したオーソドックスなメガメニュー集
まず、TCDテーマはサイトテンプレートであるがゆえの汎用性と自由度を兼ね備えています。理由は多様なジャンル・ウェブサイトで利用されることを想定してデザインしているからです。よって、今から紹介する事例集は汎用性が高いという意味でウェブサイト制作の参考にもなるのではないかと思います。
ECでアイテムを一覧表示
アイテムの種類が豊富なECサイトでもメガメニューを使用することで、どんなアイテムがあるかが一目瞭然です。
大企業の多岐にわたる事業内容を掲載する
大企業や多角経営をしている企業に最適なメガメニュー。事例サイトでは企業の事業内容を親＆子カテゴリーの2階層で表示させています。たくさんの情報が掲載できるので、事業内容を細分化して表示させる際に便利です。背景に事業のイメージ画像があるので、ユーザーはその階層にどのような情報があるのか想像しやすいデザインです。
親子カテゴリーを整理して表示
親カテゴリーと子カテゴリーをメガメニューに綺麗に収納。料理のメニューなどで使えますね。
サムネイルでカテゴリーを目立たせる
メニューにホバーした瞬間「お！」と思わせるメガメニューです。縦長の美しいサムネイルがクリックを誘います。階層構造を伝えるという意味合いではありませんが、回遊してもらう為に利のあるメガメニューの一例です。
お店のジャンルを紹介
お店のカテゴリーを表示する為に使われたメガメニュー。グローバルメニューはサイト内にどんな情報があるのかを知らせるために有効なもの。領域を上手に活用します。
大きなサムネイルでカテゴリー紹介
特集記事など特別感のあるページにグローバルメニューから誘導したい時に使えるメガメニューです。
会社案内を多段階構成で表示
代表あいさつや企業理念、会社概要など企業情報を1つのメガメニューでまとめてみました。ホームページに中の人の表情を出すとユーザーの安心感に繋がりますが、デザイン上表には出しにくいという場合があります。トップには社長の顔が表示されないけど、メニューをホバーすると見られる。という提案です。メガメニューのコンテンツとしてユーザーに安心感を表現しています。
ブログ記事を紹介する
左にカテゴリー、右にサムネイル付の記事を表示。メガメニューを使ってより露出させたい記事だけを表示させる手法です。階層構造＋主要コンテンツが伝わるだけではなく、見た目もよく、クリックしたくなりますね。主要記事にダイレクトに遷移してもらえることがこのメガメニューのメリットです。
オーソドックスで使い勝手の良いサムネイル+タイトル
カテゴリーアイキャッチ付きで表示。サムネイルがあるのでイメージがつきやすいです。あまり一般的ではない単語でカテゴリー分けをしている場合や、カテゴリーがたくさんあるサイトでユーザビリティの高いメガメニューです。
お次はECサイト用のメガメニュー。任意の商品カテゴリーにサムネイルを付けて表示させてます。オーソドックスなタイプなので用途の幅は広そうです。サムネイル画像には取り扱い商品の中でもユーザーに馴染みのある商品を採用するとより中身をイメージしてもらえるでしょう。
ブログ記事一覧（アイキャッチ付）
ブログメニュー上のメガメニューに記事一覧を表示。マウスホバーでいいねの数を表示します。グローバルメニュー上にブログの一覧情報を掲載しているサイトはあまり見かけません。これもメガメニューならではの使い方です。
カテゴリーをテーブル表示
こちらもオーソドックスなタイプのメガメニュー。通常のグローバルメニューのように階層化して表示するのではなく、このように一覧で表示した方が優位な場合もあります。ユーザーがコンテンツをくまなく見て回りたいという場合の検索性、視認性が上がります。
こちらはカテゴリー（タグ）に公開記事数を表示させたタイプ。ギャラリーサイトなど、記事のカテゴリー（タグ）分類がユーザーにとって重要なサイトでは便利です。
メガメニューの設定方法
TCDでは最近のテーマのほとんどにメガメニューが実装されています。設定方法についてはこちらの動画解説を参照するとわかりやすいと思います。
まとめ
いかがだったでしょうか。メガメニューがいかにユーザーにとって使い心地が良く、楽しいものであるかご体感頂けたのではないでしょうか。但し、メガメニューはユーザーの目を引きつけるがゆえに、どんなサイトにもマッチするかと言うとそれは違います。合う合わないがあるのです。その為、全体の整合感、バランスを見て実装するのが良いでしょう。TCDテーマのメガメニューはそのテーマを採用したからといって、絶対使わなくてはいけないというものではありません。コンテンツが少ないうちはメガメニューを採用することで逆に中身がないサイトである印象を与えることもあります。最初のコンテンツ量次第では、サイトの成長に応じて採用をすることも選択肢の内のひとつでしょう。
メガメニューを使用する時はサイト設計の時点からコンテンツの内容を整理し、設置をすることでより良質なウェブサイトを作ることが可能です。運営の途中からサイト設計を見直すと、全体を見渡した時にちぐはぐした印象を残すことがあります。最初にどのようなコンテンツを拡充していく予定か、未来に向けた設計をする可能な場合は、しっかりとした検討をすることをお勧めします。
