# Smart Layering：画像を複数レイヤーに

Smart Layering は、本番の UI 画像で AI が先に要素を囲む。Program text を付け、必要なら HD enhance を選び、切り出した結果は複製した画像の上に並ぶ。

## 要約: 4ステップ

このサイトの Image to Layers は、いま **Smart Layering** である。本番の一枚を放置して一度で切ると、あとで手直しが残る。切る前に確認が挟まる。残す枠、プログラムテキストにする領域、**HD enhance（高精細化）** を使うかどうか。結果は新しいボードに載り、元画像の複製の上に並ぶ。

切り出しのあと、名前・位置・インタラクションをエンジンに読み込むまで残す理由は、[画像から複数レイヤーへ：キャラクター画像をレイヤーに分けて、ゲーム素材の準備を速くする](/exp/how-to-separate-character-images-into-layers-for-a-faster-game-asset-preparation-workflow/) に書いてある。

![Smart Layering の元画像として使う王国防衛の画面](/images/auto-layering/smart_layering_base.webp)

## ステップ 1: AI Auto Box

ボードを選ぶ。**AI tools** を開き、**Smart Layering** を選んで、**AI Auto Box（AI による自動枠）** を走らせる。画面を読み、単独の要素として扱う部品に枠が付く。一覧を確定する前に、既存の枠の内側へ描き足す、移動する、サイズを変える、ができる。

![AI tools のメニューで Smart Layering を選択](/images/auto-layering/step1_smart_layering.webp)

![AI Auto Box の結果。塔、小屋、スペルカードに枠が付いている](/images/auto-layering/step2_AI_Auto_Box.webp)

## ステップ 2: レイヤー一覧を確定する

各枠は UI 要素か **Program text（プログラムテキスト）** である。Program text は書き出しでもテキストのまま残り、画像レイヤーにはならない。重なった枠は前後に積まれる。行をドラッグすると、どれが手前かが変わる。この画面では、ライフ数、ゴールド、ウェーブ数が Program text である。アイコンとカードは UI 要素のままである。

![カウンターが Program text、アイコンが UI element の一覧](/images/auto-layering/step3_start_layering.webp)

## ステップ 3: 見積もりを確認し、HD enhance を選ぶ

確認ダイアログの見出しは **Start manual layering?** である。要素数と、今回の見積もりが出る。**HD enhance（高精細化）** にチェックを入れると、切り出したレイヤーが画像モデルをもう一度通る。細部が立ち、端がきれいになり、補える欠けは補われる。見積もりが前のステップの印と揃ってから確定する。

![HD enhance が未選択の確認ダイアログ](/images/auto-layering/step5_Confirm_and_start.webp)

## ステップ 4: 新しいボードで確認する

処理が終わるとボードが一つ増える。切り出したものは、元画像の複製の上に並ぶ。位置が近いので、レイヤーをドラッグするか、枠の周囲のハンドルを触るまで、元の画面との差は見分けにくい。名前も一緒に付く。`life_count`、`shield_icon`、`skull_tower_card_one` などである。

![Smart Layering のあと、複製画像の上に名前付きの枠](/images/auto-layering/step6_output_layers.webp)

![新しいボードのレイヤー一覧。life_count、shield_icon、スペルカード](/images/auto-layering/step6_2_auto_layer_rename.webp)

## 手順動画

<figure class="video-embed">
  <div class="video-embed-frame">
    <iframe
      src="https://www.youtube-nocookie.com/embed/0h5krf9cL1A"
      title="VberAI Studio Smart Layering の手順"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
      allowfullscreen
    ></iframe>
  </div>
</figure>

名前付きレイヤーができたら、[PNG to PSD](/docs/convert/png-to-psd/) で Photoshop ファイルに書き出せる。同じレイヤーは Unity にも読み込める。[Figma to Unity](/docs/convert/figma-to-unity/) または [PSD to Unity](/docs/convert/psd-to-unity/) を使う。