色付きの背景にロゴを置いたら、まわりに白い四角が出てしまった。透過を知らずに画像を扱うとき、もっともよく起きるのがこれです。解決はごく単純で、背景が白いPNGではなく、背景が透明なPNGを用意すればいいだけです。この記事では、その作り方を具体的に説明します。

デジタル画像の「透過」とは

デジタル画像はピクセルの集まりです。各ピクセルの色は、赤・緑・青の3つの値(RGBモデル)で決まります。たとえば純粋な赤のピクセルは、R=255、G=0、B=0です。

ただし、4つ目の値を持たせることもできます。それが アルファチャンネルです。アルファチャンネルはピクセルごとの不透明度を、0(完全に透明で見えない)から255(完全に不透明)まで制御します。アルファが0のピクセルは視覚的に存在しません。そこに見えるのは下にあるもの、つまりスライドの背景、サイトの地色、Tシャツの生地です。

アルファチャンネルを持つ画像を、透過画像、あるいは背景が透明な画像と呼びます。ビューアで開くと、透明なピクセルはグレーと白の市松模様として表示されます。この市松模様は「ここには何もない」を示す、世界共通の表現です。

透過にPNGを使い、JPGを使わない理由

JPGはアルファチャンネルに対応していません。これは形式そのものの技術的な制約です。JPGは写真を効率よく圧縮するために設計されたもので、アルファチャンネルは仕様に含まれていません。透明な部分がある画像をJPGで保存すると、ソフトは設定に応じてその部分を白か黒で塗りつぶします。背景が透明なJPGを作る方法は存在しません。

一方PNGは、最初からアルファチャンネルを扱えるように設計されました。ロゴやアイコン、背景を透明にしたい画像がPNGで保存されるのは、まさにそのためです。この差は決定的です。

項目PNGJPGWebPGIF
背景の透過に対応✅ 対応(完全なアルファチャンネル)❌ 非対応✅ 対応(完全なアルファチャンネル)⚠️ 部分的(1色のみ)
写真に向く×(ファイルが重い)✅ 得意✅ 得意×
ロゴ・アイコンに向く✅ 得意×✅ 得意×
可逆圧縮✅ ロスレス❌ ロッシー両方✅ ロスレス

💡 WebPも透過に対応します 。PNGと同じく完全なアルファチャンネルを備えています。現代的なウェブ用途なら、透過WebPは透過PNGと同じくらい妥当な選択で、しかもたいていファイルは軽くなります。多くのプラットフォームやデザインツールは、どちらの形式も受け付けます。

透過PNGが必要になる場面

背景の透過が必要になる場面は、かなりはっきりしていて、しかも繰り返し訪れます。

方法1 — AIによる自動背景削除(いちばん速い)

ロゴ、商品写真、署名、アイコンなど大半の場面では、自動の背景削除が手作業なしで数秒のうちに仕上げてくれます。ImageToolsの 背景を削除 は、AIが画像の主役を見つけ出して周囲をすべて取り除き、アルファチャンネル付きのPNGとしてそのまま書き出します。

  1. まず 背景を削除を開きます。
  2. 画像(JPG、PNG、WebP)をアップロードします。あとはAIが自動で処理します。
  3. プレビューで結果を確認します。市松模様の部分が透明になった領域です。
  4. 背景が透明なPNGとしてダウンロードします。あとはどんな用途にもそのまま使えます。

処理はすべてブラウザ内で完結します。画像が外部のサーバーへ送られることはありません。

今すぐ数秒で透過PNGを作る

登録も透かしもありません。ロゴ、商品写真、署名など、どんな画像にも対応します。

無料で背景を削除

方法2 — アルファチャンネル付きPNGへ変換する

すでに背景が透明なPNG(デザインソフトから正しく書き出したロゴなど)を持っていて、別の形式から変換したいだけなら、ImageToolsの 変換 がJPGやWebPなどをPNGへ変換し、アルファチャンネルを保持(または付加)します。

ひとつ注意があります。JPGをPNGに変換しても、もともと無かった透過が生まれるわけではありません。JPGはその情報を持っていないからです。変換でできるのは、透過に対応したPNGへ器を替えることだけで、元の背景が白ならやはり白いままです。本当に透過を作りたいなら、方法1(背景削除)か方法3(手作業での編集)を使ってください。

透過に対応したPNGへ変換

JPG・PNG・WebPの相互変換を、ブラウザ内で無料のまま行えます。

無料で画像を変換

方法3 — PhotoshopやGIMPで手作業で編集する

背景が均一でない画像、グラデーションが絡む画像、どこを残しどこを消すかを細かく決めたい場合など、条件が難しいときは画像ソフトでの手作業が確実です。

Photoshopの場合

  1. Photoshopで画像を開きます。
  2. 背景がロックされている場合(レイヤーに鍵マークが付いている場合)は、レイヤーをダブルクリックして確定し、ロックを解除します。
  3. 背景が単色なら、 選択範囲 → 色域指定を開き、背景をクリックして許容量を調整し、選択範囲を削除します。
  4. 細かく選びたいときは マグネット選択ツール または クイック選択ツール で主役を選択し、選択範囲を反転(Shift+Ctrl+I)してから削除します。
  5. ファイル → 書き出し → 書き出し形式を開き、PNGを選び、透明部分のオプションにチェックが入っていることを確認します。

GIMPの場合(無料)

  1. GIMPで画像を開きます。
  2. 画像 → 画像の統合 、続いて 画像 → モード → RGBを開きます。
  3. アルファチャンネルを追加します。 画像 → 画像の統合 ではなく、 レイヤー → 透明部分 → アルファチャンネルを追加を選びます。
  4. ツール → 選択ツール → 色域を選択 で背景を選択します。
  5. Deleteキーで選択範囲を削除します。背景が透明(市松模様)になります。
  6. 書き出します。 ファイル → 名前を付けてエクスポートを選び、PNGを指定してオプションを確定します。

そのPNGが本当に透過しているか確かめる方法

PNGなら必ず透過している、ということはありません。背景を白で塗りつぶしたまま保存してもPNGは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段階すべてを扱えます。だからこそ、次のような表現が可能になります。

この半透明は、アルファチャンネル付きのPNGとして正しく保存すればそのまま残ります。角の丸いロゴがPNGならどんな背景でもきれいに見えるのに、JPGにすると縁がギザギザになったり白い輪郭が出たりするのは、まさにこのためです。

透過PNGでよくある失敗

透過を作ったあとにJPGで保存してしまう

もっとも多い失敗です。背景を抜いたあとに結果をJPGで保存すると、透過は消えます。JPGは透明な部分をすべて白で埋めるからです。アルファチャンネルを残すには、最終ファイルを必ずPNG(またはWebP)で保存してください。

アルファチャンネルが消える圧縮をかけてしまう

圧縮ツールの中には、より軽くするためにPNGを自動でJPGへ変換してしまうものがあります。圧縮後は必ず結果を確認してください。出てきたファイルがJPGなら、透過はすでに失われています。

白い背景と透明な背景を取り違える

背景が白いPNGと透明なPNGは、白い背景の上ではまったく同じに見えます。問題が表に出るのは、それ以外の背景で使った瞬間です。使う前に必ず、色付きの背景に置いて透過を確かめてください。

透過に対応しない場所へ透過PNGを送る

すべての送り先が透過を受け付けたり保持したりするわけではありません。古いメールソフトのHTMLメール、一部のプリンター、古いプラットフォームのアップロード欄などは、透明な背景を黒か白に置き換えます。そうした用途には、送り先に合わせて背景を塗りつぶした版を別に書き出してください。

よくある質問

スマホで開くとPNGの背景が白く見えるのはなぜですか?
AndroidやiOSの一部の画像ビューアは、透過を表す市松模様を既定で白一色として表示します。これはアプリが透過をどう描くかの問題で、ファイルの不具合ではありません。本当に透過しているか確かめたいときは、市松模様を表示するサイトやアプリ、たとえばオンラインの画像編集ツールやCanva、あるいはChromeで開いてみてください。
透過PNGは背景が白いPNGより重くなりますか?
中身によります。シンプルなロゴやアイコンなら、透過PNGは背景が白いPNGと同じか、むしろ軽くなることが多いです。一様に透明な広い領域は非常によく圧縮されるからです。縁が半透明になる複雑な写真では、アルファチャンネルのぶんだけわずかに重くなることがあります。ただしロゴやアイコンの用途では、その差が問題になることはまずありません。
人物写真の背景も透明にできますか?
できます。背景削除ツールがまさにそのためのものです。ImageToolsの 背景を削除 はAIで人物(あるいは主役となる被写体)を判別して背景を取り除き、髪の毛や入り組んだ輪郭まで正確に切り抜いた透過PNGを作ります。合成にも、資料にも、背景なしのアバターにも使えます。
WebPでも背景を透明にできますか?
できます。WebPは完全なアルファチャンネルに対応し、完全な透明も半透明も扱えます。ウェブ用途に限れば、透過WebPは技術的にPNGより優れています。同じ品質でファイルが小さくなるからです。2026年時点の対応率は97%を超えています。それでもPNGのほうが良いのは、WebPをまだ認識しない古いソフトで開くためのダウンロード用ファイルくらいです。
スマホで透過PNGを作るには?
いちばん簡単なのは、スマホのブラウザ(ChromeやSafari)でImageToolsを開き、 背景を削除 をそのまま使う方法です。パソコンとまったく同じように動き、何もインストールする必要はありません。できあがった透過PNGは、そのまま端末のギャラリーやダウンロードフォルダに保存されます。
透過PNGにサイズの上限はありますか?
PNGという形式自体に上限はありません。制約になるのは端末のメモリです。実務的には、5〜10 MBを超えるPNGは非力な端末で開くのが遅くなります。ロゴやアイコンなら、50〜500 KBもあればデジタル用途には十分すぎるほどです。印刷や4Kのプレゼンなど高解像度が要る場面でも、1〜3 MBあれば足ります。