Published by @SoNiceInfo at 2026/9/22
デザイナーやWeb制作者がPNG画像をWebPに最適化しようとした際、最も多く直面するトラブルが「WebPに変換したら透明だった背景が真っ黒に塗りつぶされてしまった」という現象です。 WebPは本来、透過（アルファチャンネル）を完璧にサポートしています。 Macで背景の透明度を100%維持しながら、数百枚のPNGを安全・確実にWebPへ一括変換する正しい手順を解説します。
PNG画像には、赤(R)・緑(G)・青(B)に加えて「透明度」を記録するアルファチャンネル(A)が含まれています。
WebPに変換した際に背景が黒や白になってしまう原因は、主に以下の2つです。
Googleの仕様策定通りに実装された正規のWebPエンコーダを使えば、透過を損なうことは一切ありません。
GUIで視覚的に透過状態を確認しながら一括処理したい場合は、Mac専用アプリWebP Converter.が最適です。
透過PNGをドラッグ&ドロップ
透明背景のロゴ、アイコン、イラスト素材をまとめてウィンドウに投げ込みます。
「ロスなし」を選択
ロゴやUI素材なら「ロスなし(Lossless)」にチェック。透過写真ならロスあり品質80などを選択。
Startを押して書き出し
透明度が完全に保たれたWebPファイルが一括生成されます。
スライダープレビューで比較できるため、書き出す前に「背景が透明のままか」「半透明の影が綺麗に残っているか」を目視確認できます。
ターミナルから一括処理を行う場合は、Homebrewのcwebpを使用します。
brew install webp透過PNGを透過度100%保持でWebPに変換するシェルスクリプトです。ポイントは-losslessに加え、完全透明部分の不要な加工を防ぐ-exactオプションを付与することです：
mkdir -p webp_transparent
for f in *.png; do
[ -f "$f" ] || continue
# ロスなし(可逆)でアルファチャンネルを完全保持
cwebp -lossless -exact "$f" -o "webp_transparent/${f%.*}.webp"
doneこのコマンドにより、元のPNGに含まれるアルファチャンネルが欠落することなく、クリーンなWebPが生成されます。
| 画像のタイプ | おすすめ設定 | 理由・効果 |
|---|---|---|
| 企業ロゴ・サービスロゴ | ロスなし (Lossless) | ベクター的なシャープな境界を1ピクセルも崩さず、PNG比 約26%軽量化 |
| アプリアイコン・UIボタン | ロスなし (Lossless) | 半透明のシャドウや微細な角丸を忠実に再現 |
| 背景切り抜き人物・商品写真 | ロスあり (品質 80前後) | 写真部分のデータ量が激減し、透過を保ったままファイルサイズを半分以下に削減 |
| イラスト・水彩画素材 | ロスあり (品質 85前後) | グラデーションの滑らかさを保ちつつ、高圧縮を実現 |
cwebpを使えば、透過を損なうことなく変換できます。-exactは、完全に透明なピクセル(アルファ値0)の裏に隠れているRGBカラー値を保持するオプションです。通常のエンコーダは圧縮率を高めるため透明部分の色情報をクリアしますが、後から透過マスクを外す可能性がある場合や、カラーブレンディングの境界滲みを厳密に防ぎたい場合に指定します。macOS 12.0以降対応 · 無料ダウンロード