背景透過ツール

背景透過ツールは、白い背景、色付きのボード、クロマキー画面で撮影した画像から、アルファチャンネルを備えた本物の透過PNGを作成します。背景が単色の場合には、色の許容値を使った切り抜きが適しています。ただし、プロのような仕上がりを決めるのは、背景を透過した後の処理です。被写体を削らないしきい値を選び、JPEG圧縮で輪郭に残る色の縁を取り除きます。このツールはその作業を中心に設計されています。すべてブラウザーのタブ内で処理され、ファイルはアップロードされません。

背景透過ツールの特長

背景を透過する方法

1. 画像を開く：JPG、PNG、WebPをアップロード欄にドロップするか、タップして選択するか、Ctrl+Vで貼り付けます。画像はブラウザー内でデコードされ、アップロードされません。
2. 許容値スキャンを実行する：ツールが境界色をサンプリングし、画像を17段階の許容値で処理して、カバー率曲線の折れ曲がり点を推奨しきい値として表示します。フィルムストリップのサムネイルをクリックすると、別の値を試せます。
3. 背景色ごとの仕上がりを確認する：白・グレー・黒・ブランドカラーの背景で結果を確認します。市松模様では見えにくい縁の色かぶりも、黒い背景ならすぐにわかります。
4. 輪郭を整える：「輪郭を縮める」を1ピクセル上げると、JPEG圧縮で残った背景の縁を取り除けます。色かぶり補正もオンにして、輪郭の混合ピクセルから古い背景色を除去します。
5. 透過PNGをダウンロードする：PNGまたはWebPを選び、画像を被写体に合わせて切り抜く場合は「透明部分をトリミング」をオンにしてから、元の解像度でダウンロードします。

縁に色が残る理由と、それを取り除く2つの設定

被写体の輪郭にあるピクセルは、単色ではありません。カメラがそのピクセルに写る色を平均するため、たとえばジャケットが60%、白い壁が40%混ざった色になります。背景を透過すると、そのピクセルには適切な半透明度が設定されますが、色はまだ混合したままです。暗いウェブサイトのヘッダーに重ねると、残った白色が光のように見えます。

色かぶり補正は、計算によって色を戻します。ピクセルが前景のfgと背景のbgをαの割合で混ぜたものなら、pixel = α · fg + (1 − α) · bg です。求めたい前景色は次の式で計算できます。

fg = ( pixel − (1 − α) × bg ) ÷ α

輪郭を縮める設定は、より直接的な方法です。アルファチャンネルを内側へ1～2ピクセル侵食し、色の混ざった縁をファイルから取り除きます。縁を1ピクセル残すより、被写体を1ピクセル失うほうが目立たないことがほとんどです。そのため、JPEG画像には1ピクセル縮める設定が標準的な対処法です。

許容値を手動で選ぶ

許容値は、数値の間隔が見た目の差に対応するよう設計された色空間、CIE Labでの距離です。人が通常認識できる最小の差は約2.3単位なので、以下の数値は見た目より大きな範囲を表します。RGBではなくLabで色を照合するため、暗い背景でも明るい背景でも同じ数値が同じように機能します。

透過PNGが必要になる場面

• マーケットプレイスの商品画像：Amazon、Etsy、eBayでは商品を背景から切り離して表示します。透過PNGなら、白いテンプレートにも暗いテーマの自社サイトにもきれいに配置できます。
• ロゴ：白背景のJPGロゴは、色付きのヘッダーでは使えません。白い背景を一度透過し、PNGをマスターとして保存しておきましょう。
• 署名：紙に書いた署名を撮影して紙の背景を透過すれば、白い四角を付けずに契約書へ配置できます。
• スライドやサムネイル：文字に重ねる人物や物体を切り抜くと、画像を貼り付けたような見た目ではなく、構成されたスライドや動画サムネイルになります。
• ステッカーや印刷：ダイカットステッカーやDTF転写ではアルファチャンネルを使うため、きれいに補正された輪郭に沿ってカッターが動きます。

きれいに切り抜くためのヒント

• 被写体から離れた背景をサンプリングします。輪郭から2～3ピクセル以内はすでに色が混ざっているため、そこで色をサンプリングすると誤った色をツールに教えることになります。
• 許容値を上げるより、サンプルを増やします。許容値25で3色をサンプリングするほうが、許容値60で1色だけ選ぶより、色むらのある壁を正確に透過できます。大きな許容値は肌や影まで消し始めます。
• アルファ表示で点状の抜けを探します。被写体内部の穴は、画像上で気付くより先に、白いマット上の黒い点として見つかります。
• 白い背景に白い被写体がある場合は、境界連結モードをオンにします。フレームの端からつながっている透明部分だけを残すので、白いシャツやマグカップの内側を保てます。
• 市松模様ではなく、黒い背景で確認します。市松模様は平均すると中間的なグレーになり、探している明るい縁が見えにくくなります。

形式の早見表

プライバシー

デコード、背景透過、マット処理、再エンコードはすべてHTML5 Canvas APIを使ってブラウザー内で行われます。画像データがminiwebtoolや第三者に送信されることも、保存されることもありません。ページの読み込み後はオフラインでも使えます。未公開の商品写真、スキャンした署名、本人確認書類などを切り抜く場合にも安心です。

よくある質問

白い背景を透明にするにはどうすればよいですか？

画像を開くと、ツールが境界色をサンプリングします。スタジオ撮影や商品写真なら、通常は白い背景がサンプリングされます。その色に十分近い部分が透明になり、スキャン曲線から推奨された許容値が自動適用されます。白い部分が残った場合はそこをクリックして2つ目の色を追加します。被写体の一部が消える場合は、許容値を下げるか「境界に接している領域のみ」をオンにしてください。

許容値はいくつに設定すればよいですか？

まずはスキャンに任せてください。ツールは画像を17段階の許容値で処理し、透明になる範囲をグラフにします。単色の背景なら、背景全体が透過してから被写体が消え始めるまで、カバー率が横ばいになる区間ができます。その区間の折れ曲がり点が推奨値です。手動で設定する場合は、平坦な白いスタジオ背景やスクリーンショットなら10～20、柔らかな影のある塗装壁なら25～40、グリーンまたはブルースクリーンなら30～45が目安です。

暗い背景に置くと切り抜きの周りに白い縁が出るのはなぜですか？

輪郭のピクセルは被写体と背景が物理的に混ざった色なので、背景を透過した後も白い色が残り、JPEG圧縮でその縁が広がります。2つの設定で補正できます。「色かぶり補正」は半透明ピクセルごとに背景色を取り除き、fg = (pixel - (1 - alpha) * background) / alpha の式で前景色を求めます。alphaはそのピクセルの不透明度です。「輪郭を縮める」はアルファチャンネルを1～2ピクセル侵食し、汚れた縁をそのまま取り除く、より強力な方法です。黒い背景で縁が消えたか確認してください。

透過を保持する形式はPNGとWebPのどちらですか？

どちらも保持できます。PNGは完全な8ビットのアルファチャンネルを保存でき、ロゴや印刷用ファイル、後で再編集する画像に最適です。ロスレスWebPも同じアルファ情報を保持し、ファイルサイズをおよそ25～35%小さくできます。現在のブラウザーで幅広くサポートされています。JPGにはアルファチャンネルがないため、切り抜きをJPGで保存すると透明部分は白で塗りつぶされます。

複雑な背景や写真の背景を削除できますか？

できません。複雑な背景ではカバー率の線が横ばいにならずに上がり続けるため、被写体を残したまま背景を捉えられる許容値がないことがスキャン曲線でわかります。色指定での透過が機能するのは、背景が単色か、色がなめらかに変化する場合だけです。雑然とした場面には、被写体を検出する切り抜き機能か、画像編集ソフトでの手動選択が必要です。

画像はサーバーにアップロードされますか？

されません。画像ファイルはHTML5 Canvas APIを通じてお使いのブラウザー内でデコード、背景透過、再エンコードされるため、ピクセルがデバイスの外に送信されることも、どこかに保存されることもありません。ページの読み込み後はオフラインでも使えます。未公開の商品写真、署名、本人確認用の写真などを切り抜く場合にも安心です。