「オシャレは足元から」と言いますが、履いている靴で印象が180度、変わることもあります。例えば、スーツの足元を革靴にするのか白スニーカーにするのかでは、まったく異なるファッションになるという具合です。
ウェブサイトのフッターも足元としての大切な役割があります。デザイン的な側面も勿論ですが、フッターは、ユーザーのアクションを誘導することができるそのページ最下部、最後のエリアともいえるのではないでしょうか。

閲覧者の視点が「ここが(ページの)一番下」と認識した瞬間は、次の行動決定をするエリアともいえます。そこで「トップへ戻る」を押してヘッダー、グローバルナビゲーションに戻ってもらえると…「セーフ!」首の皮一枚は繋がります。ですが、恐らく…ヘッダーからメインコンテンツの流れでそのサイトの世界観、ワクワクを伝えることに失敗していると…残念なことに「離脱」されてしまう可能性が高いでしょう。

「それはもったいない!」と感じたあなたには、是非記事を読み進めていただき、コンテンツの最後の砦、フッターの役割、より良いフッターの使い道を模索する機会としていただけたらと思います。

フッターの役割を考える

ここからはTCDのデモサイト、コンテンツを中心にフッターが担う役割、狙いの事例を含めて、ご紹介していきながら進めていきたいと思います。テンプレートの特性上、同じ基本設定を用いてフッターを表現している為、シンプルに収まりがちではありますが、テーマの世界観、デザインの足元として気を配っていることを感じていただけたら嬉しいです。

ページ情報・著作権などを表示するためのフッター

参考:ボタンマルシェ

どのサイトにおいても著作権などの表示は最低限されていることが多いかと思います。管理者としての存在を明示して、一歩踏み込んだサイトを運営する姿勢を表現してみるのもよいでしょう。

ナビゲーションとして活用するためのフッター

参考:LAW

グローバルナビと異なる見せ方をすることで、サイト全体のコンテンツに気づいてもらえる可能性が高まります。コツはあまり多く並べ過ぎないことです。ほどよいボリュームでかつ整理整頓された案内だからこそ、おもてなしの気持ちが表現できるのではないでしょうか。

サイトデザインのバランスを整えるフッター

参考:ONE

ウェブサイトのフッターはファッションで言うと足元にあたり、ヘッダーは頭。デザインの側面でフッターを考えると、重要なのは上から下までの整合感が大切です。スクロールしても、トップ、ファーストビューの印象が最後尾のフッターにも違和感なく繋がっているかという点。上から下を見て、全体の整合感を付けていくという意識をもちます。ここに手を抜かないだけでサイト全体のデザインチューニングがしっかりとまとまるので是非取り組んでみてください。

SNSなど外部サービスのハブとして活用するためのフッター

参考:デザインプラス求人サイト

TCDの基本フッターは、仕様上アイコンでのみのSNS誘導ですがtwitter、facebook、Instagramなどの投稿を実際に表示する手法も効果的でしょう。

困ったときの案内板として活用するためのフッター


楽天市場、Yahoo!ショッピングなどのモール系ECサービスでも定番の形です。それぞれの商品ページから離脱することなく送料などお客様の気になるであろう情報を並べておくことを目的としてます。

広告(バナー掲示場所)として活用するためのフッター

参考:ロゴマルシェ

自社サービスへの誘導や広告出稿用の場所として確保するにも適しているでしょう。デザインのとりかた次第ですが、WEBサイトの公式サプライヤーとしての見せ方も可能ですので表示されるだけで意味がある広告向けかもしれません。

コンテンツの世界観を表現するフッター

参考:FAMOUS

そのコンテンツの世界観はファッション同様、細部に宿るものです。「ページトップ」に戻るボタンをオリジナルのものにするカスタマイズも良いでしょう。フッターまでしっかり世界観を崩さない配慮は他ページにも妥協していない姿勢を示すことができると思います。

CTAとして勝負するフッター

参考:VOGUE

興味をもっているからこそ表示される場所(フッター)だからこそクリックされる可能性が上がるということも期待できます。もしかするとメインコンテンツ中のCTAを素通りしてこられたユーザーかもしれません。フッターの再誘導があることで、「実は行動をしようと思っていた」というユーザーの取りこぼしを防ぐことができるかもしれません。

スマホの操作性を大事にするフッター

参考:Switch

これまでの紹介と少し異なった視点にはなりますが、スマートフォン操作時は親指が届く範囲に気を配ることも大切な要素です。お問合せをしたいと思った時にすぐ電話を掛けることができるのかどうかでビジネスが決まることもあるでしょう。TCDテーマではスマートフォンでの表示用に固定フッターバーを表示することができるテーマオプションを用意したものがあります。
※デモサイトでこの機能を確認したい場合はスマートフォンからアクセスをして確認をいただく必要があります。

頭からつま先までを意識をするサイト運営

参考:GENSEN

TCDのテンプレートはテーマオプションからメニュー設定をこなしていくことで、細部までデザインされたフッターを手に入れることができす。フッターに注目しながらデモサイトを閲覧いただくことで新しい発見があるかもしれません。

TCD GALLERY

3列や4列メニューがあったり、サブメニューだけだったり、フッターカルーセルがあったりと多様性がある。情報量や導線確保といった実用的な意味だけでなく、全体のバランスを見て設計されています。国内のWordPressテーマではフッターまで意識して作っていると感じられるところはTCDだけと言っていいのではないでしょうか。勿論、SNSの読み込みなど、プラグインを用いたカスタマイズを施すことで、よりリッチな表現をフッターに導入することも可能です。

まとめ

そもそもサイトのコンテンツに興味を持ってくれたユーザーでなければ、フッターまでスクロールをしてくれることはないでしょう。裏を返せばフッターが表示されているという状態はサイトのコンテンツに興味を持ってくれていると言えます。そういう風にフッターを捉えられると、手を抜けないと考えるのは自然なことではないでしょうか。TCDテーマを使用されているサイトでも、フッターが空になってたりすることがあります。この記事で取り上げたようにデザインは施されていますので、メインコンテンツのカスタマイズをする手間、労力を掛けるよりも先にデモサイト通りにフッターを使ってみるということを試していただきたいと思います。フッター部分をTCDのデモサイトのように再現することは、大きな手間がかかることではありません。

見る人が少ないからと言って、疎かにすると、あなたのコンテンツに興味を持っている人のアクションを取りこぼしてしまうかも。気を抜いていると実は大きな損をしているかもしれない箇所がフッターエリアということです。

グローバルメニュー(メガメニュー)についての解説記事も用意しましたので、併せてご覧ください。