フッターのUIデザイン

フッターの型の選び方

フッターの型は、「サイトの形（ページ数と目的）」と「フッターで最後に何をしてもらいたいか」から選びます。問い1でリンクの量や構成を考え、問い2で重視する役割に合う型を選びます。型は単独でも、組み合わせても使えます。型を選んだら、各Patternのページでワイヤーフレームとプロンプト、動くデモを確認できます。

問い1：どんなサイトのフッターですか？

リンクをまとめて案内するか、必要な情報に絞るかを考えます。

問い2：フッターで、最後に何をしてもらいますか？

重視する役割に合う型です。単独でも、問い1の型と組み合わせても使えます。

フッターの型の比較

すべての型に共通する設計の原則

フッターの型を作る中で、型が違っても繰り返し出てきた原則です。どの型を選んでも、次の点は同じように確かめます。

• フッター全体は footer 要素にし、リンク群の部分だけを nav で囲む。まとまりの見出しは、ページ全体の見出しの階層に合わせる
• ヘッダーと同じページには同じ呼び名を使い、主要な導線の順番も大きく食い違わないようにする
• リンクは読み手がよく使うページを中心に整理する。ページ数が多い場合は、サイト全体を探せる閲覧者向けのHTMLサイトマップへの入口も用意する
• 背景色にかかわらず、読める文字の大きさと、背景との明るさの差を保つ
• 本文の最後の案内とフッターの帯や登録欄が隣り合い、同じ案内が続かないようにする。行き先と同じページ（問い合わせ・申し込みなど）では相談の帯を出さない
• 電話番号を載せる場合は、テキストで書いて受付時間を添え、発信できる環境では tel: のリンクにする
• 店名・住所・電話番号など主要な情報の一貫性を保ち、臨時休業などのお知らせは出す場所を決めて、終わったら消す。臨時の変更は、お知らせや営業日カレンダーの情報を正とし、フッターは通常の情報を表示する
• 運営者の情報やプライバシーポリシーなど、そのサイトに必要な運営者情報・法的な情報・問い合わせの手段は、どの型でもたどれるようにする。販売する場合の特定商取引法に基づく表記は、販売の形に合わせて確かめる
• SPでフッターを短くする場合も、そのサイトで優先度の高い行動の入口（電話・問い合わせ・予約など）は折りたたまない

組み合わせの例

• コーポレートサイト・サービスサイト：リンク集型を土台に、上にCTA併設型の相談の帯を置く
• クリニック・店舗：会社情報型を土台に、予約の入口を目立たせる。ページ数が多い場合はリンク集型のリンクのまとまりを加える
• メディア・記事の多いBtoBサイト：リンク集型にメール登録つき型の登録欄を組み込み、記事を読み終えた人に続けて受け取ってもらう
• LP・キャンペーンページ：シンプル型で運営者・規約類・お問い合わせなど、必要な情報に絞る。販売する場合は、販売の形に合わせて特定商取引法に基づく表記への導線も用意する

よくある質問

フッターの型は、組み合わせてもよいですか?

組み合わせて使えます。たとえば、リンク集型の上にCTA併設型の相談の帯を置く、リンク集型の一部にメール登録の欄を入れる、会社情報型にリンクのまとまりを加える、といった形です。加えるほどフッターは長くなるため、そのサイトで最後に何をしてもらいたいか、優先する行動を決めてから組み合わせます。

すべてのページで、同じフッターにしたほうがよいですか?

基本はサイト全体で共通にすると、読み手が迷いにくくなります。LPや申し込みのページでシンプル型に切り替える、お問い合わせページでは相談の帯を出さない、など目的の違うページだけ例外にします。

フッターにリンクを多く並べると、検索に有利になりますか?

フッターのリンクは主なページへの入口として役立ちますが、多く並べるほどよいわけではありません。検索のためにリンクを詰め込むより、読み手がよく使うページを中心に整理します。ページ数が多い場合は、サイト全体を探せる閲覧者向けのHTMLサイトマップへの入口も用意します。

SPでフッターが長くなってしまう場合は、どうすればよいですか?

リンクのまとまりを見出しごとに折りたたむ、SPでは主なリンクに絞る、といった方法があります。電話や問い合わせなど、フッターで特に探されるものは折りたたまずに見える場所へ置きます。