【Next.js】今っぽいフッターの作り方を解説

公開日: 2026年9月12日 · 読了目安 8 分

Next.js のフッターを、リンクの倉庫に見せない作り方。情報設計、モーションの足し方、完成フッターの流用。よくある失敗もまとめます。

先に結論：フッターは「次の行き場」を3つに絞る

今っぽいフッターは、リンクを全部並べることではありません。プロダクト、ドキュメント、法務の3群に分け、残りは畳みます。

動きはほぼ不要です。ワードマークがゆっくり現れる、ホバーでリンクが少し動く、程度です。最終 CTA と競合させないでください。

作り方は3つです。静的な4カラム。ブランド帯付き。完成しているフッターを載せる。

1つ目は、サイトマップの複製になっていることです。ナビと同じリンクを全部置く必要はありません。

2つ目は、コントラスト不足です。薄いグレーの小文字は、法務リンクとして読めません。

3つ目は、最終 CTA の直後に同じ強さの装飾があることです。フッターは一段落としてください。

左にワードマークと短い説明、右に Product / Resources / Legal。最下行にコピーライトと所在地。モバイルは縦積みです。

layout.tsx に置くと全ページで共有できます。LP 専用なら page の最後でも構いません。

上辺に細いグラデーション、または大きなワードマーク。動きは CSS のゆっくりした opacity で足ります。

ヘッダーが透明フローティングなら、フッターは不透明の方がページの終わりが分かります。ヘッダーの作り方は https://design-layer.com/articles/nextjs-modern-header-guide です。

大きなタイポ、ループする背景、リンクのホバーまで揃ったフッターは、自分で組むと半日かかることがあります。

DesignLayer でライブ確認してから載せてください。閲覧無料です。https://design-layer.com/components

リンク先とプライバシーポリシーは、コピーした直後に差し替えます。プレースホルダのまま公開しないでください。

1. 法務リンクがあるか。2. フォーカス順が論理的か。3. スマホでタップ領域が 44px 程度あるか。4. 最終 CTA と色がぶつかっていないか。5. 外部リンクに不要な target=_blank を付けていないか。