この記事のポイント
背景が市松模様（透明）になる
レイヤー名は「レイヤー 0」に変わる
「JPG」にすると背景が白くなる
こんにちは！ユアムーン編集部です！
作品や商品の写真を、背景のない「切り抜き」の画像にしたいと思ったことはないでしょうか。Web サイトやチラシで別の色の背景に重ねたいときは、背景を透明にした画像（透過 PNG）が必要になります。
この記事では、Adobe® Photoshop®（フォトショ）の「背景を削除」ボタンで背景を消し、透明な部分を残したまま PNG で書き出すまでを、実際の画面で解説します。JPG で書き出すと背景が白くなる理由もあわせて紹介します。
作例は、編集部が作った架空の展覧会のポスターを、壁に貼って撮った写真です。
2026年10月、Adobe Photoshop 2026（バージョン 27.11.0）の Mac 版で手順を確認しています。バージョンや Windows 版では、表記や画面が異なる場合があります。
まず知っておきたい「透明」と「マスク」の仕組み
画像の背景を透明にするとき、Photoshop の「背景を削除」は、背景のピクセルそのものを消すのではなく、「レイヤーマスク」で背景を隠します。レイヤーマスクは、白い部分を見せ、黒い部分を隠す、白黒の型紙のようなものです。
隠しているだけなので、元の写真の情報は残っています。そのうえで、透明な部分を保存できる形式（PNG など）で書き出すと、背景のない画像ができあがります。透明を保存できない形式（JPG）で書き出すと、透明な部分は色で埋められます。
この記事の画面写真は、Photoshop の画面全体をそのまま縮小して載せています。小さな文字が読みにくいときは、本文で「画面のどのあたりを見ればよいか」をご案内していますので、あわせてご覧ください。
手順1：画像を開いて「背景を削除」をクリックする
作例は、2400×1600 px のポスターの写真です。薄いグレーの壁に、縦書きのタイトル「うすあかりの色」と青い帯の入ったポスターが、テープで貼ってあります。
Photoshop で開くと、画像のすぐ下（画面の中央より少し下）に、小さな横長のバー（コンテキストタスクバー）が表示されました。バーには左から「プロンプトで編集」「背景を削除」「カラーを調整」が並んでいます。「背景を削除」にマウスを乗せると、バーのすぐ下に「ワンクリックで画像から背景を削除できます。」と表示されました。
このとき、画面右下のレイヤーパネルには、鍵のマークが付いた「背景」レイヤーが1つだけありました。また、画面左上のツールバーでいちばん上の移動ツールを選んでいる状態です。作例では、削除ツールを選んでいるときには、このバーの中身が「不要な物を検出」などに変わりました。「背景を削除」が見当たらないときは、選んでいるツールを確かめてみてください。
「背景を削除」をクリックすると、壁の部分が消えて市松模様（透明を表す模様）になり、ポスターだけが残りました。ポスターを留めていたテープも、ポスターと一緒に残っています。
画像の下のバーは、「背景を生成」「背景を読み込み」「エッジを強調」に変わりました。これらのボタンは、この記事では試していません。
また、画面右側の中ほどにあるプロパティパネルを見ると、「クイック操作」の欄にも「背景を削除」と「被写体を選択」のボタンが表示されていました。この記事では、画像の下のバーのボタンを使っています。
手順2：レイヤーパネルで「マスク」を確認する
同じ画面の右下、レイヤーパネルを見てください。レイヤー名が「背景」から「レイヤー 0」に変わり、写真の小さなサムネールの右隣に、黒地に白い四角のサムネールが付いています。これがレイヤーマスクです。
白い四角の部分（ポスター）が見えていて、黒い部分（壁）が隠れている状態です。画面左上の書類のタブにも「(レイヤー 0, レイヤーマスク/8)」と表示されていました。
背景は消えたのではなく、マスクで隠れているだけなので、マスクを直せば、隠れた部分をあとから見せることもできます。マスクをブラシで塗って直す方法は、この記事では試していません。
手順3：「書き出し形式」で PNG を選ぶ
「ファイル」→「書き出し」→「書き出し形式…」を選ぶと、画面の中央に「書き出し形式」の画面が開きました。この画面は、左から「ファイルの一覧」「プレビュー」「設定」の3つの列に分かれています。
いちばん右の列の上、「ファイル設定」の欄で、「形式：」が「PNG」になっていること、その下の「透明部分」にチェックが入っていることを確認します。作例では、その下の「ファイルサイズ小 (8-bit)」にはチェックが入っていませんでした。
右の列の「画像サイズ」は幅 2400、高さ 1600（px）で、元の写真と同じ大きさのまま書き出されます。さらに下の「メタデータ」は「なし」、「色空間情報」の「sRGB に変換」にはチェックが入っていました。左の列のファイル名の下には「PNG」「2400 x 1600」「503.1 KB」と表示されています。
「形式：」の一覧をクリックして開くと、「PNG」「JPG」「GIF」の3つが並んでいました。
手順4：JPG を選ぶと背景が白くなることを確かめる
試しに「形式：」を「JPG」に変えてみると、中央のプレビューで、ポスターのまわりが白くなりました。右の列では「透明部分」のチェックがなくなり、代わりに「画質：」のスライダーが表示されました（作例では 6）。
JPG は透明な部分を保存できない形式なので、透明だった部分が色（作例では白）で埋められます。左の列のファイルサイズは「116.9 KB」で、PNG のときの「503.1 KB」より小さくなっていました。ファイルは軽くなりますが、背景を透明にしたい今回の目的には合いません。
背景を透明のまま残したいので、「形式：」を「PNG」に戻してから、右下の青い「書き出し」をクリックしました。すると、画面の左寄りに、次のような案内が表示されました。
案内には「情報を失うことなく、ドキュメントを JPEG として保存することはできません。」と書かれていて、「OK」ボタンと「再表示しない」のチェックがありました。形式は PNG を選んでいる状態です。作例の元のファイルが JPEG（作例_ポスター写真.jpg）であることに関する案内と考えられますが、はっきりした理由は確かめられていません。「OK」をクリックすると、次の画面へ進めました。
続いて、保存先を選ぶ画面が表示されました。「名前：」には「作例_ポスター写真.png」と入っていて、その下で「場所：」を選べます。名前と場所を決めて、右下の「書き出し」をクリックします。
この画面には「Adobe クラウドストレージへの書き出し」というボタンもありましたが、この記事では使っていません。
手順5：書き出した PNG を別の背景に置いて確かめる
書き出したファイル「作例_ポスター写真.png」は、2400×1600 px で、透明な部分を持つ PNG でした。編集部で、このファイルを市松模様・藍色・生成りの背景に置いて並べてみました。
どの色の背景に置いても、ポスターとテープだけがのり、元の壁は見えませんでした。透過 PNG ができていることを確かめるには、このように色の違う背景に置いてみるのが分かりやすい方法です。
暗い背景に置いたとき、ふちに白っぽい線が見える場合は、フォトショで透過PNGに白い縁が残るときの直し方で対処法を紹介しています。
よくあるつまずきと確認方法
- 書き出したら背景が白くなった：「書き出し形式」の右の列で、「形式：」が「JPG」になっている可能性があります。JPG は透明を保存できません。「PNG」を選び、「透明部分」にチェックが入っているかを確認します。
- 「背景を削除」のボタンが見当たらない：作例では、移動ツールを選んでいるときに、画像の下のバーに表示されました。削除ツールを選んでいるときは、バーの中身が「不要な物を検出」などに変わりました。背景を削除したあとの画面では、右のプロパティパネルの「クイック操作」にも「背景を削除」がありました。
- PNG を選んだのに「JPEG として保存することはできません」と出た：作例でも、PNG で「書き出し」を押したときに表示されました。「OK」で閉じると、そのまま保存先を選ぶ画面に進み、PNG で書き出せました。
- 背景が消えたように見えるのに、元の写真に戻したい：背景はレイヤーマスクで隠れているだけです。画面右下のレイヤーパネルで、写真の右隣に白黒のマスクが付いているかを確かめます。マスクを使わない状態に戻す操作は、この記事では試していません。
- ふちの切り抜きが思いどおりでない：作例のように、無地の壁にポスターが貼ってある写真では、ボタン1つで壁とポスターがきれいに分かれました。背景が複雑な写真で同じ結果になるかは、この記事では試していません。仕上がりは、書き出す前に拡大して確認します。
まとめ
- 画像の下のバーの「背景を削除」をクリックすると、背景が市松模様（透明）になります。
- 背景は消されたのではなく、レイヤーマスクで隠れています。レイヤー名は「レイヤー 0」に変わりました。
- 「ファイル」→「書き出し」→「書き出し形式…」で、「形式：」を「PNG」、「透明部分」にチェックを入れて書き出します。
- 「JPG」は透明を保存できないため、背景が白くなります。
- 書き出したあとは、色の違う背景に置いて、透明になっているかを確かめると安心です。
背景を透明にできると、作品写真を Web サイトやチラシのデザインに自由に重ねられます。Adobe Illustrator で作った図形や文字を透過 PNG にしたいときは、イラレで背景を透過して PNG で書き出す方法もあわせてご覧ください。
Adobe product screenshots reprinted with permission from Adobe.
Adobe and Photoshop are either registered trademarks or trademarks of Adobe in the United States and/or other countries.
画面写真は、画面全体をそのまま縮小して掲載しています。
画面写真はユアムーン編集部が2026年10月に撮影したものです。画面に写っている作例は、ユアムーン編集部が作成しました。
