色付きの背景にロゴを置いたら、まわりに白い四角が出てしまった。透過を知らずに画像を扱うとき、もっともよく起きるのがこれです。解決はごく単純で、背景が白いPNGではなく、背景が透明なPNGを用意すればいいだけです。この記事では、その作り方を具体的に説明します。
デジタル画像の「透過」とは
デジタル画像はピクセルの集まりです。各ピクセルの色は、赤・緑・青の3つの値(RGBモデル)で決まります。たとえば純粋な赤のピクセルは、R=255、G=0、B=0です。
ただし、4つ目の値を持たせることもできます。それが アルファチャンネルです。アルファチャンネルはピクセルごとの不透明度を、0(完全に透明で見えない)から255(完全に不透明)まで制御します。アルファが0のピクセルは視覚的に存在しません。そこに見えるのは下にあるもの、つまりスライドの背景、サイトの地色、Tシャツの生地です。
アルファチャンネルを持つ画像を、透過画像、あるいは背景が透明な画像と呼びます。ビューアで開くと、透明なピクセルはグレーと白の市松模様として表示されます。この市松模様は「ここには何もない」を示す、世界共通の表現です。
透過にPNGを使い、JPGを使わない理由
JPGはアルファチャンネルに対応していません。これは形式そのものの技術的な制約です。JPGは写真を効率よく圧縮するために設計されたもので、アルファチャンネルは仕様に含まれていません。透明な部分がある画像をJPGで保存すると、ソフトは設定に応じてその部分を白か黒で塗りつぶします。背景が透明なJPGを作る方法は存在しません。
一方PNGは、最初からアルファチャンネルを扱えるように設計されました。ロゴやアイコン、背景を透明にしたい画像がPNGで保存されるのは、まさにそのためです。この差は決定的です。
| 項目 | PNG | JPG | WebP | GIF |
|---|---|---|---|---|
| 背景の透過に対応 | ✅ 対応(完全なアルファチャンネル) | ❌ 非対応 | ✅ 対応(完全なアルファチャンネル) | ⚠️ 部分的(1色のみ) |
| 写真に向く | ×(ファイルが重い) | ✅ 得意 | ✅ 得意 | × |
| ロゴ・アイコンに向く | ✅ 得意 | × | ✅ 得意 | × |
| 可逆圧縮 | ✅ ロスレス | ❌ ロッシー | 両方 | ✅ ロスレス |
💡 WebPも透過に対応します 。PNGと同じく完全なアルファチャンネルを備えています。現代的なウェブ用途なら、透過WebPは透過PNGと同じくらい妥当な選択で、しかもたいていファイルは軽くなります。多くのプラットフォームやデザインツールは、どちらの形式も受け付けます。
透過PNGが必要になる場面
背景の透過が必要になる場面は、かなりはっきりしていて、しかも繰り返し訪れます。
- 色付きの背景にロゴを載せるとき: もっともよくある場面です。背景が白のまま保存したロゴは、白以外のどんな背景の上でも白い四角として見えてしまいます。色付きのスライド、ヘッダーが暗いサイト、資料の表紙、地色のある名刺などです。
- ECサイトの商品写真: 背景が透明な商品写真なら、ショップ側のどんな地色にも重ねられます。Amazonなら白、モールによってはグレー、キャンペーンなら季節の色、といった具合です。
- オリジナルのスタンプや絵文字: LINE、Telegram、Slack向けのスタンプは透過PNGが必須です。標準は背景が透明な512×512pxのPNGです。
- スキャンした署名: 紙のサインを取り込んで白い背景を抜けば透過PNGになり、紙の四角を見せないまま電子文書や契約書に差し込めます。
- サイト用のアイコンやイラスト: 背景の異なる複数のセクションになじませる必要がある図版要素です。
- 動画やスライドへの重ね合わせ: Premiere、CapCut、DaVinciでの動画や、PowerPoint・Keynoteのスライドに重ねるロゴやウォーターマークです。
方法1 — AIによる自動背景削除(いちばん速い)
ロゴ、商品写真、署名、アイコンなど大半の場面では、自動の背景削除が手作業なしで数秒のうちに仕上げてくれます。ImageToolsの 背景を削除 は、AIが画像の主役を見つけ出して周囲をすべて取り除き、アルファチャンネル付きのPNGとしてそのまま書き出します。
- まず 背景を削除を開きます。
- 画像(JPG、PNG、WebP)をアップロードします。あとはAIが自動で処理します。
- プレビューで結果を確認します。市松模様の部分が透明になった領域です。
- 背景が透明なPNGとしてダウンロードします。あとはどんな用途にもそのまま使えます。
処理はすべてブラウザ内で完結します。画像が外部のサーバーへ送られることはありません。
方法2 — アルファチャンネル付きPNGへ変換する
すでに背景が透明なPNG(デザインソフトから正しく書き出したロゴなど)を持っていて、別の形式から変換したいだけなら、ImageToolsの 変換 がJPGやWebPなどをPNGへ変換し、アルファチャンネルを保持(または付加)します。
ひとつ注意があります。JPGをPNGに変換しても、もともと無かった透過が生まれるわけではありません。JPGはその情報を持っていないからです。変換でできるのは、透過に対応したPNGへ器を替えることだけで、元の背景が白ならやはり白いままです。本当に透過を作りたいなら、方法1(背景削除)か方法3(手作業での編集)を使ってください。
方法3 — PhotoshopやGIMPで手作業で編集する
背景が均一でない画像、グラデーションが絡む画像、どこを残しどこを消すかを細かく決めたい場合など、条件が難しいときは画像ソフトでの手作業が確実です。
Photoshopの場合
- Photoshopで画像を開きます。
- 背景がロックされている場合(レイヤーに鍵マークが付いている場合)は、レイヤーをダブルクリックして確定し、ロックを解除します。
- 背景が単色なら、 選択範囲 → 色域指定を開き、背景をクリックして許容量を調整し、選択範囲を削除します。
- 細かく選びたいときは マグネット選択ツール または クイック選択ツール で主役を選択し、選択範囲を反転(Shift+Ctrl+I)してから削除します。
- ファイル → 書き出し → 書き出し形式を開き、PNGを選び、透明部分のオプションにチェックが入っていることを確認します。
GIMPの場合(無料)
- GIMPで画像を開きます。
- 画像 → 画像の統合 、続いて 画像 → モード → RGBを開きます。
- アルファチャンネルを追加します。 画像 → 画像の統合 ではなく、 レイヤー → 透明部分 → アルファチャンネルを追加を選びます。
- ツール → 選択ツール → 色域を選択 で背景を選択します。
- Deleteキーで選択範囲を削除します。背景が透明(市松模様)になります。
- 書き出します。 ファイル → 名前を付けてエクスポートを選び、PNGを指定してオプションを確定します。
そのPNGが本当に透過しているか確かめる方法
PNGなら必ず透過している、ということはありません。背景を白で塗りつぶしたまま保存してもPNGはPNGです。確かめ方は背景を見るだけです。グレーと白の市松模様が見えれば透過しています。白一色に見えるなら、背景は不透明です。
ほかの確認方法:
- Windows 11: 標準の「フォト」で開きます。市松模様なら透過しています。
- Mac(プレビュー): ファイルを開き、プレビューが市松模様なら透過しています。
- ブラウザ: ChromeやFirefoxでPNGを直接開きます。市松模様なら透過、白一色なら不透明です。
- CanvaやGoogleスライド: 地色のあるスライドにPNGを挿入します。画像の背景が消えて主役だけが残れば透過しています。
🔍 手早い判定: CanvaかPowerPointで黒い背景の上にPNGを置いてみてください。まわりに白い四角が出れば透過していません。縁が見えずに黒の上へ浮いていれば、正しく透過しています。
透過PNGを場面ごとに使う
サイト(HTML/CSS)
透過PNGはそのまま <img>タグで使えます。透明な部分はページや親要素の背景に自動でなじみます。

WordとGoogleドキュメント
普通に画像を挿入するだけです。WordもGoogleドキュメントもPNGの透過を自動で認識するので、ロゴは白い四角を伴わずに本文や文書の地の上に載ります。
PowerPointとGoogleスライド
挿入 → 画像から挿入します。透過はそのまま保たれ、PNGはスライドの上に浮いて、透明な部分から背景の色やデザインが透けて見えます。
LINEスタンプ
LINEスタンプを作るには、背景が透明な512×512pxのPNGが必要です。画像を用意したら、 背景を削除で背景を抜き、 サイズ変更 で512×512pxに整えてから、LINE Creators Marketやスタンプ作成アプリに読み込ませます。
動画編集(CapCut、Premiere、DaVinci)
動画編集ソフトはPNGのアルファチャンネルを認識し、透明な部分では下のレイヤーを表示します。背景の四角を出さずにロゴをウォーターマークとして重ねたいときに向いています。
部分的な透過と半透明
PNGのアルファチャンネルは、完全な透明(アルファ0)と完全な不透明(アルファ255)だけでなく、その間の256段階すべてを扱えます。だからこそ、次のような表現が可能になります。
- やわらかい影: 物体の影を部分的に透明にできます。物体から遠ざかるほど透明になり、自然なグラデーションが生まれます。
- アンチエイリアスのかかった輪郭: 円形アイコンの縁や、丸みのある書体の文字の縁には半透明のピクセルが並び、どんな背景の上でもなめらかに見えます。
- すりガラスやかすみの表現: 部分的に透けるUI要素で、最近のmacOSやWindowsの画面でよく見かけます。
この半透明は、アルファチャンネル付きのPNGとして正しく保存すればそのまま残ります。角の丸いロゴがPNGならどんな背景でもきれいに見えるのに、JPGにすると縁がギザギザになったり白い輪郭が出たりするのは、まさにこのためです。
透過PNGでよくある失敗
透過を作ったあとにJPGで保存してしまう
もっとも多い失敗です。背景を抜いたあとに結果をJPGで保存すると、透過は消えます。JPGは透明な部分をすべて白で埋めるからです。アルファチャンネルを残すには、最終ファイルを必ずPNG(またはWebP)で保存してください。
アルファチャンネルが消える圧縮をかけてしまう
圧縮ツールの中には、より軽くするためにPNGを自動でJPGへ変換してしまうものがあります。圧縮後は必ず結果を確認してください。出てきたファイルがJPGなら、透過はすでに失われています。
白い背景と透明な背景を取り違える
背景が白いPNGと透明なPNGは、白い背景の上ではまったく同じに見えます。問題が表に出るのは、それ以外の背景で使った瞬間です。使う前に必ず、色付きの背景に置いて透過を確かめてください。
透過に対応しない場所へ透過PNGを送る
すべての送り先が透過を受け付けたり保持したりするわけではありません。古いメールソフトのHTMLメール、一部のプリンター、古いプラットフォームのアップロード欄などは、透明な背景を黒か白に置き換えます。そうした用途には、送り先に合わせて背景を塗りつぶした版を別に書き出してください。