PCサイトの様にナビゲーションメニューを常に表示させておく設計は、画面が狭いスマートフォンには向いていないかもしれません。スマホで閲覧された場合にメニューをどうするかも考える必要があります。
スマートフォンの画面でもユーザーが使いやすいメニュー設計を考えましょう。
スマートフォンのナビゲーションについて
多くのWebサイトのヘッダーにはグローバルナビゲーション、検索バー、ログインへのリンクなど、様々な機能が詰め込まれています。
多機能なヘッダーであればあるほど、そのままスマートフォンで表示させるには無理があります。狭い画面範囲が更に狭くなり、ナビゲーション以外のコンテンツの配置が制限されてしまうからです。
スマートフォンに適したメニュー表示には、どのようなものがあるか見てみましょう。
メニューを格納する
スマートフォン向けのナビゲーションとして、最もよく使われるのが格納型です。
不要なときにはメニューを表示するためのアイコンのみを表示しておいて、タップされて初めてメニューの項目を表示するという方法ですね。
主要な格納型メニューは大きくハンバーガー、スライド、ドロワーの３つに分けられます。
※ただしスライド、ドロワーの区分は厳密ではなく、画面外から出てくるメニューを「スライドメニュー」と総称したり、スライドメニューであっても「右ハンバーガー」と言ったりする場合もあります。
1.ハンバーガーメニュー
ハンバーガーメニューは様々なスマホサイトで採用されている仕組みです。
アイコンを押すと、格納されているメニューが開くタイプですね。
ハンバーガーメニューは沢山のメニューを隠しておき、ユーザーが必要な時にのみ表示させて操作することが出来ます。
こうしたメニュー、もしくはメニューを開くためのアイコンをハンバーガーメニューと呼びます。ハンバーガーメニューの位置は右上に設置されることが多いですが、デバイスの大型化に伴って下部に配置されるケースもあります。
2.スライドメニュー
スライドメニューはボタンをクリックすることで、表示領域外（基本的には横）から出現させるメニューです。
メニュー部分が表示された幅分、元々表示されていた部分も横にスライドします。
3.ドロワーメニュー
スライドメニューがコンテンツを押し出すようにして出てくるのに対して、ドロワーメニューは元々あったコンテンツの上に被さる形（オーバーレイ）で表示されます。
表示項目を絞り、残りを格納
上記のような格納型は、必要時のみ沢山のメニューを表示させることが出来るという利点があります。
しかし、下の階層ページに行くためには、メニューアイコンとメニュー項目、２回のクリックが必要です。
ですので、使い勝手を考慮すると頻繁に使うメニューや重要なコンテンツは、格納してしまわず表示させておく方が良いでしょう。
以下は「youtube（スマホ表示）」のホーム画面です。
右上にはクリックするとアカウントメニューが表示される本人アイコン、ページ下部には頻繁に使用されるであろう「ホーム」や「登録チャンネル」などが常に表示されていますね。この下部ボタンのおかげで、登録しているチャンネルをチェックするときにはいちいちアカウントメニューを開かずとも１タップでページ遷移ができます。
コンテンツ量が多い場合は、このように使用頻度や重要度に合わせて常に表示させておくもの・格納するものを決めておくと使いやすさが向上します。
レイアウトだけ変更
サイトのコンテンツ・ナビゲーションの項目数が少ない場合は、すべてのメニューを露出させるケースもあります。
SKILLHUBの課題で作成したヘアサロン“Bee”のサイトがこちらのパターンです。
グローバルメニューのアイテム数が6つ以内くらいで、誤タップしない間隔が保たれていれば使用に問題はありません。
グローバルメニューを隠さないほうが、サイトの主要コンテンツが分かりやすいというメリットもあります。
数が少ない場合はそのまま利用することも考慮してみましょう。
◆実習：スマホ用ナビゲーションを配置
ワイヤーフレームのスマホ用アートボードにナビゲーションを配置しましょう。
今回は上から開く、ハンバーガーメニューを採用します。
ロゴの横に直線ツールで３本線を入れておきましょう。
こちらも同じく、カテゴリや詳細のアートボードに複製していきます。
メニュー展開図について
格納メニュー等を使用する場合は、ワイヤーフレームもしくは後のデザイン段階でメニューを開いたときのレイアウトも加えることが多いです。
今回の実習/課題ではこの展開図作成は行いません。 タップで展開するメニューとだけわかるように作成して頂ければ大丈夫です。