様々なメニューから見るUI
こんにちは。コモテック制作チーム デザイナーです。
近年、サイトはより身近な存在で、表現手法も自由になってきています。ユーザーが使いやすく、興味を引くサイトのためには、メニューの創意工夫は必要不可欠です。
今回は、特徴的なメニューがあるサイトをいくつかピックアップしてみました。どのような工夫がされているかを見ていきましょう。
こちらは、グローバルナビゲーションをホバーすると下層ページメニューを表示する「メガメニュー」と呼ばれるメニューです。
下層ページが多い大規模サイト等でも、目的のページにたどり着きやすくなっています。アイコンや画像にて区分けをしているサイトもありますが、こちらはサイトテイストに合わせて非常にシンプルに作られています。
・「Benesse（よく生きる）」一人ひとりのBenesseを支援しサステナブルな社会の実現をめざして
https://www.benesse.co.jp/brand/
こちらは、近年よく見かけるハンバーガーメニューの中身になりますが、ただページ名を並べるだけでなく、見せたい記事やカテゴリ分けの入口、バナーなど、多くの項目が並んでいます。
項目は多いですが、メニューはスクロールするようになっているので、余白をもたせて見やすくなっています。また、ユーザーを記事へ誘導させやすいほか、カテゴリごとにまとめているので、一目で目的や興味のあるページに移動しやすくなっています。
・つつうらうら
https://tsutsuuraura.jp
こちらもハンバーガーメニューの中身になります。右にページ名、左に画像という構造です。ページ名をホバーすると画像が切り替わり、下層ページのコンテンツのイメージが沸きやすくなっています。また、ユーザーを視覚的に興味をひかせるようになっています。ビジュアルメインのサイトでよく見かける構造です。
・東洋精器工業株式会社
https://toyoseiki-recruit.jp
こちらもハンバーガーメニューの中身になります。「〇〇を知る」等で、大項目名でシンプルにカテゴリ分けされており、クリックすると関連ページや下層ページがアコーディオンで出てくる仕様になっています。コンテンツが多いとどうしてもごちゃついてしまいますが、こうした手法も活用できそうです。
・clasico
https://www.clasico-nomura.jp
こちらもハンバーガーメニューの中身になります。ダイナミックに背景に画像を配置し、インパクトのあるメニューとなっています。少し変わった印象をもたせたい場合や、ビジュアルメインのサイトに合いそうなメニューです。
まとめ
サイトごとに様々なメニューがありましたが、なんでも最新のものに当てはめるのではなく、サイトの特性や規模に合わせたメニューになっています。そのサイトでの最も適切なメニュー設計が、使いやすさに繋がってくるということが分かりました。メニューまわりの設計も考えながら、ユーザーにやさしいサイトを目指していきたいですね！