フッターナビゲーション
概要と役割の明確な切り分け
Web ページの最下部(フッターエリア)に配置される補助的なナビゲーションのこと。
ヘッダー等に配置されサイトの「主要動線」を担うグローバルナビゲーションに対し、フッターナビゲーションは「補助動線」(運営者情報・利用規約・サイトマップ・SNS リンク・関連サイトへのリンクなど)を集約する役割を持つ。
現場の核心:サイトデザインを守る「静かな受け皿」
基本となる設計思想は「静かな受け皿」である。
ビジュアルデザイン上の主役には決してせず、必要な人がいつでも辿り着ける「小さなテキストリンクの集まり」として目立たせない実装で十分である。
- グローバルナビには載せたくない(目立たせたくない)が、アクセス手段は残したいページ
- 法令上、サイト内に設置することが必須であるリンク(プライバシーポリシー・特商法表記)
- 閲覧頻度は低いがユーザーや取引先に必要な情報(会社概要・採用情報・サイトマップ)
これらをすべてフッターナビに格納することで、サイトトップのノイズを減らしつつ、網羅性を担保できる。
実務における情報設計と「社内政治」の防衛策
実務においては、グローバルナビとの役割分担を明確にすることがサイト全体の情報設計(IA)の要となる。「主要動線はグローバル、補助動線はフッター」という強固なルールを敷いておくことで、サイト全体の動線がすっきりと整理される。
さらにこのルールは、他部署や経営層から「うちの部署のこのページへのリンクもヘッダー(トップページ上部)に追加してくれ!」という突発的な要望が来た際の「防衛の盾」になる。「主要動線ではないため、フッターナビに格納してアクセス手段を確保します」と論理的にカウンター提案を受けられるため、UI の崩壊を未然に防ぐことができる。
技術的制約(UI/UX と SEO)への配慮
- スマホ表示(モバイル UI)の最適化:PC 用の大量のテキストリンクをスマホ画面でそのまま並べるとスクロールが長くなりすぎる。スマホ表示時は主要カテゴリだけを見せ、詳細はタップで開閉する「アコーディオンメニュー」を採用し、ユーザーのスクロール負担を減らす。
- 内部リンク(SEO)としての重要性:全ページから共通でリンクされるパーツであるため、リンクの文字(アンカーテキスト)を「詳細はこちら」などの曖昧な表現にせず、「プライバシーポリシー」「ご利用規約」と検索エンジンにも分かりやすい明確なテキストで記述し、サイト構造(内部リンク)の評価を高める。
やってはいけない「現場の落とし穴」と防衛策
- ナビゲーション間の重複と矛盾:役割の切り分けが曖昧なまま設計し、グローバルナビとフッターナビに全く同じリンクが脈絡なく並んでユーザーを混乱させる。
- メンテナンス不足による「リンクのゾンビ化」:過去のキャンペーンページや、すでに削除した古いページへのリンクがフッターナビの中にだけ削除漏れで残り続け、ユーザーがクリックすると「404 Not Found(ページが見つかりません)」のエラー画面(デッドリンク)に飛び、サイトの信頼性を落とす。※デザインの改修やページ削除の際は、必ずフッター共通パーツのナビゲーションも同時に更新するチェックフローを徹底すること。
言葉をよく利用する人
- Web 担当者(発注側)
- デザイナー
- コーダー / フロントエンドエンジニア
- IA / 情報設計者
会話上での使用例
フッターに載せるリンクの範囲を、デザイナーとWeb担当者で決める場面
-
デザイナー
フッターのリンクって、どこまで盛り込む想定ですか。
-
Web担当者
フッターナビゲーションはグローバルナビと役割分担で考えましょう。主要動線はグローバルに任せて、こちらは法令系のページと会社情報、サイトマップあたりの補助動線を中心に集めるイメージです。
-
デザイナー
なるほど、静かな受け皿として整理すればいいんですね。
採用情報リンクの追加要望を、人事とWeb担当者で調整する場面
-
人事
採用情報へのリンクを、フッターにも入れてもらえませんか。
-
Web担当者
フッターナビゲーションへの追加は問題ありません。ただグローバルナビ側では単独で並べず、「会社情報」の配下にまとめる形にすると、動線が重複せず整理できます。
-
人事
それで構いません、たどり着ければ十分です。