はじめに
目的と対象
本記事は、Webサイトのヘッダー（ページ上部に表示される帯状のデザイン）の最適なサイズ設計についてわかりやすく解説します。パソコン、タブレット、スマートフォンごとの推奨サイズや、レスポンシブ対応で気をつけるポイント、ユーザー体験を良くする設計上の留意点を扱います。対象はサイト運営者、デザイナー、コーダー、初心者の方です。
ヘッダーサイズが重要な理由
ヘッダーは訪問者が最初に目にする部分です。大きすぎると本文が見えにくくなり、狭すぎるとブランドやナビゲーションが伝わりません。適切なサイズは視認性、導線、読み込み速度に影響します。具体例として、画面上部が大きすぎると「ファーストビュー」に重要な情報が入らないことがあります。
本記事で学べること
各デバイスごとの推奨ピクセルや、画像のトリミングに強い安全領域の考え方、レスポンシブでの切り替え方法の基本を学べます。さらに、YouTubeのような特定プラットフォームの基準にも触れ、実務で使える実例を紹介します。
読み方のポイント
まず自分のサイトの利用シーン（訪問端末や目的）を想定してください。次に提示する推奨値をベースに、実機での確認や画像の最適化（ファイル形式・解像度）を行うと効果的です。章ごとに手順と注意点を示しますので、順に確認しながら進めてください。
デバイス別ヘッダーサイズの推奨値
パソコン（デスクトップ）
幅: 1000px〜1920px、高さ: 70px〜140pxを目安にしてください。画面幅が広いほど左右の余白をとり、中央に重要要素（ロゴやナビ）を配置すると見栄えが安定します。ヘッダーを固定（スクロール追従）にすると操作が楽になりますが、コンテンツ表示領域が狭くなる点に注意してください。
タブレット
幅: 768px〜1024px、高さ: 80px〜200pxが使いやすいです。タテ向き・ヨコ向きどちらでも崩れないレスポンシブ設計を心がけます。例えばロゴを小さくし、メニューはハンバーガーアイコンに切り替えると良いです。
スマートフォン
幅: 320px〜480px、高さ: 50px〜70pxが標準です。指で操作しやすいようにボタンは十分な大きさにし、テキストは読みやすいサイズにします。画像は高解像度対応（Retinaなど）を検討してください。
共通の注意点
- 重要な情報は中央かつ上部に置くと見つけやすくなります。
- 背景画像を使う場合は主要部分が切れないようにセーフエリアを設定してください。
- レスポンシブでサイズが切り替わるポイントを明確にし、各サイズで見え方を必ず確認します。
ヘッダー設計時の重要なポイント
フォントとタイポグラフィ
本文と同じ14px〜18pxを目安にし、見出しは階層に応じて大きさを調整します。可変サイズには clamp(14px, 2vw, 18px) のようなCSSを使うと便利です。行間は1.2〜1.6倍にして読みやすさを保ちます。
レスポンシブ対応
%やvw、vh、remを基本にし、メディアクエリで微調整します。例：@media (max-width:600px){ .header{font-size:16px;} }。タッチ端末ではボタンのタップ領域を44〜48px以上にします。
視認性とコントラスト
ロゴやテキストは背景と十分なコントラストを確保します。目安として本文はWCAGの4.5:1を意識すると良いです。影やアウトラインで可読性を補う方法もあります。
レイアウトと余白
左右のパディングはデバイス幅に対して相対単位を使い、主要要素周りに十分な余白を取ります。要素の優先順位を明確にして視線誘導を設計します。
画像・パフォーマンス
ヘッダー画像は画面幅に応じた解像度を用意し、WebPや適切な圧縮で軽量化します。Retina対応なら2x画像も用意します。
アクセシビリティ
ARIAラベルや代替テキストを付け、キーボード操作でヘッダー内リンクに到達できるようにします。安全領域（ノッチ）にも配慮してください。
これらを組み合わせるとブランドの視認性が高まり、使いやすいヘッダーになります。
YouTubeなど特定プラットフォームのヘッダーサイズ
基本の推奨値
- 推奨サイズ：2048×1152ピクセル以上（アスペクト比16:9）
- ファイルサイズ：6MB以下
- フォーマット：JPEGかPNGが一般的
デバイス別の表示領域（実際に表示されるサイズ）
- TV：2560×1440px（フル表示）
- PC：2560×423px（横長の中央が表示）
- スマホ：1546×423px（中央部分のみ表示）
注意点と実践的な対策
- 中央の“セーフエリア”に重要な要素を置くことを優先してください。具体的には幅1546px、高さ423pxの中央領域にロゴや文字を収めます。背景や装飾は外側まで広げて自然に見せます。
- 小さな文字や細かいロゴはスマホで読めなくなります。大きめのフォントと余白を使って視認性を確保してください。
- 書き出し時はファイルサイズを確認し、6MBを超えないように圧縮します。画質を保ちつつJPEGの画質調整や軽めのPNGを検討してください。
作業手順の例
- キャンバスを2560×1440pxで作成する。
- 中央に1546×423pxのガイドを作る。
- ロゴや重要な文言をそのガイド内に配置する。
- 背景画像やグラデーションを外側まで延ばして自然な見た目にする。
- 書き出してデバイスで確認する。
この章で示したポイントに従えば、YouTubeの各デバイスで見栄えの良いヘッダーを作成できます。
最適なヘッダーサイズ選定の考え方
ヘッダー高さに「正解」はありません
ヘッダーの高さはサイトの目的や印象によって変わります。標準的な目安（例：PC 70〜140px、タブレット 60〜120px、モバイル 56〜70px）を参考にしつつ、使いやすさとブランド性を両立させることが重要です。
判断基準（実務で使えるポイント）
- 目的：ブランド訴求 → 大きめ、ナビ重視・操作性重視 → 小さめ
- 表示方法：固定（sticky）にするなら高さを抑えると邪魔になりません
- タップ目標：モバイルはボタンやリンクのタップ領域を44px程度確保します
- ロゴとナビ：ロゴが潰れない余白、メニューが折り返さない幅を確保します
具体的な例（目安）
- コーポレートサイト（信頼感重視）: PC 90〜120px
- SaaSや管理画面（操作重視）: PC 60〜80px
- ブログや記事中心（コンテンツ重視）: PC 70〜90px
- ヒーローヘッダー（ファーストビュー重視）: 200px〜600px（ページ毎に調整）
実装時のチェックリスト
- 複数画面で必ず確認して合わせる
- スクロール時の見え方（固定/非固定）を確認する
- ロゴやメニューのサイズと余白を調整する
- 画像を使う場合は遅延読み込みでパフォーマンスに配慮する
最終的にはユーザーテストで使いやすさを確かめ、ブランド表現と操作性のバランスをとる設計をおすすめします。
