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