ECヘッダーの推奨ロゴサイズはどれくらいですか？

デスクトップはロゴ表示高24–32px、ヘッダー高48–64pxが見やすい範囲です。モバイルは20–28pxを目安にし、視認性が落ちる場合は最小幅120px以上を確保。Retina向けに2xのソースを用意しつつ、CSSでは実表示サイズを厳守します。

ロゴはSVGとPNGどちらを使うべきですか？

フラットなロゴはSVGが最適で、拡大縮小や色変更に強く軽量です。グラデーションやテクスチャ主体でビットマップが必要な場合のみ透過PNGを採用し、1x/2xを書き出します。どちらもsRGBで書き出し、余計なメタデータは削除してください。

ダークモードにはどう対応しますか？

ライト/ダーク用のロゴを別途用意し、CSSのprefers-color-schemeやのmedia属性で切替えます。単色ロゴならcurrentColor運用も有効。自動反転は破綻しやすいため避け、コントラスト比4.5:1以上を目標にします。

ロゴでCLSが発生します。何を直せば良いですか？

img要素にwidth/heightを明示し、CSSのaspect-ratioで表示領域を予約します。ヘッダー内ロゴはlazy-loadせず、必要ならを使用。レイアウトを変えるアニメーションや遅延フォント依存を避け、安定した高さのヘッダーを保ちます。

ロゴの周りに白い箱が見えるのはなぜですか？

不透明背景のPNGや余白不足が原因です。透過PNGやSVGを使用し、適切なクリアスペース（8–12px）を確保。ダーク背景上で沈む場合はアウトライン付きの反転版を用意し、背景色とロゴ色の組み合わせを見直します。

ロゴのaltテキストはどう書くべきですか？

ホームリンクのロゴは「サイト名」を記載し、「ロゴ」や装飾的説明は不要です。リンク先がトップ以外なら目的を簡潔に記述します。a要素にaria-labelを追加しても構いませんが、重複しないように調整します。

Faviconやアプリ用アイコンも整える必要がありますか？

はい。faviconは16×16と32×32、Apple Touch Iconは180×180、PWA向けに192×192/512×512を用意。可能ならSVG faviconも提供し、Safariのpinned tab用にmask-iconを設定。細部を省いた簡略版のマークを使うと小サイズでも崩れません。

ECロゴ最適化：サイズ・形式・表示速度のベストプラクティス

Q: ダークモードにはどう対応しますか？

ライト/ダーク用のロゴを別途用意し、CSSのprefers-color-schemeや のmedia属性で切替えます。単色ロゴならcurrentColor運用も有効。自動反転は破綻しやすいため避け、コントラスト比4.5:1以上を目標にします。

Jump to section

Overview

ECにおけるロゴは、最初の1秒で信頼を伝え、ナビゲーションの拠点にもなる重要要素です。読みやすいサイズ、適切なファイル形式、テーマ切替、そして表示速度の最適化までを一貫して設計することで、CVRとブランド想起の双方を高められます。

本カテゴリでは、ヘッダーでの理想的なロゴ寸法、SVG/PNGの使い分け、CLSを防ぐ実装、ダークモード対応、アクセシビリティ、運用ガイドライン整備まで、現場でそのまま使える基準と手順をまとめます。

対象読者

自社ECの信頼性を高めたい担当者

ロゴ運用基準を整備したい責任者

サイト表示速度を改善したい開発者

ブランド一貫性を強化したいデザイナー

得られること

✓

最適なロゴサイズと比率の指針を理解

✓

SVGとPNGの使い分けと書き出し手順

✓

CLSを抑える実装とプリロード設定

✓

明暗対応と高コントラストの運用法

Key Takeaways

Actionable points curated for this category.

ヘッダで読みやすいサイズと比率

デスクトップのヘッダー高48–64px、ロゴ表示高24–32px、モバイル20–28px。幅は自動、縦横比は横長なら3:1〜5:1、最小表示幅は120px以上を目安。余白8–12pxのクリアスペースを確保。

SVG優先、PNGは透明背景で用意

ベクターロゴはSVGを優先。単色/フラットならSVGをインラインまたは外部読み込み。ビットマップが必要な場合は透過PNGを1x/2xで書き出し、sRGB、無駄なメタデータ削除、色数最適化。

CLSゼロを目指す実装

width/height属性を明示し、aspect-ratioで予約領域を確保。ヘッダのロゴは遅延読込しない。重要なら<link rel="preload" as="image">またはSVGインライン化。HTTPキャッシュは長期+ファイル版管理。

明暗テーマと背景の整合

ダーク/ライトで別ロゴを用意し、prefers-color-schemeやpictureのmediaで自動切替。背景透過を基本にしつつ、必要に応じてアウトライン付きの反転版を用意。コントラスト比4.5:1を確保。

アクセシビリティと検索面の配慮

ホームリンクのaltは「サイト名」。a要素にaria-labelを併用可。フォーカス可視、タップ領域44px確保。構造化データOrganizationのlogo/urlをJSON-LDで提供し、同一URLを全ページで参照。

運用ガイドとテスト

最小サイズ、余白、色数、使用禁止例を明記したガイドを整備。ABテストで配置・大きさ・余白を検証し、CVR/LCP/CLSを指標化。CDNで最適配信し、命名規則とバージョニングで混乱防止。

ECロゴ最適化