Blog スタッフブログ

こんにちは、WEBデザイナーのそいです。

今やボリュームの大きなサイトには必ずと言っていいほど実装されている「メガメニュー」について、UI・アイデアの参考になるサイトをまとめてみました。

メガメニューって何？という方はこちらをまずご覧ください↓

【ＷEBデザイン】ユーザーを迷わせない、メガメニューを活用したサイト9選

京都観光オフィシャルサイト-京都観光Navi

はじめに「京都観光ナビ」のサイトです。アイコンが効果的に使われた「和」テイストさも感じるシンプルなサイトデザインです。

このサイトでは写真メイン・写真とテキストボタンリンク・ボタンリンクと3つのメガメニューのレイアウトが実装されています。イベント情報ではその季節の行事のイメージ画像を各メニューのボタンに仕立て上げています。

2つめのメガメニューは、写真とテキストボタンリンクの組み合わせです。すっきりとしたUIでわかりやすいですね。

3つめのメガメニューはボタン風のデザインです。余白が十分にとられていて押しやすいです。

このように目的にあったボタンデザインが使い分けられているのが特徴的でした。

京都観光Navi

埼玉県済生会川口総合病院

埼玉県済生会川口総合病院のサイトでは、メガメニューに限らず全体的に「誰もが迷わない設計」でレイアウトされていることが特徴です。

文字が太い・文字が大きい・ボタンデザインをたくさん採用・見るからにボタンとわかるデザインとなっており、病院を利用される方の年齢層を加味したサイト設計となっていますのでぜひご覧ください。

ご利用案内は特にアクセス数が多いと思われるメニューのためか、1つ1つの項目が大きいデザインで作られています。

病院案内については、病院のイメージが伝わるよう写真メインのメニューです。

医療関係者の方へ・地域の皆さんへ、と目的別メニューのレイアウトとなっています。中央のスローガンが上手く活用されていますね。

埼玉県済生会川口総合病院

株式会社オークネット

次に株式会社オークネットの会社です。ベーシックなレイアウトかつシンプルで見やすいサイトです。事業内容をキービジュアルのすぐ下で紹介されていてとてもわかりやすいです。

メニューデザインはテキストリンクのタイプとアイコン付きリストデザインの2パターンです。

テキストリンクのデザインはいたってシンプル。

事業内容は3つのカテゴリに分けられており各事業に統一感のある挿絵が添えられています。

色分けもきれいですね。下層ページもそのテーマカラーにあわせたデザインになっていて見ごたえがあります。

株式会社オークネット

キユーピー商品サイト

最後に、何度か紹介しているキユーピーの商品サイトです。いつもながら安心感・清潔感のあるシンプルなデザインですね。

キユーピーのサイトではそれぞれのカテゴリごとでメニューのデザインやレイアウトすべて変わります。線の細いアイコンがキユーピーらしさを感じますね。

商品情報は商品の画像があしらいとして使われていてかわいいデザインになっています。

体験・エンタメのメニューでは画像やバナー風のデザインになっておりワクワクする仕上がりに。

このように、役割にあわせてメニューの見た目が変えられていて、それぞれが押したくなるデザインになっているので紹介させていただきました。

まとめ

いかがでしょうか。今回は1サイトでメニューごとのデザインが変えられている、アレンジを利かせたメガメニューの厳選サイトを紹介しました。

メガメニューが統一されているサイト、今回のように別のレイアウトが実装されているサイトなど色々なサイトがあります。全体のUIはどういう導線で設計されているのか？コンセプトやターゲットは？など掘り下げて考えてみると、メガメニューのデザインが変えられている理由や根拠がわかるかもしれません。また、スマートフォンでのUIと照らし合わせて見ると様々な発見があるので、ぜひたくさんのメガメニューを調べてみてくださいね。

今回もご一読いただきありがとうございました。