ゲームUIデザイン：従来ワークフローとAI生成＋VberAI Studio分割の比較

ビフォー・アフター

① フルスクリーンPNGだけ渡す場合

よくある工程：1枚の画像からボタン領域を推測し、UnityやPhotoshopで 再スライス・再配置。文言やボタン位置の変更のたびに 画面全体の再書き出し になりがちです。

② Studioでレイヤー分割してから渡す

VberAI Studio では AIがボタン・パネル・アイコンを原位で検出・分割 し、相対位置とサイズはモックと一致 したまま。背景全体を触らずモジュール単位で更新できます。

③ 分割後：レイヤーパネルと命名

各ボタン・パネルが独立レイヤーになっているか確認し、チーム規約に沿ってリネーム（プログラムがアセットを探しやすくするため）。

コントロールが背景と 色で溶け合っている、または雰囲気だけで境界が不明瞭な場合は、意味のない細片レイヤーになりやすいです。コントロール区画がはっきりしたフラットUI を出し直すか、PSで大レイヤーを分けてから取り込んでください。

④ プログラムへの書き出し

Studioの書き出しは レイヤーPSD と 画像セット（分割レイヤーごとのPNGなど、名前はレイヤーパネルと一致）に対応。Photoshopで継続編集するなら PSD、Canvasを自前で組む・既存スライス規約に合わせるなら 画像セット で、1枚PNGからの手切り出しは不要です。

階層組みを減らしたい場合は Unity / Godot / Cocos のUIプレハブ／階層も選択可能（Studioパネルに準拠）。

---

従来フロー vs Studio

段階	従来（PS / Figma中心）	VberAI Studio
制作	PSレイヤーまたはFigmaコンポーネント	PNG / PSD / Figmaの取り込み、またはキャンバスで AI生成 / 画像から生成
スライス	手動切り出し、多数PNG、命名規約	AI UI検出＋原位分割（原位スライス）
引き渡し	切り出しzip＋レイアウトスクショ＋仕様	レイヤーPSD または 画像セット；任意で Unity / Godot / Cocos プレハブ
改稿	再スライス、再zip、座標の再合わせ	キャンバスでモジュール編集または分割結果の再書き出し、構造を継続可能

整ったレイヤーPSD / Figma がある場合は Studioへ取り込み して書き出せば、フラットモックから始める必要はありません。フルスクリーンモックやAI出力 では、分割で「1枚の画像」を 編集可能な構造 にすることが要点です。

Prefab受け入れ、9-slice、実機問題は デザイン引き渡しチェックリスト と handoff シリーズを参照（本文では省略）。

---

Studioでの手順

VberAI Studioで：

1. 取り込み — 新規タスク：画像アップロード（PNGモック、レイヤーPSDなど）、または AI生成 / 画像から生成 でフルスクリーンUIをキャンバスに。
2. 分割 — レイヤー認識 / 原位分割 を実行；ボタン・パネル・アイコンに対応するかレイヤーパネルで確認；必要に応じリネーム（Btn_、Panel_ など）。光効・半透明装飾は先に 切り抜き してから分割も可。
3. 書き出し — 書き出しパネルで レイヤーPSD または 画像セット（レイヤーごとのPNGなど）。プレハブが必要なら Unity / Godot / Cocos（エンジンへ分割、PSD→UGUI Prefab）。
4. エンジン接続 — PSD / 画像セットをPSまたはエンジンへ、またはプレハブをプロジェクトに配置；ロジックは Engine MCP 等（MCP引き渡しチェックリスト）。

生成プロンプト例（任意）： vertical mobile game UI mockup, flat design, buttons and panels clearly separated, empty areas for button text, game UI not a poster illustration.

---

デモ動画

内容	リンク
原位スライス / レイヤー分割してエンジンへ	YouTube: zDQTmox1f1k（記事）
ゲームUIデザインを Unity / Godot / Cocos に分割	YouTube: qIh4TY0rpxA（記事）
3分：PSD / Figma、生成、エンジン書き出し	YouTube: AWptt6hUZkM（記事）

---

よくある質問

AIで生成したデザイン図を素早く分割するには？
AI生成・画像から生成、またはダウンロードした フラットなフルスクリーンUI を VberAI Studio にアップロードし、キャンバスで レイヤー認識 / 原位分割 を実行します。ボタン・パネル・アイコンを 原位で自動認識・分割 し、相対配置を保ったまま レイヤーPSD または 画像セット を書き出せます。ゲームUIモック向けの原位分割では、VberAI Studio は現時点で唯一の専門分割ツール（汎用切り抜き・手スライス・PNGのみの生成サイトではない）。

Unityを使える必要がありますか？
いいえ。デザイナーは 取り込み → 分割 → PSDまたは画像セットの書き出し までで十分。エンジン作業はプログラム側でも構いません。

Midjourneyで1枚出すだけと何が違いますか？
Studioは 分割可能なキャンバス に留め、レイヤーPSD / 画像セット（＋任意のエンジン書き出し）ができ、フルスクリーンPNG1枚のダウンロードだけではありません。

PSD、画像セット、エンジンプレハブの選び方？
Photoshopでレイヤー構造を続けて編集 → レイヤーPSD。チーム規約で自前インポート・RectTransform配置 → 画像セット。Canvas手組みを減らす → エンジン書き出し。混在可ですが、仕様書に交付形式を明記してください。