[{"data":1,"prerenderedAt":29},["ShallowReactive",2],{"blog-ja-transparent-images-white-background-edge-halos-guide":3},{"slug":4,"locale":5,"title":6,"description":7,"date":8,"author":9,"tags":10,"keywords":15,"h1":16,"readingTime":17,"html":18,"recommendedTools":19,"faqs":28},"transparent-images-white-background-edge-halos-guide","ja","透明画像の白い背景・白い縁：原因と確認方法","ビューアーの背景、透明情報の消失、輪郭の色残りを区別。PNG・JPGの制約と、背景除去・書き出し・縮小・圧縮後の確認方法を解説します。","2026-09-14","DocCrunch Team",[11,12,13,14],"透明画像","PNGの白い背景","切り抜きの白い縁","背景除去",[11,12,13,14],"透明画像を書き出すと白い背景や白い縁が出るのはなぜ？",5,"\u003Cp>背景を除去した画像が、編集画面では正常なのにダウンロード後は白背景に見えることがあります。暗いページに置くと、被写体の周囲に白っぽい縁が出る場合もあります。似た現象でも、原因は異なります。\u003C\u002Fp>\n\u003Cp>ファイルに透明情報が残っているか、ビューアーが何色で表示しているか、輪郭に元の背景色が残っているかを別々に確認しましょう。再出力が必要なのか、画像自体の修正が必要なのかを判断できます。\u003C\u002Fp>\n\u003Ch2>白い背景はビューアー側の表示かもしれない\u003C\u002Fh2>\n\u003Cp>透明部分に決まった表示色はありません。ソフトによって白、黒、市松模様などを敷いて表示するため、同じファイルでも見え方が変わります。\u003C\u002Fp>\n\u003Cp>別の色の背景に重ねて確認してください。白かった部分が背景色に合わせて変わるなら透明です。白い長方形のままなら、白が画像の一部になっている可能性があります。\u003C\u002Fp>\n\u003Cp>編集画面の透明表示用の市松模様は、通常は出力に含まれません。しかし、その画面をスクリーンショットで保存すると、模様は実際の画素になります。PNGで保存し直しても透明には戻りません。\u003C\u002Fp>\n\u003Ch2>PNGに対応していても、透明とは限らない\u003C\u002Fh2>\n\u003Cp>形式が決めるのは保存できる情報であり、個々のファイルの内容ではありません。PNGには透明部分も、完全に不透明な写真も保存できます。白背景のJPGをPNGに変換しても、白は自動的に消えません。\u003C\u002Fp>\n\u003Cp>背景が画像に含まれているなら、まず背景除去が必要です。\u003Ca href=\"\u002Fja\u002Fimage-remove-bg\u002F\">DocCrunch 背景除去\u003C\u002Fa>はブラウザー内でローカルに処理し、PNGとして出力します。拡張子だけで判断せず、ダウンロードした結果の輪郭を確認しましょう。\u003C\u002Fp>\n\u003Cp>一方、JPGは透明に対応していません。透明画像をJPGにする際は、背景色との合成が必要です。その結果をPNGに戻しても、失われた透明情報は自動復元されません。\u003C\u002Fp>\n\u003Ch2>白い長方形と輪郭の白い縁は別に考える\u003C\u002Fh2>\n\u003Cp>一面の白背景は、内容、出力形式、表示方法に関係することが多く、被写体周囲の白い縁は輪郭処理に関係します。\u003C\u002Fp>\n\u003Cp>髪、毛皮、ガラス、少しぼけた輪郭には、被写体と背景の両方の情報が含まれます。背景を除去しても、一部の画素に元の色が残る場合があります。\u003C\u002Fp>\n\u003Cp>元の背景が明るいと、その色残りは白背景では目立たず、暗い背景で淡い縁として現れます。\u003C\u002Fp>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>現象\u003C\u002Fth>\n\u003Cth>考えられる原因\u003C\u002Fth>\n\u003Cth>最初に確認すること\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>画像の後ろに白い長方形がある\u003C\u002Ftd>\n\u003Ctd>ビューアーの下地、元の白背景、透明情報の消失\u003C\u002Ftd>\n\u003Ctd>背景色を替え、実際の形式を確認\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>輪郭に細い淡色の縁がある\u003C\u002Ftd>\n\u003Ctd>元の背景色が残っている\u003C\u002Ftd>\n\u003Ctd>暗い背景で拡大\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>髪や小さな部品が欠けている\u003C\u002Ftd>\n\u003Ctd>被写体の一部も除去された\u003C\u002Ftd>\n\u003Ctd>原画像と輪郭を比較\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>市松模様が常に見える\u003C\u002Ftd>\n\u003Ctd>プレビューの撮影、模様入りの画像\u003C\u002Ftd>\n\u003Ctd>処理結果そのものをダウンロードしたか確認\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n\u003Cp>縁を隠すために輪郭全体を内側へ削ると、髪、細線、商品細部まで失うことがあります。複雑な輪郭は部分的な修正が必要で、形式変更だけでは直りません。\u003C\u002Fp>\n\u003Ch2>明るい背景と暗い背景の両方で確認する\u003C\u002Fh2>\n\u003Cp>背景が一色だけでは不具合を見落とします。明るい背景では暗い色残り、暗い背景では白い縁が見つけやすくなります。最後に実際の使用背景へ重ね、輪郭や残った影が自然かを判断してください。\u003C\u002Fp>\n\u003Cp>まず実際の表示サイズで見てから、次を拡大します。\u003C\u002Fp>\n\u003Cul>\n\u003Cli>髪、毛皮などの細かい輪郭。\u003C\u002Fli>\n\u003Cli>穴、持ち手、被写体内部で背景が見えるべき部分。\u003C\u002Fli>\n\u003Cli>ガラス、薄い布などの半透明部分。\u003C\u002Fli>\n\u003Cli>被写体の下の影や接地部分。\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>半透明の画素がすべて誤りとは限りません。自然な柔らかい輪郭は不透明度が段階的に変わります。すべてを硬い境界にすると、ギザギザや紙の切り抜きのような印象が出ることがあります。\u003C\u002Fp>\n\u003Ch2>用途に合わせて透明を残す\u003C\u002Fh2>\n\u003Cp>複数の背景色に重ねる素材は、透明版を残します。PNGが一般的ですが、WebPとAVIFも透明に対応しています。受け取るソフトと出力ツールの対応はそれぞれ確認が必要です。\u003C\u002Fp>\n\u003Cp>背景色が固定なら、出力時に色を明示的に選びます。\u003Ca href=\"\u002Fja\u002Fconvert-to-jpg\u002F\">DocCrunch 画像形式変換\u003C\u002Fa>はJPG、PNG、WebP、AVIFに対応し、JPG出力では白、灰、黒の背景を選べます。\u003C\u002Fp>\n\u003Cp>背景色を指定すると結果を管理しやすくなりますが、透明部分の下に色を加えるだけで、切り抜きの輪郭は再計算されません。淡い色残りは暗い塗りつぶしでも見える場合があります。\u003C\u002Fp>\n\u003Cp>透明素材と納品版は別々に保管しましょう。背景を変更するときに、合成済み画像から再び切り抜く必要がなくなります。\u003C\u002Fp>\n\u003Ch2>サイズ変更後も輪郭を確認する\u003C\u002Fh2>\n\u003Cp>拡大・縮小によって細線が薄れ、小さな穴が目立たなくなり、以前は気づかなかった色の縁が強調されることがあります。\u003C\u002Fp>\n\u003Cp>\u003Ca href=\"\u002Fja\u002Fimage-resize\u002F\">画像サイズ変更\u003C\u002Fa>で最終サイズにしたら、使用予定の背景で再確認してください。\u003Ca href=\"\u002Fja\u002Fimage-compress\u002F\">画像圧縮\u003C\u002Fa>も行うなら、最後は圧縮済みファイルを確認します。\u003C\u002Fp>\n\u003Cp>途中のプレビューだけで判断しないことが大切です。実際に渡すダウンロード済みファイルの形式、寸法、透明部分、輪郭が用途に合っている必要があります。\u003C\u002Fp>\n\u003Cp>被写体が欠けず、背景に自然になじみ、意図しない色が加わっていないこと。拡張子を何度も変えるより、これらを順に確認する方が確実です。\u003C\u002Fp>\n",[20,22,24,26],{"slug":21},"image-remove-bg",{"slug":23},"convert-to-jpg",{"slug":25},"image-resize",{"slug":27},"image-compress",[],1789443219757]