このワイヤーの特徴
どこまで読み進めても、ほかのページや相談へすぐ移動できる
長いページを読み終えたあとに、ヘッダーまでスクロールで戻らないとメニューを使えない作りだと、次の行動までの手数が増えます。ヘッダーを画面の上に残し、どこまで読み進めても主要なページと相談ボタンにすぐ手が届くようにしています。
縮めることで、本文を読む範囲を広く残せる
ページの最上部と同じ高さのまま残すと、本文を読む範囲がずっと狭くなります。このワイヤーでは、スクロールを始めるとヘッダーの高さを縮め、ロゴの下の説明を隠して、本文を読む範囲を広く残しています。
縮んでも、読んでいる位置がずれない
ヘッダーの高さが変わると、その分だけ本文が上下に動き、読んでいた位置を見失うことがあります。縮んだ分の余白を補い、ヘッダーが縮んでも本文の位置が動かないようにしています。
見出しやフォーカスが、ヘッダーの下に隠れない
画面の上に残るヘッダーは、ページ内の見出しへ移動したときに、その見出しを覆い隠すことがあります。目次から見出しへ移動したときに、見出しがヘッダーのすぐ下に来るよう余白を取っています。
キーボードで移動したときも、フォーカスした項目がヘッダーの下に隠れにくくなります。
スクロール中も、今どのページを見ているかが分かる
長いページの途中では、今どのページを読んでいるのかを見失うことがあります。ヘッダーを残すことで、表示中のページの印もスクロール中に見え続けるようにしています。
制作時のよくある失敗
ヘッダーが高いまま残り、本文が読みにくい
ロゴや説明、電話番号などを含んだ高いヘッダーをそのまま残すと、本文を読む範囲がずっと狭いままになります。
画面の上に残すのは、必要な要素だけに縮めたヘッダーにします。
縮んだときに、本文の位置がずれる
ヘッダーの高さが変わると、その分だけ本文が上下に動き、読んでいた位置を見失ったり、スクロールの位置が飛んだりします。
ヘッダーの外側に一定の高さの領域を確保するか、縮んだ分の余白を補います。
見出しやフォーカスした項目が、ヘッダーの下に隠れる
目次のリンクで移動した見出しや、キーボードで移動したリンクが、画面の上に残ったヘッダーの下に隠れることがあります。
scroll-padding-top などで、ヘッダーの高さ分の余白を確保します。
拡大表示や横向きの画面で、本文がほとんど見えない
文字を大きくした表示や、スマートフォンを横向きにした画面では、画面の高さに対してヘッダーが占める割合が大きくなります。
それぞれの表示で本文が十分に読めるかを確かめ、画面の高さが低いときは追従をやめることも検討します。
画面に残るものが多すぎる
追従するヘッダーに加えて、画面下の相談ボタン、Cookieの案内、チャットのボタンなどが残ると、本文を読む範囲がさらに狭くなります。
どれを画面に残すかを決め、同時に残すものを絞ります。
出たり消えたりが頻繁で、落ち着かない
下にスクロールすると隠れ、上に戻すと出てくる形で、少しの指の動きでもヘッダーが出たり消えたりすると、読むのを妨げます。
一定以上スクロールしたときだけ切り替えるなど、切り替わりすぎないようにします。
よくある質問
追従型ヘッダーと追従型CTAは、どのように使い分けますか?
追従型ヘッダーは、ページ間の移動と相談の入口の両方を画面に残す形です。
追従型CTAは、相談などの行動の入口だけを画面に残す形で、SPでは画面の下に置くことが多いです。
両方を同時に使うと本文を読む範囲が狭くなりやすいため、どちらを残すかを決めます。
下にスクロールすると隠れ、上に戻すと出てくる形は使ってよいですか?
本文を読む範囲を広く取れる方法の1つです。
ただし、出たり消えたりが頻繁だと読むのを妨げるため、一定以上スクロールしたときだけ切り替えるようにします。
上に戻す操作をしないとメニューが使えないため、メニューをよく使うサイトでは、このワイヤーのように縮めて残す形のほうが扱いやすいこともあります。
SPでも、ヘッダーを画面の上に残したほうがよいですか?
必ずしも残す必要はありません。
SPは画面が縦に短いため、ヘッダーを残すと本文を読む範囲が大きく減ります。
残す場合は、ロゴ・主な行動の入口・メニューボタンだけにして高さを抑え、横向きの画面や文字を大きくした表示でも本文が十分に読めるかを確かめます。
ヘッダーは、どのくらいまで縮めればよいですか?
決まった数値はなく、ロゴやメニューが読みやすく、押しやすさを保てる範囲で縮めます。
このワイヤーでは、PCで縮める前のおよそ7割の高さにし、ロゴの下の説明を隠しています。
もともとヘッダーの高さが十分に低い場合は、縮めずにそのまま固定しても問題ありません。
