ヨコハマとともに生きるクリエイティブ研究サイト
スマホサイトの構成・レイアウトを考えるときに一番頭を悩ませるのが、ナビゲーションメニューの配置＆見せ方です。
プライマリー、グローバル、サイド、フッターナビゲーションと、PCサイトでは様々なところに、ナビゲーションが設置されています。
現状はまだまだPCサイトありきでスマホサイトを作るのが主流。どうしてもPCサイトを踏襲しなくてはならないため、PCの至るところに配置されたナビゲーションの扱いに困る毎日です。
ということで今回は、よく使うナビゲーションメニューをまとめてみました。
「メニューボタンを押したらメニューがベロンと出てくるやつ」などと言われがちですが、正式名称は「プルダウンメニュー」「ドロップダウンメニュー」と呼ばれます。
ナビゲーションメニューの代表格といえばグローバルメニュー。
PCで水平に並んでいる彼らを、メニューボタンの中に格納し、縦に並びかえるだけ。レスポンシブサイトでもよく見られますね。シンプルですが、使いやすく、実装も楽です。メニューの項目が比較的少ない場合におすすめ！
縦に長くなりすぎてしまう場合はアコーディオンでサブカテゴリを隠してしまうこともできますが、階層が複雑になると使いづらいメニューとなってしまうため、注意が必要です。
ちなみにそのようにメニューを複数の階層に分け、その中のものを選んでもらうメニューは「ドリルダウン」と呼ぶそうです。
アプリや、ECサイトなどで見かけるタイプ。カートボタンやお気に入り追加ボタンなど、ページ上部（ヘッダーメニュー）や下部（タブバーメニュー）に固定して配置したいメニューがある場合に有効です。
デメリットは、ただでさえ狭いスマホ画面の一部を常に占領してしまうことや、固定位置のため特に下部に配置した場合、下にスクロールするときに邪魔だったり、誤って押してしまう可能性もあることでしょうか。
また、タブバー形式を採用する場合は、どのページでもなるべく同じメニューを配置しないと、ユーザーが混乱してしまう可能性があります。「いつもここにいるよ」というスタンスを貫き通してほしいです。
こちらも典型的なスマホならではのメニュー。1.と同じく、3本バーのあのアイコンを押すと、隠れていたメニューが左右どちらかから出現するタイプです。アプリでもよく見られますね。
メニューの数が多いときに重宝しますが、何でもかんでもここに入れちゃえばいいや、ということになってしまいがちなので、その点は注意が必要です。そして、OSアップデートのときにバグが発生しがちなのがコレ。検証は慎重にお願いします。
「にゅるっと出てくるやつ」と言われれば大抵このことで間違いないですが、「サイドメニュー」「ドロワーメニュー」「スライドメニュー」などと呼ばれます。
メニューボタンを押すと、メニューがオーバーレイします。画面いっぱいをメニューとして使うことができるので、レイアウトは無限大！ 変わりダネのカテゴリがあるような、ユーザーにメニューをじっくり選んでもらいたいサイト等にはおすすめです。
ただ、コンテンツが一時的に見えない状態になるため、頻繁にメニューを使うようなサイトだと邪魔に思われてしまうかも。元々はポップアップで表示させる仕組みのため、実装のときは画面からはみ出てしまったり、スクロールが出来ないなどの問題がないか、閉じるボタンの設置…などにも気をつけてください。
意外と使いやすいスプリングボード形式。アイコンが整列しているタイプです。パッと目に飛び込んでくるので、ユーザーが迷わずにすみます。
図のように、アイコンだけでカテゴリを認識できないようなことがないように、文字とセットで使う方が親切ですが、カテゴリ名が長すぎる場合はちょっと苦労します…。
上記で紹介した以外にも、派生バージョンや流行のものがあったりしますが、かっこよくてもユーザーが使いづらいと意味がありません。
「直感的に分かる」というのは「ユーザーが使い方を知っているか」ということじゃないかな、と思っています。定番は定番になるだけの理由があるので、スマホサイトのメニューに頭を悩ませたら、他のサイトも参考にしつつ、使いやすいメニューを作ってくださいね！
モバイルラボ 編集部
ヨコハマ・モバイルラボとは？
モバイルならではの表現ってなんだろう？
一瞬のひらめきや感動は手のひらから始まっています。
新しいクリエイティブのカタチをここから探してみましょう。 
Mobify（モビファイ）とは
Googleが認定しているマルチスクリーン対応のための最適化サービス。
デバイスに応じ、専用にデザインされたサイトを表示することができます。
ページの表示を高速化させる仕組みも持ち合せており、ユーザーの離脱を防ぐことが可能です。
