Max Mega MenuでWordPressメニューをパワーアップ！導入手順と活用術を徹底解説

ウェブサイト運営者なら誰でも、トラフィックこそがサイトの生命線であり、良質なコンテンツがアクセスを呼び込む鍵であることを知っています。しかし、訪問者を集めることと同じくらい重要なのが、彼らをサイトに留めておくことです。ここで大きな役割を果たすのが、Webデザインとユーザーインターフェースです。サイトが直感的で見やすければ、訪問者はより長く滞在し、検索エンジンからの評価も高まり、検索結果で上位表示されやすくなります。

直感的で使いやすいWebデザインの重要な要素の一つが「メニュー」です。世の中のありふれたメニューの中で際立たせたいなら、メガメニューを活用しましょう。画像やウィジェット、さらにはほぼあらゆるインタラクティブな要素をメニュー内に組み込むことができます。そして、WordPressユーザーであれば、それを実現するプラグインが存在するのです。

メガメニューとは？

メガメニューとは、近年のWebデザインにおけるトレンドの一つで、Wal-Mart、OfficeMax、Target、adidas、PUMA、Toys R Usといった大手ECサイトを中心に採用されてきました。その特性上、オンライン小売業者に特に適していますが、ホワイトハウスやIMDBのような他ジャンルのサイトにも理想的な選択肢となっています。

メニューはWebサイトそのものと同じくらい古い存在で、訪問者がサイト内を移動するために欠かせない道具です。私たちが慣れ親しんできた従来型のメニューは、テキストの羅列やドロップダウン形式で構成されていますが、メガメニューはこれを大きく進化させたものです。

メガメニューでは、メニューにさまざまなWeb要素を追加できます。例えば、ブログの最新5件の投稿を見出し画像付きでメニュー内に表示することが可能です。この機能を活用すれば、オンラインショップでは商品画像や本日の特売情報をメガメニューに掲載し、もう一つの看板として商品プロモーションに役立てられます。

WordPressブログにメガメニューを追加する方法

あなたのサイトがWordPressで運営されていて、ユーザー体験の向上のためにメガメニューを導入したいなら、手順は非常にシンプルです。プラグインをインストールして、少し設定するだけで完了します。

WordPressプラグインディレクトリには複数の選択肢がありますが、ここでは10万以上のインストール数を誇り、ほぼ完璧な5つ星評価を獲得し、定期的にアップデートされている人気プラグイン「Max Mega Menu」を使用します。既存のテーマでそのまま利用でき、ドラッグ＆ドロップで直感的に要素を編集できるのも魅力です。

プラグインはWordPressダッシュボードから「プラグイン → 新規追加」メニューを開き、「Max Mega Menu」と検索すれば入手できます。

インストールして有効化したら、サイドバーから「外観 → メニュー」へ移動します。次に、メニューツリーの左側にある設定からMax Mega Menuを有効にします。設定項目が見つからない場合は、ドロップダウンから編集対象のメニューとして「Primary」を選択してみてください。

個々のメニュー項目にマウスポインタを合わせると、追加されたMega Menuオプションが表示されます。

既存のメニューをベースにメガメニューを追加することもできますし、まったく新しいメニューをゼロから作成することも可能です。WordPressでのメニュー作成方法については別のトピックになるためここでは割愛しますが、公式ページを参考にするとよいでしょう。

Mega Menuオプションをクリックすると、そのメニュー項目に関するすべての設定を含むパネルが起動します。基本的な操作は以下の通りです。

• 通常のカスケード式ドロップダウンメニュー「Flyout」か、メニュー幅いっぱいに展開される「Mega Menu」かを選択する
• 利用可能なウィジェットをメニューに追加する
• そのメニューで使用するカラム数を選択する

追加した各ウィジェットには編集ボタンが付いており、表示するコンテンツの中身を自由に調整できます。

最終的な仕上がりは、メガメニューにどのようなウィジェットを組み込むかに大きく左右されます。つまり、すべては手持ちのウィジェット次第というわけです。コレクションが充実しているほど、表現の可能性も無限に広がります。

テーマやプラグインの中には、独自の特別なウィジェットを提供しているものもあります。さらに、Google検索を活用すれば、その他にも多数のWordPressウィジェットを見つけられます。また、「テキスト」ウィジェットと簡単なコーディングを組み合わせれば、ほぼ何でも追加できるため、想像力次第で可能性は無限大です。

クイック事例紹介

このプラグインで実際に何ができるのか、イメージをつかんでもらうために、簡単なケーススタディを行ってみました。

まず、メニューをFlyoutからMega Menuに変更しました。次に、サブメニューを含む既存のメニューを選び、不要なサブメニューを削除してから、Max Mega Menuのパネルを開きます。サブメニューの数に合わせてカラム数を調整し、JetPackの画像ウィジェットを使って画像を追加しました。

さらに華やかにするため、カレンダーウィジェットとソーシャルメディアアイコンのウィジェットも追加してみました。

それでは、今回のケーススタディのビフォーアフターを比較してみましょう。まずは、メガメニュー追加前のメニューの様子です。

そして、こちらがカスタマイズ後の完成形です。

いかがでしたか？メガメニューは一時的な流行なのでしょうか、それとも長く定着するデザインなのでしょうか？あなたのサイトにもメガメニューを導入してみたいと思いますか？ぜひ下のコメント欄であなたの意見を聞かせてください。