Webサイトのフッターをあなどってはいけない

Sean McGowan

SeanはCodalの技術ライターおよびリサーチャーです。UXデザインからIoTまで、様々な話題のブログを投稿しています。

この記事はUsabilityGeekからの翻訳転載です。配信元または著者の許可を得て配信しています。

UX Design Tips To Put Your Best Footer Forward

Webサイトのフッターは、想像以上にユーザー体験に効果的です。しかし、Webデザイン代理店の多くが、フッターのデザインをプロセスの最後に回していて、フッターの潜在能力を存分に活かしきれていません。

このような会社は重大な機会を見逃しています。フッターは手早く貼ればいいバンパーステッカーではなく、UXの安全策です。ユーザーがページの下までスクロールしても探したい情報が見つからないとき、フッターは安全弁として機能します。フッターは、ユーザーが探すのを諦めてサイトから離脱する前に引き付ける最後の機会です。

お決まりのテンプレートのようなフッターでお茶を濁すのではなく、Webデザインにおける未開拓資源を最大限に活用してみてはいかがでしょうか。本記事では、フッターの潜在能力を最適化して活かすヒントを紹介します。

フッターの重要性とは?

フッターデザインの要点を掘り下げる前に、フッターには想像以上の能力があることを証明したいと思います。一般的に、訪問者の目が一番向く可能性が高いファーストビューにもっとも重要なコンテンツを置くべきだと考えられています。

この通念は間違いないでしょう。しかし、ユーザーがほとんどの時間を費やしたり、エンゲージメントしたりしているのがファーストビューとは限りません。2500万回の異なるWebセッションからデータを収集し、ユーザーがスクロールした量と閲覧時間を図示した、以下のChartbeatのグラフをご覧ください。

ページにおけるエンゲージメント(画像提供:Chartbeat

このグラフは直感的ではありませんが、実はデータによると、ユーザーのエンゲージメントはファーストビューの直後にピークを迎えています。また、その後ユーザーがスクロールしても、エンゲージメントは私たちの想像以上に滑らかに低下しています。つまり、Webサイトの訪問者がフッターを見ていないという通念は、ただの思い込みでしかありません。

ユーザーの目線がフッターに向けられているなら、フッターの価値は大きく高まります。実際ある調査では、フッターにいくつかコールトゥアクション(CTA)を配置したことで、コンバージョン率が50%も上昇しました。

この知識を踏まえたところで、Webサイト全体のUXを向上させる理想的なフッターをデザインする方法に移りたいと思います。

バランスをとる

前章で、フッターはサイトナビゲーションの最終手段として機能することを示しました。しかしこれは、サイトマップすべてをフッターに押し込むべきという意味ではありません。フッターには、すべてのユーザーが必要とする基本的な要素と、少数の訪問者のみに向けた無関係な情報という両極端の要素を組み込みましょう。

異質な組み合わせだと感じるかもしれません。しかしこれによって、フッターは2つの目的を果たせるようになります。その目的とは、採用情報やサービス利用規約、プライバシーポリシーなどの、必ずしも人気ではないが不可欠なコンテンツを配置すること、もっとも重要な機能へのハブとして働くことです。

ここで避けなければならないのが、TeePublicのフッターのように、プロダクトのカタログすべてを詰めこむことです。

TeePublicのフッター(画像提供: TeePublic

フッターに組み込むコンテンツを減らしたら、生まれた余白を活用してフッターデザインを整える必要があります。余白を増やすという一般的なデザイン方法を用いれば、簡単にフッターは読みやすくなり、全体のUXも美しくなるでしょう。

追加すべきコンテンツ

必要不可欠なコンテンツと補助的なコンテンツをフッターに取り入れたら、次は優れたコンテンツ戦略でコンバージョン性能を強化しましょう。

まず、フッターにCTAを置いたことでコンバージョン率が大きく増加した先ほどの調査を思い出してください。フッターに配置するCTAは、サイトの主目的に直結するのではなく、メールマガジンの購読や問い合わせ先の入力といった、マーケティングファネルの二次的な目標にユーザーを誘導するべきです。

ユーザーにメールアドレスなどの連絡先情報を入力してもらいたいなら、購読者数といった単純な統計値やメルマガの内容、頻度といった魅力的な文章を添える必要があります。

また、フッターのデザインでは、ソーシャルメディアを避けては通れません。企業のTwitterやFacebook、LinkedInなどのアイコンがページの下に配置されているのには理由があります。訪問者が一旦それらのリンクをクリックすると、Webサイトに戻ることを忘れてしまう可能性が高いからです。

とはいっても、ページのどこかにソーシャルメディアのリンクを貼る必要があるのは事実であり、業界の総意としてはフッターが最適であると一致しているようです。OrbitMediaの調査でも、対象としたWebサイトの72%がソーシャルメディアのリンクをページの最下部に置いていたことが判明しています。

デザインの配置と最適化

前章までで、フッターのコンテンツの優先順位をつけ、何を含めるべきで、何を含めないべきか決断できました。では、このコンテンツをどのように配置するべきでしょうか?

キーワードはコラム化(columnise)です。フッターデザインで使われる有名な技術として、コンテンツへのリンクをコラムの中に組み込むことで、空間を最大限に活用し、論理的な階層が生まれます。これによってより読みやすくなるだけでなく、安全弁としてのフッターの役割を高めることができるでしょう。

対象ターム階層(画像提供:Creativecali

さらに、フッターの効果を最適化するために、Webサイトの検索順位を上げる機会を設けましょう。フッターは明らかにキーワードを散りばめる場所ではありませんが、あるカリフォルニアのマーケティング企業によれば、トップページのフッターにリンクを挿入したことで、サイトの順位が劇的に上昇したそうです。

最後に

フッターはWebサイトで重要ではないように見えて、最適化するという考えはばかげていると感じるかもしれません。しかし、私たちCodalは、ユーザー体験は全体的なものだと考えます。あらゆる要素やテキスト、ピクセルの1つひとつは、単なる総和以上の機能を発揮するからです。

もっとも優れたユーザー体験とは、Webサイトのヘッダーからフッターまで、あらゆる部分が連携してユーザーに従事するものです。したがって、訪問者にシームレスな体験をデザインするためには、フッターも欠かすことはできません。


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて