ウェブサイトのフッタを魅力的にする10のシンプルなアイデア
Post on:2010年1月14日
昨年くらいからウェブデザインの傾向としてフッタを充実させたウェブサイトが増えてきました。
ユーザーの印象に残り、より利便性の高いフッタを設置する際にヒントとなるアイデアをDesign Shackから紹介します。
10 Techniques for a Fantastic Footer
以下は、そのポイントを意訳したものです。
- はじめに
- 1. プライマリ ナビゲーション
- 2. 「トップに戻る」ボタン
- 3. 美しいコントラスト
- 4. インパクトのあるイラスト
- 5. 充実したコンテンツ
- 6. インフォメーション
- 7. メディア ハブ
- 8. 新鮮なコンテンツ
- 9. インフォグラフィックス
- 10. ビジュアル的なアクセント
はじめに
魅力的なフッタは、サイトのユーザーに永続的でポジティブな印象を与えることができます。
フッタのデザインと機能性の両方にフォーカスをあてることで、サイトのフッタを魅力的にする多くのクリエイティブな方法があります。
ここではすぐに実践できる、シンプルな10のアイデアを紹介します。
1. プライマリ ナビゲーション

なぜヘッダに配置したプライマリ ナビゲーションをページの下部にも配置するのでしょうか? それはユーザビリティに大きく貢献し得るものだと考えます。
的確なプライマリ ナビゲーションがフッタに配置されていれば、ウェブサイトがより便利なものになるでしょう。
2. 「トップに戻る」ボタン

長いページをスクロールし、ページの下部を表示した際、元のポジションに戻るまでに長いスクロールが生じます。このサイトではスクリプトを使用して、快適にページのトップに戻れるようになっています。
3. 美しいコントラスト

人の目を惹くフッタを望むなら、フッタとコンテンツが明確に区別がつくようにしてください。シンプルなラインやグラフィックを使用することでこれを実現することができます。そして、コンテンツとのコントラストを強くすることで、劇的な変化を生じることができます。
4. インパクトのあるイラスト

もしあなたがイラストレーターであるなら、上記のサイトのように創造的なエレメントを配置するのも手です。これは、フッタがユーザーの目にする最後のものであるため、印象に残るでしょう。
5. 充実したコンテンツ

フッタに配置するコンテンツをシンプルにするのも一つの手ですが、ユーザーが望むものを多く配置することも検討してみてください。
フッタはユーザーのために多くの要素を配置できる広い場所であることに気づいてください。
6. インフォメーション

フッタに配置するべきコンテンツが何も浮かびませんか? その場合にはサイト所有者の情報や写真を配置してみてください。メールなどの連絡手段も忘れずに検討してください。
7. メディア ハブ

Twitter, Flickr, MySpaceなどのメディアリンクはあなたのサイトの重要なハブとなります。設置する際は、標準のウィジェットを使用せず、サイトにあったデザインに変更します。
8. 新鮮なコンテンツ

フッタをより実務的にするには、例えば日替わりの新鮮なコンテンツを配置します。上記のサイトでは、日替わりでフリーのカラースキームがダウンロードできます。
あなたのサイトのユーザーが、何に興味をもっているであろうか考えてみてください。
9. インフォグラフィックス

上記のサイトは、フッタにインタラクティブなインフォグラフィックスを使用した唯一のサイトでした。インフォグラフィックスは退屈なデータをクリエイティブにビジュアル化するものです。
あなたのフッタでインフォメーションをみせる必要がある時は、インタラクティブで魅力的なインフォグラフィックスにすることを検討してみてください。
10. ビジュアル的なアクセント

ほんの少しのアニメーションがページのビジュアル的なアクセントを与えることがあります。上記の例では、思わず見てしまうようなアニメーションがフッタに配置されています。
こういった演出はシンプルにすることを勧めます。決してプライマリコンテンツの気を散らさないようにしてください。
sponsors