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

はじめに

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

まとめ

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