WEBサイトのheaderの高さの目安について

この記事はこんな方に向けて書いています

この記事を読むとわかること

結論

結論の根拠

結論の根拠ですが

大手企業のコーポレートサイトを13サイト

調べてみた結果です。

こちらは、pcサイトのヘッダーの高さの分布図です。

こちらは、SPサイズのヘッダーの高さの分布図です。
50～70近辺が多そうですね。

検証方法

右クリック>「検証」を選択するとこの画面になります

PCとSPではヘッダーの高さはどちらが高いのか？？

PCサイズとSPサイズで比較してみた時に

どちらがヘッダーが高いのか？？

調査した13サイトのうち8割は

PCサイトのほうが高いです

もし、デザインカンプを作っている時に

迷ってしまったら、SPの方を小さくしましょう。

まとめ

大手企業では、ヘッダーの高さを

以下のサイズ感で設定している

• PC
  • 70～140px
• SP
  • 50～74px

PCサイズとSPサイズを比較してみると

PCサイズのほうが高く設定されている。

この記事が参考になれば嬉しいです。