はじめに
本記事は、ホームページ制作におけるヘッダーとロゴの適切なサイズについて、分かりやすく丁寧に解説します。PCやスマートフォン、タブレットなど画面サイズが異なる端末での見え方を考え、実際に使える推奨値やデザイン時の注意点を具体例を交えて紹介します。初心者の方から制作経験のある方まで、幅広く役立つ内容にしています。
なぜサイズが重要か
ロゴやヘッダーのサイズは、サイトの第一印象に直結します。大きすぎると情報が重なり、逆に小さすぎるとブランドが目立ちません。読みやすさや操作性、ページの読み込み速度にも影響します。例えばスマホでロゴが大きすぎるとメニューが隠れ、訪問者が迷うことがあります。
このガイドで学べること
- ヘッダーとフッターに適したロゴサイズの目安
- PC向けの最適なヘッダーサイズと配置のコツ
- 実際に画像を用意する際の注意点
- 各種SNSのヘッダーサイズの参考情報
読み方のポイント
まずは自分のサイトが主にどの端末で見られているか確認してください。作業は、実際の表示を確かめながら進めると失敗が少ないです。ロゴは可能ならSVG（ベクター形式）で用意すると、拡大縮小しても劣化しにくく便利です。
ホームページヘッダー用ロゴのサイズ
推奨サイズ
ホームページのヘッダーロゴは横幅250〜400ピクセル、高さ50〜100ピクセルが目安です。多くのサイトで使いやすい標準は250×150ピクセルです。見た目のバランスが良く、メニューや検索欄と干渉しにくいサイズです。
配置の基本
- 左揃えが最も一般的で視認性が高いです。
- 中央揃えや右揃えを使う場合はナビゲーションとの兼ね合いを確認してください。
視認性とブランド効果
ロゴを少し大きめに表示するとブランドが目立ち、ユーザーがサイトを覚えやすくなります。ただし大きすぎるとメニューが押し出されるので、250〜400pxの範囲で調整してください。
レスポンシブ対応のポイント
- モバイルでは横幅を縮小し高さを抑える（例：150×60px程度）
- 高解像度表示（Retinaなど）に備え、2倍サイズの画像を用意すると鮮明に表示できます。
画像形式のおすすめ
- PNG：透過が必要なロゴに最適。文字や線がはっきりします。
- SVG：可能なら推奨。拡大縮小しても劣化しません。
具体例を基に実際の表示を確認し、250×150を基準に微調整してください。
フッター用ロゴのサイズ
推奨サイズ
フッターに置くロゴは幅100〜200ピクセル程度が目安です。高さはデザインに合わせて調整しますが、一般的には高さが50〜100ピクセルになることが多いです。例としては120×60px、150×50px、または正方形なら100×100pxが使いやすいです。
余白と配置
フッターはリンクや追加情報が多く並びます。ロゴが他要素を邪魔しないよう左右・上下に十分な余白を取ってください。目安として左右16〜24px、上下10〜20px程度のパディングを推奨します。ロゴは左寄せか中央寄せで視認性を確保しましょう。
画像形式と解像度
ロゴは可能であればSVGを使ってください。拡大縮小しても劣化しません。PNGを使う場合は高解像度（2x）を用意し、表示サイズに合わせて縮小して読み込むと鮮明に見えます。ファイルサイズはできるだけ小さく、目安は100KB以下です。
レスポンシブ対応
CSSでmax-widthを設定し、高さをautoにするとレスポンシブに対応できます。メディアクエリで小さい画面では80〜120pxに縮小する設定を入れてください。周囲のリンクやテキストが重ならないか、スマホで必ず確認しましょう。
実装チェックリスト
- モバイル・PCで見た目を確認する
- ロゴとリンクの間に十分な余白があるか
- SVGまたは高解像度PNGを用意しているか
- ファイルサイズが適切か
- alt属性などアクセシビリティを設定しているか
これらを守ると、フッターのロゴが見やすく、他の要素と調和したデザインになります。
PC向けのヘッダー最適サイズ
推奨横幅
パソコン向けのヘッダーは横幅1920pxまたは1536pxで制作するのが一般的です。これらはフルHDや高解像度ディスプレイに対応でき、ビジュアルが崩れにくくなります。制作時は1920pxで作成して、中央の重要コンテンツを1200〜1366pxの範囲に収めると安心です。
高さの目安
ヘッダーの高さは用途で変わります。ナビゲーション中心なら60〜120px、ロゴとナビを含む標準ヘッダーは100〜200px、ビジュアル重視のヒーローエリアは300〜600pxが目安です。高さは画面全体のバランスを見て調整します。
画像解像度と形式
ロゴは可能ならSVGで用意します。写真や背景はJPEG/WebPを推奨します。Retina対応として2倍サイズ（例：横1920pxなら3840px相当）を用意すると鮮明に表示できます。
レスポンシブ対応の簡単な手法
- 画像は width:100%; height:auto; を基本にします。
- 背景画像は background-size:cover; background-position:center; を使います。
- ブレイクポイントで高さや配置を調整します（例：768px未満で高さを小さくする）。
注意点
重要な情報は中央の“セーフエリア”（1200〜1366px）に置くと切れにくいです。ファイルサイズは軽く保ち、表示速度にも配慮してください。
ヘッダーサイズ設定時の重要な注意点
ヘッダーサイズを決める際は、見た目だけでなく操作性や表示の安定性を重視してください。以下のポイントを順に確認すると失敗が少なくなります。
固定（スティッキー）ヘッダーへの対応
- スクロールでヘッダーが固定される場合は、コンテンツが隠れない高さにする。
- 固定時と通常時で高さを変える場合はアニメーションで滑らかに切り替える。
レスポンシブ対応とブレークポイント
- デバイスごとに最小・最大高さを設ける（例：mobile 48–64px、tablet 64–80px、desktop 80–120px）。
- ロゴやナビはウィンドウ幅に合わせてスケールするようにする。
可読性とタッチ領域
- テキストやボタンは十分な高さと余白を確保し、タップしやすくする。
- フォントは小さくしすぎない。
画像とパフォーマンス
- Retina対応の画像を用意しつつ、軽量化も行う（WebPや適切な圧縮）。
- ヘッダーの読み込みが遅いとUXが低下するため遅延読み込みやプレースホルダを検討する。
アクセシビリティと重なり
- z-indexでコンテンツが隠れないよう管理する。
- キーボード操作やスクリーンリーダーでの順序を保つ。
テストを忘れずに
- 実機でスクロール、回転、ズーム時の見え方を確認する。
参考：SNS別ヘッダーサイズ
以下は主要なSNSプラットフォームのヘッダー（カバー）や関連画像の推奨サイズと注意点です。表示はデバイスごとに異なるため、重要な要素は中央に置くことを基本にしてください。
YouTube（チャンネルアート）
- 推奨サイズ: 2048×1152ピクセル以上（アスペクト比16:9）
- ファイル上限: 6MB以下
- 注意点: デスクトップ・モバイル・テレビでトリミングされます。文字やロゴは中央の「安全領域（1546×423付近）」に収めます。
X（旧Twitter）ヘッダー
- 推奨サイズ: 1500×500ピクセル
- 注意点: 上下が切れることがあるため、重要情報は中央付近に配置します。JPEG/PNGを使用します。
Facebook（カバー写真）
- 推奨表示: デスクトップ820×312ピクセル、モバイル640×360ピクセル
- 注意点: 横長の画像が基本です。テキストを多用すると表示が崩れる場合があるため中央寄せにします。
LinkedIn（背景画像）
- 推奨サイズ: 1584×396ピクセル
- 注意点: プロフィール写真やボタンに被らないよう、上下は余白を取ります。
Twitch（チャンネルバナー）
- 推奨サイズ: 1200×380ピクセル
- 注意点: 高解像度画像を使い、中央を意識してデザインします。
- ヘッダーはありません。プロフィール写真は最小でも320×320ピクセル推奨。
- ストーリーやハイライトカバーは1080×1920ピクセルが基準です。
各SNSで表示される範囲が異なるため、完成後はパソコン・スマホで必ず確認してください。色はsRGB、保存形式はPNGかJPEGを基本にすると無難です。
まとめ
ホームページのヘッダーサイズは、ブランド視認性とユーザー体験の両立が大切です。PC向け横幅は1920pxまたは1536pxを基準にし、ロゴ横幅は250〜400pxが目安です。レスポンシブ対応であらゆる画面で見やすく表示される設計が成功の鍵です。
実務ポイント
- ロゴは可能ならSVGを使用し、PNGなら高解像度で用意して縮小表示する。
- ロゴやナビは余白を十分に取り、視認性を優先する（例：ロゴ周りに最低20px程度）。
- モバイルではロゴを小さくしてナビやCTAを優先する。
- 画像は圧縮して読み込みを速くし、alt属性を設定する。
簡単チェックリスト
- PC表示で1920px / 1536pxで見た目を確認する
- ロゴ幅が250〜400pxでバランスを確認する
- スマホ・タブレットで表示を必ず確認する
- SVG採用やPNG圧縮を検討する
- 表示速度と余白を再チェックする
これらを実践すれば、ブランドが伝わりやすく、ユーザーにとって使いやすいヘッダーを作れます。
