Web サイトのヘッダーロゴは「高さ 32〜48px」が事実上の業界標準です。月 1,000 回検索される「web ヘッダー ロゴ」のニーズは、「正しいサイズ」「余白」「SVG が必要な理由」「モバイルでの縮小」に集約されます。
この記事では、PC ヘッダー高さ別の推奨ロゴサイズ、左右マージン、SVG が必須な理由、モバイル時のレスポンシブ縮小ルールをまとめます。
ヘッダー高さとロゴサイズ
モダンな SaaS・コーポレートサイトのヘッダー高さは 64〜80px が中心。この中にロゴを置く場合、ロゴ自体の高さは 32〜48px が読みやすさと存在感のバランスが取れる範囲です。
| ヘッダー高さ | ロゴ高さ | 使い所 |
|---|---|---|
| 56px（コンパクト） | 28〜32px | ダッシュボード・管理画面 |
| 64px（標準） | 32〜40px | SaaS LP・コーポレート |
| 72〜80px（広め） | 40〜48px | ブランド重視 LP、D2C |
| 96px 以上（高め） | 48〜56px | メディア・ニュース系 |
余白：ロゴの周りに「ロゴ高さ × 0.5」
ロゴの左右に十分な余白がないと、ナビゲーションメニューと干渉して読めなくなります。ロゴ高さの 0.5 倍以上のマージンを最低限確保します。40px のロゴなら左右 20px ずつ、というのが目安。
SVG が必須な理由
ヘッダーロゴは Retina ディスプレイ（2x / 3x）で見られる前提です。PNG だとボケるか、3x 用に @2x.png / @3x.png を別々に用意する必要があります。SVG ならファイル 1 つで全解像度に対応し、ファイルサイズも 5KB 程度。
またダークモード対応で色だけ切り替えたい場合、SVG なら CSS の `currentColor` で色を継承できます。PNG では色違いを別ファイルで用意することになります。
モバイルレスポンシブのルール
ブレークポイント 768px 以下では、ヘッダー高さ自体が 56px → 48px に縮みます。ロゴはそれに合わせて 28〜32px に。横長ワードマーク + シンボルのロゴだと、モバイルで文字部分が邪魔になるので、シンボル単体に切り替えるのが定石です。
CSS では `picture` 要素や `srcset` で SVG を 2 種類用意し、画面幅で切り替える方法が一般的です。または media query で表示・非表示を切り替えるだけでも OK。
ヘッダーロゴの実例
AXIS（SaaS）
PRISMA（IT）
BLOOM（EC）
TRINITY（士業）
起業家・スタートアップロゴ、IT・SaaS ロゴ、EC・D2C ロゴ の各業種ページに、ヘッダー用に最適化されたロゴサンプルを掲載しています。
まとめ
Web ヘッダーロゴは「SVG・高さ 32〜48px・左右マージン 0.5x・モバイルでシンボル切り替え」の 4 点を抑えれば、Retina もダークモードも問題なく走れます。最初から SVG で持っておくのが結局一番安いです。
LogoLab AI は SVG 出力が標準で、ヘッダー用の横長版とモバイル用のシンボル版を同時に書き出せます。CSS の `currentColor` 対応 SVG もそのまま使えます。