最初は普通に表示されているけど、スクロールしてヘッダーが画面の外になると上端固定に切り替わる奴の話。今年になって異様に増殖してる。別に嫌いではないし、なんとか的にアレ……みたいなところもない(と思う)んだけど、実装するとなると結構色々気になるところがある。というかうまく作れる気がしない。
まずは上端に固定したヘッダーが占有する画面領域の価値という問題がある。モバイル機器のブラウザーではそもそも固定するのがまだちょっと不安な状況なのでそれらにおいてでの話ではないけど、モバイル機器ではより考慮すべき問題にはなりそう。横長のディスプレイが主流になり、ウィンドウの最大化という呪縛から解き放たれつつある昨今、各ブラウザーベンダーが死ぬ気で削った価値ある数十ピクセルを、たかがWebサイトのグローバル・ナビゲーション程度に割く理由はあるのか？
例えばこのWebサイトのようなほぼ文章のみでそれを読んだあとに他のページに移動する必要がない場合は、その数十ピクセルをコンテンツに割いた方が良いのではないか。コンテンツの領域が広がるということだけではなく、コンテンツへの集中が可能になるので。逆にポートフォリオ・サイトのようにWebサイト内を横断的に閲覧して欲しいような場合は、常にロゴやグローバル・ナビゲーションが見えるのはユーザビリティーの向上につながる。
常に固定した場合、常に一定の領域を専有することになるため、ヘッダーのサイズを大きくしづらくなる。Webサイトにおいてヘッダーは本の表紙に近いものがあるので、ロゴやグローバル・ナビゲーションは多くのリソースをつぎ込んで凝ったものを作りたいし、座りの良さを考えるとファットに作ることが良いケースが圧倒的に多い。
ただ、Webアプリケーションやそれに準じるWebサイトの場合は、その操作と閲覧を一定のパターンに落とし込めるのでそれほどヘッダーに凝る必要はなくなる。FacebookやTwitterなどのヘッダーがその良い例。つまりそういったケースで固定したい場合は途中から……などとは考えずに、コンパクトに作り最初から固定してしまえば良い。
普通のWebサイトでは間を取って途中でコンパクトなものに切り替えるといった形が増えつつあるわけだけど、スクロールにしたがって自然にコンパクトに切り替わるように工夫する必要があるんじゃないかと思う。単にスクロールアウトしたらコンパクトなものにザクッと切り替えれば良いというものではない。
消えたあとに上からナビゲーションが降ってくるとかは初見だと「おっ」と思うけど、不自然なので飽きる。ロゴやナビゲーションが最初はセンタリングでどーんと置かれていて、切り替わった後は左右に振り分けられコンパクトなものになるというような例も散見されるけど、視線を奪いやすいので問題がある。
などを基本に、「スクロールしている時はコンテンツを閲覧している時」ということを意識し、それをいかに妨げずかつコンテンツとの差別化を自然に行うかということになりそう。
パララックスと同じで途中から固定に切り替わるヘッダーが効果的なケースはかなり限られていると思う。多くの場合は固定しない方が良いし、固定するのが良い場合なら最初から固定しておいた方が良い。あえてどういうものが良いと思うか挙げるとすると、Animadeのように大きめのロゴをコンパクトにするだけに使うとか、IGN Entertainmentのように比較的低い位置にあるナビゲーションをそのまま残すとか、こういったさりげない感じのがバランスが良くて好き。
似たようなのにスクロールすると関連エントリーや前後のエントリーへのリンクがぶわっと出てくる奴があるけど、あれは今すぐ死滅すれば良いのにと思っている。