フッターが投げやり——フッターの設計

結論

プロのフッターは「余ったリンクの置き場」ではなく、意味でグルーピングした2階層のナビゲーションとして設計されている。具体的には3〜4列・各列7〜8リンク以内に絞り、太字の見出し+通常太さの子リンクで階層を作り、WCAG AAコントラスト（本文4.5:1）と読めるタイポ（理想14px/モバイル16px）、そして対照背景・1px罫線・余白で本文から視覚的に切り離す。NN/g・Baymard・USWDSの権威ソースはこの方向に一貫して収束している。

01 — リンクの墓場をやめ、意味でグルーピングする

フッターが「投げやり」に見える最大の原因は、見出しもグルーピングもなく全サイトマップを一列に流し込む**dumping ground（リンクの墓場）**だ。Baymardの調査では大手ECの13%がこの欠陥を抱える。「全部重要」は「何も重要でない」と同義で、ユーザーは目的のリンクを探せない。関連リンクをカテゴリ別の列にまとめ、各列に見出しを付けるだけで、フッターは一気に設計されたものに見える。

primaryFooter Links Should be Divided into Distinct Semantic Sections — Baymard Institute

02 — 階層は2レベル厳守、太字見出し+通常太さリンク

NN/gはフッターの情報階層を2レベルまでと規定する。見出しは太字（または大きめ・別色）、子リンクは通常太さ——この単純な太さの差が「見出し／中身」の関係を作る。USWDSの Big Footer も level1=見出し / level2=リンクの同じモデルだ。逆に全部を同じ太さでフラットに並べると、見出しと子が混ざって平面に潰れ、3階層以上の入れ子は視覚的に読めなくなって設計破綻に見える。見出しは意味的にH2〜H4を使い、本文の見出し構造と競合させない。

primaryWeb Page Footers 101 — Nielsen Norman Group

primaryFooter — U.S. Web Design System (USWDS)

03 — 曖昧なラベルを捨て、具体名にする

「Resources」「Help」のような中身を予測できないラベルは走査不能だ——NN/gが明示的に警告している。ユーザーは見出しを読んで「この下に欲しいものがあるか」を一瞬で判断する。中身が想像できないラベルはその判断を止め、結果として手抜きに見える。「Contact Us」「Customer Service」「My Account」のように、その列に何が入っているかが言葉だけで分かる具体名にする。

primaryWeb Page Footers 101 — Nielsen Norman Group

04 — コントラストとタイポで「読める」を担保する

暗背景に濃いグレー文字を置くと、WCAG AA（本文4.5:1）を割って可読性が死ぬ。読めないフッターは誰の役にも立たない。チャコールやネイビーの暗背景には白〜明るいグレーを合わせ、本文は最小12px・理想14px、モバイルは16px。タップターゲットは44×44px、リンクは記述的テキストにする（「こちら」禁止）。下のデモは同じ暗背景の上で、薄すぎるグレーと、コントラストを確保した明るいグレーを並べたもの。

blogWebsite footer design best practices — LogRocket

blogFooter Design Best Practices — UXPin

05 — 本文とGestalt的に分離する

背景色も罫線も余白もないと、フッターは本文の続きにしか見えず、構造が崩れて雑に映る。対照的な背景色、1pxの上罫線、上下のパディングで「ここからフッター」という境界を作る。これはGestaltの図地分離そのもので、面が変わった瞬間にユーザーは「別の領域だ」と認識する。列間ガターは20〜40pxを確保する。

blogInformative And Usable Footers — Smashing Magazine

blogHow to Implement Sitemap Footers — Interaction Design Foundation

06 — 法務情報は最下部の独立行に分ける

プライバシーポリシー・利用規約・Cookie設定・著作権をカテゴリリンクに紛れ込ませると、探したい時に見つからない。これらはナビ・連絡先と性格が違う「常に最下部にある定型情報」なので、最終行に独立してまとめ、1px罫線でナビ領域と区切るのが定石。文字は最小12pxで控えめにし、著作権表記は行末に寄せる。

blogHow to Implement Sitemap Footers — Interaction Design Foundation

blogWebsite footer design best practices — LogRocket

実装スニペット

グループ化フッターの基本グリッド。4列・ガター40px・暗背景チャコール+1px上罫線で本文と分離する。本文色 #c9ced6 は #1a1d24 に対し約4.6:1でWCAG AAを満たす。

.site-footer{
  background:#1a1d24;        /* チャコール: 本文と対照 */
  color:#c9ced6;             /* 明るいグレー本文 ≈4.6:1 on #1a1d24 */
  border-top:1px solid #2c313a;
  padding:56px 24px 32px;
  font-size:14px;            /* 理想14px */
  line-height:1.7;
  font-feature-settings:"palt"; /* 日本語の約物詰め */
}
.site-footer__cols{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr)); /* 3〜4列 */
  gap:40px;                  /* 列間ガター20〜40px */
  max-width:1200px;
  margin:0 auto;
}

2階層タイポ。見出しは太字、子リンクは通常太さで、タップターゲット44pxと focus-visible を確保する。

.footer__heading{
  font-size:15px;
  font-weight:700;           /* 見出しは太字で階層化 */
  color:#fff;
  margin:0 0 16px;
  letter-spacing:.02em;
}
.footer__list{list-style:none;margin:0;padding:0;}
.footer__list a{
  display:inline-block;
  font-weight:400;           /* 子リンクは通常太さ(2階層厳守) */
  color:#c9ced6;
  text-decoration:none;
  padding:6px 0;
  min-height:44px;           /* 44×44pxタップターゲット */
  line-height:32px;
}
.footer__list a:hover,
.footer__list a:focus-visible{color:#fff;text-decoration:underline;}
.footer__list a:focus-visible{outline:2px solid #4c9aff;outline-offset:2px;}

法務行の分離。プライバシー/利用規約/Cookie/著作権を最下部の独立行に置き、1px罫線でナビ領域と分ける。

.footer__legal{
  display:flex;
  flex-wrap:wrap;
  gap:8px 24px;
  align-items:center;
  max-width:1200px;
  margin:40px auto 0;
  padding-top:24px;
  border-top:1px solid #2c313a; /* ナビと視覚分離 */
  font-size:12px;            /* 最小12px */
  color:#8a929e;
}
.footer__legal a{color:#8a929e;text-decoration:underline;}
.footer__copyright{margin-left:auto;}

モバイル。1080pxの単一ブレークポイントで1カラム化し、本文16pxで可読性を確保。各グループを罫線で区切り、details/summaryでアコーディオン化する余地も残す。

@media (max-width:1080px){     /* BP=1080px 1点 */
  .site-footer{padding:40px 20px 24px;font-size:16px;} /* モバイル16px */
  .site-footer__cols{
    grid-template-columns:1fr;  /* 単一カラムに積み上げ */
    gap:0;
  }
  .footer__group{border-bottom:1px solid #2c313a;padding:16px 0;}
  .footer__heading{margin-bottom:8px;}
  .footer__legal{flex-direction:column;align-items:flex-start;}
  .footer__copyright{margin-left:0;}
}

チェックリスト

• リンクを意味でグルーピングし、各列に具体名の見出しを付けたか（墓場化していないか）
• 列数は3〜4（上限5〜6）、各列7〜8リンク以内に収まっているか
• 階層は2レベルまでか。太字見出し+通常太さ子リンクで差を付けたか
• 「Resources」「Help」のような曖昧ラベルを具体名に置き換えたか
• 本文4.5:1・大きい文字3:1をコントラストチェッカーで実測したか
• 本文は最小12px・理想14px、モバイル16px。タップターゲットは44×44pxか
• 対照背景・1px罫線・上下パディングで本文から視覚分離しているか（ガター20〜40px）
• プライバシー/利用規約/Cookie/著作権を最下部の独立行にまとめたか
• リンクはキーボード操作可能で `focus-visible` が見えるか。記述的テキストか（「こちら」禁止）
• 総リンクが40〜50超なら、アコーディオンか専用サイトマップページへ分離したか

限界 / 出典

3〜4列という数値はUXPin/LogRocket等のブログ実務コンセンサスで、絶対基準ではなくコンテンツ量で調整可（USWDSは5〜6列まで許容）。コントラスト4.5:1/3:1・タップ44pxはWCAG準拠の堅い数値だが、本記事の #c9ced6 on #1a1d24 ≈4.6:1 などは推定値なので、コード化後にコントラストチェッカーで必ず実測すること。Baymardの13%統計と曖昧ラベル禁止はEC文脈の知見だが、コーポレート/LPにも一般化できる。Smashing Magazine記事は2009年と古く、列数・分離の原則は今も有効だが当時のビジュアル例は時代遅れである点に留意。モバイルアコーディオンは発見性を下げるため、連絡先・法務など重要リンクは折りたたまず常時露出させる。ブレークポイントは本プロジェクト方針の1080px1点を採用した。

primaryWeb Page Footers 101: Design Patterns and When to Use Each — Nielsen Norman Group

primaryFooter Links Should be Divided into Distinct Semantic Sections — Baymard Institute

primaryFooter — U.S. Web Design System (USWDS)

blogFooter Design Best Practices: 6 Expert Examples & Tips for 2026 — UXPin

blogWebsite footer design best practices — LogRocket Blog

blogInformative And Usable Footers In Web Design — Smashing Magazine

blogHow to Implement Sitemap Footers to Keep Users Going — Interaction Design Foundation