PSD to Unity：AI で Photoshop PSD をスライスし UGUI プレハブへ

VberAI Studio（略称 AI Studio、≠ Google AI Studio）は、Unity の UI 担当が PSD に本当に求めている二仕事をします。スライス（レイヤーを使える Sprite にする）と、UI プレハブの組み立て（Canvas の下に置ける Unity UGUI Prefab を書き出す）。入口：AI Studio。用語：PSD。

「AI で PSD を切って UI プレハブを組む」はフィルタの話ではありません。デザイナーから階層つき .psd が来たとき、プログラム側が「PNG 書き出し → Image を置く → 間隔を合わせる → アンカーを付ける」を省略できるか、ということです。

いわゆる PSD to Unity プレハブ の引き渡しで、Photoshop のグループが Canvas 下のノードになるか、という話です。

スライスとプレハブ組み立ては別の工程です

仕事	手元に残るもの	まだ手作業になること
スライスだけ	PNG / Sprite の山	Hierarchy で位置・入れ子・アンカーを組み直す
一枚に潰して書き出し	背景一枚	ボタンが押せない。文面も直せない
スライス + プレハブ組み立て	Sprite と Canvas 階層 / Prefab	クリック、データ、セーフエリアの追加

古い流れは仕事を分けます。Photoshop が切り、Unity が組みます。エディタ内の PSD2UGUI 系プラグインは Unity の中で解析し、たいていレイヤー命名ルールを要求します。AI Studio はゲームキャンバスで解析します。階層を見てから Prefab を出すので、ばらばらのファイルを先に捨てません。

分単位の取り込み手順は PSD を Unity UI へ にあります。本稿は受け入れ基準です。何をもって「組めた」とするか、どの PSD がきれいに組まないかです。

出力は UGUI で使える必要があります

使える変換には、次がそろいます。

1. 切った絵 — ボタン下地、アイコン、9 スライスパネルが別々の Image。
2. 文字 — できるだけ TextMeshPro。テクスチャに焼き込まない（文面変更と多言語のため）。
3. 階層 — グループ → 子。PSD のグループに対応。全部を Canvas 直下に捨てない。
4. Prefab — 既存 Canvas にドラッグでき、RectTransform がだいたいデザイン座標に合う。

OnClick、赤点、セーフエリア用スクリプト、TMP の Font Asset、アトラス規則は置き換えません。Prefab が工程に入ってからやります。Unity MCP があれば、Cursor / Claude Code でノード名の一括変更や参照の接続ができます。

切れて組める PSD の条件

モデルはポスターからウィジェットを当てません。ファイルが UI 構造に近いほど、Prefab はきれいになります。

やること	理由
ウィジェットごとにグループ、名前は読める（Btn_Start、Panel_HUD）	Prefab 根やボタンノードに対応
下地・アイコン・文字は別レイヤー	Image / TMP に分かれる。一枚焼きにならない
予測不能なレイヤースタイルや変なブレンドを避ける	一枚ラスターになり、操作を失う
結合 PNG ではなく階層つき .psd を渡す	平面カンプは インプレース切り取り で、PSD グループがありません

Group 47、全面ラスター、影を一層に焼いた稿は、キャンバスか Unity でまだ整理が要ります。変換失敗ではなく、構造が足りません。

AI Studio での手順

ボタン名はいまのパネルに従います。

1. 階層つき PSD を取り込む

AI Studio を開き、.psd を取り込みます。レイヤー一覧で、上バー、下バー、ダイアログ、ボタン組がまだグループか、すでに一枚になっていないかを確認します。

2. ポスターではなく UI として見る

描画順、間隔、隠れた注釈レイヤーを見ます。押せるコントロールと装飾は、書き出し前に分けます。透明が必要なら 切り抜き を続けます。

3. ばら Sprite ではなく UGUI Prefab を書き出す

エンジンは Unity。出力は UI 階層 / Prefab を優先。文字は TMP、伸ばすパネルは 9 スライス（パネルに従う）。

4. Canvas に置いてスモークする

チーム用フォルダ（例 Assets/UI/）へ取り込み、シーンの Canvas の下に Prefab を置きます。16:9 と目標の縦画面で一度 Play し、主経路のボタンを押します。

同じ画面が Figma なら Figma → Unity です。Godot / Cocos は同じキャンバスで書き出し先を変えます。コンポーネント名は違います（Control / Widget）。受け入れの見方は同じです。

Unity で先に見る項目

• 押せない — Canvas に Graphic Raycaster。押す Image は Raycast Target がオン。
• 字が違う — Photoshop の書体と違うときは TMP Font Asset を指定。
• ぼける — Sprite のフィルタ、Canvas Scaler、Pixels Per Unit。小さいアイコンを 100% 超で拡大しない。
• アンカーが流れる — 全面背景と端のバーは別アンカー。セーフエリアはエンジンで足す。PSD にノッチを描かない。
• PSD 改版 — レイアウト再構築なら Prefab を再書き出し。ボタン色を二つだけなら Unity で直す。

エディタ内 PSD→UGUI プラグインとの違い

	エディタ内 PSD2UGUI / 命名ルールプラグイン	VberAI Studio
動く場所	Unity エディタの窓	ブラウザのゲームキャンバス
入力	そのプラグイン向けに名付けた PSD が主	PSD。平面カンプはインプレース切り取り。Figma も可
書き出し後	Unity の中で組み続ける	キャンバスで直し、分け、抜いてから Prefab を出す
ロジック	手書きか自作ツール	Prefab が入ったあと Unity MCP

プラグインは、すでにそのレイヤー仕様に従っているチーム向きです。キャンバスは、まだ見た目を通して Unity / Godot / Cocos を選ぶ受け渡し向きです。どちらも「PSD が平面カンプだけ」は直しません。階層を付けるか、インプレース切り取りです。

こんな人向け

インディー小チームや UI プログラマーが、分層 Photoshop カンプを受け取るとき—「PNG 切り出し＋ RectTransform 合わせ」が遅いが、エディタ内 PSD2UGUI の命名規則にはまだ縛られたくない場合。

境界

• 最初の書き出しが出荷稿になることは稀です。フォント、言語、モーション、セーフエリアは工程側で閉じます。
• 重いレイヤースタイルは平面化し、操作できるコントロールが減ることがあります。
• VberAI Studio ≠ Google AI Studio。比較 を見てください。

まとめ

欲しいのは「もう一度切ること」ではありません。PSD の構造が UGUI Prefab の構造になることです。スライスは途中成果です。Canvas に置けて、押せ、文面を直せるときが組めたときです。AI Studio で階層つき PSD を取り込み、Prefab を書き出し、Unity でロジックを繋いでください。

よくある質問

「AI で PSD を切って UI プレハブを組む」とは何ですか？
二仕事を一度にします。レイヤーを Sprite にし、PSD グループを Unity UGUI の階層 / Prefab にします。ばら Sprite だけではありません。

VberAI は PSD から UGUI Prefab を作れますか？
作れます。AI Studio に階層つき PSD を取り込み、Unity UI 階層またはプレハブを書き出します（パネルに従う）。Canvas の下に置いてスモークしてください。

PNG を切るだけと何が違いますか？
PNG スライスは座標とグループを落とします。プレハブは相対レイアウトとノード木を残すので、プログラムの合わせが減ります。

PSD に階層がないときは？
インプレース切り取り でコントロールを検出します。Figma や階層つき PSD があるときはその道を使わないでください。

ボタンのコードまで書きますか？
書きません。Prefab は見た目と当たり領域です。イベントとデータはスクリプトか Unity MCP です。