記事の詳細

こんにちは。今回はスマホのメニューデザインについて紹介します。
よく使われる3つのデザインの特徴等をコンパクトにまとめましたので、迷ったときの参考にどうぞ!
尚、実装方法は今後このページにリンクを貼り付けていきますので、そちらをご確認ください。

はじめに

現在「スマホ メニュー」でよく検索されているのは、下記の通りです。
いずれの場合もボタン等クリックしたときにどのようにメニューが出てくるかの名称になります。

・ドロップダウン(アコーディオン)型
・スライド型
・タブ型

実装中のサイトに適した機能、デザインのものを選んでいきましょう!

階層がわかりやすい!ドロップダウン(アコーディオン)型。

①特徴:各メニューボタンを押したときに、関連するページのメニューが出てくる。

②メリット:メニューが折りたたまれているため、自分に必要な項目だけを見ることができます。階層構造もわかりやすいですね。また、表示されるメニューの高さによっては、今見ている内容が隠れることもありません。

③デメリット:階層構造が複雑、もしくはページ数が多い場合、メニューが長くなるためスクロールする手間がでてきます。このため大規模なサイトには向かないでしょう。

素早くシンプルに!スライド型。

①特徴:右上のボタンを押すなどのアクション後、主に左側からメニューが出てくる。

②メリット:メニューの出てくる速度が早いため、ユーザーのストレス軽減になります。ドロップダウンメニューと同様に、階層構造をつけることで分かりやすいデザインになりますね。

③デメリット:現在見ているページに重なるようにメニューが出るため、内容を確認しながら項目を選ぶことができません。こちらもメニュー数が多くなるとスクロールする手間がでてきます。

カテゴリ別に一目瞭然!タブ型。

①特徴:各タブを押したときに、関連する内容を一覧で見ることができる。

②メリット:ドロップダウン型やスライド型に比べて、カテゴリ分けがされているためメニューボタンを押すアクションが少なめです。また、全体を一度に見ることができるため、内容を把握しやすいでしょう。

③デメリット:メニュー内のタイトルが長い、メニューの数が多いときはサイズ調整や配置の工夫が必要になります。文字の情報量が多いときには向かないでしょう。

まとめ

この他にも、操作が完了するまでほかの操作ができない「モーダルウィンドウ型」や、
スマホ用にメニューの幅を落とした「ヘッダー型」など、様々な表現方法があります。
階層構造や実装中のサイトデザインとの兼ね合いを考えて、その都度適切なメニューデザインを選んでいきましょう!

 

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

The following two tabs change content below.
小林紗絵

小林紗絵

Web制作担当をしています。Adobeソフトを使用したデザインやコーディングを中心にサイト制作に携わっております。今後はWordpressのテーマ作成やマーケティングなど少しずつできることを増やしていきたいと思います!

ほかの投稿も読んでみませんか?

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

AD

ページ上部へ戻る