フッターは layout.tsx と page.tsx のどちらに置くべきですか？

サイト全体で同じフッターを使うなら layout.tsx です。LP だけ特別なフッターにしたい場合は、ルートグループで LP 用の共通の枠を分けるか、そのページの最後に置きます。

フッターに "use client" は必要ですか？

リンクを並べるだけなら不要で、サーバーで組み立てる部品のまま使えます。Motion で動かす部分や、言語切り替えのように状態を持つ部分だけを、ブラウザで動く部品に切り出します。

フッターのリンクは何個くらいが適切ですか？

グループは3つ前後、各グループのリンクは4〜6個が目安です。それ以上ある場合は、ヘッダーやドキュメントのページに移せないかを先に考えます。

フッターの外部リンクは新しいタブで開くべきですか？

SNS や外部のドキュメントなど、サイトの外へ出るリンクだけを新しいタブにするのが一般的です。その場合は rel="noopener noreferrer" も付けておくと安全です。サイト内のリンクは同じタブで開きます。

DesignLayer

お問い合わせ

JA EN

【Next.js】フッターの作り方を解説｜4カラムとブランド帯のコード付き

Q: フッターの外部リンクは新しいタブで開くべきですか？

SNS や外部のドキュメントなど、サイトの外へ出るリンクだけを新しいタブにするのが一般的です。 その場合は rel="noopener noreferrer" も付けておくと安全です。サイト内のリンクは同じタブで開きます。

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

Next.js のフッターを、リンクを並べただけの倉庫にしない作り方を解説。リンクの分け方、Tailwind CSS で組む4カラムのコード、layout.tsx とルートグループでの共通化、大きなワードマークのブランド帯、短いページで下に固定する方法、公開前のチェックまでまとめます。

Next.js のフッターはリンクを絞って共通化する

Next.js でサイトを作り、最後にフッターを付けた。思いつくリンクを全部並べたら、細かい文字が詰まった古い印象になった。

ページごとにフッターをコピーしていて、リンクを1つ直すのにも手間がかかる。

フッター作りでよくある悩みです。

整ったフッターの作り方は、次の2つに集約されます。

1つ目は、リンクを「プロダクト」「リソース」「法務」のような3つ前後のグループに絞ること。2つ目は、フッターを1つの部品にまとめ、layout.tsx（全ページ共通の枠になるファイル）から表示することです。

動きは、ワードマークがゆっくり現れる程度で十分です。

この記事で分かることは次のとおりです。

リンクを絞ると使いやすくなる理由と、古く見える原因
Tailwind CSS で組む4カラムのフッターのコード
全ページ共通の枠とルートグループで、フッターを共通化する方法
大きなワードマークを使ったブランド帯の作り方
中身が短いページでフッターを画面の下に固定する方法

リンクを絞るとフッターが使いやすくなる理由

フッターまでスクロールした人は、たいてい何かを探しています。たとえば次のような目的です。

料金をもう一度見たい
問い合わせ先を知りたい
プライバシーポリシーを確認したい

こうした目的の場所へすぐに移動できることが、フッターの役割です。

サイトのすべてのページを並べると、探しているリンクが埋もれます。グループの見出しで大まかな場所を示し、各グループのリンクは4〜6個程度に抑えると、目的のリンクを見つけやすくなります。

また、フッターは最後の CTA セクション（登録や申し込みを促す区画）の直後に来ます。

フッターの装飾がそのボタンと同じくらい目立つと、押してほしいボタンから視線がそれます。フッターはページの中で一段落とした存在にするのが基本です。

フッターが古く見える3つの原因

見た目を新しくしたいときも、まず次の3つを直すと印象が大きく変わります。

サイトマップの複製になっている

ヘッダーのナビと同じリンクを、すべてフッターにも置く必要はありません。

フッターには、ヘッダーに入りきらない情報を中心に置きます。会社情報や法務、SNS などです。

文字が小さく、コントラストが低い

薄いグレーの小さな文字は、上品に見えても読めません。

本文と同じかひと回り小さい程度の文字サイズにし、背景との明るさの差を十分に取ります。法務のリンクも、読めなければ置いた意味がありません。

最後の CTA と同じ強さで飾られている

押してほしいボタンの直後に派手なグラデーションや大きな動きがあると、ページの終わりがどこか分からなくなります。フッターは色数を減らし、動きも控えめにします。

4カラムフッターの基本コード

左にロゴと短い説明、右に3つのリンクのグループを置く4カラムが、もっとも扱いやすい形です。

スマホでは縦に積み、md 以上で横に並べます。リンクは配列にまとめておくと、追加や並べ替えが楽になります。

リンクのまとまりは nav で囲み、aria-label を付けます。

ヘッダーのナビと区別でき、スクリーンリーダーの利用者が目的の場所へ移動しやすくなります。

動きがないので、サーバーコンポーネント（サーバーで組み立てる部品）のまま使えます。

components/SiteFooter.tsx

import Link from "next/link";
  
  const groups = [
    {
      title: "プロダクト",
      links: [
        { label: "機能", href: "/#features" },
        { label: "料金", href: "/pricing" },
        { label: "記事", href: "/articles" },
      ],
    },
    {
      title: "リソース",
      links: [
        { label: "ドキュメント", href: "/docs" },
        { label: "ブログ", href: "/blog" },
        { label: "お問い合わせ", href: "/contact" },
      ],
    },
    {
      title: "法務",
      links: [
        { label: "利用規約", href: "/terms" },
        { label: "プライバシーポリシー", href: "/privacy" },
        { label: "特定商取引法に基づく表記", href: "/legal" },
      ],
    },
  ];
  
  export function SiteFooter() {
    const year = new Date().getFullYear();
  
    return (
      <footer className="border-t border-zinc-200 bg-white">
        <div className="mx-auto grid max-w-6xl gap-10 px-6 py-16 md:grid-cols-4">
          <div>
            <Link href="/" className="text-lg font-semibold">Acme</Link>
            <p className="mt-3 text-sm leading-relaxed text-zinc-600">
              LP を素早く公開するためのツールです。
            </p>
          </div>
          <nav aria-label="フッター" className="grid gap-10 sm:grid-cols-3 md:col-span-3">
            {groups.map((group) => (
              <div key={group.title}>
                <h2 className="text-sm font-semibold text-zinc-900">{group.title}</h2>
                <ul className="mt-4 space-y-1">
                  {group.links.map((link) => (
                    <li key={link.href}>
                      <Link
                        href={link.href}
                        className="inline-flex min-h-11 items-center text-sm text-zinc-600 transition-colors hover:text-zinc-900"
                      >
                        {link.label}
                      </Link>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </nav>
        </div>
        <div className="border-t border-zinc-200">
          <p className="mx-auto max-w-6xl px-6 py-6 text-xs text-zinc-500">
            © {year} Acme Inc.
          </p>
        </div>
      </footer>
    );
  }

コピーライトの年について

new Date().getFullYear() はサーバーで実行されます。静的に生成されるページでは、ビルドした時点の年が表示されます。

年が変わったら再デプロイするか、年を固定の文字で書いて毎年更新してください。

タップしやすい高さを取る

リンクに min-h-11（44px）を付けると、スマホで隣のリンクを押し間違えにくくなります。行間を詰めて文字を並べるより、1つずつのタップ領域を確保する方が使いやすくなります。

layout.tsx でフッターを全ページに共通化する

App Router では、app/layout.tsx に置いたコンポーネントがすべてのページに表示されます。フッターをここに置けば、ページごとにコピーする必要がなくなり、リンクの修正も1か所で済みます。

中身が短いページでは、フッターが画面の途中に浮いて見えることがあります。

フッターを画面の下にそろえるには、body に min-h-dvh を付けて縦に並べます。画面の高さ以上を確保する指定です。

そのうえで main（ページの中身）に flex-1 を付けると、余った高さを中身が埋めます。フッターは常に画面の下端より下に来ます。

app/layout.tsx

import { SiteFooter } from "@/components/SiteFooter";
  import "./globals.css";
  
  export default function RootLayout({ children }: { children: React.ReactNode }) {
    return (
      <html lang="ja">
        <body className="flex min-h-dvh flex-col">
          <main className="flex-1">{children}</main>
          <SiteFooter />
        </body>
      </html>
    );
  }

LP とアプリ画面でフッターを分ける

LP にはフッターを出し、ログイン後の画面には出したくない。そんな場合はルートグループを使います。

app/(marketing) と app/(app) のように括弧付きのフォルダを作ると、URL を変えずに、別々の共通の枠を持てます。フッターは (marketing) 側の layout.tsx だけに置きます。

そのうえで、サイト全体の枠（app/layout.tsx）からは main とフッターの部品を外します。

body の中には、children（中に入れる要素）だけを残します。

app/(marketing)/layout.tsx

import { SiteFooter } from "@/components/SiteFooter";
  
  export default function MarketingLayout({ children }: { children: React.ReactNode }) {
    return (
      <>
        <main className="flex-1">{children}</main>
        <SiteFooter />
      </>
    );
  }

大きなワードマークでフッターにブランド帯を作る

フッターに印象を残したいときは、リンクの下に大きなワードマーク（ロゴの文字）を置く方法がよく使われます。画面幅に合わせて文字を大きくし、下半分を少しはみ出させると、ページの終わりがはっきりします。

文字の色は、上から下へ透明になるグラデーションにすると、背景になじみます。装飾なので aria-hidden を付け、スクリーンリーダーには読ませません。

components/FooterWordmark.tsx

export function FooterWordmark() {
    return (
      <div aria-hidden="true" className="overflow-hidden">
        <p className="translate-y-[20%] select-none bg-gradient-to-b from-zinc-900 to-transparent bg-clip-text text-center text-[18vw] font-bold leading-none tracking-tighter text-transparent">
          Acme
        </p>
      </div>
    );
  }