透過PNGとは｜背景が透明な画像の作り方と保存で失敗しないコツ

透過は「4つ目の情報」で成り立っている

通常の画像は、1つの点（ピクセル）ごとに赤・緑・青の3つの値を持っています。透過に対応した画像は、これに「不透明度」を表す4つ目の値が加わります。これがアルファチャンネルです。

• 不透明度100%：下が透けない。通常の絵柄の部分
• 不透明度0%：完全に透明。何も描かれていないのと同じ
• その中間：半透明。影のぼかしやガラス表現に使われる

重要なのは、透明は「白」ではないということです。白は色として塗られた状態で、透明は色の情報を持たない状態です。見た目が似ているため混同されますが、黒い背景に置いた瞬間に違いが出ます。白い四角として浮き上がるなら、それは透過されていません。

形式ごとの透過対応

GIFの「1色のみ」は、指定した1色を丸ごと透明として扱う方式です。半透明が表現できないため、文字やロゴの縁がギザギザになります。今からロゴを透過で用意するなら、PNGかWebPを選んでください。

PNGとWebPで迷った場合、Webサイトに載せるならWebP、相手に渡したり資料に貼ったりするならPNGが無難です。WebPは対応が広がっていますが、受け取った側のソフトによっては開けないことがあります。

JPEGに変換すると背景が白くなる

透過PNGをJPEGに変換すると、透明だった部分には必ず何かの色が入ります。JPEGにはアルファチャンネルが存在せず、透明という状態を保存できないためです。多くのツールは白で塗りつぶします。画像フォーマット変換ツールでも、JPEGを選んだ場合は透明部分を白で埋めてから変換します。

• 白背景の資料に貼るなら、白で塗られても見た目は変わらない
• 濃い色の背景に重ねるなら、白い四角が残って目立つ
• 半透明の影を含むロゴは、境界に白いふちが出ることがある

なお、いったんJPEGにしたものを再びPNGに戻しても、透過は復活しません。白く塗られた状態がそのまま保存されているためです。元の透過PNGは必ず残しておいてください。

透過できているかを確認する方法

白い画面で見ているかぎり、透明も白も同じに見えます。次のどれかで確認してください。

1. 1

   ①濃い色の背景に重ねてみる

   スライド資料やドキュメントに黒い四角を置き、その上に画像を貼ります。四角い白地が出れば透過されていません。最も手早い確認方法です。

2. 2

   ②ファイル形式を確認する

   拡張子が .jpg や .jpeg であれば、その時点で透過は含まれていません。.png か .webp になっているかを見てください。

3. 3

   ③編集ソフトで開く

   背景が市松模様で表示されれば透過されています。白一色で表示されるなら、白が塗られています。

4. 4

   ④縁の状態を拡大して見る

   透過はできていても、切り抜き時の設定によっては元の背景色が薄く残ることがあります。文字やロゴの輪郭を拡大し、白や灰色のふちが出ていないか確認します。

用途別の選び方

SNSのアイコンは注意が必要です。透過PNGをアップロードしても、サービス側で背景が白や黒に置き換えられることがあります。ダークモードで見たときに輪郭が消えないよう、背景色を仮に置いた状態でも成立するデザインにしておくと安全です。

よくある質問

透過PNGをJPEGにすると背景が白くなるのはなぜですか？

JPEGは透明度の情報を持てない形式のためです。変換する際に、透明だった部分には色を入れる必要があり、多くのツールは白で塗りつぶします。透過を保ったまま容量を下げたい場合は、JPEGではなくWebPを選んでください。

透明と白は違うのですか？

違います。白は塗られた色で、透明は色の情報を持たない状態です。白い画面の上ではどちらも同じに見えますが、濃い色の背景に重ねると、白の場合は四角い白地として残ります。確認するときは黒い背景の上に置いてみてください。

PNGとWebPはどちらを使えばいいですか？

Webサイトに載せるならWebPが軽くて有利です。相手に渡したり資料に貼ったりする用途では、開けない環境が残っている可能性を考えてPNGが無難です。どちらも透過と半透明に対応しているため、画質面での違いを気にする必要はほとんどありません。

一度JPEGにした画像を透過に戻せますか？

戻せません。透明だった部分は色として塗り込まれており、その情報は残っていないためです。PNGに変換し直しても白いままです。切り抜き直すしか方法がないため、透過を含む元データは必ず別に保管しておいてください。