5分で AI Studio を使って PSD を Unity UI に取り込む手順

PSD から Unity UI への移行がまだ遅い理由

ゲーム UI の多くは依然として Photoshop から始まります。デザイナーがボタン、パネル、アイコン、文字スタイルを含むレイヤー PSD を渡すと、エンジニアは Unity 内で同じ階層を作り直すのに何時間もかけがちです：Canvas、RectTransform、Image、TextMeshPro、ネストしたプレハブなど。

目的は「ピクセルをエンジンに入れる」ことだけではありません。次が必要です。

• 正しいレイヤー階層と命名
• 解像度が変わっても崩れないアンカーとセーフエリア
• シーン内の使い捨てオブジェクトではなく再利用可能なプレハブ
• PSD が更新されたときの再インポート手順

本ガイドでは、VberAI AI Studio（VberAI の AI Studio）を使った 5 分インポートワークフロー（左に PSD / Figma、右にエンジン出力）を紹介します。インポートをきれいに保つための PSD 準備も説明します。

始める前に用意するもの

Unity を開く前に以下を揃えてください。

• Unity 2022.3 LTS または Unity 6（UI Toolkit は任意。本稿は uGUI 中心）
• レイヤー付き PSD（フラット PNG だけでは不可）
• VberAI の VberAI AI Studio（AI Studio）
• シーンに Canvas がある Unity プロジェクト（Scale With Screen Size 推奨）

PSD 整理チェックリスト（最も時間を節約）：

作法	理由
ウィジェットごとにレイヤーグループ	プレハブのルートに対応しやすい
命名を統一（Btn_Start、Panel_HUD など）	Hierarchy で探しやすい
Photoshop が予測不能にマージする効果を避ける	Image コンポーネントの手修正が減る
1x で書き出すかスケールを明記	RectTransform の巨大化を防ぐ

AI Studio による 5 分ワークフロー

1 分目 — アップロードとレイヤー確認

1. AI Studio を開き、PSD から新規インポートを作成。
2. .psd をアップロード。
3. レイヤーパネルで、ヘッダー、フッター、ボタン行、ポップアップなど UI ブロックと一致するか確認。

AI Studio は PSD 構造を保持し、後から分解が必要な単一テクスチャアトラスだけを返しません。

2 分目 — キャンバスでプレビュー

1. ルートアートボードまたはメイン画面グループを選択。
2. 中央キャンバスで余白、フォント、重ね順を確認。
3. インスペクターで明らかな問題を修正（グループ名変更、デバッグレイヤー非表示）。

装飾かインタラクティブかをここで分けておくと、Unity 側の整理が減ります。

3 分目 — Unity UI セマンティクスにマッピング

エクスポート設定：

• ターゲットエンジン：Unity
• 出力タイプ：UI プレハブ / シーン投入可能な階層（スプライトのみ不可）
• テキストは可能なら TextMeshPro
• パネル・ボタンなど 9-slice 候補は伸縮可能な Image として保持

AI Studio はデインレイヤーを RectTransform レイアウト、Image スプライト、テキストコンポーネントに変換します。Canvas に PNG を置くだけではありません。

4 分目 — Unity へエクスポート

1. Export to Unity（または Studio ワークフローに応じた Unity パッケージをダウンロード）。
2. Unity で Assets/UI/ などチーム規約のフォルダにインポート。
3. 生成プレハブを開き、Canvas 子要素とアンカーを確認。

PSD グループを反映したプレハブ階層ができ、既存 Canvas 下にドラッグできる状態になります。

5 分目 — シーンに配置してスモークテスト

1. プレハブをシーン Canvas にドラッグ。
2. Play Mode で 16:9 と縦長スマホ比率を確認。
3. アンカー・フォント問題をメモ。まずプレハブモードで調整し、すぐ PSD 往復は不要。

Unity MCP でエディタ自動化している場合、インポート後に AI クライアントへノード一括リネームやボタン参照の配線を依頼できます。Group 47 のような汎用レイヤー名に特に有効です。

手動の代替（AI Studio を使わない場合）

自動化なしの定番手順：

1. Photoshop から PNG スライスを書き出し
2. Unity にスプライトをインポート
3. Image / Text を手動作成
4. RectTransform アンカーでレイアウト再構築

1 画面で 30〜90 分 かかることもあり、繰り返し UI 作業ではデザイン→エンジンツールが選ばれます。

インポート後のよくある修正

文字がおかしい — デザイン言語に合う TMP フォントアセットを割り当て。フォールバックは Photoshop と異なりがちです。

実機でぼやける — Canvas Reference Resolution と Pixels Per Unit を確認。小アイコンを 100% 超で拡大しない。

ボタンが反応しない — Canvas に Graphic Raycaster、インタラクティブ Image で Raycast Target を有効化。

iPhone でセーフエリアが切れる — プレハブルートに Safe Area レイアウトまたはパディングを追加。

再インポート vs Unity でパッチ

状況	推奨
2 ボタンの色だけ変更	Unity でプレハブをパッチ
レイアウト再構成（新タブ）	AI Studio で PSD 再インポート
新画面追加	新アートボード → 新プレハブ
ローカライズ追加	Unity で TMP + 文字列テーブル

レイアウトは PSD を正、配線と挙動は Unity に置くとマージ地獄を避けられます。

VberAI スタックとの関係

VberAI AI Studio がデザイン → Unity UI 構造を担当。Unity MCP（任意）はインポート後の反復作業（ボタン配線、スプライト差し替え、参照検証）を支援。AI Super Matting はアイコンレイヤーを Image 化する前の透明処理に便利です。

Photoshop を捨てず、モックアップからプレイ可能 UI までのループを短縮できます。

まとめ

PSD を単一画像ではなく構造化データとして扱い、手動 RectTransform ではなく AI Studio で Unity 対応階層を出力すれば、5 分での PSD → Unity UI インポートは現実的です。命名済みレイヤーグループを用意し、Unity UI セマンティクスで書き出し、Canvas 下に置いて 2 種類のアスペクト比でスモークテストしてください。

次の画面で試しますか？VberAI AI Studio を開き、レイヤー PSD をアップロードして、最初の Unity UI プレハブを一度に書き出しましょう。