Webフッターデザインの作り方：情報設計と使いやすさのポイント

フッターは、本文を読み終えた人が「問い合わせ先」「サポート」「運営情報」を探すための入口です。リンクを増やすより、読者が最後に確認したい情報を短い見出しで整理することが大切です。

チームで画面を確認する場合は、UIデザインをチームでレビューする方法と合わせて、変更理由と確認条件を共有しておくと判断がぶれません。

フッターも画面全体のナビゲーションの設計の一部です。ヘッダーにある入口と、ページの最後で必要になる入口を並べて比較すると、重複させる情報と分ける情報を判断しやすくなります。

サービスの説明を読む人と、すでに利用していて困っている人では、必要なリンクが違います。新規利用者向けの案内と、利用中の人向けのヘルプを同じ見出しに混ぜないようにします。

ここではフッターに置く情報の選び方と、8つのデザイン例を見ていきます。配色や装飾をそのまま移すのではなく、情報の優先順位とリンクのまとめ方を自分のサイトに当てはめてください。

1. フッターのデザインが重要な理由

フッターは、本文を読み終えた後にも使われるナビゲーションです。見た目を整える前に、ページの最後で必要になる情報を確認しましょう。

フッターには、主に次のような役割があります。

①フッターはページを締めくくる

フッターは、本文と区切られた領域としてページの終わりを示します。読み終えた人が、関連ページに進む、問い合わせる、利用条件を確認するといった次の行動を選べるようにします。

ページ上部に戻らなくても必要な情報に進めることが、フッターの利点です。

②信頼と信用の構築に役立つ

運営元、連絡先、利用条件が分かると、訪問者はサービスの提供者を確認できます。受賞歴や認証を掲載する場合は、対象と有効性を確認し、内容を確かめられる情報を添えます。

③読者の行動を喚起する

製品紹介を読んだ人には試用や相談、ヘルプ記事を読んだ人には関連する案内が役立つ場合があります。本文を読み終えた時点の用事に合わせて、次の行動を選びます。

メール配信の登録欄を置く場合は、何が届くのかを入力前に説明します。登録ボタンだけを目立たせるのではなく、必要なリンクと迷わず区別できる配置にします。

④関連ページを見つけやすくする

フッターには、読者が次に必要とするページへの分かりやすいリンクを置きます。キーワードを繰り返すのではなく、「お問い合わせ」「配送・返品」など、移動先の内容が分かる名前を付けてください。

⑤UXデザインに欠かせない

問い合わせ先や利用条件を探す人が、内容の分からない見出しを何度も開かずに済む構成を目指します。リンク名には、本文やヘッダーと同じ言葉を使いましょう。

たとえば、操作方法を知りたい人向けの「ヘルプ」と、契約を検討する人向けの「導入相談」を分けると、窓口の違いが伝わります。

⑥ページ間で案内を統一する

関連するページでは、共通のリンクを同じ見出しと順番で並べます。ページが変わっても、問い合わせ先やヘルプの位置を覚え直す必要がないようにします。

ページごとの案内を加える場合も、共通のサポート情報や利用条件とは区切って配置します。

⑦重要な情報を提供する

著作権表示、利用規約、プライバシーポリシーなどは、運営元や利用条件を確認するための情報です。必要な表示や配置は事業内容と適用される要件を確認して決め、フッターだけを見れば対応が完了するとは考えないようにします。

2. フッターに何を載せるか

次の7項目は、フッターの候補です。すべてを必ず載せるのではなく、運営形態と読者の用事に合わせて選びます。来店を伴わないサービスでは、地図よりヘルプや連絡先の方が役立つこともあります。

• ソーシャルメディアアイコン
• ロゴ
• 地図
• 著作権、利用規約、プライバシーポリシー
• 連絡先
• サポート
• 行動喚起

リンクの目的ごとにまとまりを作る

狭い画面では、長い日本語のリンクが途中で切れないよう折り返しを確認します。アコーディオンにする場合は見出しを押すと開くこと、開閉状態、キーボード操作時のフォーカスを設計します。問い合わせ先まで何段階も開かせる構成になっていないかを見直してください。

メール登録欄を置くなら、何が届くのかを入力欄の近くで説明します。送信中、入力エラー、登録完了の表示を用意し、ページ下部でも次の操作が分かるようにします。

3. フッターデザインの参考事例8選

次の8つの掲載画面は、各サイトの過去のデザイン例です。リンクの分類、余白、連絡先の見せ方を読み取り、自分のサイトでは「どの用事をここで完了できるか」を基準に取り入れます。

①Site Inspire

掲載画面では、「Latest from the Showcase」という見出しの下に、具体的な作品名が並んでいます。ページを読み終えた人に、次に見られる内容を示す構成です。

最近の作品や記事を載せるなら、一覧全体を詰め込まず、見出しから内容を判断できる数に絞ります。

作品へのリンクと、下部の運営情報や連絡先が分けられている点にも注目してください。

記事を探す用事と、運営元に連絡する用事を同じ列に混ぜず、それぞれの入口を見つけやすくします。

②Chivichivi

Chivichiviの掲載画面は、赤い文字と大きな余白が特徴です。中央のロゴ、連絡先、メール登録欄に、それぞれ独立したスペースがあります。

ナビゲーション、連絡先、ソーシャルメディアへのリンクを分けて置くことで、装飾的な文字を使っていても実用的な入口を探せる構成になっています。

下部のロゴの帯も、リンクや入力欄とは区切られています。同じ構成を取り入れる場合は、メール登録欄のラベルやエラーメッセージを置く余白も確保しましょう。

③The Ministry Of Type

The Ministry Of Typeの掲載画面は、著者Aegir Hallmundurの紹介文と、アーカイブや連絡先へのリンクを組み合わせています。個人の発信では、誰がどのような関心で運営しているのかを伝える方法として参考になります。紹介文とリンクの役割を分け、必要な入口を文章の中に埋もれさせないことがポイントです。

④Asos

Asosの掲載画面は、ブランド紹介、ソーシャルメディアや決済手段のアイコン、案内リンクを横方向の帯で分けています。販促情報と、配送・返品などを調べるための情報を一つの長いリストに混ぜていない点が参考になります。

右側には配送先の国・地域を切り替える欄があります。こうした欄では、現在の選択と、変更によって何が変わるのかが分かるようにします。決済手段のアイコンを載せる場合も、実際に利用できる条件は購入手続きの中で確認できるようにしましょう。

⑤Cantilever Fish & Chips

Cantilever Fish & Chipsの掲載画面は、地図と営業時間、連絡先を近くに配置しています。来店を考える人が、場所と営業している時間をまとめて確認できる構成です。地域の店舗では、多数のページへのリンクより、来店に必要な情報を優先する判断が役立ちます。

⑥Reader’s Digest

Reader’s Digestの掲載画面では、記事カテゴリーや関連ブランドへのリンクと、メール配信の登録欄が分かれています。「今ある記事を探す」と「今後の配信を受け取る」という二つの用事を区別した配置です。登録欄を大きくする場合も、ナビゲーションの見出しやリンクが読みにくくならないようにします。

⑦Fiverr.com

Fiverr.comの掲載画面は、明るい背景にリンクを複数の列で並べ、見出しと本文の文字の強さを変えています。

リンク数が多い場合は、分類名を先に拾い読みできることが大切です。文字の装飾を増やす前に、見出しとリンクの階層をそろえましょう。

列の間の余白も、まとまりを区別する手掛かりになります。狭い画面で縦に並べる場合は、このまとまりが崩れない順番を検討します。

⑧WPForms

WPFormsの掲載画面では、会社情報、製品機能、関連ブランド、ヘルプが列ごとに整理されています。リンクの数だけでなく、読者がどの分類を選べばよいか分かる見出しが重要です。

下部のCTAバーは、リンクの列と視覚的に区切られています。自分のサイトで画面に固定するバーを採用するなら、最後のリンクやキーボード操作時のフォーカスを隠さないようにします。

4. Pixsoで美しいフッターのプロトタイプやデザインを作成

Pixsoでは、デスクトップとモバイルのフッターを同じファイルに置き、リンクのグループと順番を比較できます。最初は装飾を控え、サポート・サービス・会社情報の3つのまとまりで、必要な入口が見つかるかを検討します。

次に、長いリンク名へ差し替えた状態、列を縦に並べた状態、メール登録のエラー表示を用意します。コメントで「サポートと営業のどちらを選ぶか迷う」といった具体的な懸念を残すと、見た目の好みだけで終わらないレビューになります。

フッター全体を再利用する場合はコンポーネントとしてまとめ、共通にするリンクとページごとに変える要素を区別します。実際の送信処理やリンク先の実装は開発側の作業として、デザイン上の状態と合わせて引き継ぎます。

フッターを情報設計の最後の接点として確認する

フッターはリンクを増やす場所ではなく、ページを読み終えた人が次に取り得る行動を整理する場所です。必須の会社情報、主要な製品・サポートへの導線、法務リンクを優先し、同じ内容を別名で重複させないようにします。

1. 分類：製品、リソース、会社、サポートなど、目的が異なるリンクを分ける。
2. 順序：利用者が次に進みやすいリンクを上段に置き、法務情報は見つけやすい固定位置にする。
3. 状態：多言語、狭い画面、リンク切れ、外部リンクの開き方を確認する。
4. 運用：リンク追加の理由と担当を記録し、ページごとの例外を増やさない。

フッターを含むページ全体をチームで見直すときは、前段で案内したUIレビューのページへつなぎ、ナビゲーションと本文の役割を分けてコメントすると判断が速くなります。

まとめ

フッターでは、リンクの数よりも、読み終えた人の用事に合う分類と名称を優先します。必要な情報を残しながら、狭い画面でも迷わず移動できる構成を目指しましょう。

最後に、本文を読み終えた状態から問い合わせ先や利用条件を探してみてください。探す時間が長い場合は、リンクを足す前に見出しとグループ分けを見直すと、修正する場所が明確になります。