ナビゲーションとメニューの違いについて学習します。
ナビゲーションのレイアウトパターンや、メニューの種類・特徴について、理解することが目的です。
ナビゲーションのレイアウトパターン
ナビゲーションのレイアウトパターンは、主にサイトのグローバルナビゲーションを配置するパターンです。
このパターンの、意味や特徴を理解してデザインすることで、使いやすいサイトを作成することができます。
右サイドメニュー型のナビゲーション
メニュー（操作する場所）が右側にあると、進む感覚が働き、無意識に次の画面へ進みやすくなります。
画面右側にナビゲーションを配置するレイアウトパターンです。
メニューに表示された順番で選びやすく、サイトにある情報を理解してもらうのに役立ちます。
スマートフォンの場合は、スワイプ操作などで右側から表示されるメニューになります。
左サイドメニュー型のナビゲーション
メニュー（操作する場所）が左側にあると、戻る感覚が働き、無意識に他の画面へ移動しやすくなります。
画面左側にナビゲーションを配置するレイアウトパターンです。
メニューに表示された順番で見つけやすく、自由に選びやすくなります。
目的のページを探しやすくなるので、多くのサイトで採用されるパターンの一つです。
スマートフォンの場合は、スワイプ操作などで左側から表示されるメニューになります。
上部メニュー型のナビゲーション
メニュー（操作する場所）が上部にあると、戻る感覚が働き、無意識に他の画面へ移動しやすくなります。
画面上部にナビゲーションを配置するレイアウトパターンです。
メニューに表示された順番で見つけやすく、自由に選びやすくなります。
左サイドメニュー型と特徴は同じです。
表示できるメニューの項目数に限界があるのが大きな違いです。
スマートフォンの場合は、上部にボタンを2列表示するか、スワイプ操作などで、上または左側から表示されるメニューになります。
下部メニュー型のナビゲーション
メニュー（操作する場所）が下部にあると、進む感覚が働き、無意識に次の画面へ進みやすくなります。
画面下部にナビゲーションを配置するレイアウトパターンです。
メニューに表示された順番で選びやすく、サイトにある情報を理解してもらうのに役立ちます。
右サイドメニュー型と特徴は同じです。
スマートフォンの場合は、下部にボタンを2列表示、またはアイコン等を使ったボタンで表示するか、スワイプ操作などで下または右側から表示されるメニューになります。
逆L字メニュー型のナビゲーション
目的のページを探しやすく、移動しやすくするための工夫が最も難しいナビゲーションです。
上部＋左または右サイドメニュー、下部＋左または右サイドメニューのパターンがあります。
ナビゲーションが２つになり、メインのナビゲーションを上部または左サイドにするか、下部または右サイドにするかで、特徴が変わります。
ページ数の多い大規模なサイトで採用されますが、ナビゲーション設計（chap20-1）がうまくできないと、使いにくいサイトになってしまいます。
スマートフォンの場合は、下部にアイコン等を使ったボタンで固定表示し、スワイプ操作などで表示されるメニューの組み合わせなど、工夫が必要になります。
ナビゲーションの場所とメニューの種類
Chap4-2で紹介した、主なナビゲーションの種類と、一般的な場所について理解しておきましょう。
左の図は、すべてのナビゲーションを配置した逆L字メニュー型のレイアウトパターンです。
「コンテンツ」内に表示されたボタンや画像、テキストリンクなどは、次に紹介する『メニュー』になるため、「コンテンツ」はナビゲーションエリアになります。
スマートフォンの場合、このナビゲーションの場所が複雑になってきますが、ナビゲーションの特徴とメニューの種類の違いが分かれば、特に難しくないと思います。
ヘッダーメニュー・フッターメニュー
ヘッダーナビゲーションに表示される、テキストリンクやボタンなどで表示するメニューです。
アイコンを使ったり、ボタンの色や大きさ・形を変えることで、訴求力や誘目性を高めることができます。
メインメニュー
グローバルナビゲーションに表示される一般的なメインメニューは、テキストリンクが主流でアイコン付きやボタンの形状をしたものもあります。
タブメニュー
メインメニューやコンテンツ内メニューでも使われる、タブ機能または形状を持ち、画面遷移せずに表示を切り替えることができるメニュー機能です。
タブメニューの項目をカテゴリで分類し、そのカテゴリ内の他のページへ案内するリンクを共通する場所へ表示するのが特徴です。
その場で表示を切り替えることができるので、ページ数が多いサイトで良く使われます。
タブを選択したときに表示される場所は、他のタブと共通しているのが特徴。
ドロップダウンメニューとの違いは、この表示エリアの違いと言える。
メインメニューで使う場合、選んだメニュー項目の説明を表示するエリアとして使うこともある。
ドロップダウンメニュー / プルダウンメニュー
ドロップダウンメニューは、プルダウンメニューとも呼ばれます。
ページ数の多いサイトのメインメニューで良く使われるメニュー機能で、タブメニューとよく似ています。
ドロップダウンメニューは、カテゴリで分類されたメニュー項目部分だけ、そのカテゴリ内の他のページへ案内するリンクを表示することができます。
マウスカーソルを重ねると表示する「ホバー型」とクリックして表示する「クリック型」がありますが、スマートフォンでは「ホバー型」が使えないので、注意が必要です。
ドロワーメニュー
スマートフォンでよく利用されるメニュー機能で、画面外から画面内へスライドして表示する「スライドメニュー」や、画面の最前面に表示する「モーダルウィンドウメニュー」のタイプがあります。
「スライドメニュー」は、スワイプ操作によってメニューが引き出しのように表示されることから、ドロワー（引き出し）と呼ばれています。ただ最近では、スワイプ操作がブラウザの「戻る・進む」の操作で認知されているため、３本線で表示される「ハンバーガーボタン」やその他のボタンを使って表示することが多くなりました。
スマートフォンだけではなく、パソコンで表示する場合もドロワーメニューを使ったデザインも増えてきていますが、使いやすさに配慮しないと、ただの手抜きデザインになりやすいので注意が必要です。
メニューバナー
ダイレクトナビゲーションや、コンテンツ内で表示するメニューの一つで、画像（写真）を使った大きめのボタンが特徴です。
カルーセルパネル
画像がスライド表示されるメニュー機能で、トップページやコンテンツ内で多くみられます。
スライドショーとも呼ばれますが、ナビゲーションとして利用するタイプと、コンテンツとして見せるために利用するタイプに分けられます。
ローカルメニュー / サブメニュー
サブナビゲーションで表示される、テキストリンクのメニューです。
「ローカルメニュー」は、カテゴリ内の下層ページへ案内するメニューで、メインメニューのタブメニュー・ドロップダウンメニューでも表示されます。
「サブメニュー」は、逆L字メニュー型レイアウトのサブナビゲーションで表示されるメニューです。
アコーディオンメニュー / ドリルダウン
開閉式のメニュー機能で、カテゴリごとの下層ページへ案内することができます。
スマートフォンでは、ドロップダウンメニューの代わりに利用することで、使いやすいナビゲーションにすることができます。
コンテンツ内メニュー
主に、トップページやカテゴリトップページで表示されるメニューで、コンテンツから該当するページへ案内するために用意した、テキストリンクや画像リンクのことを指します。
パンくずメニュー / ブレッドクラム / トピックパス
コンテンツの上部または下部に表示されるテキストリンクのメニューで、ページの階層ごとに区切られたメニューです。
現在見ているページの位置関係が分かりやすく、他のページへの遷移もしやすくなります。
階層が深く、ページ数の多いサイトや、特定のカテゴリ内のページで利用すると、使いやすいナビゲーションになります。