Smartphone スマホ

 
スマホデザイン・UI

どうする?スマホサイトのナビメニュー。まずは覚えたい「基本のキ!」

・スマホサイトのナビメニューはWEBデザイナーの悩みどころ。
・現在、主流と言われる基本のナビメニューをまず身につけよう。
・ユーザーの途中離脱を防ぐために!サイトに合わせたセレクトが大事。

スマホサイトの構成・レイアウトを考えるとき、一番頭を悩ませるのが、ナビゲーションメニューの配置と見せ方ですね。

プライマリー、グローバル、サイド、フッターナビゲーションと、PCサイトでは様々なところに、ナビメニューが設置されています。

現状は、まだまだPCサイトありきでスマホサイトを作るのが主流。

どうしてもPCサイトを踏襲しなくてはならないため、PCの至るところに配置されたナビメニューをどう扱えばいいか? 悩みどころです……。

そこで今回は、よく使われているナビメニューをまとめてみました。

【関連ページ】レスポンシブデザインのスマホサイトを使いやすいUIに

スマホサイト主流ナビメニュー5選!

1.プルダウン(ドロップダウン)形式


メニューボタンを押したら、隠れていたメニューがずらっと下に並んで出てくるタイプです。正式名称は「プルダウンメニュー」「ドロップダウンメニュー」と呼ばれます。

PCのナビゲーションメニューの代表格といえば、グローバルメニューですが、PCでは水平に並んでいる彼らを、メニューボタンの中に格納し、縦に並びかえるだけ。レスポンシブサイトでもよく見られますね。シンプルですが、使いやすく、実装も楽です。

メニューの項目が、比較的少ない場合にはおすすめです!

メニューが多く、縦に長くなりすぎてしまう場合は、アコーディオンでサブカテゴリを隠すこともできますが、階層が複雑になると使いづらいメニューとなってしまうため、注意が必要です。

ちなみに、多くのメニューを複数の階層に分け、その中のものを選んでもらうメニューは「ドリルダウン」と呼びます。

2.ヘッダーメニュー&タブバーメニュー


アプリや、ECサイトなどで見かけるタイプ。カートボタンやお気に入り追加ボタンなど、ページ上部(ヘッダーメニュー)や下部(タブバーメニュー)に固定して配置したい場合に有効です。

デメリットは、ただでさえ狭いスマホ画面の一部を、常に占領してしまうこと。そして固定位置のため、特に下部に配置した場合、下にスクロールするときに邪魔だったり、誤って押してしまったりすることでしょうか。

また、タブバー形式を採用する場合は、どのページでもなるべく同じメニューを配置しないと、ユーザーが混乱してしまう可能性があります。「いつもここにあるよ」というスタンスを貫くことが大切ですね。

3.スライドメニュー


こちらも典型的なスマホならではのメニュー。

1.と同じく、3本バーのあのアイコンを押すと、隠れていたメニューが左右どちらかに出現するタイプです。アプリでもよく見られますね。

メニューの数が多いときに重宝しますが、何でもかんでもここに入れちゃえ! とならないようにしたいものです。

注意すべきは、OSアップデートのときにバグが発生しがちだということ。検証は慎重にいたしましょう。

一般的に、「にゅるっと出てくるやつ」と言われれば、大抵このナビメニューで間違いないでしょう。「サイドメニュー」「ドロワーメニュー」「スライドメニュー」などと呼ばれます。

4.モーダルウィンドウ


メニューボタンを押すと、メニューがオーバーレイします。
画面いっぱいをメニューとして使うことができるので、レイアウトは無限大!

期間限定のカテゴリや、他サイトにはない独自カテゴリがあるなど、ユーザーにメニューをじっくり選んでもらいたいサイトには、相性のいいナビメニューです。

ただ、コンテンツが一時的に見えなくなるため、頻繁にメニューを使うサイトの場合は、ユーザーがイライラしてしまうかもしれません。

元々はポップアップで表示させる仕組みなので、実装のときは画面からはみ出す、スクロールができないという問題がないか、そして閉じるボタンの設置も忘れないように、気を付けたいですね。。

5.スプリングボード


アイコンが整列している、スプリングボード形式。パッと目に飛び込んでくるので、使いやすく、ユーザーが迷わずにすみます。

図のように、アイコンだけでカテゴリを認識できないようなことがないように、文字とセットで使う方が親切ですね。
でも、カテゴリ名が長すぎる場合はちょっと苦労します……。

まとめ・ナビメニューが「スマホサイトの使いやすさ」を左右する!

ナビメニューの主流や定番のいいところは、「すぐにメニューボタンだとわかる」「ユーザーが使い方を知っている」ということだと思います。定番は定番になるだけの理由があるのですね。
これまで紹介したナビメニュー以外にも、派生バージョンや流行のものが、続々と生まれています。しかし、重要なのは、どんなに画面がかっこよく見えても、使いづらければ、ユーザーの途中離脱率も高くなってしまうことです。

【関連ページ】レスポンシブデザインのスマホサイトを使いやすいUIに

スマホサイトのナビメニューに頭を悩ませたら、定番のよさ、流行のナビメニューのメリットも含めて、ベストなチョイスをしたいものです。
そしてサイトの目的に合った、より「ユーザーが使いやすい」サイトを目指してくださいね!

この記事を書いた人


モバイルラボ 編集部
ヨコハマ・モバイルラボとは? モバイルならではの表現ってなんだろう? 一瞬のひらめきや感動は手のひらから始まっています。 新しいクリエイティブのカタチをここから探してみましょう。
タグ

記事mobifyロゴ
Mobify(モビファイ)とは

Googleが認定しているマルチスクリーン対応のための最適化サービス。
デバイスに応じ、専用にデザインされたサイトを表示することができます。
ページの表示を高速化させる仕組みも持ち合せており、ユーザーの離脱を防ぐことが可能です。

▸Mobify(モビファイ)についてさらに詳しく

 最新記事