フッターとは?Webサイトの一番下に置く情報とレイアウトの基本を解説

フッターの基本

まずは、フッターとは何を指すのか、そしてどんな役割を持っているのかを押さえましょう。

フッターとは

フッターとは、Webページの一番下に置かれる、どのページにも共通する情報をまとめた領域のことです。

英語の「foot(足)」が由来で、ページの一番上に置く「ヘッダー」と対になる存在です。

サイト内の主なページへのリンク、問い合わせ先、運営者の情報、著作権の表記(コピーライト)などが置かれることがよくあります。

この見本のように、フッターは本文の下、ページの最後に置かれます(ページ全体を作る区画の並びはWebページの基本構造とは?で解説しています)。

本文やメインビジュアルはページごとに変わりますが、フッターはヘッダーと同じく、サイトのどのページでも基本的に同じ内容を表示します。

フッターの役割

フッターの役割は、ページを最後まで見た人に次の行き先を示し、サイトの信頼を支える情報をまとめておくことです。

本文を読み終えた人は、「ほかのページも見たい」「運営しているのはどんな会社か知りたい」「問い合わせたい」と考えることがあり、その受け皿が必要になるためです。

• 次の行き先を示す
  ページの最後まで来た人が、スクロールして上に戻らなくても、ほかのページへ移れるようにします。
• 信頼できるサイトだと伝える
  会社概要や問い合わせ先、プライバシーポリシー(集めた個人情報の扱い方を説明するページ)へのリンクを置き、誰がどんな方針で運営しているかが分かるようにします。
• 共通の情報を一か所で管理する
  全ページに必要な情報をフッターにまとめておけば、ページごとに書かなくても済み、変更するときも一か所を直すだけで全ページに反映できます。

フッターに置く情報とレイアウト

ここからは、フッターに置く主な情報と、それを見やすく並べるレイアウトのコツを見ていきます。

フッターに置く主な情報

フッターに置く情報は、サイトの種類によって変わりますが、よく使われるものは次のとおりです。

すべてを載せる必要はないので、自分のサイトに必要なものを選びましょう。

情報	内容	よく使うサイト
サイトマップ(主なページへのリンク)	サービス紹介・料金・会社概要など、サイトの主なページへのリンクの一覧	ほぼすべて
問い合わせ先	問い合わせページへのリンクや、電話番号など	企業・お店のサイト
運営者・会社の情報	会社名や所在地、会社概要ページへのリンク	企業・お店のサイト
プライバシーポリシー・利用規約	個人情報の扱い方や、サービスの利用条件を説明するページへのリンク	問い合わせフォームや会員登録があるサイト
特定商取引法に基づく表記	通信販売を行う事業者の名前・住所・電話番号などを載せたページへのリンク	ネットショップ
SNSへのリンク	公式アカウントへのアイコンリンク	SNSで発信しているサイト
コピーライト	「© 2026 会社名」のような著作権の表記	ほぼすべて

ネットショップのような通信販売では、事業者の名前・住所・電話番号などを広告に表示することが特定商取引法で定められており、その表示ページへのリンクをフッターに置くサイトが多く見られます(表示する内容は消費者庁「特定商取引法ガイド」の通信販売のページで確認できます)。

個人でも、ネットで商品やサービスをくり返し販売していれば対象になりますが、自分では何も販売していないブログや会社紹介のサイトなら、このページは必要ありません。

コピーライトは、「このサイトの文章や画像の著作権が誰にあるか」を示すための慣習的な表記です。

日本では、著作権は作品を作った時点で自動的に発生し、手続きや表記がなくても守られます(文化庁「著作権の登録手続き」)。

そのため、コピーライトの表記は権利を得るためのものではありませんが、権利者を明らかにしておく目的で載せるサイトが多くあります。

情報をグループに分けて並べる

フッターのリンクは、役割の近いもの同士をグループにまとめ、グループごとに見出しを付けて並べます。

リンクを一列にずらりと並べると、どこに何があるのか探しにくく、目的のリンクを見落としやすくなるためです。

NGの見本では、サービスの案内も会社の情報も規約も同じ並びに入っているため、「お問い合わせ」を探すにも全部を読む必要があります。

OKの見本では、リンクを「サービス」「会社」「サポート」の3つのグループに分けて見出しを付け、規約とコピーライトは線で区切った最下段にまとめたので、見出しを拾い読みするだけで目的のリンクにたどり着けます。

グループの中の行は近く、グループ同士は広く空けると、まとまりがよりはっきり伝わります。
人は、近くにあるもの同士を無意識に「同じ仲間」と受け取るためです(この考え方は近接の原則とは?で解説しています)。

サイトの規模に合わせて型を選ぶ

フッターのレイアウトは、ページ数が少ないサイトなら「シンプル型」、ページ数が多いサイトなら「サイトマップ型」を選ぶと決めやすくなります。

載せるリンクの数に合わない型を選ぶと、少ないリンクが間延びして見えたり、多いリンクが詰め込まれて見えたりするためです。

シンプル型は、リンクが数個しかない個人のブログや小さなサイトに向いていて、すっきりと軽い印象になります。

サイトマップ型は、ページの多い企業サイトやネットショップに向いていて、見出し付きの列に分けることで、たくさんのリンクを整理して見せられます。

サイトマップ型の列は、スマホでは横に並べきれないため、縦に積むか、見出しを押すと中身が開く形にまとめることが多くあります。

スマホでは指でリンクを押すので、リンク同士の間隔を詰めすぎないことも大切です(押しやすい間隔はUIコンポーネントの間隔とは?で解説しています)。

小さな文字でも読める色にする

フッターの文字は小さめにすることが多いので、背景との明るさの差を十分に取り、小さくても読める色にします。

フッターを本文より控えめに見せようとして、暗い背景に暗い灰色の文字を置くと、問い合わせ先のような大事なリンクまで読みにくくなるためです。

NGの見本はわざと読みにくくしたもので、文字と背景の明るさがほとんど同じため、目を凝らさないと読めません。

OKの見本では、文字を白にして背景との差を大きくしたので、小さな文字でも楽に読めます。

背景に近い色の文字は、明るい屋外で見るスマホの画面や、視力の弱い人には、さらに見えにくくなります。

控えめに見せたいときは、文字の色を背景に近づけるのではなく、文字を少し小さくしたり、本文との間を広く空けたりして調整しましょう(文字と背景の明るさの差の基準はコントラスト比とは?で解説しています)。

コーディングでフッターを作る

ここからは、Webサイトを自分でコーディングする人向けの補足です。

デザインツールだけで作る場合は、フッターを「全ページ共通の部品」として1つ作り、各ページに同じものを置く、という考え方だけ押さえておけば十分です。

HTMLでは、ページのフッターをfooter要素で囲むのが一般的で、MDNでも著者の情報や著作権の情報、関連する文書へのリンクなどを入れる要素だと説明されています(MDN: footer要素)。

footerのようなHTMLの要素は、見た目を決めるものではなく、「ここがフッターです」とブラウザや検索エンジン、画面の読み上げソフトに伝えるための目印です。
色や並べ方などの見た目は、CSSで別に整えます。

<footer>
  <nav>
    <!-- グループごとに見出しとリンクの一覧を置く -->
  </nav>
  <p><small>&copy; 2026 Sample Inc.</small></p>
</footer>

navはページの主なリンクのまとまりを、smallは著作権表記のような注記を表す要素で、©と書くと「©」の記号が表示されます。

実践のポイント

フッターを作るときに陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

• サイトのすべてのページへのリンクをフッターに詰め込んでしまうことがあります。
  リンクが多すぎると、本当に必要なリンクが埋もれるので、主なページに絞り、グループに分けて並べましょう。
• 問い合わせ先のような大事な情報を、フッターにしか置いていないことがあります。
  フッターはページを最後までスクロールしないと見えないので、特に大事な導線はヘッダーのメニューなど、ページの上のほうからもたどれるようにしましょう。
• フッターを控えめに見せようとして、文字を背景に近い色にしてしまうことがあります。
  小さな文字ほど読みにくくなるので、背景との明るさの差は十分に取りましょう。
• 本文の最後とフッターがくっついていて、どこからがフッターか分かりにくいことがあります。
  背景色を変える、間を広く空けるなどして、本文との境目をはっきりさせましょう(話題の区切りの空け方はセクション間の余白とは?で解説しています)。

よくある質問

• Q. コピーライトの表記は必ず入れないといけない?
  A. 日本では、表記がなくても著作権は自動的に発生するので、入れないと権利がなくなるわけではありません。
  ただし、誰が権利者かを示す目的で入れておくサイトが多いため、迷ったら入れておけばよいでしょう。
• Q. フッターは全ページ同じにするべき?
  A. 基本は全ページ同じにします。
  どのページでも同じ場所に同じものがあると、見る人が迷わず使えるためです。
  ただし、申し込みに集中してほしいLP(ランディングページ:広告などから訪れた人に1つの行動を促す縦長のページ)などでは、リンクを減らした簡単なフッターにすることもあります。
  ほかのページへのリンクが多いと、申し込む前にそちらへ移ってしまい、肝心の申し込みボタンが押されにくくなるためです。
• Q. スマホで画面の下に固定されるメニューもフッターと呼ぶ?
  A. 「固定フッター」と呼ばれることもありますが、この記事で扱ったページの一番下のフッターとは別のものです。
  画面の下に固定して常に表示するメニューやボタン(アプリの画面下にいつも並んでいる「ホーム」「検索」のようなボタン)は、スクロールの途中でも操作できるようにするためのもので、ページの最後に置くフッターとは役割が異なります。

まとめ

フッターとは、Webページの一番下に置く全ページ共通の領域で、最後まで読んだ人に次の行き先を示し、運営者の情報などでサイトの信頼を支える役割があります。

載せる情報はサイトに必要なものに絞り、役割ごとにグループに分けて並べ、小さな文字でも読める色にすることがポイントです。

まずはよく使うWebサイトを一番下までスクロールし、フッターにどんな情報が、どんなグループに分けて並んでいるかを観察してみましょう。