Smartphone スマホ

 
スマホデザイン・UI

これだけ覚えておけばOK!? スマホサイトのナビゲーションメニューまとめ

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

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

現状はまだまだPCサイトありきでスマホサイトを作るのが主流。どうしてもPCサイトを踏襲しなくてはならないため、PCの至るところに配置されたナビゲーションの扱いに困る毎日です。

ということで今回は、よく使うナビゲーションメニューをまとめてみました。

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

スマホサイトの主流なメニューあれこれ

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

1

「メニューボタンを押したらメニューがベロンと出てくるやつ」などと言われがちですが、正式名称は「プルダウンメニュー」「ドロップダウンメニュー」と呼ばれます。

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

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

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

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

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

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

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

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

3.スライドメニュー

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

メニューの数が多いときに重宝しますが、何でもかんでもここに入れちゃえばいいや、ということになってしまいがちなので、その点は注意が必要です。そして、OSアップデートのときにバグが発生しがちなのがコレ。検証は慎重にお願いします。

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

4.モーダルウィンドウ

3
メニューボタンを押すと、メニューがオーバーレイします。画面いっぱいをメニューとして使うことができるので、レイアウトは無限大! 変わりダネのカテゴリがあるような、ユーザーにメニューをじっくり選んでもらいたいサイト等にはおすすめです。

ただ、コンテンツが一時的に見えない状態になるため、頻繁にメニューを使うようなサイトだと邪魔に思われてしまうかも。元々はポップアップで表示させる仕組みのため、実装のときは画面からはみ出てしまったり、スクロールが出来ないなどの問題がないか、閉じるボタンの設置…などにも気をつけてください。

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

5.スプリングボード

5

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

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

スマホサイトの使いやすさを左右するナビゲーションメニュー

上記で紹介した以外にも、派生バージョンや流行のものがあったりしますが、かっこよくてもユーザーが使いづらいと意味がありません。

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

「直感的に分かる」というのは「ユーザーが使い方を知っているか」ということじゃないかな、と思っています。定番は定番になるだけの理由があるので、スマホサイトのメニューに頭を悩ませたら、他のサイトも参考にしつつ、使いやすいメニューを作ってくださいね!

この記事を書いた人


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

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

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

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

 最新記事