方法1：Photoshopで選択して新規レイヤーにコピー
「オブジェクト選択ツール」または「クイック選択ツール」で対象を選択し、「選択とマスク」で境界を調整してから、Ctrl+J（MacではCmd+J）で新しいレイヤーにコピーします。元のレイヤーには対象が残っているため、その部分を「コンテンツに応じた塗りつぶし」や「生成塗りつぶし」で埋めます。最も細かく調整でき、1枚あたり数分から数時間かかります。
画像のレイヤー分け： どんな画像も透過PNGレイヤーに分解
画像をアップロードするだけで、AIでレイヤー分け。被写体・文字・背景を1つの共通キャンバス上で位置のそろった透過PNGレイヤーに分け、その後ろに隠れていた部分も描き足します。
例を試す
1枚のフラットな画像を、動かしたり、非表示にしたり、アニメーションさせたりできるレイヤーの重なりに変えます。すべてのレイヤーが同じキャンバスを共有するため、After Effects、Figma、Photoshopでもそのまま位置がそろいます。
AIでレイヤー分けした例を見る
これらの例は、レイヤー数を指定できるBasicで分割しています（ここでは2、4、6枚）。上のツールで標準のProは、レイヤーを自動で見つけて名前を付けます。レイヤーを非表示にしたり、3Dで広げたり、パララックスプレビューを再生したりしてみてください。例を見るのは無料で、ご自身の画像を分割するとクレジットを使用します。
レイヤー · 4
- レイヤー303-layer.png
- レイヤー202-layer.png
- レイヤー101-layer.png
- 背景00-background.png
位置のそろったフルキャンバスPNG、奥行き順に命名
3ステップで画像をレイヤーに分解する方法
ブラウザで3ステップ。切り抜き、名前付け、背景の補修はこのツールにおまかせください。
10MBまでのJPG、PNG、WebPをドロップするか、スクリーンショットを貼り付けます。画像に写っているものを示すキャプションを任意で入力すると、AIによるレイヤー分けの助けになります。
標準のProは最大16枚のレイヤーを自動で見つけて名前を付けます。「ポスター」「キャラクター」などのプリセットで分ける対象を指定できます。ちょうど2〜8枚にしたい場合はBasicに切り替えます。開始前に、必要なクレジットがボタンに表示されます。
レイヤービューアで各レイヤーを3Dで確認し、透過PNGレイヤーをZIPでまとめて、1枚ずつ、またはPSDとしてダウンロードします。
このレイヤー分けツールの強み
After Effects、Figma、Photoshop、ゲームエンジンなど、次の工程で別のアプリでレイヤーを開く方のために作りました。
元画像位置のそろったフルキャンバスのレイヤー
すべてのPNGレイヤーが1つのキャンバスを共有し、画像内の位置を保ちます。読み込んだ瞬間に重なりがぴったりそろい、すぐにアニメーションやデザイン変更に使えます。
元画像隠れた背景も補完
被写体を切り離すと、AIがその後ろの背景を描き足します。夜行列車の写真では、高架橋の下の空間が谷の景色で埋まっています。どのレイヤーを動かしても、後ろの景色は欠けません。
自分のレイヤーを3Dでプレビュー
ダウンロード前に、結果を3Dで広げたり、レイヤーを非表示にしたり、パララックスプレビューを再生したりできます。
奥行き順のファイル名
ZIPは00-background.pngから始まり、重なり順に番号が増えていきます。After EffectsやFigmaでもこの順に読み込まれます。Proでは各ファイル名にレイヤー名も入ります。
自動レイヤーか枚数指定か
Proなら最大16枚のレイヤーを自動で見つけて名前を付け、「商品」「写真の奥行き」などのプリセットで方向づけもできます。Basicに切り替えれば2〜8枚を指定でき、「詳細設定」でガイダンスとステップ数を細かく調整できます。どちらの分割でも、キャプションでAIを導けます。
ZIPで一括ダウンロードPSDをダウンロードPNGレイヤーでもPSDでも
同じ結果から、アニメーションやデザインツール向けの透過PNGレイヤーも、Photoshop向けのPSDもダウンロードできます。
画像をレイヤー分けする3つの方法
画像の各要素は、手作業、Photoshopのマスク、AIのいずれかで分けられます。それぞれの方法で得られる結果と、完成したレイヤーを人気アプリで使う方法をご紹介します。
方法2：Photoshopの「すべてのオブジェクトをマスク」
最近のPhotoshopでは、ワンクリックですべてのオブジェクトにマスクを作成できます。各マスクは同じフラットなピクセルの上にあるため、次は各オブジェクトを個別のレイヤーにコピーし、その後ろを埋める作業になります。
方法3：AIでレイヤー分けを一度に
このツールのようなAIは画像全体を読み取り、各要素を見つけ、レイヤーに名前を付け、隠れた背景を補完します。Basicでは、代わりに指定した枚数のレイヤーに分割します。所要時間はProで約2分、Basicで約45秒。イラスト、ポスター、商品写真、要素がはっきりしたシーンで特に効果を発揮します。
元画像After Effectsでレイヤーを使う
PNGレイヤーを読み込み、すべて選択して「選択範囲から新規コンポジション」を選びます。各レイヤーの3Dをオンにし、背景をZ軸方向の奥へ移動し、ゆっくり動くカメラを追加すればパララックス映像になります。どのファイルもフルキャンバスなので、位置を調整し直す必要はありません。
Figmaでレイヤーを使う
00-background.pngから順にPNGファイルをキャンバスへドラッグし、同じフレームにそろえます。あとは背景の差し替え、商品の移動、きれいな背景の上での見出しの打ち直しが自由にできます。
Live2D、Spine、ゲームエンジンでレイヤーを使う
リギングツールは、パーツごとに別レイヤーになっていることを前提とし、レイヤー名を読み取ります。レイヤー分けしたPSDかPNGの重なりを読み込み、パーツ名を付け直し、エンジンが切り抜いたスプライトを推奨する場合は余白をトリミングします。
レイヤーを分けるとできること
レイヤーを分けると、静止画をアニメーションにしたり、デザインを変えたり、再利用したりできます。よくある活用例をご紹介します。
After Effectsでアニメーション
被写体、小物、背景をそれぞれ別のトラックに置いて個別に動かせます。被写体がどこへ動いても、背景は欠けません。
2.5Dのパララックス映像を作る
背景を奥へ、被写体を手前に配置し、ゆっくりしたカメラワークを加えれば、1枚の静止画が動きのある映像になります。
Figmaでデザインを編集
ポスターの背景を差し替えたり、商品を動かしたり、きれいな背景の上で見出しを打ち直したり。デザイン全体を描き直す必要はありません。
ゲーム素材やLive2D素材を作る
画像のレイヤー分けで、キャラクター・風景・前景をPNGレイヤーに分解。Live2DやSpineでのリギング、UnityやGodotのパララックス背景にそのまま使えます。
レイヤー分けのよくある質問
品質、料金、受け取れるファイルについての簡単な回答です。