ECサイトの追従型ヘッダーはモニター解像度を考慮してデザインすべき

「ECサイトとは?」から始めるECサイト初心者向けECサイト構築入門 ECサイト構築・運営
この記事は約3分で読めます。

追従型ヘッダーは便利

ECサイトのヘッダーには、ユーザーを各ページにナビゲートする為に数多くの情報が表示されています。

  • サイトロゴ
  • カテゴリー・メニュー
  • ログイン
  • マイページ
  • お気に入り
  • 会員登録
  • カート
  • お問い合わせ
  • ご利用ガイド
  • Q&A
  • 利用規約

ヘッダーは上部に表示されており、ページをスクロールするとヘッダーは見えなくなります。
ページ途中で他のページへ遷移したいと思っても、ユーザーはわざわざ最上部まで戻る必要があります。
せっかくヘッダーには便利なナビゲーター機能を備えているのに、これはとても不便です。

そこで登場したのが追従型のヘッダーです。
ページのスクロールとともにヘッダーが追従して来ます。
ページを見る為にスクロールしてもヘッダーは常に固定表示されているので、いつでも他のページへ簡単に遷移することができます。

追従型ヘッダーがサイト閲覧の邪魔になる

ところが、ヘッダーのデザインによっては、便利なはずの追従型ヘッダーが不便になることがあります。
それは、ヘッダーが高過ぎるとサイト閲覧の邪魔になるからです。

以下に事例を挙げながらご説明致します。

2018年9月時点でモニター解像度1366px*768pxが3割弱を占める

ここでデスクトップPCのモニター解像度のシェアを見てみましょう。
2018年9月時点のデスクトップPCのモニター解像度のシェアは以下となっています。
2018年9月時点のデスクトップPCのモニター解像度のシェア
StatCounter Global Stats – Browser, OS, Search Engine including Mobile Usage Share

1位の「1366px*768px」が26.96%、2位の「1920px*1080px」が19.98%で、1位と2位で46.94%と約半数を占めています。
かつ、1位の「1366px*768px」はかなり横長で縦が低いディスプレイです。
こちらを基準に問題のあるデザインを見てみます。

解像度1366px*768pxでは追従型ヘッダーが邪魔をしてまともにサイトを閲覧できない

上述の通り、解像度1366px*768pxは縦がかなり低いです。
1366px*768pxのモニターでブラウザをフル画面で開いてもブザウザのタブやURLなどの情報が上部に表示される為、サイトを表示できる高さは690pxです。

しかも、それはディスプレイにフルに表示させた場合です。
仮にアプリケーションをディスプレイにフル表示させて使用される人がどれくらいいるかが不思議です。
通常は、アプリケーションを画面いっぱいに開く人は少ないのではないでしょうか。
そうなると、ブラウザでサイトを表示する領域(高さ)はもっと狭く(低く)なるはずです。

その為、デザインが悪いと追従型ヘッダーが邪魔をしてまともにサイトを閲覧することができなくなります。

ヘッダーが高い為、ユーザビリティが著しく低下しているサイト事例1

画像のサイトは、ヘッダー高が150pxもあります。
ヘッダーが高い為、ユーザビリティが著しく低下しているサイト事例1

サイトを表示した場合、約1/4近くの領域をヘッダーが奪います。
折角の商品画像を一目で見ることができません。
商品画像の高さが710pxですので、そもそも1366px*768pxのモニターを無視したデザインになってますね。。。
ヘッダーが高い為、ユーザビリティが著しく低下しているサイト事例1

スクロールしてもヘッダーは追従してきますので、終始見難いです。
サムネイル画像をクリックしても、上部の画像を確認するのにいちいち上に戻る必要があります。
しかも、戻っても全体像を見ることはできない。
シェア1位のモニタ解像度を無視した残念なデザインと言わざるを得ません。
ヘッダーが高い為、ユーザビリティが著しく低下しているサイト事例1

ヘッダーが高い為、ユーザビリティが著しく低下しているサイト事例2

こちらのサイトのヘッダ高は180pxもあります。
上記サイトよりも更にサイト表示領域が狭くなっています。
ヘッダーが高い為、ユーザビリティが著しく低下しているサイト事例2

以上のように、ECサイトをデザインする際はターゲットとするモニタ解像度を明確にしておかなくてはいけません。
そうでなければ、いくら便利な機能でもデザインが悪いと不便な機能となってしまいます。

タイトルとURLをコピーしました