：2012年06月21日　 ：レイアウトデザイン　 ：ユーザビリティ　 ：この記事は14分程で読めます。

昔はさっぱり注目されていなかったフッターエリアですが、今では多くのクリエイターがフッターに関心を持つようになりました。フッターデザインだけを集めたサイトなんて過去にほとんどありませんでしたが、ここ2、3年でいくつもそういったサイト・ページを見るようになりました。また特に海外サイトで言えることですが、最近では「これがフッターなのか！」と思う、すごいクオリティーのフッターも見る機会が多くなりました。

皆さんは大きく関心を集めるようになったこのフッターエリアを上手に活用できていますか？

ユーザーの起こすアクションを絞る(誘導する)

皆さんはブログの記事を読み終わった後、次にどんなアクションを起こしますか？

• スクロールしてトップに戻る
• 元々いたサイトに戻る(はてブとか)
• タブを閉じる
• ツイートしてみる
• なんとなくコーヒーを飲む

上記のようにユーザーは、記事を読み終わると必ず何らかのアクションを起こします(固まってしまう人がいたらごめんなさい)。そのアクションは人それぞれですが、工夫次第である程度ユーザーのアクションを絞ることができます。例えばブログの記事の終わりに、関連記事が5件ほど表示されているサイトをよく見ると思いますが(私のブログも)、これもアクションを絞る工夫の1つです。これは記事を読み終わって次のアクションを考えているユーザーに「こんな記事もあるよ！」って教えてあげることで「お！じゃあちょっと見てみるか！」といった感じでアクションを促しています。

ユーザーはどんな場所であっても何らかのアクションを起こしますが(記事の途中でタブを閉じたり)、アクションを起こしやすい場所もあります。それは記事の終わりや、ページの終わりに位置するフッターエリアです。どんなことでもそうですが、人は終わりを迎えれば次に何をするかを考え、行動に移します。そうしなければ本当に固まってしまいますからね。
フッターエリアはページの終わりに位置しているため、次の行動を考えるキッカケとなる場所なんです。

離脱を考えているユーザーの目を引く最後のエリア

皆さんはページを最後まで閲覧し、フッターエリアまで達した時、そこに何らかの気になる情報が掲載されていれば目をとめませんか？もし「コンテンツの内容もしっかり読んだし、もうこのサイトに用はないな」と思っていたとしても、自分にとって気になる情報がそこに書かれていたら、【離脱】というアクションをやめて、その気になるページに立ち寄りませんか？
フッターは、ユーザーのアクションを誘導することの出来る最後の場所です。もちろんフッターはアクションを誘導するためだけにあるわけではありませんが、アクションを起こすキッカケになりやすい場所だということは間違いありません。そのため、その特性をデザイン・コンテンツに活かすことは大切です。

実例に学ぶ12のフッター活用方法

多くのサイトを見て回った結果、フッターの活用方法は大きく分けて12個にまとめる事ができました。画像と簡単な説明文を交えながら、1つ1つ紹介させていただきます。
もちろんここで紹介する方法以外にも、活用の仕方は沢山あります(自分が読んだ本をズラーっと並べているフッターとかもありました)。自社サイトの特性を活かし、独自の活用法を考えても面白いかもしれません。大切なことは、そのサイトを利用するユーザーが何を求めているか・何を必要としているかを見極め、デザインやコンテンツに反映させることです。

それでは実際に多くのWEBサイトで使われているフッターの活用方法を見てみましょう。

1.ページ情報・著作権などを表示するために活用する

昔から使われている最も基本的なフッターの活用方法です。一般的にユーザーは作成日・利用条件・個人情報保護方針・サイトマップ・著作権表記などがこのフッターのエリアに表記(リンク)されていると考えています。そのため、これらの要素を素直に表記するだけでユーザビリティの向上につながります。

TOTO：トイレ・ユニットバス・システムキッチン・洗面所・リフォーム・増改築
こちらのサイトは、必要最低限の要素を上部に広いスペースを用いてすっきり配置させています。全体を通してかなり清潔感を感じるデザインになっています。さすがTOTOさんですね。フッターとは関係ありませんが、TOTOさんのフラッシュは触ると気持ちがいいです。

2.ナビゲーションとして活用する

これも比較的多く使われている一般的な活用方法です。ヘッダーナビと同じナビゲーションをフッターにも表示することで、ページを最後まで読んでくれたユーザーが、いちいちヘッダーへ戻らなくてもページ移動ができます。これはユーザビリティーの向上に繋がります(私のサイトのフッターもナビゲーションとして活用しています)。

塩江温泉 温泉宿ペンションとまと 香川県高松市塩江町
こちらのサイトは、ヘッダーのナビゲーション要素をフッターにもテキストリンクで表示しています。ヘッダーへ戻らなくても主要コンテンツにアクセスできるので便利です。またコチラのサイトは【10.コンタクト情報として活用する】の要素も含まれています。こういった宿泊施設のHPの場合、住所や電話番号などのコンタクト情報をフッターに設置する事でユーザビリティが高まります。
私は車で旅行をすることが多いんですが(ドライブ好きなので)、GoogleMapで道のりを確認しておきたい時など、フッターに住所が記載されていると、すぐにコピーして確認が出来るので便利です。また私のようにコピーする人って結構多いと思うので、画像ではなくテキストで記載するのもポイントですね。

3.SEO対策として活用する

個人的にはあまり効果は見込めないと考えていますが、フッターのリンクは比較的テキストリンクで作られることが多いため、SEOに有利だと言われています。ただ無理やりキーワードを埋め込んだ不自然なリンクだと評価されないとも言われていますので注意が必要です。私自身ペナルティーを受けた例は聞いたことありませんが、やはり人が不自然だと思うものはロボットも不自然だと判断するようなのでやめたほうがいいでしょう。

昭和丸筒
こちらのサイトが実際にSEO対策を目的としてフッターを活用しているかはわかりませんが、参考として掲載させていただきました。こちらのサイトのフッターは【4.サイトマップとして活用する】の要素も含まれています。

4.サイトマップとして活用する

フッターにサイトマップを設置することで、ユーザーは素早くページを移動することができます。また独立したサイトマップページよりも、フッターにサイトマップを配置すると、ユーザーに余計なクリックをさせずに済みます。ユーザーは少ないクリックでページを移動できると使いやすいと感じます。ただ、あまりにもページ数が多い場合は、素直に独立したサイトマップページを作ったほうがいいでしょう。ページ数が多すぎるとユーザーは使いにくいと感じてしまいます。選択肢が多くなればなるほど、人はかえって選べなくなってしまうものなんです。

Apple – Mac
こちらのサイトは、すっきりとシンプルにリンクが並べられています。フッターは大きなスペースが取れる分、このようにサイトマップが設置できます。やっぱりアップルのサイトは美しいです。

5.サイトデザインのバランスを取るために活用する

フッターのデザインについて考えず、ヘッダーのデザインにばかり力を入れたサイトは【頭の大きい】サイトデザインになりがちです。これでは赤ちゃんのように倒れてしまいそうで、ユーザーはバランスの悪さを感じます。そのためフッターのデザインもボリュームをアップさせることで、サイトデザイン全体のバランスを取ることができます。

Jan-Eike Koormann: Visual communication. Made in Hamburg.
こちらのサイトのヘッダーは、雲になっていて、そこからずーっとスクロールしてくるとこのフッターが現れます。このサイトの場合【頭の大きいデザイン】というより【締まりの無いデザイン】にならないようにフッターが工夫されていると思います。淡い色を沢山使うと、サイト全体がぼやけてしまいやすくなります。そのためこのサイトでは、フッターにブラックのラインを引いて上手くバランスを取っています。またこちらのサイトは【6.世界観を表現するために活用する】の要素も含まれています。

6.世界観を表現するために活用する

フッターはヘッダーと違い、ほとんど要素を設置しないということを選択できます。またフッターは大きなスペースを確保しやすいエリアでもあります。そのためイラストやグラフィックを活用して、サイトの世界観を表現することもできます。もちろんナビゲーションやタグクラウドなどの要素を配置しながらイラストやグラフィックを使い世界観を表現しているサイトもあります。

Grzegorz Kozak — Portfolio 2010
このサイトはヘッダーからフッターへのつながりが非常に素敵です。ビジュアルで世界観を表現しています。細部にまで細かい工夫がされていて、例えば電話ボックスをクリックするとフォームが現れたり、スーパーファミコンのコントローラーらしき物が土の中に埋まっていたりします。非常にユニークです。

7.よりサイトに興味を持ってもらうために活用する

スクロールをしないユーザーが圧倒的な中、フッターまでスクロールしてくれるユーザーはそのサイトに興味を持ってくれている可能性があります。そのため、その特性を活かし、興味を持ってくれたユーザーにより興味を持ってもらえるように、そのサイトで人気があるコンテンツや、自信のあるコンテンツへのリンクを張る事は大変有効だと思います。またフッターにAboutなどを設置するのもいいでしょう。興味を持ったユーザーは、そのサイトの運営者や運営会社についても知りたいと思うものです。

Queness – Design Inspirations, jQuery Tutorials and Web Design & Development Community
このサイトは「創始者はケビン·リューだよ」といった感じで自己紹介がされています。このあと紹介する「Webデザインレシピ」さんのサイトのフッターにもAboutが表示されています。私は興味を持ってくれた人に、より興味を持ってもらおうとするこの手法は、大変有効だと感じています。

8.広告エリアとして活用する

上の【よりサイトに興味を持ってもらうために活用する】に似ていますが、自社の一押し商品やサービスをこのエリアを使ってPRすれば、サイトを離れようとしていたユーザーを引き止めるきっかけになるかもしれません。

この画像なんですが、残念ながら私が5分で作ったものです。もともと「これ参考になる！」と思ってメモしておいたURLがあったんですが、無くしてしまいました。たぶん消しちゃったんだと思います。もしこういった感じでサービスや商品を表示している参考になるサイトがあれば教えてください。

9.メディアやサイトのハブとして活用する

Twitter・Facebook・はてブなどへのメディアリンクは、サイトの重要なハブとなります。自社で他に運営しているサイトなどがあればそれをリンクしてもいいでしょう。

Webデザインレシピ
皆さんもご存知のWebデザインレシピさんのサイトにも、TwitterやFacebookなどへリンクが張られています。サイトへ訪れるユーザー数を増やすために、様々なソーシャルメディアを活用することは大切です。私はよくWebデザインレシピさんのサイトを利用させていただいているんですが、記事のクオリティーが非常に高く、いつも大変勉強になっています。

10.コンタクト情報として活用する

電話番号・メールアドレス・地図・住所・資料請求へのリンクなどをフッターに設置することで、ユーザーがどのページからでもコンタクト情報を確認・利用することが出来るので大変便利です。またユーザビリティの向上にも繋がります。

LED照明「Luci」｜株式会社プロテラス
こちらのサイトは「カタログ請求」「メールでのお問い合わせ」「電話でのお問い合わせ」とまさにコンタクトに必要な要素をほぼすべて設置しています。またフッターが固定されているので、常に視界に入るようになっています。

11.サイドバーとして活用する

サイドバーをあえて作らず、サイドバーに表示させるべき要素をフッターに設置することで、メインコンテンツエリアの幅を最大限に活かすことができます。最近ちらほらと、こういったデザインのサイトを見るようになりました。逆にフッターが無いサイトも見る機会が増えている気がします。

HTML5+CSS3で作った無料ブログ用テンプレート【SimpleBlack】
これは私が以前作ったテンプレートです。ブログの記事に集中しやすいレイアウトにしようと考えて作りました。フッターをサイドバーの代わりに使うことで、記事の表示エリアを広く取っています。

12.使いやすくするために活用する

これまでに紹介した要素とリンクする部分が多いんですが、サイトを使いやすくするためにフッターを活用する方法は沢山あります。例えばページTOPへ戻るボタンを設置したり、タグクラウド・最近の投稿・最新のコメント・QRコードなどを設置してもいいと思います。またECサイトであれば、送料や支払い方法・配達方法などを記載してもいいんじゃないでしょうか。

ホームページを作る人のネタ帳
私はよく【ホームページを作る人のネタ帳】さんの記事を読ませていただいているんですが、このサイトのフッター、普段気にしていませんでしたが、とにかくデカイです。フッターは非常に広いスペースをとりやすいエリアですので、多くの要素を詰め込むことができる場所です。そのため【ホームページを作る人のネタ帳】さんのように、ユーザーにとって役に立つ(使いやすくなる)要素を沢山配置することもできます。フッターの特性を上手に活かしたすばらしいデザインです。

最後に

あくまでもフッターデザインは全体の一部でしかなく、フッターデザインだけを見たってフッターの魅力には気づけません。一部の要素は全体を作り出し、全体は一部の要素の集合によって出来ています。そのため優れたフッターを作るには、あくまでも全体の世界観・雰囲気・テイストを考えてデザインする必要があります。
また、フッターが優れているサイトの多くは、フッターエリアと他のエリア(メインカラムとか)をしっかり区別させ、フッターに視線が集まるように工夫させています。色のコントラストを用いて区別したり、広いスペースを利用して区別したり、クオリティーの高いイラストやグラフィックなどを使って区別されています。フッターが持つ特性をうまく活かし、デザインやコンテンツを考える事がフッターの成功に繋がります。

今回の記事は、フッターの活用方法についてだけ触れているので「フッターエリアってすごいじゃん！」って勘違いされてしまいそうですが、私は正直、決して優れたエリアでは無いと考えています。フッターはページの最下部のためクリック率がとても低いのが現状です。また、先ほどの7の項目でも話しましたが、興味を持ってくれたユーザーでなければ、そもそもフッターまでスクロールしてくれません。
ですがフッターも【特性を活かし】【明確な役割を与え】【上手に活用すること】で、決して優れているとは言えないエリアでも活かすことが出来るんです。

最近になってフッターを活用しようとするサイトが増えてきましたが、それは非常にすばらしいことです。ですがそれでもまだ活用しきれていないサイトを多く見ます。だからこそ、フッターのデザインや機能に力を入れることが、他社との差別化に繋がるんじゃないかと思います。この機会にあなたのサイトもフッターを見直してみてはいかがでしょうか。

皆さんがフッターを考える時にこの記事が少しでも役に立てば幸いです。
では、このへんで！