モバイルWebのUIデザインことはじめ : 第3回 レイアウトのこと 〜モバイルWebのナビゲーションパターン
前回に引き続きレイアウトの話題です。今回はナビゲーションのパターンを扱います。
モバイル向けの省スペースなナビゲーションは、大きく４つの基本パターンに集約できます。各パターンはそれぞれ２つのタイプに分けられます。計８つのパターンから、ユーザーがどのようにコンテンツをたどるのか？を想定しながら、コンテンツが提供する情報に適したタイプを選びましょう。
では、それぞれのナビゲーションパターンの特徴と、メリット、デメリットをみていきます。また、どのようなコンテンツに適したパターンなのかも適宜説明します。
パターン1：縦方向のリスト
リンク先を縦に並べたシンプルなナビゲーションです。２つのタイプに分かれます。
a）常時表示タイプ
常にリストを一覧表示します。 ECサイトのように、おおよその目的は決まっていながらも、具体的に欲しいモノはまだ検討の余地あり。といった心境のユーザーに合った構造です。
メリット
ユーザーはメニューに含まれる選択肢をすぐに確認できるため、必要な項目を探す心理的なコストが低いデザインです。
デメリット
表示に場所を取ります。リストが６つ程度あると、標準的な解像度のモバイルでは画面の半分以上をナビゲーションが占めるでしょう。このパターンを使うなら、リストの数を制限して長いスクロールが発生することを防ぐ工夫が必要です。
b）拡張するタイプ
リストをタップすると、さらに子のリストが開くタイプです。サブカテゴリを持つリストナビゲーションの配置スペースを少なくできます。通常、コンテンツ領域の下部（フッターの上など）に置きます。
メリット
たくさんのリンク先をすっきりと、コンパクトに整理して提供できます。その結果、画面の縦スクロール距離が減ったり、コンテンツを表示するスペースが広がります。
デメリット
タップしない限り選択肢が確認できないことから目的の情報を見つけるための操作コストがややかかる点です。モバイルの場合「隠れているメニュー」はどうしてもタップ率が下がります。採用にあたってはユーザーが強い意志を持ってタップすることが前提のリンク先であるかをまず確認しましょう。
パターン2：横方向のリスト
PC用ウェブサイトにある、いわゆる「ナビゲーションバー」のモバイル版です。表示幅の狭いデバイスに対応させるためのパターンです。
a）単純化するタイプ
PC向けではアイコンに文字をそえたナビゲーションバーとして提供し、モバイルの表示サイズでは文字を隠す処理をしたタイプです。SNSへのリンク先などアイコンで内容を示しやすい場合に使います。
メリット
最も場所を取らないタイプなのでヘッダー部分にナビゲーションを配置できます。ファーストビューに収まるため、ユーザーの目につきやすいです。
デメリット
せいぜい４つ程度のリンク先しか許容できません。リストの数を厳選する必要があります。
b）スライドするナビゲーションバー
スクロール操作できる横方向のナビゲーションバーです。画面に入りきらない部分を横スライドで移動させる機能を付けます。別カテゴリへの導線よりも「パン屑リスト」のようにサイト構造をさかのぼる手段として提供すると利用率が上がります。
メリット
ファーストビューのコンテンツ表示領域を阻害しません。６つから７つ程度の選択肢の多い場合でもモバイル用に最適化できます。
デメリット
スクロール機能に気がつかないユーザーが出る可能性があります。横方向のスクロールは、縦方向に比べて操作コストが僅かながら高い傾向にあります。なんらかの操作ヒントがあると良いでしょう。
パターン3：縦方向のドロワー
ドロワーは、ナビゲーションをすべて「引き出し」に格納するタイプです。あるマークを押すと隠れていたリストが引き出されます。ドロワーはナビゲーションがさほど重要でなく、ユーザーは個々の記事に検索を使って直接参照することが予測されるサイトに合っています。
a）プルダウンできるタイプ
コンテンツの上にリストが覆いかぶさりながら縦に開くタイプです。
メリット
閉じる操作のあと、下のコンテンツがすぐに確認できます。時間にすると1秒以下のコストではありますが、閉じたり開いたりする操作コストが低くなります。
デメリット
スクロール操作でリストが閉じてしまう可能性があるためファーストビューに収まるだけの選択肢しか扱えません。せいぜいリスト３つ程度に制限されます。
b）スライドするタイプ
コンテンツを押し広げながら縦に開くタイプです。
メリット
再度ドロワーボタンをタップするまで開いたままになることから誤作動がなく、表示高さの最大を気にしないでリストを置けます。
デメリット
あまり長いリストを表示すると、ユーザーが再度開くことに心理的な負担を感じやすいタイプです。
パターン4：横方向のドロワー
ドロワーボタンのタップで画面を横スライドしてリストを提供します。
a）押し広がるタイプ
モバイルアプリのUIのようにボタンタップでリスト格納画面が横方向に押し広がって現れるタイプです。
メリット
リスト領域そのものを縦スクロールさせられるため、表示高さに制限がなく拡張性が高いナビゲーションになります。
デメリット
リスト量が多い場合、下部の選択肢のタップ率が大幅に下がる可能性があります。
b）サブナビゲーションを持つタイプ
限りなく利用できる高さ領域を活用したタイプです。
メリット
PC向けサイトの複雑なリンク構造をそのままモバイルコンテンツでも活用できます。もともとPC向けに開発したコンテンツをモバイル用に形だけ変更したい時に便利です。
デメリット
複雑なリンク構造を深堀りして閲覧するという使い方をモバイルユーザーがあまりしないことから、リンクはあっても全体的にタップ率が低い結果になりやすいです。