要約: 3ステップ

このサイトの Image to Layers は Auto Layering（自動レイヤー分割） です。合成された一枚を、個別に編集できるレイヤーに分けます。枠を描く必要はありません。検出したエッジから切り出します。Layer Split（レイヤー分割） と同じツールバーです。目標は同じで、枠のサイズに合わせる手順はそちらのページです。

切り出しのあと、名前・位置・インタラクションをエンジンに読み込むまで残す理由は、画像から複数レイヤーへ：キャラクター画像をレイヤーに分けて、ゲーム素材の準備を速くする に書いてあります。

Auto Layering の元画像として使う猫の旅 UI の一枚

ステップ 1: Auto-Layering を開く

ボードを選びます（例: cat_journey_UI）。重ねレイヤーのメニューを開き、Auto-Layering（自動レイヤー分割） を選びます。

Auto-Layering と Layer Split がある重ねレイヤーのメニュー

ステップ 2: Auto-Layering を確定する

Run AI auto-layering?（AI 自動レイヤー分割を実行しますか？） のあと、Start layering（レイヤー分割を開始） を押します。ダイアログに Manual Layering（手動レイヤー分割） と表示されていても、その操作は Layer Split です。

確認ダイアログ: Run AI auto-layering、Start layering

ステップ 3: 名前付きレイヤーを確認する

結果は元画像の右側に並び、すでに名前が付いています。複雑な HUD とシーンの部品には、枠が自動で付きます。

猫の旅 UI に名前付きの境界が付いた Auto Layering の結果

手順動画

目標は同じで、枠を描く手順は Layer Split です。名前付きレイヤーができたら、PNG to PSD で Photoshop ファイルに書き出せます。同じレイヤーは Unity にも読み込めます。Figma to Unity または PSD to Unity を使います。