フッターデザイン – 6つの事例とベストプラクティス

ウェブサイトのフッターは、必要不可欠なUIパターンであり、訪問者を重要なコンテンツに導くと同時に、ビジネス価値を高め、新規顧客とつながる絶好の機会をもたらします。  

本記事では、みなさんの今後のプロジェクトにインスピレーションを与えるようなウェブサイトのフッターデザイン、「やるべきこと」と「やってはいけないこと」、専門家の例、ベストプラクティスについてお話します。  

  UXPinでより高い忠実度と高度な機能性でUIデザインをプロトタイプ化しませんか。無料トライアルにサインアップして、コードベースのデザインの無限の可能性をぜひご覧ください。  

ウェブサイトフッターとは

  ウェブサイトフッターとは、ウェブサイトやアプリケーションの下部（またはフッター）にあるUIパターンのことです。フッターには、ナビゲーションのリンク、連絡先、ポリシー、著作権情報、SNSへのリンクなどのお役立ち情報が表示され、ユーザーがビジネスについてより詳しく知ることができるため、重要なウェブサイトの構成要素となっています。

メインのヘッダーナビゲーションをリンクしましょう；フッターは、ユーザーがいつでもリンクやコンテンツにアクセスできるように、すべてのページに表示されます。フッターはウェブページの最下部に位置しますが、ユーザーとビジネス目標にとって重要なコンポーネントです。  

フッターの目的

  デザイナーがWebサイトのフッターをどのように使うかは、ビジネスやコンテンツによって異なり、ウェブサイトでは大抵、セカンダリーナビゲーション、つまり、会社概要、製品資料、リソースなど、ウェブサイトのヘッダーに収まりきらない重要なリンクにフッターが使われています。  

GDP（EU一般データ保護規則）やCCPA（カリフォルニア州消費者プライバシー法）、その他の法的情報により、ウェブサイトにはプライバシー、利用規約など、特定のポリシーが含まれなければいけません。なのでデザイナーは通常、このようなリンクをフッターに設置し、ユーザーが常にそれがどこにあるのか分かるようにしています。  

販売面のメリット

  また、多くのUI/UXデザイナーは、製品のCTA（Call To Action）、お問い合わせページやニュースレターのサインアップフォームによる見込み客の獲得など、ビジネス目的でウェブサイトのフッターを使っており、フッターで、ユーザーを特集ページや売れ筋の製品カテゴリー、サービスに関する詳細情報へナビゲートできるようになります。  

マーケティング効果

  また、多くのマーケティング担当者は、SEO（検索エンジン最適化）目的でウェブサイトのフッターを使っており、フッターには、以下のようにSEO効果がいくつかあります：  

• 検索結果の上位に表示させたいページの押し上げをサポートする。
• ホームページのリンクには重みがある。つまり、検索エンジンはそのような内部リンクを重要と見なし、それに応じて優先順位を付ける。
• クリックの可能性を高め、それによって直帰率が下がり、ドメインオーソリティとランキングが上がる。

フッターに含むもの

  繰り返しになりますが、何を含むかはウェブサイトによって変わってきます。例えばECサイトは、ブログとはフッターの優先順位が異なるでしょう。以下は、フッターに含めるとよい項目です：  

• ナビゲーションリンク
• ブランドエンゲージメントとメッセージ発信
• お客様の声
• 著作権

ナビゲーションリンク

  フッターに表示されるナビゲーションリンクには種類がいくつかあり、以下のようなものがあります：  

• お役立ちリンク：お問い合わせ先、電話番号、メールアドレス、会社所在地、カスタマーサービスのお問い合わせ先、プライバシーポリシー、使用条件
• 便利なナビゲーション：利便性のためのメインナビゲーションのコピー（固定ヘッダーの場合は不要な場合がある。）
• 二次的タスクリンク：求人応募、投資家情報、ドキュメント/仕様書、プレス情報、アフィリエイト登録、FAQ
• サイトマップ：複数のトピック/製品カテゴリへのリンク

ブランドエンゲージメントとメッセージ発信

ウェブサイトフッターのもう一つの一般的な用途は、人と会社がつながることを奨励するようなリンクとフッターコンテンツである、「ブランドエンゲージメントとメッセージ発信」であり、以下のようなものがあります：  

• SNSのアイコン
• InstagramまたはTwitterなど、複数の最新投稿があるソーシャルフィード
• ブランドロゴ
• 1〜3文程度のブランドのスローガンやビジョン
• メール配信登録

お客様の声

  ブランドによっては、お客様の声やレビューのためにフッターが使われ、また、GoogleビジネスやTrustPilotのウィジェットで星評価が表示されることもあります。このようなUIパターンは、社会的証明や製品・サービスへの興味を喚起するのに適しています。

著作権

  フッターの一番下にある著作権マークと告知は、あなたが当該ウェブサイトのコンテンツの所有者であることを訪問者に伝えるものです。法的な義務ではありませんが、コンテンツに対する権利を保護する予定であることを知らせるのは、一般的な方法です。  

フッターデザインの事例6選

  様々な業界からフッターデザインの例を６つ選び、デザイナーがどのようにビジネス目標やユーザーのニーズに沿ったレイアウトを作るかご紹介します。  

このような例から得られる重要なポイントは、業界によってリンクとコンテンツの優先順位が異なるということです。また、どの例でも、訪問者が素早く情報を見つけられるよう、クリーンでミニマルなレイアウトが取り入れられています。

1. UXPin – Saasのフッターデザイン

筆者達は、UXPinのウェブサイトをSaaSのフッターの例として使うことにしました。固定ヘッダーが使われているため、主要なナビゲーションがデスクトップユーザーから常に見えるようになっているのがわかるでしょう。  

UXPinのフッターには、会社、製品情報およびマーケティングの主要情報が記載されています。また、高度なツールであるUXPinと、一般的な画像ベースの競合製品との比較を希望されるお客様が多いため、製品比較リンクがいくつか掲載されています。  

その他、SaaS製品に欠かせないフッターリンクとして、ドキュメント、チュートリアル、教育コンテンツ、その他のお役立ちリソースがあります。ちなみにUXPinには、言語選択、SNSのリンクやポリシー情報も含まれています。

2. BBC – ニュースのフッターデザイン

BBC（英国放送協会）は、世界最大級の報道・メディア機関です。  

この巨大メディアには、30以上の言語版のウェブサイトが主にフッターを使って表示され、人気のあるニュースのトピックには別のセクションが設けられています。また、ページの一番下には、法的情報、ポリシー、お問い合わせ先、BBCの広告へのリンクが掲載されています。  

すっきりとしたレイアウトで読みやすく、ユーザーはコンテンツやリンクをサッと見つけることができます。  

3. Asos – eコマースのフッターデザイン

世界的なECブランドであるAsosは、SNSのボタン、支払い方法、お役立ちリンクなどを備えたシンプルなフッターデザインが使用されています。eコマースで最も重要なのは、「配送/返品ポリシー」、「注文追跡」、「スペシャルキャンペーン」へのリンクですが、Asosの場合、学生割引やギフトカード、ブラックフライデーのプロモーションが行われています。  

そして、上場企業（ASOMY）であるAsosは、投資家情報や企業責任に関する情報提供がが求められています。  

さらに、世界的ECブランドであるAsosには、顧客が閲覧中のストアや、他の地域や通貨に変更するためのリンクが表示されます。

4. Zorro Design – 代理店のフッターデザイン

代理店は通常、以下の２つの目的でウェブサイトを利用します：  

• 自身の作品紹介
• 新規リードの創出

  米国のZorro Designは、白と黒のフッターデザインに、ユーザーをコンタクトフォームに誘導する明るい黄色のCTAが使われています。Zorroのデザイナーはフッターを完璧にデザインしており、画面の中央にCTAがあり、周囲には「クリックして!」と訴えかけるような空白がたくさんあります。  

最後に、ロゴとスローガンを左側に配置し、最近の仕事、お問い合わせ先、会社概要、SNSのボタンなど、重要なリンクがいくつか付いています。  

Zorroのフッターデザインは、ユーザーがサッとコンテンツを理解し、見つけることができるように、すっきりとしたデザインになっています。  

5. アレックス・ラカス氏 – フリーランサーのフッターデザイン

代理店と同様に、フリーランサーも自身の仕事を紹介して顧客を獲得するためのポートフォリオのウェブサイトが必要です。プロダクトデザイナーのアレックス・ラカス氏は、潜在的な顧客や雇用者、デザイナーとソーシャルチャンネルを通じて主につながるために、ウェブサイトのフッターを使用しています。  

また、リモートワーカーであるアレックスは、文字を点滅させることで、自身の現在地（この場合はロサンゼルス）を訪問者に伝えています。  

このダーク/ライトモードの切り替えは、UXデザインのポートフォリオとして、彼がウェブアクセシビリティに配慮していることを示すいいタッチであり、過去の作品やお問い合わせページにつながるリンクも用意されています。

6. Booking.com – 旅行会社のフッターデザイン

Booking.comは世界最大級のオンライン旅行会社で、70カ国以上、2800万件以上の宿泊施設が掲載されています。Booking.comの目的は宿泊施設の販売ですが、新しい物件を取り込みたいため、 「物件を掲載する 」ことが主要なフッターのCTAになっています。  

また、フッターには重要な5つのリンクが大きく太字で表示されて目立つようになっており、さらに、顧客が理想の旅行先をより早く見つけられるよう、地域や宿泊施設など、複数の検索カテゴリーが設けられています。  

そして、Booking.comは上場企業（NASDAQ: BKNG）として、必要なすべての投資家および企業情報へのリンクを掲載しています。  

ページ下部には、Booking.comの持株グループであるBooking Holdings Inc.のロゴがいくつか掲載されています。  

フッターのデザイン法

1. リンクの優先順位付け

  いいフッターをデザインするための第一歩は、リンクに優先順位をつけることです。デザイナーは、ユーザーのニーズとビジネスの目標を考慮し、訪問者にとって有意義で役立つものを作成しなければいけません。  

2. シンプルイズベスト

  ごちゃごちゃしたUIは、常にお粗末なパフォーマンスになり、わかりにくく、ユーザーを混乱させる可能性があります。UI要素、リンク、テキストを減らすことで、最も重要なコンテンツにトラフィックを誘導することができるのです（ここで、最初のポイントに戻りますが、リンクの優先順位を適切に設定しましょう）  

3. 単一のCTAを使用

CTAが単一であれば、訪問者を最も重要なタスクやビジネスゴールに導くことができます。フッターのデザインは通常、白と黒のツートンカラーで、鮮やかな色のCTAがポップで人々の注意を引くのに最適な背景となっています。  

4. モバイルからでも使いやすいフッター

  モバイル優先のデザインは、ウェブサイトのフッターに非常に重要です。デスクトップでは3～4カラムあるでしょうが、スマートフォンでは1カラムです。カラムやリンクの数が増えると、ユーザーはコンテンツを探すためにスクロールしなければならなくなります。最も重要なリンクやコンテンツは最初のカラムに配置し、ユーザーが最初に目にするようにしましょう。  

5. 階層構造で重要度を表示

  Booking.com、Zorro Design、BBC、アレックス・ラカス氏の例では、ユーザーに最も重要なリンクを示すために視覚的階層構造が使われています。サイズ、色、重みの違いは、重要性を表示するための効果的なテクニックです  

6. コンプライアンスの遵守

  ポリシーや免責事項などの法的情報は、現代のウェブデザインにおいて非常に重要です。デザイナーは、こういったリンク先の表示方法について、自社の義務を調査する必要があります。  

例えば、一部の国の金融・投資商品では、免責事項の情報をフッターに表示し、常に顧客の目に触れるようにすることが義務付けられています。Chase Bankのフッターの例をご覧ください。

7. ブランディングのチャンス

ウェブサイトのフッターは、SNS、ニュースレターの登録、会社のリンクなど、ユーザーとブランドの接点をつなぐ素晴らしい機会です。

8. お役立ち情報の提供

ユーザーは、ドキュメント、チュートリアル、ブログ、その他のリソースのようなヘルプを探して、ウェブサイトのフッターにスクロールすることがよくあり、UXPinのフッターデザインは、製品について顧客に啓蒙するための複数のリソースを提供する完璧な例になります。

UXPinでフッターをデザインしよう

UXPinで美しく、インタラクティブで、レスポンシブなWebサイトのフッターを作成しませんか。UXPinがあれば、デザイナーはコードのような機能を持つプロトタイプの構築やユーザーテストの改善、さらにステークホルダーからのより良いフィードバックの獲得が実現します。

UXPinには、コントラストチェッカーや色覚異常シミュレーターなどのアクセシビリティツールも組み込まれており、キャンバスを離れずにサッとデザインをテストすることができます。

世界で最先端のコードベースのデザインツールであるUXPin を使って、より良い製品をより早く提供しませんか。無料トライアルにサインアップして、UXPin でより良いユーザー体験を顧客に提供しましょう。