追従型ヘッダーは便利
ECサイトのヘッダーには、ユーザーを各ページにナビゲートする為に数多くの情報が表示されています。
- サイトロゴ
- カテゴリー・メニュー
- ログイン
- マイページ
- お気に入り
- 会員登録
- カート
- お問い合わせ
- ご利用ガイド
- Q&A
- 利用規約
ヘッダーは上部に表示されており、ページをスクロールするとヘッダーは見えなくなります。
ページ途中で他のページへ遷移したいと思っても、ユーザーはわざわざ最上部まで戻る必要があります。
せっかくヘッダーには便利なナビゲーター機能を備えているのに、これはとても不便です。
そこで登場したのが追従型のヘッダーです。
ページのスクロールとともにヘッダーが追従して来ます。
ページを見る為にスクロールしてもヘッダーは常に固定表示されているので、いつでも他のページへ簡単に遷移することができます。
追従型ヘッダーがサイト閲覧の邪魔になる
ところが、ヘッダーのデザインによっては、便利なはずの追従型ヘッダーが不便になることがあります。
それは、ヘッダーが高過ぎるとサイト閲覧の邪魔になるからです。
以下に事例を挙げながらご説明致します。
2018年9月時点でモニター解像度1366px*768pxが3割弱を占める
ここでデスクトップ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です。
しかも、それはディスプレイにフルに表示させた場合です。
仮にアプリケーションをディスプレイにフル表示させて使用される人がどれくらいいるかが不思議です。
通常は、アプリケーションを画面いっぱいに開く人は少ないのではないでしょうか。
そうなると、ブラウザでサイトを表示する領域（高さ）はもっと狭く（低く）なるはずです。
その為、デザインが悪いと追従型ヘッダーが邪魔をしてまともにサイトを閲覧することができなくなります。
ヘッダーが高い為、ユーザビリティが著しく低下しているサイト事例１
画像のサイトは、ヘッダー高が150pxもあります。
サイトを表示した場合、約1/4近くの領域をヘッダーが奪います。
折角の商品画像を一目で見ることができません。
商品画像の高さが710pxですので、そもそも1366px*768pxのモニターを無視したデザインになってますね。。。
スクロールしてもヘッダーは追従してきますので、終始見難いです。
サムネイル画像をクリックしても、上部の画像を確認するのにいちいち上に戻る必要があります。
しかも、戻っても全体像を見ることはできない。
シェア1位のモニタ解像度を無視した残念なデザインと言わざるを得ません。
ヘッダーが高い為、ユーザビリティが著しく低下しているサイト事例２
こちらのサイトのヘッダ高は180pxもあります。
上記サイトよりも更にサイト表示領域が狭くなっています。
以上のように、ECサイトをデザインする際はターゲットとするモニタ解像度を明確にしておかなくてはいけません。
そうでなければ、いくら便利な機能でもデザインが悪いと不便な機能となってしまいます。
投稿者プロフィール
- CEO
- 株式会社サンクユー 代表取締役CEO。
基幹システムとECをつなぎ、受発注業務の最適化を支援する専門家。
関西大学卒業後、東証プライム上場のゼネコンにて人事総務を経験。
その後システムベンダーへ転職し、IBM AS/400環境における金融・物流・販売管理・経理・人事など、企業の基幹業務を支えるシステム開発に従事する。
プログラマからプロジェクトマネージャーまでを経験し、台湾・台北駐在として銀行システム構築プロジェクトにも参画。
この経験を通じて、「システムの質は要件定義の質に比例する」という思想を確立。
業務理解を起点としたシステム設計を強みとする。
その後、クレジット決済代行会社にて、決済システムの再構築や銀行連携、ECサイト構築を担当。
あわせて組織改革にも携わり、20名から60名規模への組織拡大を実現（退任時：常務取締役）。
2008年に株式会社サンクユーを創業、2010年に法人化。
現在は、基幹システムとECの両領域に精通した知見を活かし、BtoB企業における受発注業務のデジタル化・効率化を支援。
特に、FAX・電話・メールなどアナログ業務のEC化や、基幹システムとの連携を前提とした業務設計を得意とする。
単なるECサイト構築にとどまらず、業務フローの整理・要件定義・システム設計まで一貫して関与し、「現場で使われる仕組み」を実現することを重視している。
NTTレゾナント「goo Search Solution」にてEC関連コラムを執筆。
ECマーケティングレポート | goo Search Solution
■趣味・関心領域
BMW / WRC / ロードバイク / RIZIN / UFC / 大相撲
David Bowie / blur / MUSE / The Rolling Stones / XTC
機動戦士ガンダム（富野由悠季）
ベルセルク / 頭文字D / 進撃の巨人 / ジョジョの奇妙な冒険 / あしたのジョー
Mission: Impossible / Memento / ワイルド・スピード / ソナチネ
LOST / Game of Thrones / FRINGE / The Mentalist
上岡龍太郎 / ダウンタウン
