PSD をレイヤーごとに透過 PNG で書き出す方法

1 枚の統合画像だけでは足りないことがあります。開発者はロゴ、商品、見出しを別々の画像として必要としていますし、モーションデザイナーはポスターの要素を 1 つずつ動かしたいと考えます。ゲームのアーティストなら、スプライトシートのパーツが必要です。どの場合もやることは同じで、PSD のレイヤーを 1 枚ずつ背景透過の PNG にすること、しかもパーツ同士の位置関係を崩さないことです。

デザイン全体を 1 枚の画像にしたいだけなら、PSD→PNG 変換で一度に済みます。この記事で扱うのは、すべてのレイヤーをきれいに書き出す方法と、書き出した PNG があとで役に立つかどうかを左右する設定です。

まずは結論：レイヤーごとに書き出す方法

• Photoshop ですべてのレイヤーを書き出す： ファイル → 書き出し → レイヤーからファイル を選び、PNG-24 を指定して 透明部分 をオンのままにします。余白を詰めた切り抜きにしたいときだけ、レイヤーを切り抜き にチェックを入れます。
• Photoshop で一部のレイヤーを書き出す： レイヤーを選んで右クリックし、PNG としてクイック書き出し を選びます。各レイヤーが、レイヤー名の付いた切り抜き済みの PNG になります。
• Photoshop がない場合： 無料の PSD→PNG 変換を開き、すべてのレイヤーを選んで ZIP を 1 つダウンロードします。ブラウザ上で動作し、PSD・PSB ファイルに対応、一度に 50 ファイルまで処理でき、ログインも不要です。
• Photopea や GIMP： 1 レイヤーずつなら書き出せます。数枚なら問題ありませんが、50 枚となると時間がかかります。

書き出す前に決めておく 4 つのこと

1. キャンバスサイズか、切り抜きか

この選択で PNG の再利用のしかたが決まるので、何よりも先に決めましょう。

• キャンバスサイズ： どの PNG もドキュメントと同じサイズで、レイヤーは元の位置にあり、それ以外はすべて透明です。どの編集ソフトや動画ツール、スライドに重ねても、ぴったり位置が合います。
• 切り抜き： 各 PNG はレイヤーの見えているピクセルに合わせて切り抜かれます。ファイルが小さく、Web ページやアプリに配置しやすい反面、位置の情報は失われるため、レイアウトを再現するには座標が必要になります。

キャンバスサイズ：1200 × 900 px。商品はデザイン内と同じ位置に残ります。

切り抜き：722 × 429 px。レイヤー自身のピクセルに合わせて切り抜かれています。

切り抜きは、完全に透明ではないピクセルをすべて含む範囲で行われます。ぼかしたドロップシャドウやかすかな光彩も含まれるため、切り抜いた PNG は目に見えるオブジェクトより大きくなることがあります。

2. どのレイヤーを書き出すか

• 表示中か非表示か： 非表示のレイヤーは、古いバージョンや別案であることが少なくありません。不要なファイルだらけのフォルダーを書き出してしまう前に、含めるかどうかを決めておきましょう。
• 単独のレイヤーか、グループ全体か： 図形、アイコン、ラベルでできたボタンなら、3 つのファイルより 1 枚の統合画像のほうが使いやすいかもしれません。
• 調整レイヤー： 調整レイヤー自体はピクセルを持たず、下にあるレイヤーの見た目を変えるだけです。レイヤーを単独で書き出すと調整の効果は含まれず、調整レイヤーそのものを書き出しても役に立つものはできません。
• クリッピングマスク： クリップされたレイヤーを単独で書き出すと、クリップ先の形が失われます。ベースレイヤーとクリップされたレイヤーをグループとしてまとめて書き出すか、コピー上で結合しましょう。
• 描画モード： 乗算に設定した影やスクリーンに設定した光は、下のレイヤーに重なって初めて正しく見えます。別の PNG にすると通常モードで描かれるため、暗い（または明るい）ぼやけた塊のように見えることがあります。

3. 名前とフォルダー

レイヤー名がそのままファイル名になるので、先に名前を変えておかないと「レイヤー 47 のコピー 3.png」のようなファイルができあがります。レイヤーパネルで数分かけて整理しておけば、あとで何時間も迷わずに済みます。

• レイヤーには、中身がわかる名前を付けます（「ロゴ」「見出し」「商品の影」など）。
• / \ : * ? " < > | など、ファイルシステムで使えない文字は避けます。適切なツールなら自動で置き換えてくれますが、ファイル名は読みにくくなります。
• 名前の重複に注意します。「シェイプ 1」という名前のレイヤーが 2 つあると、ツールによっては互いに上書きされたり、番号が付け足されたりします。
• アニメーションなど順番が重要な場合は、ファイルに番号を振るツールを使うか、自分で 01、02 と付けておきましょう。

4. サイズ・DPI・カラー

• 画面ではピクセル数がすべて： 1200 × 900 の PNG は、72 DPI でも 300 DPI でもピクセル数は同じです。DPI は、プリンターにどの大きさで印刷するかを伝えるだけの情報です。
• 拡大・縮小は書き出し時に： 高精細ディスプレイ向けに 2 倍のサイズで作ったデザインなら、50% で書き出せば 1 倍のセットが一度で手に入ります。書き出したファイルをあとからリサイズするより、元のデータから 1 回で縮小するほうがシャープに仕上がります。
• ビット深度： 16 ビットや 32 ビットのドキュメントは、通常 8 ビットの PNG として書き出されます。ブラウザやほとんどのアプリが想定しているのも 8 ビットです。
• カラー： Web 用なら sRGB が無難です。印刷用の CMYK ファイルを PNG に変換すると、Photoshop の画面上の見た目とわずかに異なることがあります。

方法 1：Photoshop の「レイヤーからファイル」

すべてのレイヤーを一度に書き出す定番の方法です。

1. 書き出したくないレイヤーがあれば非表示にします。
2. ファイル → 書き出し → レイヤーからファイル を選びます。
3. 保存先 のフォルダーと、必要に応じて ファイル名の接頭辞 を指定します。
4. 手順 1 でレイヤーを非表示にした場合は、表示されているレイヤーのみ にチェックを入れます。
5. ファイル形式 を PNG-24 にします。PNG-8 は各ファイルが 256 色に制限され、透明部分の縁が粗くなります。
6. 透明部分 はオンのままにします。切り抜いたファイルにしたいなら レイヤーを切り抜き にチェックを入れ、キャンバスサイズのファイルにしたいならオフのままにします。
7. 実行 をクリックして待ちます。大きなドキュメントでは数分かかることがあります。

ファイルはすべて 1 つのフォルダーに保存されます。Photoshop は各レイヤー名に接頭辞と連番を付けますが、グループがフォルダーとして再現されることはありません。

方法 2：Photoshop のクイック書き出しと「書き出し形式」

選んだ数枚のレイヤーだけなら、レイヤーパネルの書き出しコマンドのほうが手早く済みます。

• PNG としてクイック書き出し： レイヤーを 1 つ以上選択し（Windows では Ctrl キー、Mac では Command キーを押しながらクリック）、右クリックして PNG としてクイック書き出し を選びます。各レイヤーが、レイヤー名の付いた切り抜き済みの PNG として個別に保存されます。既定の形式と保存先は ファイル → 書き出し → 書き出しの環境設定 で設定できます。
• 書き出し形式： 細かく調整したいときは、右クリックして 書き出し形式 を選びます。形式、透明部分、50% や 200% などの拡大・縮小、キャンバスサイズの指定、sRGB に変換するかどうかを設定できます。

レイヤーではなくグループを選ぶと、Photoshop はグループ全体を 1 枚の統合された PNG として書き出します。前述のクリッピングマスクや描画モードの問題を解決する、いちばん手早い方法です。

方法 3：Image2Layer の PSD→PNG 変換でブラウザから無料で書き出す

Photoshop を持っていない場合や、フォルダー内の PSD をまとめて処理したい場合は、無料の PSD→PNG 変換で一括処理をブラウザ上で行えます。ログインもクレジットも不要で、ファイルはアップロードされずに端末上で処理されます。

1. ファイルを追加します。 PSD・PSB ファイルを一度に 50 個までドロップできます。1 ファイルあたり 500 MB までです。
2. 保存する内容を選びます： 画像全体、すべてのレイヤー、またはその両方です。
3. レイヤーのファイルを キャンバスサイズにするか切り抜きにするか を選びます。非表示のレイヤーは、含めるオプションにチェックを入れない限り書き出されません。
4. サイズを選びます。 100% ならすべてのピクセルを保持し、50% や 25% ならプレビューやモックアップ用の軽いファイルになります。長辺の上限を指定することもできます。
5. PNG を個別に、またはまとめて 1 つの ZIP で ダウンロード します。

ZIP の中の各レイヤーは、レイヤー名が付き、レイヤースタックの上から順に番号が振られた透過 PNG になっているので、順番が崩れません。レイヤーはグループ名のフォルダーに分けて収められ、ファイルシステムで使えない文字は置き換えられます。PSD に保存されている解像度も、各 PNG に書き込まれます。

先にファイルの中身を確認したいなら、無料の PSD ビューアで開きましょう。レイヤー名の確認、レイヤーの表示・非表示の切り替え、使われているフォントの確認ができます。選択したレイヤーを PNG で、表示中のすべてのレイヤーを ZIP で保存することもできます。また、ほかのアプリで画像全体が真っ白になってしまう場合も、変換ツールがレイヤーから画像を組み立て直します。そうなる理由は、Photoshop なしで PSD ファイルを開く方法で解説しています。

方法 4：Photopea

Photopea は、ブラウザ上で PSD をレイヤー付きで開けます。選択したレイヤーを単独で PNG として書き出せるほか、File → Export as → PNG で表示中の画像を保存できます。すべてのレイヤーを書き出すには、これを 1 枚ずつ繰り返すか、1 枚以外のレイヤーを非表示にしてから書き出します。数枚なら十分ですが、数十枚になるなら一括処理できるツールのほうが速く済みます。

方法 5：GIMP

GIMP は PSD をレイヤーやグループ付きで開けます。ファイル → 名前を付けてエクスポート は表示中の画像を保存するコマンドなので、次のように使います。

• 1 レイヤーをキャンバスサイズで： Shift キーを押しながらそのレイヤーの目のアイコンをクリックして、そのレイヤーだけを表示します。次に ファイル → 名前を付けてエクスポート を選び、拡張子が .png のファイル名を付けます。
• 1 レイヤーを切り抜きで： レイヤーを選択して 編集 → コピー を選び、続けて 編集 → 形式を指定して貼り付け → 新しい画像 を選びます。さらに 画像 メニューで内容に合わせて切り抜いてから（英語版の Image → Crop to Content）書き出します。

レイヤーを一括で書き出せるコミュニティ製のプラグインもあります。使う前に、お使いの GIMP のバージョンに対応しているかを確認しましょう。

書き出し方法の比較

透過のよくある失敗と対処法

PNG の背景が白くなる

ほぼ間違いなく、デザインに不透明な背景レイヤーがあり、ほかのレイヤーと同じように書き出されています。Photoshop のロックされた「背景」レイヤーは、そもそも透明部分を持てません。非表示にするか、コピー上で削除するか、書き出しの対象から外しましょう。

縁に白や黒のフチ（ハロー）が出る

切り抜いた画像の柔らかい縁には、切り抜く前の背景の色が残っていることがよくあります。新しい背景に置くと、それが細い明るいフチや暗いフチとして現れます。渡す前に、暗い背景と明るい背景の両方で PNG を確認しましょう。Photoshop では レイヤー → マット → フリンジ削除 や、選択とマスク の 不要なカラーの除去 オプションできれいにできます。

影がグレーで濁って見える

柔らかい影はもともと半透明なので、市松模様の上ではグレーに見えます。これは正常です。最終的な背景に置いて違和感がある場合は、PSD で影に乗算が使われていた可能性があります。配置先のアプリで同じ描画モードに設定し直すか、影をオブジェクトと統合して書き出しましょう。

透明部分が黒や白で表示される

画像ビューアやメッセージアプリの中には、透明なピクセルを黒や白で表示するものがあります。書き出しに失敗したと判断する前に、市松模様を表示できるブラウザや編集ソフトで PNG を開いてみましょう。

間違えて JPG を選んだ

JPG は透明部分を保存できないため、透明な部分は単色で塗りつぶされます。JPG を使うのは、単色の背景にしたいときだけにしましょう。PSD→JPG 変換なら、その背景色を選べます。すべてのレイヤーを 1 ページずつ並べた確認用のコピーが必要なら、PSD→PDF 変換のほうが適しています。

関連ガイドとツール

• Photoshop なしで PSD ファイルを開く方法では、あらゆる環境で使える無料のビューアや編集ソフトを紹介しています。
• PSD ファイルとは？では、レイヤーやマスクの仕組みと、PNG ではなく PSD を使うべき場面を解説しています。
• レイヤーのないフラットな画像から始める場合は、画像レイヤー分けや PNG→PSD 変換の AI モードで、画像を複数のレイヤーに分けられます。無料の PSD ツールとは異なり、AI によるレイヤー分けにはクレジットを使います。まずはフラットな画像をレイヤー付き PSD にする方法をお読みください。
• 無料ツールと AI ツールは、ツール一覧ですべて確認できます。

PSD レイヤーの PNG 書き出しに関するよくある質問