ヘッダーとフッター【v24】

こんにちは。こちらこそよろしくお願いします。今日は、Webサイトやアプリのデザインにおける「ヘッダー」と「フッター」の重要性についてお話ししたいと思います。

「顔を見れば人となりが分かる」という言葉がありますが、実は「足元」を見ても人柄が分かると言われています。カンザス大学の心理学教授が行った研究では、異なる靴を履いた約200人の足元の写真を学生たちに見せ、その靴を履いた人の社会的地位や性格、外向性などを推測してもらいました。その結果、学生たちはほぼ全ての人の特性を靴から推測し、的中させることができたそうです。

はい、Webサイトでも同じことが当てはまります。顔や帽子にあたるのが「ヘッダー」、足元や靴にあたるのが「フッター」です。ヘッダーやフッターを見ることで、そのサービスの目的や役割、意図するところが分かります。そこには必ずサービスの概要や要点をまとめたものが載せてあり、それらはそのままサービスのナビゲーションとして使われることが一般的です。いつでも見られるナビゲーションの常設エリアとして、ヘッダーやフッターの重要性は不変です。

ナビゲーションとは、ユーザーがそのサービスで望む情報を探したり、機能を使ったりするのを手助けするためのインターフェースの集合体です。ユーザーがサービスを使うのは何らかの目的を果たすためであり、ナビゲーションそれ自体は目的達成のための手段にすぎません。したがって、目的とする場所まで楽に到達できて、コンテンツに集中できる状態が理想的です。この状態はインタラクションコストが最も小さい状態と言えます。

Webサイトであれば、その場所は「ヘッダー」です。ヘッダーが上手く作られているWebサイトでは、迷うことなく使いやすいサービスが提供できます。また、補助的なナビゲーションの置き場所としては「フッター」がふさわしいでしょう。

ヘッダーを見れば、そのサイトやサービスがどういったことを扱っているかが分かります。ヘッダーに記載されているメニューそのものがナビゲーションであり、直接その対象へ移動できます。言わば、ヘッダーはサービスの全体図のようなものです。したがって、ヘッダーは「メインナビゲーション」として使われるだけでなく、サービスの概要を伝える「ブランド認知」の役割も担っています。

ヘッダーはスクロールしても画面上部に固定される「固定ヘッダー」や「スティッキーヘッダー」があります。また、スクロール中は隠れているものの、逆スクロールでヘッダーが現れるなど、どこからでもアクセスできるように工夫されているものも多くあります。これらは、ヘッダーのナビゲーションとしての必要性を示しています。ユーザーがいつでも必要な情報にアクセスできるように、ヘッダーの表示方法を工夫することが重要です。

メガドロップダウンメニューは、通常のドロップダウンメニューよりも大きなスペースを使って、階層化されたページを俯瞰的に表現するものです。写真やアイコンを使ってさらに分かりやすく見せることもできます。特にPCでは、今でも効果的な手法です。置き場所に制約はありませんが、一般的にヘッダーに設置するのが最も有効です。

はい、一般的にヘッダーは画面の上部に置かれますが、画面の左側に配置しても本質的な役割は同じです。工夫次第で、魅力的なレイアウトを実現できる可能性があります。また、テレビのように画面の縦横比が横長固定である場合には、左側にメニューを設置して、それにヘッダーと同じ役割を担わせるレイアウトも有効です。テレビと左メニューレイアウトの相性が良い理由の一つは、テレビがリモコンでフォーカスをコントロールするインターフェースであることにも関係しています。

フッターは、Webサイトにおけるサービスの最後に共通して置かれる常設エリアです。スクロールの最後で見せるエリアなので、メインのナビゲーションを置くことはできませんが、その反面、役に立つものであれば何でも置いて構わないという使い勝手の良さがあります。

フッターの有用性を端的に表しているのが、このエリアに設置されるサイトマップです。フッターは基本的にどのページであっても同一なので、ユーザーがどこで迷ったとしても、フッターのサイトマップを見ることで目的のページにたどり着くことができます。フッターに置くコンテンツとしてうってつけです。

はい、そのページの現在地を示す「パンくずリスト」は、従来ヘッダー付近に置かれるものでした。しかし、ヘッダー付近のビジュアルをより強調したい場合や、パンくずリストを目立たせたくない場合には、フッターに置いたほうが適切な場合もあります。

また、規約やサイトポリシーだけでなく、サービス内のどこであっても使う可能性のある補助的手段の置き場所として、フッターが最適です。言語切替、告知、関連サービスの紹介、問い合わせ先など、全ページ共通で置きたいものはフッターに載せて良いでしょう。

そうですね。時事的なコンテンツを扱うサービスなどでは、スクロールが無限に繰り返され、そもそもフッターまでたどり着けない場合があります。そのようなときには、左右のスライドメニュー内にフッターの要素を格納したり、無限に続くスクロールを段階的に見せたりするなどの対処が必要です。ユーザーが必要な情報にアクセスできるように工夫することが大切です。

こちらこそ、ありがとうございました。ヘッダーとフッターはユーザー体験を向上させる重要な要素ですので、ぜひデザインに取り入れてみてください。何か質問があれば、いつでもお声がけください。