UI基礎part03～サイトでよくみるナビゲーション～

ウェブサイトでよくみかけるナビゲーション。サイトの目的に応じて適切なナビゲーションを実装することでサイトの使いやすさや回遊率が左右されます。今回は、意外と奥深い！？ナビゲーションの種類と特徴について説明いたします。

①グローバルナビゲーション

グローバルナビゲーションは、ウェブサイトの各ページに共通して設置されるメニューです。主要なコンテンツへのリンクをまとめたもので、ユーザーの目的に正しく・簡潔にアクセスするためサポートを担っています。グローバルナビゲーションがないと、ウェブサイトにどういうコンテンツがあるかが把握できないうえ、今自分がどのページにいるのか、別のページをみたいのにどうアクセスしたらページが見れるかわからない..といった事態になりかねません。グローバルナビゲーションはユーザーがわかりやすく、使いやすいサイトにする上で非常に重要です。

グローバルナビゲーションのデザイン例

1.画面上部に固定

サイトでよくみるデザインです。ロゴや企業名と共に画面上部に配置します。メニューの構成方法としては、カテゴリーごとにグルーピング化し最上位カテゴリーをメニューにする、ユーザーの属性や状況ごとにメニューを設ける等があります。

▼新まつもと物語 | 市民が作る松本市公式観光サイト
観光にかかわるカテゴリーをメニューにすることで、このサイトでどういうコンテンツが見れるのかが最初に明確になります。
引用：新まつもと物語 | 市民が作る松本市公式観光サイト

▼みなと銀行
口座を開設したい/しているか否かでメニューを分けつつ、個人・法人でさらに窓口を分けることで様々な状況に対し適切なコンテンツへ誘導できます
引用：みなと銀行

2.画面サイドに固定

ECサイトなどでよく見かけるデザインです。上部に配置する場合に比べて縦幅を取りやすいので、主要メニュー数が多い、第2階層以下のメニューも表示したい、写真等をメニュー内に入れたい場合におすすめです。

▼らっきょう専門店とまりのつけもの
産地・味など主要なメニューだけでなく、具体的にどういう産地、味があるのかも一目で見れるので、目的の情報までのクリック数を減らすことができます
引用：らっきょう専門店とまりのつけもの

②フッターナビゲーション

Webサイトの下部に配置されるメニューで、各ページに共通で配置します。フッターはグロナビ同様、ナビゲーションやサイトマップとしての役割を担っています。ヘッダーと異なり、ウェブサイト内にある全ページのメニューを記載することが多いです。

▼スプラッシュトップ株式会社
ページの下までスクロールした際にフッターがあると、ユーザーが見逃したページや気になったページへの遷移を促すことができます。
引用：スプラッシュトップ株式会社

③パンくずリスト（ブレッドクラムナビゲーション）

パンくずリストは現在のページやそのページにアクセスするための道筋を示すリストで、ページ上部に配置することが多いです。ページの階層を視覚的にわかりやすくしたもので、ウェブサイト内でどこにいるかを確認するのに効果的です。

▼株式会社果実堂テクノロジー
パンくずリストのメニューを押してページ遷移できる箇所はテキストリンクにするのがおすすめです。
引用：株式会社果実堂テクノロジー

④ハンバーガーメニュー

3本の線で作られてアイコンをクリックすると、メニューが表示されるものです。スマホデザインで非常によく使われ、最近ではPCデザインでも見かけるようになりました。メニューを常に表示するとその分、画面が隠れてしまいますが、ハンバーガーメニューを利用することで画面幅いっぱいにコンテンツを表示できるうえ、メニューをすっきりまとめることができます。

▼2年間で起業力をつける就職・転職サイト – VENTURE FOR JAPAN
メニュー数が少ない場合やターゲット層が若年層の場合、ハンバーガーメニューを検討するとよいでしょう。
引用：2年間で起業力をつける就職・転職サイト – VENTURE FOR JAPAN