一般的なwebデザインのヘッダーのデザイン特徴はどのページに遷移しても常に同じ情報が表示されていること。
ヘッダーの内容がページによって都度変わるページはほとんどないと思いますが。
これは定石で、これから外れたことをするとでユーザーが混乱する確率が高くなります。
よく言えば斬新と言えるかもしれませんが、ユーザーは見慣れないものは警戒して使わない、若しくは使い方がわからずストレスを与えてページから離脱する確率が高くなります。
webサイトヘッダーの役割は何か?
webサイトヘッダーに必ずあるもの、グローバルナビゲーション。
つまりサイトで迷った時にリセットできる役割ができているか。
その上で具体的にどんな情報を配置していけばよいのか優先順位を決め配置を考えていきます。
ヘッダーに配置する情報の優先順位
どのページに遷移しても常に同じ情報が表示されていること。を定石として考えると下記の様な情報で優先度を考えるとデザインが行いやすくなります。
- よく利用されるコンテンツや機能は何か
- どのページに遷移しても、自分が見ているページがどの階層にあたるのかわかるページへの導線（サイト全体の構造を大まかに俯瞰できるページ）
- 戦略上、必ず見てほしいページへの導線
基本的にヘッダーの要素は何らかの情報を探す際に見つからなかったなどの際、一旦リセットして再度情報を見渡せるものであります。
ですのでヘッダーの要素はなるべくサイト全体の構造を俯瞰してみれる導線が配置されるべきと考えます。
ヘッダーを画面上部に常に表示するデザインは有効なのか
コンテンツの量に左右されるものになるかと思いますが、ECサイトやブログなど縦に長いページがほとんどの場合は有効になると思いますが、そもそも情報の量がそこまで多くないといった場合は画面上部に常にヘッダーを表示するメリットはあまり感じられないと思います。
常に表示する場合もヘッダーの高さは極力小さくすませて見やすさを損なわない様にするのがデザインのポイントになるところです。
fifth様のサイトのヘッダーはスクロールするとヘッダーで最低限必要な部分だけを残し高さを抑えられていて画面表示領域を占有しない良いデザインです。
fifth様ヘッダースクロールイメージ（パソコン）
fifth様ヘッダースクロールイメージ（スマートフォン）
スマートフォンになるとヘッダーの使い勝手も変わる
下図はスマートフォンで指が届く範囲を表しているもので、緑は難なく指が届く範囲で赤色に近づく色であればあるほど指が届きづらい範囲になります。
画像引用：gizmod
ヘッダーとなると最近の大型化されたスマートフォンでは画面上部の位置は指が届きづらいところになります。
この事を考えた上でヘッダーに配置すべき情報を考えます。
ECサイトであればCVRに関わる様な要素、カートボタンなどを常に画面下などに表示させておくのも一つの配置方法になります。
アプリなどでは画面下にナビゲーションを配置しているものが目立ちます。
ヘッダーデザインのまとめ
パソコンの場合
- サイトで迷った時にリセットできる役割ができているか。
- よく利用されるコンテンツや機能は何かを考える
- どのページに遷移しても、自分が見ているページがどの階層にあたるのかわかるページへの導線（サイト全体の構造を大まかに俯瞰できるページ）を用意する
- 戦略上、必ず見てほしいページへの導線があるか。あればどのくらい優先度は高いのかを考える
スマートフォンの場合
指が届く位置を考慮し画面下の領域にCVRに関わる情報の配置を考慮する
以上が自分なりのヘッダーデザインの考え方ですが、実際はjavascriptを使用した色んな見せ方もあるので後日また紹介します。