← ブログ
約10分で読めます

背景を透過したPNGを数秒で作る方法(2026年版)

PNGの透過とは何か、PC・スマホ・APIで数秒で作る方法、アルファの確認と白い四角やふちの直し方まで解説。

  • png
  • transparency
  • file-formats
  • design
  • guide
背景を透過したPNGを数秒で作る方法(2026年版)

「透過PNGで送ってください」は、自分が作る側に回るまでは簡単そうに聞こえる依頼の代表です。PNGの何が「透過」なのでしょうか。なぜウェブサイトに置いたロゴのまわりに白い四角が出るのでしょうか。そして、誰かがJPGで保存した途端に透過が消えたのはなぜでしょうか。

このガイドでは、透過とは実際に何なのか、いつ必要になるのか、そしてどんな画像からでもきれいな透過PNGを作る方法を扱います。ファイル形式そのものよりも背景削除全般を知りたい場合は、そちらから読み始めてください。

「透過」が実際に意味すること

デジタル画像はピクセルの格子で、各ピクセルは色――赤・緑・青の値――を持っています。透過に対応した形式は4つ目の値、つまりアルファチャンネルを加えます。これは、そのピクセルがどれだけ不透明かを、完全に不透明から完全に見えない状態までの範囲で示します。

「透過PNG」とは、背景のピクセルのアルファが「見えない」に設定されているだけのPNGです。被写体の後ろには何もありません。白いピクセルではなく、ピクセルがないのです。その画像を何の上に置いても、下にあるものが透けて見えます。

これが白背景との決定的な違いです。

  • 白背景 — 白いページの上では問題ありませんが、色のついたボタン、暗いサイトのヘッダー、写真の上に置いた瞬間に、見苦しい白い長方形になります。
  • 透過背景 — どこにでもなじみます。同じファイルが、ライトモードでも、ダークモードでも、ブランドカラーでも、写真の背景でも使えます。

透過におけるPNG・JPG・WebPの違い

  • JPG/JPEG透過には一切対応していません。透過画像をJPGで保存すると、背景が黙って(たいていは白で)塗りつぶされます。世の中で透過が壊される原因の第1位です。
  • PNG — 8ビットのアルファ透過に完全対応、劣化のない品質、どこでも使えます。ロゴ、切り抜き、グラフィックの標準的な選択肢です。
  • WebP — PNGと同じように透過に対応しながらファイルサイズは小さく、ウェブに最適です。ブラウザの対応も、いまではほぼ全域に広がっています。WebP中心のワークフローなら、remover.bgもアップロードから書き出しまでWebPに対応しています

目安:透過のない写真はJPGかWebP、透過があるものはPNGかWebP、切り抜きにJPGは絶対に使わない。

透過PNGが本当に必要になるとき

  • ロゴ — ウェブサイト、請求書、プレゼン資料、グッズなど、ロゴは背後にあるものの上に置かれなければなりません。(背景が焼き付いたロゴがありますか? 直し方はこちら。)
  • 商品の切り抜き — 同じ商品画像を、バナーにも、マーケットプレイスの出品にも、季節キャンペーンの背景にも載せられます。
  • デザイン素材 — アイコン、バッジ、書類に入れる署名、ウォーターマーク、そして印刷した出店用の看板やプライスカード
  • ステッカーやオーバーレイ — チャットのステッカー、配信のオーバーレイ、動画用グラフィック。
  • プリントオンデマンドのデザイン — Tシャツのプリンターに必要なのはデザインであって、デザイン+白い長方形ではありません。(PODのファイルを準備中ですか? プリントオンデマンドの画像チェックリスト全文はこちら。)

デザイナーにとって透過素材はレゴのブロックです。どんな素材も、どんな背景の上にも自由に組み合わせられます

作り方

手順は3つ、決めることは1つ――ファイル形式です。

  1. 手元にある最良のオリジナルから始める — 解像度が高いほど、エッジはきれいになります。
  2. remover.bgにアップロードする — ドラッグするか、クリックしてファイルを選びます。入力はPNG、JPG、WebPのいずれも使えます。AIが被写体と背景を自動で分離し、髪、毛、メッシュ、車のガラスといった難しいエッジにも対応します。車の窓も処理されます。ガラス越しに見えていた元の景色は取り除かれ、その場所にリアルな色味のガラスが作り直されます。ただし、濃いフィルムを貼った暗い窓は不透明のままです。
  3. PNGでダウンロードする。 結果はグレーと白の市松模様の上に表示されますが、これはインターフェースがここには何もないと描いているだけで、ファイルの一部ではありません。エディターでは背景を空のままにしておきましょう。形式のメニューにはPNG・透過WebP・透過JPG・白背景が並びますが、最後の1つは機能ではなく警告です。手に入るのは本物のアルファチャンネル付きPNGで、どこにでも配置できます。

スマートフォンでは、モバイルアプリが同じ流れで動きます。撮るか選ぶ、待つ、保存する。そのあとはチャットの写真としてではなくファイルとして共有してください。透過が死ぬのはそこです。スマホでの切り抜きを前提に撮るなら、被写体と壁のあいだに一歩分の距離をとるとうまくいきます。

開発者の方へ:同じ処理は背景削除APIからプログラムでも利用できます。画像を送れば透過PNGが返ってくる仕組みで、カタログ規模にも対応します。一括処理はAPI専用で、まとめてアップロードする画面はありません。つまりカタログ全体を処理するならスクリプトを書くことになります。

透過を保つ方法

透過は、ワークフローのすべての工程がそれを尊重したときだけ生き残ります。

  • JPGで保存し直さない — 気づかないうちに透過を消してしまう犯人です。スクリーンショットツール、「ウェブ用に書き出し」のプリセット、画像を変換するメッセージアプリのどれもが、ファイルを統合してしまいます。
  • メールソフトに注意 — 本文中の画像を再エンコードするものがあります。透過素材はファイルとして添付しましょう。
  • 納品前に確認する — 色のついた背景の上でファイルを開くか、画像編集ソフトで開いて市松模様を探します。ビューアーやブラウザのプレビューで判断してはいけません。それぞれが独自の背景を描いているからです。

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

「透過PNG」は簡単に偽装できます。白背景の画像に.pngという名前を付ければ、フォルダーの一覧では見分けがつきません。

  • 市松模様テスト。 画像編集ソフト(Photoshop、GIMP、Photopea)で開きます。空の領域がグレーと白の市松模様で描かれれば、アルファチャンネルが存在する証拠です。
  • 色付き背景テスト。 いちばん大事なのはこれです。彩度の高い色や暗いヘッダーの上にファイルを置いてみます。本当に透過していれば、その色が被写体のきわまで見えます。淡いふちが出たら問題ありです。
  • ビューアーテスト。 証明できることは最も少ないテストです。ビューアーもブラウザもそれぞれ独自の背景を描くので、あるものでは白、別のものではグレーになります。

テストにならないもの:拡張子。logo.jpglogo.pngに変えても何も変わりません。JPGには、名前を変えただけで生まれるアルファなど存在しないからです。

透過PNGが大きくなりがちな理由

PNGは可逆圧縮で、典型的な透過PNGは1ピクセルあたり3つではなく4つの数値――赤、緑、青、アルファ――を保存します。マスターとしては優秀ですが、配信用としては重いのです。アルファを失わずに小さくするには:

  • パレットを減色する。 pngquantは24/32ビットのPNGを、ピクセルごとのアルファを保ったまま8ビットパレットに変換するので、アンチエイリアスのエッジも生き残ります。削減率は70%に達することも多く、8ビットの出力は24/32ビットの元ファイルより通常60〜80%小さくなると報告されています。納品前に等倍で両方のファイルを見比べてください。平坦なグラフィックは見た目を変えずに減色できますが、なめらかなグラデーションはバンディングが出ることがあります。
  • 配信用にWebPへ切り替える。 Googleによれば、可逆WebPはPNGより26%小さく、透過付きの非可逆WebPはPNGのおよそ3分の1のサイズです。同じダウンロードメニューの中にあります。

PNGは保管用として残しましょう。配信については画像SEOチェックリストが扱っています。

ダークモードの落とし穴:暗い背景に出る白いふち

白いページでは完璧に見えたロゴが、暗いヘッダーに置いた途端にうっすらと明るい輪郭をまといます。アルファチャンネルに問題はありません。問題はエッジです。

アンチエイリアスは、部分的に透明な境界ピクセルでエッジをなめらかにしますが、そのピクセルのは被写体と、その後ろにあったものとが混ざったものです。後ろが白だったなら、それらのピクセルは白を抱えています。白いページでは見えず、黒の上ではふちになります。

  • 統合されたコピーではなく、オリジナルから切り抜く。 白背景のJPGから作られたエッジは、あとから取り除けないふちを受け継ぎます。半透明のピクセルを正しく読み取るマッティングなら、それらをニュートラルに保てます。
  • 透過はコントラストではありません。 黒いワードマークは暗いヘッダーの上では見えないままです。そこで必要なのは別のファイル形式ではなく、明るい色のカラーバリエーションです。

いちばん厄介なのはメールです。画像の下の背景を塗り替えてしまうクライアントもあります。メールのダークモードに関する注意点をご覧ください。

ロゴのファイル:PNGとSVGのどちら?

写真ならこの問いは生じません。写真はピクセルだからです。ロゴなら考える価値があります。

  • SVGはベクター:ピクセルではなく図形と座標なので、どんなサイズでもくっきりしたままで、たいていはとても軽量です。誰かが描かないかぎり背景もありません。
  • PNGはラスター:固定のピクセル格子なので拡大するとぼやけますが、どこでも受け入れられます。

ベクターのマスターがあるなら、それを使いましょう。デザイナーに.ai、.eps、.svgのマスターをもらい、サイトにはSVGを置き、そこからPNGを書き出します。そうでない場合――名刺から撮ったJPG、PDFからのスクリーンショット――はPNGが答えです。背景削除が生み出すのは透過したラスター画像であって、ベクターではありません。いずれにせよ、そのPNGマスターは保管しておいてください。マーケットプレイスやプリントオンデマンドのアップローダーはSVGの扱いが不安定です。

よくある問題とすぐできる対処

  • 「ロゴのまわりに白い四角が出る」 — そのファイルはJPGか、統合されたPNGです。背景削除にかけて、新しいPNGとして書き出してください。
  • 「エッジがギザギザ、または白いふちが出る」 — しきい値で一律に切り抜くツールで作られた切り抜きです。AIによる削除は、どんな背景にもなじむやわらかいアンチエイリアスのエッジを作ります。
  • 「ファイルが大きすぎる」 — PNGは可逆圧縮です。ウェブで使うならWebPに変換する(透過を保ったままサイズが小さくなります)か、寸法を縮小しましょう。
  • 「チャットで送るまでは透過していた」 — 多くのメッセージアプリは、写真ピッカーから送られた画像を再エンコードします。再エンコードされた出力にはたいていアルファがないので、白が戻ってきます。代わりにドキュメントとして送りましょう。写真から作るステッカーは、そのために設計された例外です。
  • 「PowerPointやGoogleスライドで白い四角が出る」 — どちらも、ディスクから挿入したファイルであればPNGのアルファを尊重します。白い四角はたいてい、変換をはさむ貼り付けか、もともと統合されていたファイルが原因です。スライドをJPGで書き出せば、また統合されます。切り抜きを軸に組み立てたスライドもご覧ください。

きれいな透過マスターファイルができたら、それを資産として扱いましょう。PNGを安全に保管し、必要に応じてそこから統合したJPGを作ります。決してその逆をしてはいけません。統合したコピーしか受け付けない提出先もあります。たとえばアプリストアのスクリーンショットのアップロードは、アルファチャンネルを含むファイルを拒否します。そうなったときは、JPGの書き出しに背景を勝手に決めさせないでください。まずエディターで意図して背景を作ります。ブランドカラーの単色、好みの色合い、あるいは写真の背景に、被写体を地に着けるリアルな影を添えて。統合版はマスターから書き出し、マスターはそれ以外のすべてのために透過のまま残しておきましょう。

あわせて読みたい