画像の背景を透明にする方法｜透過PNGの作り方とコツ

「ロゴを資料に貼ったら、白い四角が目立ってしまう」「ショップの商品画像を、背景になじませたい」「スクリーンショットの図だけを切り出して使いたい」——こうした悩みは、画像の背景透過で解決できます。

この記事では、透過の仕組みと対応形式、背景を消す2つの方式の違い、きれいに切り抜くコツと設定値、うまくいかない画像の特徴、ブラウザだけで無料で透過する方法までを初心者向けに解説します。

透過PNGとは

透過PNGとは、背景を透明にできる形式で保存した画像のことです。通常の画像は「色」だけを持ちますが、透過に対応した形式は透明度（アルファ値）もピクセルごとに持ちます。透明度が0の部分は下の背景がそのまま見えるため、資料やスライド、ショップの背景など、どこに置いても自然になじみます。

保存形式によって透過の扱いが異なります。

形式	透過	用途の目安
PNG	対応（半透明も可）	透過画像の定番。ロゴ・図・アイコン
WebP	対応	PNGより軽いことが多い。Webサイト向け
GIF	対応（1色のみ完全透明）	簡単なアイコン向け。色数が少ない
JPEG	非対応	写真向け。透過したい場合は使えない

透過PNGが必要になるのは、画像を「背景が決まっていない場所」に置くときです。たとえば、スライドや資料の色付きの帯の上にロゴを載せる、ショップの商品画像を自由な背景色で表示する、アプリのアイコンを端末の壁紙に重ねる、といった場面では、背景が白く残っていると四角い枠が目立ってしまいます。逆に、写真のように背景ごと見せたい画像は、透過せずそのまま使うほうが自然です。

背景を消す2つの方式

背景を透明にする方法は、大きく2つに分かれます。

方式	仕組み	得意な画像	苦手な画像
色を指定して消す（クロマキー）	指定した色に近いピクセルを透明にする	単色背景のロゴ・図・スクリーンショット	複雑な写真、グラデーション背景
AI自動切り抜き	被写体を推定して切り抜く	人物・商品などの写真	線の細いロゴ、文字

この記事で紹介するツールは前者の色を指定して消す方式です。地味に見えますが、白背景で作られたロゴ・図表・スクリーンショットに対しては、AI切り抜きより確実で、輪郭も正確に残せます。

きれいに切り抜くコツ

1. 背景はできるだけ均一にする

色指定方式は、背景の色が均一なほどきれいに抜けます。自分で撮影する場合は、白い紙や布を背景にして、影が入らないように明るい場所で撮ると成功率が上がります。

2. 許容範囲は少しずつ上げる

許容範囲（似た色をどこまで透明にするか）は、小さい値から始めて少しずつ上げるのがコツです。上げすぎると、被写体の中の似た色まで消えてしまいます。たとえば白背景のロゴでは、ロゴの中の白い部分が背景と一緒に消えることがあります。その場合は許容範囲を下げて調整してください。

許容範囲の目安

許容範囲は0〜100で、色の差をどこまで「同じ色」とみなすかを決めます。白背景のロゴなら20〜40程度から始めるのが目安です。背景に多少のムラや薄い影がある場合は50〜70まで上げると消えますが、被写体の色まで消えやすくなるため、プレビューを見ながら調整してください。輪郭をできるだけ残したい場合は10〜20の低め設定が向いています。

3. 境界は「なじませる」で整える

切り抜きの縁がギザギザする場合は、「境界をなじませる」を有効にします。縁が半透明になり、ジャギー（階段状のギザギザ）が目立ちにくくなります。アイコンやロゴを小さく表示するときほど効果的です。

4. 保存形式は使う場所で選ぶ

資料・印刷・デザインツールに渡す場合は、互換性の高いPNGがおすすめです。Webサイトに載せる場合は、同じ見た目で容量を抑えやすいWebPも有力です。迷ったらPNGを選んでおけば、透過が失われる心配はありません。

5. 元画像は残しておく

加工後の画像で元ファイルを上書きすると、やり直しができません。別名で保存し、元画像はそのまま残しておきましょう。

うまくいかない画像の特徴

次のような画像は、色を指定して消す方式ではきれいに透過できません。

• 背景がグラデーションになっている：色が一様でないため、一部しか消えません
• 背景に影や反射がある：同じ背景でも場所によって色が違います
• 被写体と背景の色が近い：境界が判別できず、輪郭がぼやけます
• 髪の毛や半透明の素材が輪郭にある：細かい中間色が残ります

これらに当てはまる場合は、被写体を自動で推定するAI切り抜きツールを検討するか、背景が単色の素材を用意してください。

無料で背景を透明にする方法

背景の透過は、専用ソフトをインストールしなくても、ブラウザだけで行えます。Tools Hubの画像の背景透過ツールは、透明にしたい色をクリックで選ぶか「背景色を自動検出」を押すだけで、背景を透明にできます。処理はすべてブラウザ内で完結するため、画像がサーバーに送信されることはありません。アカウント登録も不要です。

使い方（3ステップ）

透過した画像を軽くしたい場合は画像圧縮ツールを、形式をまとめて変換したい場合は画像形式変換ツールを組み合わせるのがおすすめです。構図を先に整えたい場合は画像トリミングツールが使えます。

まとめ

• 透過PNGは透明度（アルファ値）を持てる形式で、背景を透明にできる
• 透過に対応するのはPNG・WebP・GIF。JPEGは透過できない
• 単色背景のロゴ・図・スクリーンショットには色を指定して消す方式が確実
• 許容範囲は小さい値から少しずつ上げ、縁のギザギザは「境界をなじませる」で整える
• 背景に影やグラデーションがあると一部しか消えない
• 元画像は上書きせず、別名で保存する
• Tools Hubならインストール不要・ブラウザだけで無料で透過できる

まずは白背景のロゴで「背景色を自動検出」を試して、チェッカー模様の広がりを確認してみてください。

よくある質問

透過PNGと通常のPNGは何が違いますか？

保存形式としては同じPNGです。透明な部分があるPNGを慣習的に「透過PNG」と呼びます。透過を保つには、保存時にPNG（またはWebP）を選ぶ必要があります。

写真の人物の背景も消せますか？

このツールは色を指定して消す方式のため、複雑な写真の背景はきれいに消せません。人物や商品など写真の切り抜きには、被写体を自動で推定するAI切り抜きツールが向いています。単色背景のロゴ・図・スクリーンショットでは、本ツールのほうが輪郭を正確に残せます。

切り抜いた縁がギザギザします

「境界をなじませる」を有効にすると、縁が半透明になりギザギザが目立ちにくくなります。許容範囲を少し下げるのも効果的です。小さく表示するアイコンほど、この調整が効きます。

背景を消したのに一部が残ります

背景に影・ぼかし・グラデーションがあると、色が一様でないため一部だけが消えます。残った部分の色をもう一度クリックして追加で消すか、背景が単色の素材を用意してください。

参考資料

• Canvas API（MDN Web Docs）
• 画像ファイル形式ガイド（MDN Web Docs）