ロゴの背景が白く四角く出るときの確認手順｜PNGなら透過されているとは限らない
ロゴの背景が白く四角く出るときの確認手順｜PNGなら透過されているとは限らない
「サイトのフッターにロゴを置いたら、ロゴの周りだけ白い四角が出た」「ダークカラーのバナーに載せたら、ロゴが白い長方形ごと浮いている」。ロゴの差し替えやサイト制作で定期的に出会うトラブルです。厄介なのは、白い背景の上では完全に正常に見えること。ヘッダーやチラシで問題なく使えていたロゴが、暗い場所に置いた瞬間に白い四角を連れてくる——この現象の原因は、ほぼ一つに絞られます。
結論から書きます。拡張子がPNGであることは、背景が透過されている証明になりません。さらに言うと、ファイルの詳細情報に「アルファチャンネル：あり」と表示されることすら、透過の証明にはなりません。確認方法はシンプルで、そのロゴを暗い背景の上に置いてみる。これだけです。この記事では、なぜ「PNGなのに透過されていない」ことが起こるのか、差し替え前に確認する手順、そして制作会社やデザイナーにロゴを依頼するときに何を指定すべきかを、弊社の実案件での実測データを交えて解説します。
PNGには「透過に見えて透過されていない」状態がある
まず仕組みを整理します。画像の透過は「アルファチャンネル」という透明度の情報で実現されています。JPGはこの情報を持てないため、背景を透明にできません。PNGはアルファチャンネルを持てる形式です。ここが落とし穴で、「持てる」であって「必ず持っている」ではありません。
さらにもう一段深い落とし穴があります。ロゴのPNGファイルは、次の3つの状態のどれかにあります。
- アルファチャンネルなし（RGB形式のPNG）——透過なし。暗背景で白四角が出る
- アルファチャンネルあり・背景部分が透明——期待どおりの透過PNG
- アルファチャンネルあり・しかし全画素が不透明——白背景がピクセルとして焼き込まれた状態。暗背景で白四角が出る
問題は3です。この状態のファイルは、形式上はRGBA(アルファ付き)なので、ファイルの詳細情報やプロパティを見ると「アルファチャンネル：あり」と表示されます。macOSのsipsコマンドで調べてもhasAlpha: yesが返ります。それでも、透明な画素は1つもない。「アルファチャンネルの有無」と「透明な部分の有無」は別の情報であり、ファイル情報が教えてくれるのは前者だけです。
この状態のPNGは、白い背景レイヤーを表示したままPNG形式で書き出したときや、編集ソフトの書き出し設定によって背景が統合されたときなどに生まれます。制作側に悪意がなくても普通に発生します。
実例：ファイル情報は「透過あり」、実測は「透明な画素ゼロ」
弊社が制作を担当した名古屋の設備工事会社のサイトで、実際にあったケースです。
クライアントから支給されたロゴはPNG形式(1085×1061ピクセル)でした。ファイル情報を確認するとhasAlpha: yes。ここで「透過あり。ヘッダーにもフッターにも使える」と判断したくなりますが、実装前に画素単位で実測したところ、結果はこうでした。
mode=RGBA
完全に透明な画素 = 0 / 1,151,185画素アルファチャンネルは存在するが、115万画素すべてが不透明。つまり白い背景がピクセルとして焼き込まれたPNGでした。
もしファイル情報だけを信じてそのまま実装を進めていたら、どうなっていたか。このサイトのヘッダーは白地だったので、制作中はまったく問題が出ません。問題が顕在化するのは、紺色のフッターに同じロゴを置いた瞬間と、SNSでシェアされたときのOGP画像です。しかもフッターやOGPを組み込むのは実装の終盤なので、発覚した時点で手戻りが大きくなります。実測はコピー&ペーストで数秒で終わる作業なので、「ファイル情報を見る」で止めず「透明な画素を数える」まで確認するのが正しい手順です。
逆の例もあります。別の美容系ECサイトの案件では、支給されたロゴが正しく透過処理されたPNG(8KB)だったため、検品も実装も一度で通りました。素材が正しければ何も起こらない。だからこそ、差し替えの前段階で素材の状態を確定させることに価値があります。
差し替え前の確認手順（かんたんな順に3段階）
手順1：暗い背景の上に置いてみる（誰でもできる・これで十分）
PowerPointやGoogleスライドで背景を黒か紺に設定し、ロゴ画像を貼り付けます。ロゴの文字やマークの形どおりに背景色が透けて見えれば透過されています。ロゴの周囲に白い四角が残れば、透過されていません。判定はこれで確定します。
店舗のオーナーやWEB担当の方は、この手順1だけ覚えておけば十分です。ポイントは「白い背景で確認しても何も分からない」こと。透過されていないロゴも、白地の上では完璧に正常に見えます。
手順2：市松模様が出るツールで開く
Photoshop・GIMP・Figma・Canvaなどの編集ツールで画像を開くと、透明な部分はグレーと白の市松模様(チェッカーボード)で表示されます。市松模様が見えれば透過、白く塗りつぶされていれば非透過です。
注意点として、OSに付属する画像ビューアーには透明部分を白で表示するものがあります。ビューアーで白く見えても「透過されていない」とは断定できないため、判定には手順1か編集ツールを使ってください。
手順3：透明な画素の数を数える（制作会社・技術者向け）
Pythonが使える環境なら、PIL(Pillow)で実測できます。
from PIL import Image
im = Image.open("logo.png").convert("RGBA")
a = im.getchannel("A")
transparent = sum(1 for p in a.getdata() if p == 0)
print(f"完全透過: {transparent} / {im.width * im.height} 画素")完全透過が0画素なら、アルファチャンネルの有無にかかわらず「透過されていないPNG」です。sips -g hasAlphaやファイルのプロパティ表示はアルファチャンネルの有無しか見ていないため、自動化スクリプトや納品チェックリストに透過判定を組み込む場合は、必ずこの「画素を数える」方式にしてください。
透過されていても終わりではない。「暗背景で読めるか」は別問題
見落とされがちなもう一つの論点です。背景を透過しても、ロゴ本体の色はそのままです。濃紺の文字で組まれたロゴは、背景を完璧に透過しても、紺色のフッターに置けば背景に沈んで読めません。「透明にできるか」と「暗い場所で読めるか」は、別の問題として両方確認する必要があります。
暗背景でロゴが沈む場合の対処は2つです。
- 白抜き版(ロゴ全体を白1色にしたバージョン)を用意する——フッターやダークカラーのバナー用。正式にロゴを制作すると、通常はカラー版と白抜き版がセットで納品されます
- 白いプレートの上に載せるデザインにする——白抜き版が用意できない場合の設計面での対処。角丸の白い座布団を敷き、その上にカラー版ロゴを置く
手元にカラー版1種類しかない場合、暗背景に置く予定があるなら白抜き版の手配を先に済ませておくと、実装が止まりません。
制作会社・デザイナーへの正しい依頼の仕方
ここまでの内容を依頼文に落とすと、次の3点セットになります。「ロゴのデータをください」だけでは、白背景が焼き込まれたPNG1枚が届く可能性があります。
- 背景透過のPNG（可能ならSVGも）——「背景が透明であること」を明記する
- カラー版と白抜き版の2種類——暗い背景で使う場面があるため
- 元データ(Illustratorのai形式やSVG)があれば一緒に
元データがあれば、透過版も白抜き版も数分で正確に作れます。元データがなく画像しか残っていない場合は、画像から背景を抜く後加工になり、輪郭に白いフチやゴミが残りやすくなります。ロゴを作り直すタイミングでは、必ず元データの納品まで含めて依頼してください。
もう一つ、素材を受け取ったときの検品として勧めたいのが、ロゴの中に焼き込まれた「文言」の確認です。ロゴの下部にキャッチコピーやサービス名、「〇〇対応OK」のようなバッジが一体化されているケースがあります。事業方針が変わっていた場合、そのロゴを全ページのヘッダーに置くと、サイト全体で古い方針を掲げ続けることになります。実際、前述の設備工事会社の案件でも、ロゴ下部に現在の営業方針と合わないバッジが含まれていたため、シンボルマーク部分だけを切り出して使う判断をしました。ロゴは「支給されたから貼る」ものではなく、透過・視認性・文言の3点を検品してから使う素材です。
まとめ：差し替え前のチェックリスト
- PNGという拡張子は透過の証明にならない。「アルファチャンネルあり」の表示も証明にならない
- 確認は暗い背景の上に置くだけ。白背景でいくら確認しても判定できない
- 納品チェックを自動化するなら、ファイル情報ではなく透明な画素の数を実測する
- 透過と視認性は別問題。暗背景で使うなら白抜き版をセットで用意する
- 依頼時は「透過PNG＋白抜き版＋元データ」の3点セットで指定する
- 受け取ったロゴは、透過・視認性・焼き込まれた文言の3点を検品してから使う
ロゴは全ページに表示される、サイトでいちばん露出の多い画像です。それだけに、素材の不備は「全ページの不具合」として現れます。差し替えの作業前に、暗い背景に一度置いてみる。この10秒の確認が、実装終盤の手戻りを未然に防ぎます。