グローバルナビゲーション
Web サイトの全ページ共通で、主に画面の上部(または横)に配置されるメインメニューのことです。「グロナビ」とも略されます。ユーザーがサイトを訪れた瞬間に「自分の目的に合う情報があるか」を最短で判断するための、情報設計(IA)の顔となるパーツです。
設計の基本ルール
項目数は人間がパッと見で把握できる「5〜7 項目以内」の最小構成に絞ります。10 項目も並べると情報の優先順位が消え、ユーザーを迷わせてしまいます。
デバイス別の UI 設計の鉄則
- PC 版(メガメニューの活用)：マウスホバーで下層ページが一覧表示される「メガメニュー」が有効です。ただし、項目が多すぎるとスマホ表示にした際に破綻するため注意が必要です。
- スマホ版(CV ボタンの分離)：「三」の形をしたハンバーガーメニューが標準ですが、中身が隠れている分クリック率は下がります。そのため、絶対に押してほしい最重要 CV(資料請求、購入、電話、LINE 追加など)はメニューの中に閉じ込めず、ヘッダーの右上に固定ボタンとして常に露出させるのが鉄則です。
よくある落とし穴(注意点)
言葉をよく利用する人
- デザイナー
- Web 担当者(発注側)
- ディレクター
- コーダー / フロントエンドエンジニア
会話上での使用例
業者からナビ10項目の案を提示された場面
-
業者ディレクター
メインメニューは、会社案内、サービス、事例、採用、お知らせ、ブログ、FAQ、資料DL、問い合わせ、電話番号の10項目で考えています。
-
Web担当者
グローバルナビに10項目は多いです。優先順位が消えて、どれも同じ重さに見えてしまいます。主導線のサービス、事例、問い合わせは残して、残りはフッターやサイドに回しましょう。電話と問い合わせはヘッダ右上にボタンで常時出しておきたいです。
-
業者ディレクター
了解です。スマホ版もハンバーガーの外に電話と問い合わせのボタンを出す構成にします。
採用ページ追加でナビに項目を増やすか議論する場面
-
広報
採用を強化したいので、グローバルナビに採用を追加したいんですが。
-
Web担当者
主導線の3つは崩したくないので、採用はヘッダ右上の小さなサブナビに置きましょう。採用と購買では成果までの流れがまったく別なので、メインに混ぜると訪問者が迷ってしまうんです。