これで分かる!メガメニューの基本の作り方

企業サイトやオンラインショップで目にする「メガメニュー」が、ホームページ制作サービス「BiNDup」で簡単に追加できるようになりました。大きなスペースを使って、見せたいページや階層の奥深いところにあるページまで一覧させることができるメガメニューを追加する基本の手順を解説します。

メガメニューの参考になるサイトを見てみよう

メガメニューは、クリックまたはマウスオーバーで開くドロップダウンメニューの1種です。
通常のドロップダウンメニューと比べて広いスペースを確保することで、階層化したページをグループごとに表示したり、写真やアイコンを使ったユーザビリティの高いメニューが作れるのが特徴です。

 と、言われても、それがどんなものなのか、どんなことができるのかを先に知りたいですよね。そこで、メガメニューを実装しているサイトをいくつか見てみましょう。

オンラインショップに多いシンプルメニュー

プーマのサイト
テキストだけで構成された基本的なメガメニューです。オンラインショップでよく見かけるメニューで、カテゴリ内の階層をグループごとにまとめて、目的のアイテムを見つけやすくレイアウトされています。
▽プーマ公式オンラインストア
https://jp.puma.com/

写真を使ってわかりやく整理されたメニュー

富士ゼロックスのサイト
写真を使ってカテゴリを表現したメニューで、下位ページへのリンクはありません。注目すべきは、左下の「お問い合わせ」ボタン。このように、メニュー以外のパーツを自由に配置できるのもメガメニューの特徴です。
▽富士ゼロックス株式会社
https://www.fujixerox.co.jp/

海外のオンラインショップに多いメニュー+α

MOOのサイト
海外でも、オンラインストアを中心にメガメニューが多く使われています。目についたのは、メガメニューのスペースを2つに分けて、左にメニュー、右に写真付きで新製品や注目トピックを掲載するパターンでした。
▽MOO
https://www.moo.com/

アイコンを使った直感的にわかりやすいメニュー

KDDIのサイト
アイコンをメインにした視認性の高いメニューです。コーポレーションカラーを効果的に配したデザイン性に富んだメニューでもあります。
▽KDDI株式会社
https://www.kddi.com

デザインの自由度が高いメガメニュー

4つのメガメニューの例を取り上げました。比較的汎用性の高いシンプルなものを掲載しましたが、国内外問わずいろいろなサイトを見てみると、先鋭的なデザインや動画を配した賑やかなもの、あるいはセールの告知に徹したものなど、デザインも内容もさまざま。アイディア次第で、メニュー以外の用途にも利用できるのもポイント高いですね。

メガメニューの編集:スマートモード編

メガメニューがどんなメニューかわかったところで、実際にホームページ制作サービス「BiNDup」で作ってみましょう。
BiNDupでメガメニューを作成する方法は2つ。

  1. ブロックテンプレートでメガメニューのテンプレートを選択する方法
  2. ブロックレイアウトを適用する方法

です。

察しのいい方はお気づきかと思いますが、メガメニューの内容はブロックエディタで編集します。つまり、ブロックエディタで通常のブロックと同じ感覚で、自由に編集できるということ。「お問い合わせ」ボタンや地図が簡単に追加できるというわけです。

ただし、それは「エディタモード」で編集する場合です。編集モードで「スマートモード」を選択した場合、最初に選択したテンプレートの範囲を超えたデザインやパーツの追加はできません。メガメニューのスペースを自由に編集したい場合は「エディタモード」、テンプレートの内容に沿って簡単にメニューを作りたいときは「スマートモード」をそれそれ選ぶといいでしょう。
まずは、スマートモードでメガメニューを作る手順を見ていきます。

メガメニューのテンプレートを選択する

これで分かる!メガメニューの基本の作り方
メガメニュー を追加したいブロックをブロックエディタで開きます。その際、ここではスマートモードで編集するので、「編集モード」の選択画面で[スマート(簡易)]をクリックします。
これで分かる!メガメニューの基本の作り方
ブロックテンプレートが開いたら、[ナビゲーション]のテンプレートの中から、メガメニューのテンプレートを選択し、最後に[適用]をクリックします。スマートモードで編集する場合は、必ず「メガメニュー」のテンプレートを選ぶ必要があります。

必要な項目を入力する

これで分かる!メガメニューの基本の作り方
ブロックエディタで、必要な項目を1つずつ埋めていきます。画面左のタブが、それぞれメニューのタブになります。タブの項目名は、最上段の「リンク」のリンクパーツに入力します。不要な項目は、右側のスイッチをオフにして非表示にします。
これで分かる!メガメニューの基本の作り方
[適用]をクリックしてサイトエディタに戻ったら、ブラウザでプレビューしてみましょう。こんな感じにメガメニューが出来上がりました。

メガメニューの編集:エディタモード編

今度はエディタモードでメガメニューを追加します。
編集モードをエディタモードにした場合、先に述べたようにブロックテンプレートのメガメニューのテンプレートから始める方法と、ブロックエディタの「設定」タブでメガメニューのブロックレイアウトを選んで自分で組み立てていく方法があります。
ここでは、最初に紹介した参考サイトの中から、プーマのメガメニューに近いものを作ってみましょう。テンプレートは、スマートモードで使ったものと同じ「メガメニュー ①」のテンプレートを使います。

タイトルのリンクパーツを編集する

メガメニューを設置するブロックをブロックエディタで開きます。スマートモードがデフォルトになっている場合は、[エディタモード]をクリックしてエディタモードに変換します。
これで分かる!メガメニューの基本の作り方
「編集」画面で、「タイトル」部分のリンクパーツを書き換えます。「タイトル」として入力した文字は、メガメニューのタブ(最上位のメニュー項目)要素に反映されます。タブを増やす場合は、「タイトル」項目を追加します。

メニューの内容を入力する

これで分かる!メガメニューの基本の作り方
「リード」には項目(カテゴリ)名、「リスト」にリンク先のページを当てはめていきます。お手本のプーマのメニューに倣って、左のカラムにはほかのタブと共通のリンクを掲載しました。
これで分かる!メガメニューの基本の作り方
同一カラムに別の項目を追加する場合は、「リード」を挿入して、その下にリンクパーツを配置します。
これで分かる!メガメニューの基本の作り方
[適用]をクリックして、プレビューしてみましょう。背景や文字の色が違いますが、レイアウトは概ねお手本の内容に近いものになってきました。
※テンプレートに用意されているタブは4つだったので、1つ増やしています。

カラムを増やす

これで分かる!メガメニューの基本の作り方
お手本のメニューは5カラムになっているので、それに倣ってカラムを1つ増やします。カラムを増やすには、[分割]を追加します。分割線が表示された部分から次のカラムになります。
これで分かる!メガメニューの基本の作り方
カラムを追加したら、プレビューで確認します。右端に空のカラムが追加されて、よりお手本のメニューに近づきました。

パーツと要素の関係を覚えよう

意外と簡単にメガメニューが完成しました。ブロックエディタで編集するパーツが、メガメニューのどの要素に反映されるかがわかれば、組み立てはそんなに難しくありません。

今回は、テンプレートを使って基本のメガメニュー を作りました。次回は、Dressを使ってメガメニューのデザインに手を加えます。背景色やテキストの色やサイズを調整して、プーマのメガメニュー により近づけて行きたいと思います。

新しいBiNDupで無料でサイトを作る
BiNDの制作事例を見る