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

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

動画でわかる、メガメニューの作り方

メガメニューの作り方をYouTube動画でも紹介しています。ぜひあわせてチェックしてみてくださいね。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

です。

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

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

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

メガメニュー を追加したいブロックをブロックエディタで開きます。その際、ここではスマートモードで編集するので、「編集モード」の選択画面で［スマート（簡易）］をクリックします。

ブロックテンプレートが開いたら、［ナビゲーション］のテンプレートの中から、メガメニューのテンプレートを選択し、最後に［適用］をクリックします。スマートモードで編集する場合は、必ず「メガメニュー」のテンプレートを選ぶ必要があります。

必要な項目を入力する

ブロックエディタで、必要な項目を1つずつ埋めていきます。画面左のタブが、それぞれメニューのタブになります。タブの項目名は、最上段の「リンク」のリンクパーツに入力します。不要な項目は、右側のスイッチをオフにして非表示にします。

［適用］をクリックしてサイトエディタに戻ったら、ブラウザでプレビューしてみましょう。こんな感じにメガメニューが出来上がりました。

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

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

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

メガメニューを設置するブロックをブロックエディタで開きます。スマートモードがデフォルトになっている場合は、［エディタモード］をクリックしてエディタモードに変換します。

「編集」画面で、「タイトル」部分のリンクパーツを書き換えます。「タイトル」として入力した文字は、メガメニューのタブ（最上位のメニュー項目）要素に反映されます。タブを増やす場合は、「タイトル」項目を追加します。

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

「リード」には項目（カテゴリ）名、「リスト」にリンク先のページを当てはめていきます。お手本のプーマのメニューに倣って、左のカラムにはほかのタブと共通のリンクを掲載しました。

同一カラムに別の項目を追加する場合は、「リード」を挿入して、その下にリンクパーツを配置します。

［適用］をクリックして、プレビューしてみましょう。背景や文字の色が違いますが、レイアウトは概ねお手本の内容に近いものになってきました。
※テンプレートに用意されているタブは4つだったので、1つ増やしています。

カラムを増やす

お手本のメニューは5カラムになっているので、それに倣ってカラムを1つ増やします。カラムを増やすには、［分割］を追加します。分割線が表示された部分から次のカラムになります。

カラムを追加したら、プレビューで確認します。右端に空のカラムが追加されて、よりお手本のメニューに近づきました。

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

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

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

メガメニューのアレンジ｜文字や色、レイアウトを編集する方法

→自作のサイト運用に最適なノーコードCMS「BiNDup」を30日無料体験する

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