透過背景は小さなディテールですが、ロゴをどこに置いてもプロらしく見せてくれます。暗いヒーロー画像の上に白枠付きロゴを置くとアマチュア感が出ますが、本物の透過 PNG なら同じロゴが宙に浮いて見える。本記事では PNG の透過の仕組み、作り方、そして 2026 年に組み合わせるべきフォーマットまで一気に整理します。
「透過 PNG」とは何か
PNG は赤・緑・青に加えてアルファチャンネルを持ちます。各ピクセルに 0（完全透明）〜255（完全不透明）の値を持たせられるので、滑らかなフェード、柔らかい影、シャープなエッジを、どんな背景の上でも再現できます。
よくある誤解：「透過 JPG」は存在しません。JPG は透過に対応していません。背景を透過させたいなら必ず PNG / WebP / AVIF です。
透過背景が必要なとき
- ロゴ：背景色や写真の上に重ねるとき
- アイコン：UI コンポーネント
- 商品の切り抜き：EC
- ステッカー / オーバーレイ
- 署名・スタンプ：書類ワークフロー
- 合成デザイン：レイヤーの重ね合わせ
透過 PNG を作る 3 つの方法
1. デザインツールから書き出す
最もきれいな方法。Figma / Sketch / Adobe Illustrator / Affinity Designer などで背景レイヤーを非表示にし、PNG で書き出すだけ。キャンバスの空白部分が透明ピクセルになります。
Photoshop の場合、最下部の「背景」レイヤー（鍵付き）を通常レイヤーに変換してから削除/非表示にしましょう。
2. 既存画像の背景を消す
JPG しかない場合、背景を透過にするには 2 通り：
- 手動： GIMP / Photoshop / Affinity などで自動選択またはペンツールで背景を選択し、削除して PNG として保存。
- 自動： AI 背景除去サービス。人物や輪郭の整った商品はきれい、髪の毛や毛皮はやや苦手。
3. 透過対応フォーマット間で変換する
透過 WebP や HEIC を持っているなら、JPG → PNG ツール で PNG への再エンコードもできます。原則：マスターはアルファ対応形式（PNG / WebP / AVIF）で保管し、用途に応じて派生を書き出す。
透過 PNG の正しい保存方法
PNG にはバリアントがあります：
- PNG-8：256 色 + 1 ビット透過。丸いエッジがガタガタになりがち。シンプルなアイコン向き、サイズが小さい。
- PNG-24（アルファ付き）：百万色 + フルアルファ。現代用途のほぼすべてはこちら。サイズはやや大きいが滑らかなエッジ。
多くのモダンツールはデフォルトで PNG-24 with alpha。エッジがギザギザに見えるなら PNG-8 で書き出している可能性大。
よくある失敗
- JPG で保存。 JPG は透明ピクセルを白に潰します。透過なら PNG / WebP / AVIF。
- 「縁の白いハロー」。元画像が白背景でアンチエイリアスされていた場合、白を抜くと薄い縁が残ります。可能なら元データから書き出し直す。
- デザインファイルで背景を消し忘れたまま書き出し。
- 過剰なリサイズ。一度縮小→拡大すると透過のエッジが汚れます。リサイズツール を使うときは、まず必要な最大サイズで仕上げてから縮小バリアントを作りましょう。
2026 年でも PNG を使うべき？
使うべき——ただし WebP とペアで。WebP も透過に対応しており、同じ画像で 25〜35% 軽くなることが多いです。<picture> でまず WebP を、フォールバックに PNG を：
<picture>
<source srcset="/logo.webp" type="image/webp">
<img src="/24picture/logo.png" alt="ブランドロゴ" width="200" height="60">
</picture>圧縮を極めるなら AVIF も透過対応。モダンブラウザ前提なら最初の <source> に AVIF を。
実践ワークフロー
- デザインツールで画像を作成/開き、背景レイヤーを非表示にする。
- PNG-24 + アルファ で書き出す。
- 画像圧縮ツール で最適化（30〜50% 削減でも見た目は変わらず）。
- PNG → WebP ツール で WebP コピーを生成。
- サイトでは
<picture>経由で両方を配信。
Pro Tip：プロジェクトリポジトリにアルファ付き PNG マスターを必ず残しましょう。そこから WebP / AVIF / 軽量 JPG プレビュー / 任意サイズが派生できます。非可逆フォーマットでアルファを捨てると元には戻りません。
まとめ
2026 年でも、透過 PNG はロゴとグラフィックの普遍的な標準です。アルファチャンネル付きで書き出し、最適化し、ウェブには WebP も併設する。これでビジュアルがどんな背景・どんなデバイスでも美しく決まります。
今すぐ変換したい？ JPG → PNG ツール や PNG → WebP ツール をお試しください。ブラウザ内で完結、アップロード不要。
