グローバルナビゲーション (Global Navigation)
- 東京のホームページ制作会社|ブラボーウェブ
- ホームページ制作用語集
- グローバルナビゲーション (Global Navigation)
グローバルナビゲーションとは
Webサイト全体で共通に設置される主要メニューのことで、ユーザーがサイト内の主要なコンテンツに常にアクセスできるようにするナビゲーション機能です。
グローバルナビゲーションとは、ホームページにおいて主要コンテンツやカテゴリーページへの入り口となるリンクの集合体を指します。
通常はヘッダー(上部)に設置され、全ページで共通表示されており、ユーザーがどのページにいても迷うことなく主要コンテンツにアクセスできるようにすることを目的としています。
たとえば、企業サイトであれば「会社概要」「サービス」「導入事例」「お問い合わせ」などが代表的なメニュー項目となります。
主な別称と設置位置
- ヘッダーメニュー
- ヘッダーナビ
- グローバルメニュー
- サイトナビゲーション
これらはいずれも同義語として用いられ、ページ上部の最も視認性が高い位置に配置されます。
近年では、下層ページや記事ページでもナビゲーションの固定表示(スティッキーヘッダー)を採用するケースも増えています。
ユーザビリティとUI/UXの観点
グローバルナビゲーションの設計は、ユーザーの回遊性やコンバージョン率を左右する重要なUX要素です。
分かりやすいカテゴリ名・視認性の高い配置・階層が浅い構造など、直感的に使いやすい工夫が求められます。
優れたグローバルナビゲーションの条件
- 項目数は多すぎず、7つ前後に収める
- 表現はシンプルに(例:サービス紹介 → サービス)
- アイコンやドロップダウンなど視認性を高めるUIを採用
- グローバルナビとパンくずリスト、サイドメニューの役割を明確に分担
スマートフォンでの表示とハンバーガーメニュー
スマートフォンでは画面の表示領域が限られているため、グローバルナビゲーションは「ハンバーガーメニュー」と呼ばれるアイコンにまとめて格納されるのが一般的です。
ハンバーガーメニューの特徴
- 画面右上や左上に設置され、タップで展開
- メニューが隠れてしまうため、発見性が課題
- トップ3〜4項目だけは常時表示する「ミニナビ」併用も有効
モバイルファースト設計が重視される現在では、ハンバーガーメニューの視認性向上やナビの操作性改善が重要なUI課題とされています。
SEOへの影響
クローラーはグローバルナビゲーションを通じてサイト全体の構造や主要ページの位置関係を把握します。
そのため、重要なキーワードを含めたテキストリンクで構成されていることが望ましく、画像のみ・JavaScriptで動的に生成されるメニューは注意が必要です。
- HTMLで正しく記述されたナビゲーション(
<nav>
タグなど) - 内部リンク構造が整理されていること(重要ページはナビに含める)
- リンク先URLが正規化(canonical)されていること
業種別グローバルナビ設計例
1. 製造業(BtoB)系企業
想定ユーザー:購買担当・設計担当・調達部門・OEM先
- トップページ
- 製品情報(カテゴリ別)
- 技術・加工について
- 会社案内
- 導入事例
- お知らせ
- よくある質問(FAQ)
- お問い合わせ
📌ポイント: 製品を軸にしつつ、技術力や納入実績への導線を確保。FAQで業界知識をフォロー。
2. 建設・設備会社
想定ユーザー:発注者・ゼネコン・不動産オーナー・自治体
- トップページ
- 事業内容(新築/リフォーム/保守など)
- 施工実績
- 会社概要
- 採用情報
- SDGsへの取り組み
- お知らせ
- お問い合わせ
📌ポイント: 「施工実績」や「取り組み」をしっかり見せることで信頼感を醸成。採用も重視。
3. 士業(弁護士・税理士・社労士など)
想定ユーザー:個人事業主・企業の経営者・一般の相談者
- トップページ
- サービス紹介
- 解決事例/対応実績
- 初めての方へ
- よくある質問
- 事務所案内
- ブログ/コラム
- お問い合わせ
📌ポイント: 初心者にもやさしい導線と、実績紹介で不安を払拭。FAQとブログで検索流入強化。
4. 美容クリニック/サロン
想定ユーザー:20~50代女性/美容意識の高い層
- トップページ
- メニュー/料金
- 症例・ビフォーアフター
- 初めての方へ
- スタッフ紹介
- よくある質問
- ブログ/お知らせ
- ご予約・お問い合わせ
📌ポイント: メニューや料金、安心感(スタッフ・症例)をしっかり見せてCVへつなぐ。
5. 学校・教育機関・塾
想定ユーザー:保護者・中高生・社会人受講者
- トップページ
- 教育方針・カリキュラム
- コース紹介
- 合格実績/卒業生の声
- 学校生活/イベント紹介
- よくある質問
- 入学案内
- 資料請求・お問い合わせ
📌ポイント: 信頼感・成績実績・校風紹介・保護者安心を軸に設計。
6. ECサイト・通販企業(ブランド系)
想定ユーザー:商品購入者/リピーター
- トップページ
- 商品一覧(カテゴリ別)
- ブランドについて
- ご利用ガイド
- よくある質問
- 会員登録・ログイン
- カートを見る
- お問い合わせ
📌ポイント: 購買に直結する動線を重視し、「カート」「ログイン」などは常時表示。
7. 中小企業のコーポレートサイト(汎用型)
想定ユーザー:見込み顧客・採用希望者・取引先
- トップページ
- 事業内容/サービス
- 実績紹介/お客様の声
- 会社案内
- 採用情報
- お知らせ
- よくある質問
- お問い合わせ
📌ポイント: 営業ツール・採用ツールとしての役割を明確に構成。
グローバルナビゲーション (Global Navigation) まとめ
グローバルナビゲーションは、ユーザーの「迷わず・目的の情報へたどり着く」という体験を支える重要な設計要素です。
一貫性・視認性・操作性の高いナビゲーションは、ユーザー満足度やSEO評価にも直結します。
スマートフォン対応や階層構造の整理を含めて、Webサイトの全体構成を俯瞰しながら設計することが、成果を生むWeb制作の鍵となります。
ホームページ制作その他
- CMS(Contents Management System)
- DRM(Digital Rights Management)
- Flash
- FTP(File Transfer Protocol)
- JIS漢字コード(Japanese Industrial Standards Code)
- PHP(Hypertext Preprocessor)
- QRコード(Quick Response)
- RSS
- SSL(Secure Sockets Layer)
- URL(Uniform Resource Locator)
- WWW(World Wide Web)
- XHTML
- XML サイトマップ
- アーカイブ
- アカウント
- オールドドメイン (Old Domain)
- カラム(Column)
- カルーセル(Carousel)
- キャッシュ(Cache)
- グローバルアドレス(グローバルIPアドレス)
- コーディング
- サーバー(Server)
- サイトマップ(Sitemap)
- サブディレクトリ (Subdirectory)
- サブドメイン(Subdomain)
- ソースコード(source code)
- タイトルタグ (title tag)
- ティザーサイト(Teaser site)
- ドメイン
- トラックバック
- トランジション(transition)
- ナビゲーション(Navigation)
- ハイパーリンク(Hyperlink)
- レンタルサーバー
- バグ(Bug)
- パンくずリスト(Breadcrumb List)
- フォント
- フッター(footer)
- プラグイン(plugin)
- プリローダー(preloader)
- インラインフレーム(iframe)
- ブログ(Blog)
- ページタイトル(titleタグ)
- ベーシック認証(Basic認証)
- ページレイアウトアルゴリズム(Page Layout Algorithm)
- ポータルサイト
- ポップアップウィンドウ
- モバイルファースト(Mobile First)
- リダイレクト(Redirect)
- レスポンシブ(レスポンシブデザイン)
- ローカルナビゲーション
ユーザビリティ
- 3クリックルール
- EFO(Entry Form Optimization)
- Google Analytics(グーグルアナリティクス)
- Google Search Console
- HCI(Human Computer Interaction)
- JavaScript
- QRコード(Quick Response)
- RGB
- UI(User Interface)
- UX(User Experience)
- アクセシビリティ(Web Accessibility)
- インターフェース(Interface)
- インフォメーション・アーキテクチャ(Information Architecture)
- カラム(Column)
- カルーセル(Carousel)
- ナビゲーション(Navigation)
- パンくずリスト(Breadcrumb List)
- ファインダビリティ(Findability)
- プリローダー(preloader)
- ユーザビリティ(Usability)
- ラフデザイン(Rough Design)
- レスポンシブ(レスポンシブデザイン)
- ローカルナビゲーション
- ワイヤーフレーム(Wireframe)
