.png)
Wixのメガメニューとは？写真付きメニューの作り方とリンクが反映されない時の対処法をご紹介
- 1 日前
- 読了時間: 8分
「上場企業のサイトみたいに、写真がバーッと大きく開くカッコいいメニューを作りたい」。
そう思って設定を探しても、どこから手を付ければいいのか分からず止まってしまった経験はありませんか？
じつはこの写真付きの大きなメニューは「メガメニュー」と呼ばれ、Wix Studioなら数クリックで土台を追加できます。
以前のWix Editorでは作れませんでしたが、Wix Studioで正式に対応しました。
この記事では、メガメニューを追加する手順から写真やテキストの入れ込み方、リンクの設定、そして多くの方がつまずく「ページを追加したのにメニューに出てこない」問題の対処法まで、順を追ってご紹介します。
Wix Studioのメガメニューとは？写真付きで大きく開くメニューの正体
メガメニューとは、マウスを乗せると写真付きで画面いっぱいに大きく展開する、階層分けされたグローバルナビゲーションのことです。
上場企業のコーポレートサイトで多用され、サイト全体を一気にプロっぽく見せてくれます。
Wix Studioで作れるメニューは、大きく3種類あります。
プルダウン（スタンダード）｜マウスオーバーで下にスッと開く、もっとも一般的なメニュー
メガメニュー｜写真とテキストを組み合わせ、大きく展開して見せる階層型メニュー
ハンバーガーメニュー｜三本線をクリックで開くメニュー。スマホ版は自動でこの形になります
このうちメガメニューが特に効いてくるのが、30ページ以上あるような大規模サイトです。
ページ数が多いとメニューが横に見切れてしまいますが、メガメニューで階層分けすれば、たくさんのページも見やすく整理できます。
逆に、表示したい項目が3つ程度しかないページを無理にメガメニュー化するのは得策ではありません。
その場合はシンプルなプルダウンの方が、訪問者にとって分かりやすいことが多いです。
まずは「項目が多いか、少ないか」で選び分けると失敗しにくくなります。
Wix Studioでメガメニューを追加する手順（メニュー管理からアイテムを追加）
Wix Studioのメガメニューは、メニュー管理画面で「アイテムを追加」からメガメニューを選び、展開した領域に写真とテキストを置いていくだけで作れます。
複雑なコードは一切不要で、まずはボタン操作だけで土台が完成します。
この記事の要点を先にお伝えします。
メガメニューの作り方は「①メニュー管理を開く → ②アイテムを追加でメガメニューを選ぶ → ③展開領域にパーツを入れて手動でリンクを張る」の3ステップです。
具体的な追加手順は次のとおりです。
ヘッダーのメニューを選び、「メニューを管理」を開きます
レイアウトを選択し、メニューの項目一覧を表示します（右側にメガメニューの項目があります）
「アイテムを追加」から「メガメニュー」を選択します（メガメニュー用の欄があらかじめ用意されています）
追加したメガメニューの「編集」を押すと、ヘッダーの下にメガメニューの領域が展開されます
ここまでで、写真とテキストを入れるための「大きな展開スペース」ができあがりました。
シンプルに写真と横線を入れる程度なら、このボタン操作だけでほぼ完成します。
なお、きれいに整えるには「スタック」「パディング・マージン」といったレイアウトの基本を押さえておくと、仕上がりが一段と安定します。
メガメニューの展開領域に写真とテキストのパーツを入れ込む
展開したメガメニューの領域には、通常のページと同じ感覚で写真やテキストのパーツを自由に配置できます。
ここが、写真付きの大きなメニューを「魅せる」ための一番の見せ場です。
作り込みの方針は、大きく2つに分かれます。
シンプル型｜写真と横線、短いテキストを並べるだけの構成。ボタン操作に近い手軽さで、すぐに形になります
デザイン重視型｜写真・見出し・説明文を組み合わせて凝ったレイアウトにする構成。この場合はパーツを一つずつ組んでいく必要があります
まずはシンプル型で全体の形を作り、余裕が出てから作り込むと迷いにくいです。
配置するテキストは、項目ごとの文字数をなるべく揃え、1項目だけが極端に長くならないようにすると、展開したときの見た目が整います。
メガメニュー内の各テキストにリンクを設定して各ページへ繋ぐ方法
配置したテキストは、1つずつ手動でリンクを設定して各ページへ繋ぎます。
メガメニューに置いたパーツは、そのままでは「見出しの飾り」でしかないため、リンクを張って初めて訪問者を目的のページへ案内できます。
リンク設定の流れはシンプルです。
メガメニュー内の、リンクを張りたいテキストパーツを選択します
リンク設定を開き、繋ぎたいページを指定します
同じ要領で、他のテキストにも一つずつリンクを設定していきます
ここで気をつけたいのが、メガメニューのリンクは現状「自動」ではなく「手動設定」だという点です。
写真やテキストを置いただけではページに繋がらないため、パーツの数だけリンクを張る作業が発生します。
項目が多いときは「どのテキストをどのページに繋ぐか」を先にメモしておくと、張り忘れや張り間違いを防げます。
ページを追加してもメガメニューに自動反映されない時の対処法
「ページを増やしたのに、メガメニューに新しい項目が出てこない」。
これはWix Studioの仕様によるもので、故障でも設定ミスでもありません。
原因と対処法をはっきりさせておきましょう。
原因はシンプルで、次の1点に集約されます。
メガメニューは、ページを追加しても自動でメニュー項目に反映されない仕様です（通常メニューと違い、中身は手動で管理します）。
そのため対処法も明確です。
追加したページをメガメニューに載せたいときは、次の手順で手動リンクを張ります。
メガメニューの展開領域に、新しいページ用のテキストパーツを追加します
そのテキストに、追加したページへのリンクを手動で設定します
文字数や位置を、既存の項目とそろえて見た目を整えます
「自動で増えないなんて不便では？」と感じるかもしれませんが、裏を返せば、メニューに載せるページと載せないページを自分でコントロールできるということでもあります。
この挙動は将来的に自動化される見込みとも説明されており、今後さらに扱いやすくなっていく機能です。
既存メニューの内容を流用してメガメニューを作る手間を省くコツ
メガメニューは、すでに作った別のメニュー項目の中身を流用すれば、ゼロから作り直す手間を大きく減らせます。
項目が多いサイトほど、この「使い回し」が効いてきます。
流用のコツは次のとおりです。
中身を借りたい別のメニュー項目にマウスオーバーして選択します
その項目の内容（上＝通常メニュー、下＝メガメニュー）を確認します
その中身を新しいメガメニューに入れ込み、細部だけ差し替えます
こうすれば、写真やテキストの構成を1個ずつ組み直す必要がなくなり、統一感のあるメニューを短時間で用意できます。
複数の階層で似たレイアウトを使いたいときほど、この方法が時短につながります。
実際の使い分けとしては、サービス一覧はプルダウン、制作実績は写真付きのメガメニュー、採用ページはプルダウンとハンバーガー、といった具合にページの性質で選ぶと、見やすさと作業効率の両方を高められます。
「全部メガメニューにする」のではなく、必要な場所に効かせるのがプロの使い分けです。
よくある質問（FAQ）
Q1. Wix EditorとWix Studioで、メガメニューの作りやすさはどう違いますか？
A. 写真入りのメガメニューは、Wix Editorでは作れませんでしたが、Wix Studioで正式に作れるようになりました。
写真付きの大きなメニューを作りたい場合は、Wix Studioで制作するのが前提になります。
Q2. メガメニューは何ページくらいの規模から使うのが効果的ですか？
A. 目安は30ページ以上の大規模サイトです。
ページ数が多いとメニューが横に見切れてしまうため、メガメニューで階層分けすると見やすく整理できます。
数ページ程度の小規模サイトでは、シンプルなプルダウンの方が向いています。
Q3. メガメニューに追加したページが表示されないのは不具合ですか？
A. 不具合ではなく、現状の仕様です。
メガメニューはページを追加しても自動でメニューに反映されないため、テキストパーツを追加して手動でリンクを張る必要があります。
将来的には自動化される見込みと説明されています。
Q4. プルダウンメニューとメガメニューは、どう使い分ければよいですか？
A. 表示したい項目が3つ程度と少ないページはプルダウン、項目が多く写真で見せたいページはメガメニューが向いています。
項目が少ないページを無理にメガメニュー化すると、かえって分かりにくくなることがあります。
Q5. スマホ版のメニューはメガメニューのまま表示されますか？
A. スマホ版はハンバーガーメニュー（三本線）が自動で表示されるため、三本線を出すためのパーツ追加は不要です。
PC版でメガメニューを作り込みつつ、スマホ版の見え方は別途整えるのが基本です。
Q6. メガメニューをきれいに仕上げるために、先に覚えておくべき知識はありますか？
A. 「スタック」と「パディング・マージン」の考え方を押さえておくと、写真とテキストの配置が安定します。
シンプルな構成ならボタン操作だけでも作れますが、凝ったレイアウトを目指すほどこの基本が効いてきます。
Q7. メガメニューの文言は、どのように決めるとよいですか？
A. 端的で読みやすい言葉にし、項目ごとの文字数をなるべく揃えるのがコツです。
1項目だけが極端に長いと、展開したときの見た目が崩れやすくなります。
【この記事の監修者】
中田ディレクター（株式会社ラジャ｜SEO担当監修）
保有資格・実績：Wixレジェンドレベルパートナー／サイト制作400サイト以上／Wix Studio制作100サイト以上（日本トップクラス）／Wix Studio専門スクール「ノコド道場」運営
