この記事のレベル
| 初心者 | （3.0） |
| 重要度 | （3.0） |
| 難しさ | （2.0） |
こんにちは、編集長のカワウソです！
「メガメニューって何？」と悩んでいませんか？
メガメニューとは、ナビゲーションの一種で、広い画面領域を持つドロップダウンメニューのことです。「メガドロップダウン」「メガナビゲーションメニュー」とも呼ばれます。
メガメニューにはメリットがあるので、ホームページ制作中の方は、これを機に設置を検討してみてはいかがでしょうか。
そこで今回は参考として、メガメニューを搭載した企業ホームページ事例12選を紹介します。
カワウソ
この記事は次のような人におすすめ！
- ナビゲーションのデザインに悩んでいる人
- メガメニューを設置するメリットが知りたい人
- 参考になるメガメニューのデザインを探している人
この記事を読めば、メガメニューを設置するときのコツも分かります。
それではどうぞ！
メガメニューを設置するメリット
メガメニューを設置するメリットは、メニュー内に多くの情報を掲載できることです。
広い画面領域を有するメガメニューは、ホームページの階層構造を一覧で表示できたり、イラストや写真の設置により視認性を向上できたりします。
つまりメガメニューなら、目的のページにすぐにたどり着きたいユーザーを、最大限サポートできるのです。
利便性が高いナビゲーションを作りたい方は、次に紹介する事例を参考に、メガメニューの設置を検討してみてください。
メガメニュー搭載の企業ホームページ例
ここでは、メガメニューの事例を以下3つのカテゴリに分けて紹介します。
テキストやアイコンを中心としたメガメニュー
最初に紹介するのは、テキストやアイコンを中心としたメガメニューです。
シンプルなデザインの中にも、さまざまな工夫が見られますよ。
Cognigy
▲出典：Cognigy
TDSE株式会社が提供する『Cognigy』は、拡張性の高い対話型AIを設計・開発を短期間で可能とするプラットフォームです。
『Cognigy』のホームページには、テキストのみで構成されたシンプルなメガメニューが採用されています。
「利用シーン」にマウスを乗せてみてください。
▲出典：Cognigy
観光、営業、教育など多くの利用シーンが表示されますよね。
もしこれが通常のドロップダウンメニューだと、縦に長く伸びてしまいます。
ノートパソコンなど画面の縦幅が小さいデバイスでは、見づらくなってしまうかもしれません。
しかし横幅を活かしたメガメニューなら、心配無用。
近年はワイドモニターが普及しているため、理にかなったデザインであると言えます。
そのほか、リンクは整列して並べられているので、きれいですよね。
また、リンク同士の間隔がほどよく空けられており、見やすいです。
このように工夫すれば、テキストだけでも十分見やすいメガメニューを作れるでしょう。
亀田製菓株式会社
▲出典：亀田製菓株式会社
『亀田製菓株式会社』のメガメニューには、企業ロゴと同じ色の装飾が使われており、見やすくて使いやすい仕様になっています。
一度、グローバルナビゲーションの「企業情報」にマウスをのせてみてください。
▲出典：亀田製菓株式会社
ナビゲーションにアンダーバーが付くため、今どれを選択しているかが明確に分かりますよね。
次は、展開されたメガメニューに注目してみましょう。
▲出典：亀田製菓株式会社
「企業情報トップ」のテキストは、リンク先ページが2階層目ということもあり、他より大きいフォントサイズ（文字の大きさ）で表示されています。
「ご挨拶」や「会社概要」など、3階層目のページへのリンクテキストは数が多いものの、アイコン「＞」により独立性が担保されていて見やすいですね。
このようにデザインを工夫すれば、ユーザーにホームページの階層構造をうまく伝えられます。
LINEMO
▲出典：LINEMO
ソフトバンク株式会社が提供するサービス『LINEMO』のホームページは、サイドカラムにナビゲーションが設置されています。
注目したいのは、ナビゲーションのアイコンです。
メガメニューが展開されるリンクには「＋」、そのまま特定のページに遷移するリンクには「＞」のアイコンが設置されています。
▲出典：LINEMO
これなら、メガメニューの有無が明確ですよね。
メガメニューが開くかどうか確認するために、わざわざマウスを乗せて待つ必要がないため、ユーザーにストレスを与える心配がありません。
また、展開後のメガメニューも、リンク同士の関係性が理解しやすいように調整されていますよ。
▲出典：LINEMO
「利用開始までの流れ」などの上階層に対して、「ソフトバンク・ワイモバイルからの乗り換え」のような下階層は、先頭文字が下がっています。
またリンクがない「初期設定」には、アイコン「＞」が付いていません。
これなら、ユーザーが誤ってリンクのない初期設定をクリックするのを軽減できますよね。
たとえユーザーが誤ってクリックしたとしても、それがリンク設置ミスではなく、意図的に設置されていないと判断することが可能です。
利便性が高いメガメニューとして、大いに参考になるでしょう。
Adobe
▲出典：Adobe
さまざまなデザイン編集ソフトを提供する『Adobe（アドビ）』のホームページ。
メガメニューは、オンマウスではなく、クリックで展開する仕様です。
試しに、「クリエイティビティとデザイン」をクリックしてみましょう。
下向きだった「V」のアイコンが、上向きに変わりますよ。
▲出典：Adobe
これなら、どのメニューを展開しているのか、明確に分かりますよね。
次に、メガメニューを見てみましょう。
▲出典：Adobe
「Creative Cloud提供内容」「主な製品」「概要」の下には、仕切り線があるので、それぞれカテゴリタイトルであることが分かりやすいです。
このように、カテゴリごとにリンクがまとまっていれば、初見でも目的のページを探しやすいですよね。
さらに、それぞれのリンクには補足情報があるため、『Adobe』について詳しく知らない方でも、用途にあった製品を選ぶことが可能です。
メガメニューに固有名詞や専門用語を入れる場合は、参考にしてみてはいかがでしょうか。
Garoon
▲出典：Garoon
サイボウズ株式会社のグループウェア『Garoon（ガルーン）』のメガメニューは、ホームページの階層構造をさまざまなデザイン要素で、上手く整えている点が魅力です。
試しに、「機能・サポート」をクリックしてみてください。
▲出典：Garoon
ナビゲーションに青いアンダーバーが付いたり、メガメニューの左側にタイトルが表示されたりするので、「機能・サポート」を選んだことが明確に分かりますよね。
またメガメニュー内のリンクは、フォントのサイズやカラーを差別化することにより、ホームページの階層構造がうまく表現されています。
さらに、それぞれのリンクが整列されているので、見やすいです。
まさにデザインのお手本と言えるメガメニューでしょう。
楽天銀行
▲出典：楽天銀行
楽天銀行のメガメニューは、アイコンでイメージを伝えているのが特徴です。
「商品・サービス」をクリックしてみてください。
▲出典：楽天銀行
「入出金」や「振込・送金」など、カテゴリタイトルにアイコンが付いているため、内容をイメージしやすいですよね。
情報量が多いメガメニューは、テキストだけで構成してしまうと、視認性が悪くなってしまいがち。
しかし、この『楽天銀行』のメガメニューは、アイコンがあることで見やすくなっています。
さらに、グレーの線で行の境目を分けているのもポイントです。
このように、情報を多く掲載する場合は、デザインで工夫するとよいでしょう。
イラスト付きのメガメニュー
次に紹介するのは、イラスト付きのメガメニュー事例です。
メガメニューの中にイラストを掲載することで、遷移先ページやカテゴリーのイメージをうまく伝えられます。
ホームページごとに、イラストの雰囲気が違う点にも注目してください。
PRODUCTS STORE
▲出典：PRODUCTS STORE
『PRODUCTS STORE』は、さまざまな作家が作る皿や湯呑などの器を取り扱うオンラインショップです。
「カテゴリから探す」にマウスを乗せてみましょう。
▲出典：PRODUCTS STORE
イラストにより、一目でどんな商品があるか分かりますよね。
次に「作り手から探す」にマウスを乗せてみてください。
▲出典：PRODUCTS STORE
作家を表現したイラストがじつにユニークです。
作家の個性をうまく表現しているものの、モノクロの線画イラストであるため、統一感がありますよね。
オンラインショップ全体の雰囲気とも合っていて、センスを感じさせます。
このように自社の特徴をイラストでうまく伝えられれば、ユーザーが商品を選びやすくなるでしょう。
Blanket
▲出典：Blanket
『Blanket』は、介護や福祉関連のサービスを提供するホームページです。
まず「SERVICE」をクリックしてみてください。
▲出典：Blanket
各サービスのイメージがイラストで表現されていますよね。
これらは遷移先のページのイラストと合致しており、イメージが統一されています。
試しに、メガメニューの採用・人材育成支援「KAIGO HR」をクリックしてみましょう。
▲出典：Blanket
メガメニューと同じ、二人乗りボートのイラストが表示されました。
これなら、目的のページに正しく遷移したと明確に判断できますよね。
イラストには、ホームページ全体のイメージを統一させるだけでなく、ユーザーの行動をサポートする役割もあると言えるでしょう。
SAISON CARD
▲出典：SAISON CARD
『SAISON CARD』のメガメニューには、ユーザーに寄り添ったイラストが表示されています。
「カスタマーサポート」をクリックしてみましょう。
▲出典：SAISON CARD
それぞれのシーンに応じた人物のイラストが表示されており、直感的に選ぶべき項目が分かりますよね。
カスタマーサポートのページにアクセスするユーザーは、困っているときが多いので、このように親切に案内できるとよいでしょう。
写真付きのメガメニュー
ここでは、写真付きのメガメニューの事例を紹介します。
写真を使えば、会社やサービスのイメージを具体的に伝えることが可能。
ユーザーが各ページに遷移する前から、メガメニュー内で会社やサービスのアピールができるでしょう。
株式会社リブセンス
▲出典：株式会社リブセンス
『株式会社リブセンス』は、人材領域と不動産領域でサービスを展開しています。
たとえば、「リブセンスについて」にマウスを乗せると、3つのリンクが写真とともに表示されます。
▲出典：株式会社リブセンス
メガメニューを見ただけでも、代表者や会社の雰囲気が伝わってきますよね。
ユーザーが写真に興味を持てば、「もっと知りたい」と考えてリンクをクリックするかもしれません。
またナビゲーションのアイコン「V」により、メガメニューの有無が判断できるのもポイント。
デザイン性だけでなく、機能性も優れたメガメニューと言えるでしょう。
ポスタス
▲出典：ポスタス
クラウドPOSレジ『ポスタス』のメガメニューには、業種・業態別の写真が配置されています。
「業種・業態で使う」にマウスを乗せてみましょう。
▲出典：ポスタス
このメガメニューを見ただけで、どんな業種や業態で『ポスタス』が使えるか一目瞭然ですね。
写真があることで、業種や業態がイメージしやすいのはもちろん、『ポスタス』の活用範囲の広さが際立っています。
このように、写真を多く掲載できるのも、メガメニューならではのメリットでしょう。
グローウィン・パートナーズ株式会社
『グローウィン・パートナーズ株式会社』は、ファイナンシャルアドバイザリーやHRコンサルティングなどのサービスを提供する企業です。
ホームページ全体がスタイリッシュで、メガメニューの背景に写真が使用されています。
試しに、「SERVICES」にマウスを乗せてみましょう。
かっこいいアニメーションで、メガメニューが表示されますよ。
4つのサービスカテゴリの背景に写真が使われていますね。
さらに、一番左の「Financial Advisory」にマウスを乗せると、詳細なリンクが表示されます。
センスが光るのはもちろん、機能性もあってよいですね。
このように、スタイリッシュなホームページを作りたい場合は、メガメニューのデザインも工夫してみてはいかがでしょうか。
メガメニューの事例を紹介したギャラリーサイト
「メガメニューの事例をもっと知りたい」という方は、ギャラリーサイトがおすすめです。
ギャラリーサイトなら、ホームページが一覧で表示されるので効率的に探せます。
この記事では、メガメニューのカテゴリがあるギャラリーサイトを紹介しますね。
Parts.
▲出典：Parts.
『Parts.』は、SaaSのサービスサイトやLP（ランディングページ）を中心としたギャラリーサイトです。
サイドカラムにメガメニューのカテゴリが用意されています。
▲出典：Parts.
カワウソ
メガメニューが展開された状態のキャプチャーが並んでいるので、ギャラリーサイト内である程度確認することが可能です。
Web Design Garden
『Web Design Garden』は、Web制作の参考になる優れたWebデザインを集めたギャラリーサイトです。
メガメニューは、「機能・要素」のカテゴリから探せます。
Modulesss…
▲出典：Modulesss…
『Modulesss…』は、Webサイトの図表や見出しなどの「パーツ」を集めたギャラリーサイトです。
メガメニューのカテゴリが用意されています。
▲出典：Modulesss…
メガメニューを設置するときのコツ
最後に、メガメニューを設置するときのコツを2つ解説します。
それぞれ解説します。
メガメニューの有無が分かるようにする
メガメニューは一度に多くの情報を取得できるため、ユーザーにもメリットがあります。
しかし、メガメニューの有無が分かりにくいと、せっかく設置しても使ってもらえないかもしれません。
この記事で紹介した事例のように、ナビゲーションに「V」のアイコンを付けるなどして、メガメニューの有無をユーザーに伝えましょう。
ホームページの階層構造を分かりやすく伝える
メガメニューは、ホームページの階層構造が分かりやすいデザインにしましょう。
広い画面領域を有するメガメニューとはいえ、ただ多くのリンクを並べただけでは、かえって分かりづらいナビゲーションになってしまいます。
この記事で紹介したメガメニュー事例では、以下のような要素でデザインを工夫していましたよね。
- フォントサイズ（例：亀田製菓株式会社）
- フォントカラー（例：Garoon）
- アイコン（例：楽天銀行）
- 仕切り線（例：Adobe）
どのリンクがどのカテゴリに属するものか明確に提示すれば、ユーザーは最短で目的のページにアクセスできるでしょう。
まとめ
この記事では、メガメニューを搭載した企業ホームページ事例12選を紹介しました。
- メガメニューとは、広い画面領域を持つドロップダウンメニューのこと
- メガメニューの有無が分かりやすいように、「V」などのアイコンを付ける
- メガメニューは、ホームページの階層構造が伝わるデザインにする
メガメニューに魅力を感じたら、ぜひ設置を検討してみてください。
それでは、素敵なホームページの完成を願っております。
以上、最後まで読んでいただき、ありがとうございました。
ホームページの開設を検討している方へ
エックスサーバーは、高速かつ高い安定性を誇る「高性能レンタルサーバー」です。
国内シェアNo.1※のレンタルサーバーであり、19万社の導入実績があります。
2024年5月1日12時まで、サーバー利用料金が最大30％オフとなる割引キャンペーンを実施中です！
今なら月額693円～とお得にホームページを開設できます！
.comや.netなど大人気ドメインも永久無料と過去最大級にお得です。
ぜひこのお得な機会にホームページ開設をご検討ください！
※ 2023年10月時点、W3Techs調べ。
法人向けレンタルサーバー「Xserverビジネス」なら、
「ホームページ無料制作サービス」が付いているため、
申し込むだけで2日でホームページが完成します！
Xserverビジネスだと「.com」以外にも「.co.jp」や「jp」などのドメインも無料になります。
当メディア「初心者のための会社ホームページ作り方講座」では、初心者の方にわかりやすく会社のホームページを始められる方法を紹介しています！
これから始める方はこちらのホームページの作り方をぜひご覧ください！
ホームページの始め方・立ち上げに関する、ご質問・ご相談はツイッターDM( @kawauso_xsv )までお気軽にどうぞ！
カワウソ
当メディアはリンクフリーです。貴社のSNSやブログでご紹介いただけると嬉しいです。
