暗い背景用にロゴを白抜きにする方法

ダークモード用のロゴとは、黒や濃いグレーの上でもはっきり見えるように作ったロゴのバージョンです。たいていは全体を白にするか、ブランドカラーのまま暗い部分だけを明るくします。作るには、ベクター編集ソフトでロゴの暗い部分を白に塗り替えるか、無料のロゴの白抜きツールにロゴをドロップします。そのあとSVGか透過PNGで保存し、背景が暗い場所で使います。

まず企業のロゴが必要ですか？　無料のLogo Finderなら、サイトのURLからロゴを見つけ、白、黒、好きな色でダウンロードできるので、暗い背景にもすぐ使えます。出典は2026年11月4日に確認しました。

ダークモード用のロゴとは？

ダークモード用のロゴとは、暗い地に明るい色で表したロゴのバージョンで、背景が暗いときに使います。ダークモードのウェブサイトやアプリ、黒いTシャツ、マットブラックのカード、暗いスライドなどです。デザイナーは反転ロゴとも呼びます。ロゴの形はそのままに、黒や紺の文字など、黒地で見えなくなる部分を白や明るい色に置き換えます。

ユーザーはOSやブラウザーの設定でダークテーマを選び、ウェブサイトはその選択をprefers-color-schemeメディア特性で読み取ります。この特性は「ユーザーがライトテーマまたはダークテーマを指定しているかを検出する」ために使われます（MDN）。白い背景専用に作ったロゴは、そうしたページでは崩れて見えます。だからこそ、ブランドには両方のバージョンが必要です。

ダークモード用のロゴはいつ必要ですか？

ロゴが暗い背景に置かれる場所では、どこでもダークモード用のロゴが必要です。ダークテーマのウェブサイトやアプリ、ダークモードで開いたメール、暗いスライドや動画、SNSのバナー、そして黒いシャツ、マットブラックのカード、濃い色の上の箔押し、暗い色のバッグへの白インク印刷といった暗い色の商品です。下の表では、背景ごとにいちばん見やすいバージョンをまとめています。

白いロゴや箔のロゴがマットブラックのカードでどう見えるかを製造前に確かめるには、無料のクレジットカード3Dモックアップ作成ツールにドロップするか、Logo Finderでカードに載せて3Dで見るを押してください。ワンクリックで、スタジオの光の下にある原寸大のカード上で、ロゴが金箔やスポットUVになります。Proofsceneのアカウントには暗い背景用と明るい背景用のロゴを1つずつ登録でき、Logo Finderの自社ロゴとして保存ボタンで、どちらも会社のロゴ設定に直接保存できます。

ロゴの白いバージョンを作るには？

ロゴの白いバージョンをいちばん手早く作るには、ロゴのすべての形を白に塗り替えます。白抜きツールならワンクリック、ベクター編集ソフトでも1分ほどです。手元のファイルに合わせて方法を選んでください。どんなファイルにもワンクリックのツール、ベクターの元データにはデザインソフト、すでにWebページにあるロゴにはCSSの1行です。

1. 無料ツールでワンクリック

ロゴの白抜きツールにロゴをドロップし、「白」「黒」「好きな色」から選ぶと、ロゴ全体がその1色になり、背景は透明になります。PNG、JPG、WebP、GIF、AVIF、SVG、PDF、AI、PSDファイルに対応し、ブラウザーの中で動くのでファイルが端末の外に出ることはありません。結果は、SVG、PDF、EPS、最大4096pxの透過PNGでダウンロードできます。

2. Illustrator、Figma、Inkscapeで

ベクターファイルを開いてすべての形を選択し、塗りを白（#FFFFFF）に設定します。線があれば線も白にします。明るいアクセントカラーを残したい場合は、暗い形だけを選択します。黒いアートボードで結果を確認し、画面用にSVG、印刷用にPDFかEPSで保存します。どのファイルを何に使うかは、ロゴのファイル形式を解説で紹介しています。

3. ウェブサイトならCSSで

Webページでは、1行でどんなロゴ画像も白にできます。brightness(0)は画像を「完全に黒く」し（MDN）、invert(1)は「完全に反転」させるので（MDN）、その黒が白に変わります。すべての色が白になるため、単色のロゴに最も向いています。

.logo-on-dark {
  filter: brightness(0) invert(1);
}

SVGとしてインラインで配置したロゴなら、形をfill="currentColor"に設定します。currentColorキーワードは「要素のcolorプロパティの値を表す」ので（MDN）、ロゴは周囲のページの文字色になります。ダークモードで文字が明るくなれば、ロゴも一緒に明るくなります。

Canva、Photoshop、PowerPointでロゴを白抜きにするには？

どのアプリでも、1分もかからずにロゴを白くできます。Canvaは色を編集できるロゴの色を変え、Photoshopはオーバーレイでロゴのレイヤーを白にし、PowerPointは図の明るさで白くします。アプリで色を変えられないロゴは、無料のロゴの白抜きツールで一度白いバージョンを作り、そのファイルを挿入します。

Canvaの場合

デザイン内のロゴを選択します。ツールバーに色がカラータイルとして表示されたら、各タイルをクリックし、開いた「カラー」パネルで白を選びます（Canvaヘルプセンター）。Canvaによると、カラータイルが表示されない場合、その要素の色は変更できません。PNGやJPGの画像としてアップロードしたロゴがこれにあたります。その場合は、白いPNGかSVGを取り込みます。「アップロード」タブを開き、「ファイルをアップロード」を選んでファイルを選択します（Canvaヘルプセンター）。

Photoshopの場合

ロゴを背景が透明な独立したレイヤーに置き、すべてのピクセルを白にします。白の「カラーオーバーレイ」レイヤースタイルなら1ステップで済み、「色相・彩度」調整で「明度」を最大にしても同じ結果になります。下に暗いレイヤーを置いて確認し、白いロゴの透明な背景を保つため、JPGではなく透明部分を含むPNGで書き出します。

PowerPointの場合

ロゴを選択し、「図の形式」タブを開いて「修整」→「図の修整オプション」を選び、「明るさ」のスライダーを右端まで動かします（Microsoftサポート）。透過PNGのロゴなら背景は透明のまま白くなり、暗いスライドにすぐ使えます。Wordでも、「図の形式」タブに同じ「修整」ボタンがあります。

動きをつけるなら、無料の回転ロゴGIF作成ツールで、白いバージョンを暗い背景の上で回るロゴにできます。ループGIFかMP4で書き出せます。

ダークモード用のロゴは真っ白にすべきですか？

ダークモード用のロゴは、真っ白でなくてもかまいません。写真、動画、にぎやかな背景では全体を白にするのがいちばん確実ですが、無地の黒の上では、明るいブランドカラーを残した2色のバージョンのほうがブランドらしく見えることがよくあります。大切なのは、すべての部分が見えることです。黒、紺、濃い茶色の部分は明るくする必要がありますが、黄色や水色のような明るいアクセントはそのままでかまいません。

アクセシビリティの基準は、この選択を自由に任せています。WCAGは「ロゴまたはブランド名の一部である文字には、コントラストの要件はない」としています（W3C）。それでも、同じ基準が大きな文字に定めている3:1のコントラスト比は、ひと目で読ませたいロゴの最低ラインとして妥当です。次の3つの確認が役立ちます。

• 細い線や小さな文字（マークの下のキャッチコピーなど）には、最も強いコントラストが必要です。白を選べば確実です。
• 濃いグレーの背景はダークテーマでよく使われ、黒よりも中間色に近いため、真っ黒の上だけでなく、実際の背景でロゴを確認してください。
• ブランドカラーのうち、赤いマークのようにアイデンティティを担う色は、そのまま残せることがよくあります。ロゴを最小サイズにして、暗い背景の上で1色ずつ確認してください。

Logo Finderでは、どのロゴもプレビューの背景を黒、グレー、白、市松模様、ブランドカラーに切り替えられるので、各バージョンを実際に置く地の上で判断できます。

ウェブサイトでダークモード用のロゴを表示するには？

ウェブサイトでダークモード用のロゴを表示するには、<picture>要素で両方のファイルをブラウザーに渡し、prefers-color-schemeメディア特性に選ばせます。ダークモードの訪問者には白いバージョンが、それ以外の訪問者には元のロゴが表示されます。GitHubも、READMEファイルのライト用とダーク用の画像で同じパターンに対応しています（GitHubの変更履歴）。マークアップは次のとおりです。

<picture>
  <source srcset="/logo-white.svg" media="(prefers-color-scheme: dark)">
  <img src="/logo.svg" alt="Company name" width="200" height="50">
</picture>

構成によっては、ほかに2つの方法があります。独自のライト・ダークテーマの切り替えがあるサイトなら、テーマを切り替えるのと同じCSSクラスでロゴを入れ替えられます。また、<img>タグで配置したSVGは独自の@media (prefers-color-scheme: dark)スタイルを持てます。MDNの説明のとおり、このスタイルは埋め込み先のページのカラースキームに従います。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 50">
  <style>
    .mark { fill: #0e1b2c; }
    @media (prefers-color-scheme: dark) { .mark { fill: #ffffff; } }
  </style>
  <path class="mark" d="M10 10h40v30H10z"/>
</svg>

メールでダークモード用のロゴはどう表示されますか？

メールソフトのダークモードの扱い方は3通りあるため、メールのダークモード用ロゴは、そのすべてで見えるようにする必要があります。色をそのままにするもの、明るい背景だけを反転させるもの、すべてを反転させるものです。Litmusのメールマーケター向けダークモードガイドでは、2025年2月時点のメールソフトの一覧で、次のように分類しています。

Litmusは3つの対策を挙げています。透過PNGを使うこと、暗いロゴがどんな背景でも読めるように「アイコンやロゴの周りに光彩か白い線」を加えること、そして@media (prefers-color-scheme: dark)で白いバージョンに切り替えることです。この切り替えは、Litmusの一覧ではmacOS、iPhone、iPadのApple Mailで対応とされています（Litmus）。署名用のロゴのサイズは、Web、SNS、メール、印刷用のロゴサイズで紹介しています。

ファビコンにダークモード用のバージョンは必要ですか？

透明な背景の上の暗いファビコンなら、ダークモード用のバージョンが必要です。ダークテーマではブラウザーのタブも暗くなるからです。SVGのファビコンは独自の@media (prefers-color-scheme: dark)スタイルを持ち、テーマに合わせて色を切り替えられます。web.devのアダプティブファビコンのガイドによると、これはChromium系のブラウザーとFirefoxで動作します。そのほかのブラウザー向けに、favicon.icoも併せて置いておきます（web.dev）。

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">

いちばんシンプルなのは、切り替えなしで両方のテーマで読めるファビコンです。ブランドカラーのベタの正方形にマークを置きます。Logo Finderのファビコンパックは、どのロゴからでもICO、16⁠～⁠512pxのPNGアイコン、site.webmanifestを作成します。ファビコン取得ツールではほかのサイトのファビコンの作り方がわかり、ロゴのサイズではファビコンの各サイズと使われる場所を紹介しています。まず手作業で企業のロゴを探すなら、企業ロゴの探し方をご覧ください。