グローバルナビゲーション(デザイン・ハンバーガーメニュー・ドロップダウン・レスポンシブデザイン)の作り方

今回はグローバルナビゲーションの作り方についてです。サイトマップの作成段階でしっかり作り込んでおくことが重要です。

numberグローバルナビゲーションとは

グローバルナビゲーションとは、Webサイトのインタフェースにおいて、ユーザーがどのページにアクセスしても常に表示される一連のリンクのことを指します。

スマートフォンの場合は画面が狭いためハンバーガーメニューといわれる三本線のアイコンをタッチするとリンクのメニューが表示されることが多くなってきています。
リンクを表示するためには画面をワンタッチする必要はありますがこちらもグローバルナビゲーションのひとつです。

numberグローバルナビゲーションとローカルナビゲーション

グローバルナビゲーションは、Webサイトの最上部やサイドバーなど、全体的なナビゲーションを提供するメニューのことです。

これにより、ユーザーはWebサイト内の主要なセクションに簡単にアクセスできます。グローバルナビゲーションには、サイトのホームページ、コンテンツカテゴリー、検索機能などが含まれます。グローバルナビゲーションは、Webサイトのすべてのページで一貫して表示されることが一般的です。

一方、ローカルナビゲーションは、Webサイト内の特定のページやセクションにのみ表示される、より詳細なナビゲーションを提供するリンクメニューのことです。

ローカルナビゲーションには、そのページ内のセクション、関連記事へのリンク、お問い合わせフォームなどが含まれます。ローカルナビゲーションは、Webサイト内の個別のページに応じて異なることが通常です。

したがって、グローバルナビゲーションは、サイトマップのトップページ下の第一層のナビゲーションを提供し、ローカルナビゲーションは、より下層ページのナビゲーションを提供することで、より詳細な情報や関連性の高い情報を提供するために使用されます。

両方のナビゲーションが適切に設計されている場合、ユーザーはサイト内を簡単に移動でき、必要な情報に迅速にアクセスできます。

number重要性と役割

グローバルナビゲーションは、Webサイトやアプリケーションの利便性を高めるために非常に重要です。以下は、グローバルナビゲーションが重要な理由です。

ユーザビリティ(サイト全体の構造を示しナビゲーションを支援する)

グローバルナビゲーションは、各ページのファーストビューに表示され、かつ、サイトマップの役割を果たすため、ユーザーインタフェースとして大変重要な構成要素です。グローバルナビゲーションによって、ユーザーはサイトの中のどのページにいるか、あるいは移動したいページを常に把握することができます。

グローバルナビゲーションは、ユーザーが必要な情報を簡単に見つけることができるように支援するために作成されています。また、ページへのリンクを提供することで、ユーザーがサイト内をより簡単にナビゲートすることができます。

グローバルナビゲーションがあれば、「会社名」や「ショップ名」などの指名検索でトップページに訪れた訪問者が、「商品ページ」、「アクセス情報」、「営業時間・休業日」など知りたい情報や目的のページにスムーズにす進むことが出来ます。

キーワード検索で直接目的のページに訪問してきた場合でもグローバルナビゲーションがあれば、関連する他のページに誘導することが出来ます。

たとえば、商品やサービスの内容が知りたくて該当ページに訪問してきた場合でも、料金が気になれば料金ページへ、お店に行こうと考えた場合はアクセスぺーじへ、問い合わせがしたい場合はお問い合わせページへ誘導することが出来ます。

そのため、グローバルナビゲーションを設置して、どのページからでも、他のページに容易にアクセスできるようにする必要があるのです。

サイト評価(SEO対策)

グローバルナビゲーションが適切に装備されているサイトは、使い勝手が良く、信頼性が高いサイトと評価されます。逆に、ナビゲーションが不適切な場合は評価が低く、ユーザーがサイトから離脱する可能性が高くなります。

グローバルナビゲーションがあれば、「会社名」や「ショップ名」などの指名検索でトップページに訪れた訪問者が、「商品ページ」、「アクセス情報」、「営業時間・休業日」など知りたい情報や目的のページにスムーズにす進むことが出来ます。

キーワード検索で直接目的のページに訪問してきた場合でもグローバルナビゲーションがあれば、関連する他のページに誘導することが出来ます。

たとえば、商品やサービスの内容が知りたくて該当ページに訪問してきた場合でも、料金が気になれば料金ページへ、お店に行こうと考えた場合はアクセスぺーじへ、問い合わせがしたい場合はお問い合わせページへ誘導することが出来ます。

そのため、グローバルナビゲーションを設置して、どのページからでも、他のページに容易にアクセスできるようにする必要があるのです。

また、グローバルナビゲーションは、WebサイトのSEOにも影響を与えます。ナビゲーションメニューに含まれるキーワードが、検索エンジンランキングで重要な役割を果たすことがあります。

クローラーというロボットがページ内のリンクをたどって各ページの情報を収集していますが、グローバルナビゲーションがあることでクローラーがページを見つけやすくなります。

number作り方

当方でのグローバルナビゲーションの作り方です。サイトマップの作成段階でラベルのデザイン以外の内容はすべて決定します。ラベルの決定とメニューデザインの決定がポイントになります。

サイトマップの作成

サイトマップの作成時に以下の内容に配慮して決定します。

通常はWebサイトの設計段階でサイトマップを作成しているため、グローバルナビゲーションの内容を検討することはほとんどありません。

基本的にサイトマップ上のトップページ直下にある第二層の項目がグローバルナビゲーションのラベルとなります。

したがって、しっかりとサイトマップが出来ていればグローバルナビゲーションの作り方として検討を要するのは、のデザイン面になります。

ラベル(カテゴリー名)の「数」

ラベル(グローバルナビゲーションの項目)は適切な数にしなければユーザーを惑わすことになります。

コンテンツカテゴリーが多く第二層が10個以上もあるようなサイトマップを作成することはグローバルナビゲーションを含めたユーザビリティの観点からも好ましくありません。

ラベル(カテゴリー名)の「文字数」

グローバルナビゲーションの項目は複数になるため、ひとつのラベルに割り当てることができる文字数が限られています。そのため、短い文字数でラベルの内容を表現できるようにすることが重要です。

ラベル(カテゴリー名)の「内容のわかりやすさ」

ラベルには一般的に使われる用語を使用しユーザーがすばやく目的のコンテンツを見つけることができるようにすることが重要です。

同じ意味内容を表す語句が2つあるような場合は、検索数やターゲットがより使用する語句を参考にします。

メニューデザイン

メニューデザインに関してもフレームワークなどの基本設計の段階である程度決まってしまう(制約を受ける)ことが多いです。

レスポンシブデザインも今となってはWebサイト制作では必須の要件となっています。

メニューデザインの決定

グローバルナビゲーションをどの位置にどのような形で表示するかを決定する必要があります。水平メニュー、ドロップダウンメニュー、またはサイドバーメニューなど、多くの種類のデザインがあります。

メニューデザインには、Webサイト全体のデザインスタイル、ブランドに合わせたカラースキームやフォントの使用が含まれ、ユーザビリティを高めるためにメニューに画像やイラストを入れることも検討します。

また、グローバルナビゲーションはユーザーが訪問したファーストビューに必ず表示されるため、グローバルナビゲーションがファーストビューに占める割合が多くなりすぎないように配慮する必要があります。

レスポンシブデザイン(大画面とモバイル端末で同じメニュー内容を異なる形式で表示)

現在、Webサイトはスマホやタブレットなどの小さな画面で閲覧されることが多く、概ね全体の7割~8割程度がモバイル端末での閲覧となっています。そのため、PCモニターを前提としたグローバルナビゲーションだけではなくスマホの小さな画面にも対応するようにレスポンシブデザインで制作しなければなりません。

小さな画面の端末ではハンバーガーメニューとよばれる三本線をタッチしてからリンクメニューを表示させる形式が標準的な仕様となっています。