はじめに
「ホームページのヘッダーは、どれくらいの高さにすればいいの？」
「PCとスマホで同じサイズにしても大丈夫なの？」と迷っていませんか。
ロゴやメニュー、問い合わせボタンをヘッダーに配置しようとしても、高さを何pxに設定すればよいのか分からず、デザイン作業が止まってしまうこともありますよね。
この記事では、PC・スマホそれぞれのヘッダーサイズの目安から、ロゴやメニューを配置するときの考え方、サイトに合った高さの決め方まで分かります。
ホームページのヘッダーサイズはどれくらいが適切？
ホームページのヘッダーサイズは、すべてのサイトに共通する決まった数値があるわけではなく、表示する内容や閲覧する端末に合わせて調整します。
ここでは、ヘッダーサイズの考え方と端末別の目安、ヘッダー本体・画像・ロゴを分けて設定する考え方を説明します。
ヘッダーサイズに決まった正解はない
ホームページのヘッダーサイズに、すべてのサイトで共通する正解はありません。
ロゴやメニューの大きさ、項目数に合わせて、内容が見切れず本文を圧迫しない高さに調整しましょう。
PC・タブレット・スマホ別のヘッダーサイズの目安
ヘッダーの高さは、PCなら80〜120px程度、タブレットなら60〜100px程度、スマホなら50〜80px程度が目安です。
ただし、ロゴやメニューの大きさによって適した高さは変わるため、端末ごとの表示を確認しながら調整しましょう。
ヘッダー本体・ヘッダー画像・ロゴのサイズは分けて考える
ヘッダー本体の高さ、ヘッダー画像の縦横サイズ、ロゴの表示サイズは分けて考えます。
それぞれ役割や表示範囲が異なるため、同じ数値にそろえず、実際の見え方に合わせて幅や高さを調整しましょう。
ホームページのヘッダーサイズを決めるポイント
ホームページのヘッダーサイズは、ロゴやナビゲーションなど、ヘッダー内に配置する要素を基準に決めます。
ここでは、ヘッダーの高さ、固定表示した場合の画面占有率、ヘッダー画像のサイズという3つのポイントから決め方を説明します。
ヘッダーの高さはロゴやナビゲーションに合わせて決める
ヘッダーの高さは、ロゴやナビゲーションが見切れず、無理なく収まるサイズに設定します。
実際に配置した状態で上下の余白を確認し、要素が重ならない高さに調整しましょう。
固定ヘッダーは画面を占有しすぎない高さにする
固定ヘッダーはスクロールしても画面上部に残るため、高すぎると本文の表示領域が狭くなります。
とくにスマホでは、実際にスクロールしながら本文を圧迫していないか確認し、見やすい高さに調整しましょう。
ヘッダー画像は表示領域に合わせて幅と高さを調整する
ヘッダー画像は、PCやスマホの表示領域に合わせて幅と高さを調整します。
横長の画像はスマホで左右が大きく切れることもあるため、縦横比を保ちながら端末ごとの見え方を確認しましょう。
PC・スマホに合わせてヘッダーサイズを調整する方法
ホームページのヘッダーは、PCとスマホで画面幅が異なるため、同じサイズをそのまま表示するとロゴやナビゲーションが収まらない場合があります。
ここでは、PCとスマホそれぞれのヘッダーサイズの調整方法と、画面幅ごとに表示を整える方法を説明します。
PCは画面幅に合わせて横幅を調整する
PCのヘッダーは、ロゴやナビゲーションが画面からはみ出さない横幅に設定します。
コンテンツ幅を1,000〜1,200px程度にする場合は中央に配置し、左右に余白を確保すると見やすくなります。
スマホはPCと同じヘッダーサイズをそのまま使わない
スマホは画面幅が狭いため、PCと同じヘッダーサイズではロゴやメニューが収まらない場合があります。
ロゴを小さくしたり、ナビゲーションをメニューアイコンに切り替えたりして、横スクロールが発生しないように調整しましょう。
レスポンシブ対応で画面幅ごとに表示を調整する
レスポンシブ対応では、画面幅に合わせてヘッダーやロゴのサイズ、ナビゲーションの表示方法を変更します。
PC・タブレット・スマホで実際に表示を確認し、ロゴやメニューが無理なく収まるように調整しましょう。
ホームページのヘッダーサイズ設定で注意すること
ホームページのヘッダーサイズを設定するときは、画面内に収めることだけでなく、ロゴやメニューの見やすさと本文の表示領域を確認する必要があります。
ここでは、ヘッダーサイズを設定するときに確認したい3つの注意点を説明します。
ロゴやメニューが小さすぎて見にくくならないようにする
ロゴやメニューは、ヘッダー内に収めるだけでなく、無理なく確認できる大きさに設定します。
実際の画面で文字が読みやすく、ロゴのサイト名やマークを判別できるか確認しましょう。
ヘッダーを高くしすぎて本文の表示領域を狭くしない
ヘッダーが高すぎると、画面を開いたときに表示できる本文の範囲が狭くなります。
とくにスマホでは、ロゴやメニューに必要な高さを確保しつつ、本文を圧迫しないように調整しましょう。
実際のPC・スマホ画面で表示を確認する
ヘッダーサイズを設定したあとは、PCとスマホで実際にページを開いて確認します。
ロゴやメニューのはみ出し、文字の見やすさなどを確認し、表示が崩れている場合は端末ごとに調整しましょう。
スマホでヘッダーが崩れて見える場合は、端末ごとの表示を確認する方法もあわせて確認しておくと安心です。
▶スマホでホームページの表示を確認する方法｜レイアウト崩れのチェックポイントも解説
まとめ
ホームページのヘッダーサイズに決まった正解はないため、PCやスマホなどの画面幅に合わせて調整することが大切です。
目安のサイズを参考にしながら、ロゴやメニューが見やすく、本文を圧迫しない高さに整えてみましょう。
最後に実際の端末で表示を確認すると、自分のサイトに合ったヘッダーサイズに仕上げやすくなります。
