スマホサイトの作成においてワイヤーを引く際に、まず悩むのが「メニューをどうするか？」ということ。
サイトの印象を大きく左右するその「メニュー」について、それぞれどういったことを考え、適切なメニューのタイプを決めれば良いのか？
そのメリットやデメリットについて考えてみたいと思います。
2015年8月現在で見られるスマホサイトでよく見られるタイプを7つに厳選してみました。
- ドロップダウンメニュー
- スライドメニュー
- ヘッダーメニュー
- モーダルウィンドウメニュー
- タブメニュー
- スプリングボードメニュー
- ドリルダウンメニュー
1.ドロップダウンメニュー
現在最も採用されているのがこのタイプです。左上や右上に「3連ドット」のマークをよく見かけると思いますが、いつのまにかこのマークが「メニュー」であるということが、当たり前のように認知されているのではないでしょうか？
特徴
メニューをタップすることでコンテンツが展開されます。「▲マーク」や「三連ドット」、またはテキストで「menu」と表記されることが多い傾向にあります。
メリット
メニューの数に依存しにくく利用しやすい。
デメリット
メニュー自体が比較的“シンプルなマーク”や“テキスト”のみになってしまうので、それぞれのメニューコンテンツの内容が予測しにくい。
2.スライドメニュー
【1】のドロップダウンメニューと通常の見た目は似ていますが、タップした後の動きが「縦や横へのスライド形式」になります。
星のや軽井沢 HOSHINOYA Karuizawa | 温泉旅館 【公式】
特徴
一般的には「左」もしくは「右」からのスライドが多く見られます。上からずり落ちるようなスライドもたまに見かけます。
メリット
画面設計がシンプルになるので、縦に長いエリアにメニューコンテンツを配置することができます。
デメリット
メニュー数が少ないコンテンツの場合、メニューエリア下部に空白が出来てしまう可能性があります。
3.ヘッダーメニュー
PCサイトで一番多く見られる形状で、横一列のページ上部に配置され、ひと目でであることがわかります。
Taste the Difference | TULLY’S COFFEE
特徴
ひと目でメニューであるという見やすさがあります。また、アイコンを配置することでさらにビジュアルでコンテンツの内容まで予測ができるという特徴があります。
メリット
メニュー数が少ない場合は、画面利用領域も少ないため、スッキリとしたビジュアルでわかりやすさを兼ね備えることができます。
デメリット
メニュー数が多い場合、画面いっぱいにメニューが広がってしまいメインコンテンツの領域を犯してしまう可能性があります。
4.モーダルウィンドウメニュー
メニューをタップすることで、画面の最前面いっぱいに新しいメニュー用のウィンドウが表示されます。
特徴
よく使われるのは「警告を表示する場合」や、必ず選択しなければならないような「年齢認証」などを聞かれるような際に、よく利用されます。
メリット
メニュー数が少ない場合は、画面利用領域も少ないため、スッキリとしたビジュアルでわかりやすく表示することができます。
デメリット
メニュー数が多い場合、画面いっぱいにメニューが広がってしまいメインコンテンツの領域を犯してしまう可能性があります。
5.タブメニュー
ページ遷移をしない状況で、複数のコンテンツを切り替えて表示することができます。
特徴
メニュー数が少なくてシンプルなサイト構成のサイトに向いています。
メリット
コンテンツ切り替えの容易さと、一覧で確認できる視認性が良い。
デメリット
メニュー項目数が多くなるとタブ自体が小さくなってしまうので、メニューボタンを押しにくくなってしまう恐れがあります。
6.スプリングボードメニュー
グリッドのように大きめのアイコンボタンを配置します。
特徴
アイコンのようにメニューを配置することができ、サイト全体のイメージをメニューにおいても保つことができます。
メリット
各メニューが同程度の利用頻度であれば、色々な目的をもったユーザごとに目的のコンテンツを探しやすくなります。
デメリット
サイトを利用する目的が少ないユーザや、求めているコンテンツがあまりにも少ない場合は逆にアイコン形式のボタンメニューがかえって邪魔になってしまう可能性があります。
7.ドリルダウンメニュー
不動産サイトによく見られるメニュー形式で、階層が深く、選択肢が多い場合に適しています。
特徴
多数の選択肢から、目的のコンテンツを的確に選択していき確かな情報を受け取りたい場合に便利な形式です。
メリット
ユーザに対して、適切な情報に確実に辿り着かせたい場合に間違いが少ないです。
デメリット
サイト自体の情報量が少ない場合、必要以上にタップ数が多くなってしまい煩わしさを感じてしまう可能性がある。
以上、7つのタイプのメニューを見てきましたが、どれも頻繁に採用されているかと思います。
制作するサイトの内容や構成によって、それぞれ特徴のあるメニューになります。
見た目のデザイン性という観点からだけではなく、ユーザにとってどれが使い勝手が良いのか？目的を達成するためにはどのタイプが適切なのか？を踏まえて、決定していくのが正しいと思います。
ワイヤーを引く段階で構成を練る際に今一度確認してみてください。