ロゴは 白背景・黒背景・カラー背景・写真背景 の 4 環境で使われます。1 種類しか用意していないと、Instagram のダークモード、コーポレートサイトの黒ヘッダー、看板の色面で「ロゴが消える」「白フチが汚く出る」事故が起きます。
この記事では、どの背景でも崩れないロゴ運用の 4 つの実務テクニック（反転バージョン・明度差・SVG マスク・PNG 透過の白フチ対策）を整理します。
ロゴは最低 3 バリエーション持つ
ロゴ運用の標準は 「ポジ」「ネガ（反転）」「モノクロ」 の 3 つを必ず作っておくこと。
ポジ（白背景）
ネガ（黒背景）
モノクロ白（カラー背景）
明度差（コントラスト比）4.5:1 以上を確保
ロゴが背景に対して「見える」ためには、WCAG の コントラスト比 4.5:1 以上 が必要です。白（#ffffff）と黒（#000000）は 21:1、白とプライマリ赤橙（#fa4100）は 3.4:1 で、実は AA に届きません。カラー背景にロゴを置く場合は 白か黒の単色版 を使うのが安全策です。
SVG マスクで背景に馴染ませる
SVG のロゴは fill 属性を CSS で上書き できます。fill="currentColor" を使えば、CSS の color プロパティで色を切り替え可能。ダークモード対応の Web サイトでは、これだけで自動的にロゴ色が切り替わります。
PNG 透過の「白フチ」問題
PNG で書き出した透過ロゴが、暗背景で 白い縁取り のように見えることがあります。原因は PNG のアンチエイリアシング時に、半透明ピクセルが白色を混ぜているため。対策は次の 3 つ。
- SVG で配布する — 縁取り問題が原理的に起きない。可能なら SVG を第一選択に。
- マット（背景予定色）で書き出す — Photoshop の「Matte」設定で、暗背景に置く前提なら #000000 をマットに指定。
- 2 倍解像度で書き出す — 表示サイズの 2x で書き出し縮小すれば、アンチエイリアスが目立たない。
書き出す標準セット
新規ロゴでは、最低でも以下のファイルを揃えておきます。
| ファイル | 用途 |
|---|---|
| logo.svg | Web・印刷の主役 |
| logo-white.svg | 暗背景用反転 |
| logo-mono.svg | FAX・1 色印刷 |
| logo@2x.png（1024px） | SNS プロフィール・App アイコン |
| favicon.ico / .png | ブラウザタブ（16/32px） |
実例 — 多背景でも崩れないロゴ
AXIS
CubeLab
まとめ
ロゴは 1 つ作って終わり ではありません。ポジ・ネガ・モノクロの 3 種類を揃え、PNG 出力では白フチ問題を回避し、Web では SVG + currentColor でダークモード対応する — これがブランド運用の基準線です。
LogoLab AI は、生成したロゴから ポジ／ネガ／モノクロ／favicon 一式を SVG・PNG・PDF で書き出しできます。IT 向け・EC 向け・起業家向け のロゴでも、運用に必要な全フォーマットが揃います。