透明な画像の背景が白や黒になるとき

ロゴの周囲が透明なはずなのに白く見える場合、表示アプリの背景色を見ているだけのことも、白い画素として保存されていることもあります。まず違いを確認します。

背景色を変えて見る

明るい背景と暗い背景に置いて、周囲が変わるか確認します。編集アプリの市松模様は透明部分の表示に使われますが、市松模様そのものを画像として保存してしまう場合もあるので、別の背景で確かめます。

対応形式で書き出す

PNGやWebPは透明度を扱えます。一般的なJPEGでは透明部分をそのまま保持できないため、背景色を決めて書き出す必要があります。拡張子を変えるだけでは、透明度のデータを追加できません。

縁の状態を見る

背景除去を行った場合は、髪、細い線、半透明の影を確認します。白い背景で切り抜いた縁が、暗い背景で白く残ることもあります。写真のどの部分を残すかを決め、必要なら手作業で修正します。

使用先で確認する

画像単体の表示だけでなく、実際のWebページや印刷用資料に配置して確認します。透明を維持する必要がなければ、使用先と同じ背景色で配布用を作る方法もあります。編集可能な元データは別に残します。

背景を変えて透明度を確かめ、対応形式で出力して縁を見る
画像を選ぶと拡大できます。

明るい背景と暗い背景で、透明部分の見え方を比べます。
透明度を保持できる形式と設定で書き出します。
髪、細い線、半透明の影や白い縁を確認します。

白い背景と透明な部分を区別する

白い紙に描いたロゴを別の色の紙へ置いても、白い紙は残ります。一方、ロゴの形に沿って切り抜いたものなら、周囲には下の紙の色が見えます。画像でも、白い画素を持つ背景と透明な背景をこのように分けて考えると、確認する意味がつかみやすくなります。

白い表示画面で両者が同じに見えるのは、その画面だけでは違いを判別しにくいためです。いきなり背景除去を実行すると、本来残したかった白い文字や模様まで消す可能性があります。まずは背景色を変えて、どこが画像の一部なのかを見ます。

ロゴを濃い色の案内に配置する例

白いページでは問題のなかったロゴを、濃い色の案内へ置く例を考えます。ロゴの周囲に四角い白が出るなら、背景の白が画像に含まれているかを確認します。輪郭だけに細い白が出るなら、背景全体の問題と、切り抜いた縁の問題を分けて扱います。白い文字のロゴが見えなくなる場合は、透明度よりも文字と背景の組み合わせを先に見直します。

元の編集データがあるなら、そこから用途に合う背景設定で書き出します。配布用の画像しかない場合は、無理に小さな画像を加工し続ける前に、適切な元データを入手できないか確認します。最後に、実際に配置する大きさで細い線や文字の抜けを見ます。拡大画面だけで整っていても、使用寸法では読めないことがあるためです。

作業途中と書き出し後を比べる

問題が出る段階	調べる場所
編集画面ですでに白い四角がある	元画像の背景とレイヤー
書き出すと背景が付く	保存形式と書き出し設定
特定の配置先だけ違って見える	配置先の背景や表示方法
暗い背景で縁が目立つ	切り抜き境界と半透明部分

透明画像は、単体で完結するというより、下に何を置くかで見え方が変わる素材です。明るい背景用と暗い背景用のロゴが必要なら、用途が分かる名前で分けます。配布先へは「透明です」だけでなく、想定する背景や使い方を添えると、見えなくなる組み合わせを避けやすくなります。