1.グローバルナビゲーション
Webサイトやアプリ全体を横断して移動、利用してもらうためのナビゲーション。コンテンツを大きく分類したカテゴリで構成され、どのページに行っても同じ構成で同じ位置に表示される。全体の情報区分や商品カテゴリーによるパターンやユーザーのアクション、機能中心のパターンなどがあります。
iOSアプリにおいて画面下部に固定配置される「タブバー」やMaterial Designにおける「Bottom Navigation」もこれに相当します。
Apple（日本） — https://www.apple.com/jp/
Appleのサイトでは、Mac, iPad, iPhoneなど商品のカテゴリ毎のグローバルナビゲーションが設置されています。
Google Playアプリ（Android）
Google Playアプリでは、Material DesignのBottom Navigationが採用され、画面下部から各カテゴリ間を移動できるようになっています。
2.ローカルナビゲーション
グローバルナビゲーションの各区分以下でサブカテゴリー間を移動してもらうためのナビゲーション。運用時に大きな数や構成の変化の少ないグローバルナビゲーションに比べて、ローカルナビゲーションはコンテンツの充実に伴って項目の追加が想定されるため、対応可能なデザイン、配置が重要になります。
PILOT — https://www.pilot.co.jp/
製品情報を選ぶと右のサイドバーに各製品種別のローカルナビゲーションが表示されます。
スマートフォン・携帯電話 | au — https://www.au.com/mobile/
3.パンくずリスト
コンテンツの階層構造にひもづいて、表示されている現在のページ及び、それに至る道筋、階層が表示されるナビゲーション。由来はグリム童話の『ヘンゼルとグレーテル』でヘンゼルが森の中で迷子にならないようにパンくずを落としながら歩いたことから。ユーザーのリテラシーが低い場合には利用されないことも多くありますが、各ページが行き止まりにならないように抑えておきたいメニューの1つです。英語ではBreadcrumb NavigationやBreadcrumbsなどと呼ばれています。
Amazon | 本, ファッション, 家電から食品まで | アマゾン — https://www.amazon.co.jp/
Amazonはナビゲーションの種類が多く複雑ですが、ページの冒頭にパンくずリストも設置されています。
東京都政策企画局 — https://www.seisakukikaku.metro.tokyo.jp/
東京都政策企画局のサイトではページタイトルの下にパンくずリストが設置されるパターンです。
4.ハンバーガーメニュー
三本の横線が並ぶアイコンに収められたメニューで、収められる内容はグローバルナビゲーションやよく使われる機能へのショートカット、マイページなど自由に構成されます。Facebookのアプリなどで使用され、狭いスマートフォンの画面に動線を設置するためには便利なため広く浸透していますが、このUIに関しては賛否両論があります。否定的な意見としては、コンテンツを隠してしまう、気づかれない、そもそも情報設計が弱い、スマホ端末が大画面化していく中で上に配置されると片手で届かないなどがよく見られます。また配置に関しては画面下に配置されるケースが増えてきています。
Facebookアプリ（iOS）
Facebookは今でもハンバーガーメニューを採用していますが、スマホの大画面化に伴い、画面下部に設置されるようになっています。
グロービス経営大学院（ビジネススクール）｜創造と変革のMBA — https://mba.globis.ac.jp/
グロービス経営大学院ではスクロールするとグローバルナビゲーションの内容がハンバーガーメニューに収まり、画面右上に常に固定されるようになります。
5.ドロワー
ハンバーガーメニューと一緒に、または同じものとしてよく扱われますが、こちらは画面全体がスライドして引っ張り出されるようにメニューが現れるUI。drawerは英語では引き出しのことを指します。
Googleカレンダーアプリ（iOS）
Material Designでは「Navigation Drawer」としてドロワーについてのガイドが詳細に決められており、GoogleのアプリにおいてはiOSでも基本的にMaterial Designの考え方が採用されています。
6.プルダウン（ドロップダウン）メニュー
エクセルのプルダウンメニューやHTMLのselect要素とoption要素で構成されるUIのような、サブメニューがマウスオーバーやクリックなどのアクションで表示される形式のメニュー。PCではマウスオーバーで表示させることで、少ないクリックで遷移先をより絞り込めるメリットがありますが、スマートフォンでは、マウスオーバーという状態がないため、タップさせる必要があり、メリットは薄れます。英語ではdropdownが一般的です。
Amazon | 本, ファッション, 家電から食品まで | アマゾン — https://www.amazon.co.jp/
Amazonの一部の商品カテゴリではローカルナビゲーションにプルダウンでのサブメニューが用意されています。
7.メガメニュー
グローバルメニューにプルダウンメニューを組み合わせたような形で、数多くの選択肢を一度に見られるようにしたメニュー形式。一般的なプルダウンメニューの選択肢よりも大量のサブメニューが並び、場合によってはサイトマップに近いくらいコンテンツを網羅していることもあります。アイコンやサムネイル画像が用いられる場合も多くなっています。
レスポンシブデザインの場合、スマホ表示の際にどういう挙動にするかは慎重な検討が必要です。
三井住友銀行 — https://www.smbc.co.jp/
三井住友銀行のメガメニューはテキストベースのメニューを表示しますが、特に利用される（して欲しい）コンテンツへのリンクはボタンとしてデザインされています。
任天堂ホームページ — https://www.nintendo.co.jp/
>任天堂のメガメニューはアイコンとゲームのKV（キービジュアル）を利用してグラフィカルに構成されています。
8.ページネーション
検索結果や特に長い読み物メディアなどの場合に、複数にまたがるページを行き来するためのナビゲーション。基本的には「頁（ページ）番号」を示す数字が並び、サブ要素として前後ページへの動線が用意されるパターンが多いようです。
Google 検索結果画面
Googleの検索結果（PC）では膨大な検索結果を10件毎にページに分割し、各ページへ任意に遷移できるようになっています。
Pagination · Bootstrap — https://getbootstrap.com/docs/4.3/components/pagination/
Webサイトの構築によく使われるフレームワーク「Bootstrap」には一般的なページネーションを実装するためのスタイルが用意されています。
9.タブ
同じ情報レベルの異なる画面間や異なるデータセット間を移動するためのナビゲーション。横一列に配置される場合がほとんどでアイコンが用いられる場合も多々あります。iOSの「タブバー」はグローバルナビゲーションの役割を担いますが、一般のタブはグローバルな内容には限りません。Webではしばし、画面遷移をしない非同期での内容更新が一緒に用いられます。
武蔵野美術大学 — https://www.musabi.ac.jp/
このサイトのニュース・トピックスではオーソドックスなタブのデザインが用いられています。大学側が特に見て欲しい「PICKUP」と最新の一覧である「新着情報」と切り替えて情報を取得することが可能です。
任天堂ホームページ — https://www.nintendo.co.jp/
任天堂Switchのソフト一覧では「ピックアップ」「すべてのソフト」に加え、ファーストパーティである任天堂のソフトだけを絞り込んで表示させることが出来ます。
10.ページコントロール
iOSやAndroidのホーム画面に複数の画面がある場合やカルーセルなどで複数の画像、コンテンツがある場合に使われる、ドットを並べたナビゲーション。スワイプできること、非表示のコンテンツが待機していること、あと何画面（コンテンツ）あるか等を示唆し、ドット自体がコンテンツ送りの機能を持っていることも多いです。
iPhone ホーム画面
ホームに複数のスクリーンがある場合、Dockの上にドットのページコントロールが表示されます。現在アクティブなドットより右（または左）をタップすることで、1画面ずつ右（左）に画面をスライドで送ることが出来ます。
カメラ・映像製品 ニコンイメージング — https://www.nikon-image.com/
Webサイトでよく使われるカルーセル（イメージスライダー）です。補助的にページコントロールが設置されることが多く、各ドットはカルーセルの各スライドに対応しているので、任意のボタンをクリックすることでその順番のスライドへ送ることが可能です。
1-1. UI（ユーザーインターフェース）とは
