Webサイトのフッターにサイトマップを設置すべき理由

Anthony

UX Movementの著者、編集長。明快で効果的なデザインを愛し、ユーザーのために戦います。

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

Why the Footer Is the New Site Map

何年か前は、フッターの部分にサイトマップへのリンクを置くのが一般的でしたが、近年ではフッター自体が、サイトマップとして新たに使われるようになりました。

サイトマップは、サイト内のすべてのリンクを1ページ内に記載したものです。しかし今では、フッターを正しくデザインすれば、ほとんどのサイトにおいては、必要ないページとなっています(XMLのサイトマップは、SEOにおいては未だに不可欠ですが)。

伝統的なフッター

さかのぼってみると、フッター自体がユーサビリティの要素として、重要視されることはまれでした。伝統的なフッターとはサイト管理に関する一連のリンクと、コピーライトの情報が載せられているようなものを指しますが、研究によると、ほとんどのサイトが伝統的なフッターを使っていたそうです。当時、大半のユーザーはページの一番下にあるフッターの部分は使わないという思い込みがありました。

そんな伝統的なフッターは、今ではミニサイズのサイトマップになって活用されるようになりました。この小さいサイトマップは、単に余白を埋めただけでなく、伝統的なフッターに比べると非常に効果的で、検証によると、サイトマップを記載したフッターは売り上げやCTR(クリック率)の向上につながることが分かっています。

ミニサイトマップ

サイトの規模が大きい場合は、フッターをミニサイトマップにするべきです。ユーザーは、ヘッダーを見て探しているものが見つからないと、フッターに移動します。

ここでユーザーは、カテゴリーごとにまとめられたサイトのリンクの一覧を見て、内容を理解します。ヘッダーにあまり多くのリンクを詰め込むと、メニューバーがごちゃごちゃして、内容が多すぎるように見えてしまいます。ヘッダーは、特に重要なコンテンツのリンクだけを載せるものとして、その他のものは全てフッターを利用して掲載しましょう。

footer_01

フッターの種類:(左)伝統的なフッター(右)ミニサイトマップ

フッターをミニサイトマップにするときは、ユーザーが探しているものをより素早く見つけられるようにします。リンクは全て並べるようにして、ドロップダウンメニューなどにしてはいけません。ユーザーが、わざわざドロップダウンを開く手間をかけないようにします。

それだけではなく、ユーザーがカテゴリーリンクをクリックして、さらに詳細なリンクに飛ぶ必要のないようにもします。リンク先のコンテンツには直接辿り着けるようにしましょう。

また、検索フィールドを使う時間も短縮することができます。ページを探すのに、キーワードをタイプする必要がなくなります。フッターに画面をスクロールすれば、そこにリンクがあるようにしましょう。

フッターをデザインする

効果的なミニサイトマップのフッターを作るためには、分かりやすいカテゴリーごとのラベルを付けて、リンクと区別が付くような見た目にすることが必要です。そうでないと、ユーザーがたくさんあるリンクの一覧を見たときに、どれがリンクか分かりにくくなってしまいます。

ユーザーが、カテゴリーのラベルを見てから、時間をかけずに目的のリストを見られるようにしましょう。

footer_02

見やすいフッターはラベルとリンクのコントラストがはっきりしています

各リンクの間には、十分なスペースをとって、モバイルユーザーにとってもリンクをタップしやすいようにしましょう。リンクやカテゴリーの数が多い場合は、アコーディオンタイプのメニューを採用するといいでしょう。これによってスペースを節約するだけでなく、小さいリンクをタップするとき、近くにある別のリンクを間違えて押してしまうミスを防ぐこともできます。

footer_03

モバイルに対応したアコーディオンフッター

まとめ

全てのサイトに、ミニサイトマップのフッターが必要なわけではありませんが、特にたくさんのコンテンツを載せている大きなサイトの場合は考慮すべきです。ユーザーが製品やサービスを迅速に見つける必要のある、ECサイトなどにおいては、特に重要です。

デザイナーは最早、フッターを軽視することは出来ません。最も気配りと注意が必要な、サイト要素なのです。リンクの一覧を整理し、サイト内のあらゆるコンテンツに素早く辿り着けるようにしましょう。


Welcome to UX MILK

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

このサイトについて