フッターを8種類の型に分け、AIへの指示文・動く見本・コードを載せています。
フッターはどの型を選ぶか
フッターは、ページを最後まで読んだ人が次の行き先を探す場所です。型を選ぶときは、サイトのページ数、読み終えた人にしてほしいこと（問い合わせ・来店・登録）、来店や電話が多いかどうか、の3つから考えます。型は組み合わせて使えるので、たとえばリンク集型の上に CTA 併設型の帯を置く、会社情報型の下にリンクの段を足す、といった形にもできます。
どの型でも守ること
- footer と nav で囲む。サイト共通の下部を
footer、リンクの並びをnavにし、aria-label="フッターメニュー"でヘッダーのメニューと区別します。 - 呼び名をヘッダーとそろえる。同じページへのリンクは、ヘッダーでもフッターでも同じ語にします。
- 運営者と規約類を必ず残す。どの型を選んでも、運営している会社や人の名前と、個人情報の扱いを定めたページへのリンクは置きます。物を売るサイトなら、特定商取引法にもとづく表記も加えます。
- 文字は小さくても 13px まで。本文より一回り小さい 13〜14px を目安にし、背景との明るさの差も確かめます。
- 押せる部分を 44px 角くらい取る。SP では各リンクの上下にゆとりを持たせ、指が隣のリンクに触れるのを防ぎます。
よくある質問 (FAQ)
どんなサイトでも欠かせないのは、運営者の情報・個人情報の取り扱い・問い合わせ先の3つです。そのうえで、ヘッダーに載せきれない子ページ（採用情報・よくある質問・資料ダウンロードなど）を足していきます。全ページを網羅しなくてかまいません。
リンクが15個を超えるなら、列ごとに折りたたむと画面が長くなりすぎません。それより少なければ、2列に折り返して開いたまま並べるほうが、タップの手間が減ります。折りたたむときは見出しを
button にして、開閉の状態を aria-expanded で持たせます。連絡先や公式アカウントまで載せた大きなフッターなら、SP折りたたみ型のように電話と相談の入口だけを開いたまま残します。
なります。地図を全ページで読み込むと、そのぶん表示に時間がかかります。フッターには住所と「地図アプリで開く」リンクだけを置き、地図そのものは所在地の案内ページにだけ載せる、という分け方ができます。埋め込むなら、
loading="lazy" で画面に近づいてから読み込みます。
日本では、著作権は表示が無くても作った時点で生じるので、年を書かなくても権利は変わりません。書くなら、最初に公開した年だけにするか、「2020–2026」のように範囲で書きます。古い年のまま残っていると更新が止まったサイトに見えるので、範囲で書くときは終わりの年を自動で入れると手間が省けます。