2009年06月22日

【海外事例に学ぶ】 リッチ化するフッター

ソーシャルブックマーク  はてなブックマークに登録  この記事をクリップ!  Yahoo!ブックマークに登録  Google Bookmarks に追加  Buzzurlにブックマーク  del.icio.us に登録  | 

maeda
ユーザビリティコンサルタント
前田 俊幸

これまで当サイトでも、いくつかの記事でフッターについて扱ってきました。最近、海外のサイトを見ていると、フッターについて新しい取り組みが見られます。
今回は、海外サイトの動向をサンプルとし、フッターにおける新たな取り組みのメリットをご紹介します。

【参考サイト】

  • Geek Trends: 15 Footers with great usability ( pop upon magazine )
  • 6 Things To Include for a User Friendly Footer ( UXBooth )
  • Modern Sitemap and Footer ( WebDesignerWall )
  • Footers (76 examples) ( Smiley Cat Elements of Design )

    例えばTIGERS (http://www.tigers.org.au)のフッター(下図)では、革張りを模した凝ったビジュアルデザインと、サイトマップやプライバシーポリシー、右側にはソーシャルサイトへのリンクなど、複数のコンテンツへの導線を配置しています。

    TIGERSの例

    上記の例のように、他の海外サイトでも、従来と違うフッターの特徴として以下の2つが見受けられます。

    1. 凝ったビジュアルで関心を惹く
    2. 「フッターに制作コストをかけられない!」という場合に便利なサイトマップ

    続いて、これら2点のメリットについて考察してみたいと思います。


    1. 凝ったビジュアルで関心を惹く

    ページの最下部に配置するコンテンツとはいえ、ユーザに魅力的なコンテンツとして映れば、クリックされる確率も高まるでしょう。最近の凝ったビジュアルデザインのメリットの一つは、そこにありそうです。
    ページのメイン部分と視覚的に差異をつけて一度文脈を切り替えつつ(ユーザに新しいコンテンツエリアが始まったと思わせる)、視覚的な訴求力によりエリアへの関心を煽っていると考えられます。

    例えばBIOLA University(http://www.biola.edu/undergrad)のフッター(下図)では、控えめにしつつも、ビジュアル的にまとまった世界観を持たせています。
    左上の雲のイラストと右下の写真画像など、さりげなく配置したデザイン要素がユーザの目線をうまく誘導しながら、エリアへの期待を煽ることに機能していると言えるでしょう。
    ページのメインエリアに関心を持てなくても、また何か違うコンテンツが始まったと思わせ、再度ユーザの関心を惹くことができそうです。

    サイト内に関連のある魅力的なコンテンツを持ち合わせていない場合も、上記のように視覚的に魅力を持たせて誘導をはかることは有効そうです。

    0622_02.GIF


    2. 「フッターに制作コストをかけられない!」という場合に便利なサイトマップ

    ページの文脈に合わせて毎回フッターのリンクを履き分けるのは、開発・制作上、または運用上のコストとなる可能性があります(フッターよりもページのメインのコンテンツ作成を優先すべきです)。
    フッターに力を入れている余裕が無い場合、関連リンクとしてサイトマップを配置することは、一つの効率的な手段となりえるでしょう。つまり、全ページにサイトマップ(=すべての関連リンク)を置き、あとはユーザに選んでもらうという考え方です(下図:RedBrick Healthの例)。

    0622_03.GIF

    さて、海外サイトを細かく見ていくと、上記以外にも興味深い取り組みが見受けられます。

  • 中間的なビジネスゴール(メルマガなど)を配置する(http://www.hopkingdesign.com/
  • 隠れた面白コンテンツを配置する(http://www.ngenworks.com/
  • フッターエリアは切り分けず、あくまでページに関連性の高い導線を上から順に並べていく( http://www.amazon.com ※日本も同様 )

    フッター一つととっても、まだまだ色々な施策が考えられそうです。
    フッターもビジネス上の重要なエリアととらえ、攻めの施策をとってみてはいかがでしょうか?

  • ソーシャルブックマーク  はてなブックマークに登録  この記事をクリップ!  Yahoo!ブックマークに登録  Google Bookmarks に追加  Buzzurlにブックマーク  del.icio.us に登録  | 

    << FLASHユーザビリティ3原則 | トップ | 謝ったら負け!? アイコンも使い方次第 >>


    
    AI搭載 モーメント分析クラウド「USERGRAM(ユーザグラム)」