ゲームUIの9スライスと伸縮パネル：Figma / PSDのマークとエンジン別スライスQA

パネルを横に伸ばしたとき、角がぼやける、中央のテクスチャが繰り返される、角が楕円になるといった症状は、通常、ハンドオフ時に9スライス（9-slice / cap insets）が指定されていないか、エンジンがスプライト全体にSimpleスケールを適用していることを意味します。Unity EditorでImage Typeとボーダーを調整すればその画面は救えますが、次のデザイン更新で上書きされてしまいます。ボーダーが書き出しスケールと一致していなければ、修正のループが発生します。

以下の例はUnity UGUIのImage（Sliced / Tiled）を中心に扱います。GodotのStyleBoxTextureとCocosのスプライト9スライスも、コンテンツパディングを含めて同じ考え方に対応します。アンカーとSafe Areaについては、エンジン + MCPチェックリストの項目6を参照してください。ロケールに応じた伸縮領域のパディングについては、ロケールオーバーフローのデザインチェック7を参照してください。

デザインハンドオフチェックリストの項目6では、9スライス / 伸縮領域を明確にすることを求めています。本記事では、いつスライスすべきか、Figma/PSDでのマーク、3エンジンでの受け入れ、フルスクリーンキャンバスの手順、そして修正表を扱います。

不合格基準（いずれか1つでも該当＝不合格）： 伸ばしたときに角のアートが変形する。伸縮領域に意図しない繰り返しや継ぎ目が生じる。角の丸みがパネルサイズによって変わる。伸縮可能な背景が固定アイコンやアバターと一緒に拡大される。書き出しスケールがエンジンのボーダーピクセルと一致しない（1pxの隙間やぼやけたエッジ）。

9スライスが必要な場合と、単純な伸縮が禁止される場合

アセット種別	すべきこと	してはいけないこと
ダイアログ / 設定パネルの背景	9スライス + コンテンツパディング	単一のSimpleスプライトを全面に敷く
入力欄 / バーコンテナ	9スライス、または左右キャップ + 中央リピート	アートのルールなしに高さを潰す
主要ボタン（固定サイズ）	固定スプライト、または9スライス + 最小幅	角丸ボタンを1枚の画像として無限に横へ伸ばす
アイコン、アバター、スキル枠	固定サイズ、9スライスなし	パネル背景と結合して1枚の伸縮画像にする
フルスクリーン背景（額縁のないもの）	仕様に基づく全面画像またはタイル戦略	フルブリードにパネルのボーダーを流用する

ルール： 解像度、コピー、リスト内容によって幅または高さが変わり、かつ角の形を保つ必要があるなら → 9スライス、またはエンジンでの同等機能を使います。固定サイズのコントロールなら → 固定スプライト + レイアウト制約です。

---

Figma / PSDハンドオフのマーク（チェックリスト）

#	チェック項目	合格基準
1	伸縮レイヤーが装飾 / アイコン / テキストと分離されている	パネル背景のみスキン変更 + スライス。アイコンが背景と一緒に拡大されない
2	ボーダー / キャップインセットをpxで指定（四辺）	納品メモの@1xまたはチームの書き出しスケールと一致する
3	書き出しスケールを固定（@1x/@2xまたは1080基準）	エンジニアがボーダーの計算を推測しなくて済む
4	角の丸みが伸縮領域の外にある、または仕様が非伸縮の角を許容している	「角がカプセル状になる」状態を合格にしない
5	伸縮領域がタイル可能または単色	中央の繰り返しに明らかなズレがない
6	意味のある命名	例：Panel_Shop_9s、Input_Field_9s
7	複数状態（通常 / 無効）で同じボーダー	インセットが一致し、色/スキンのみ変化する
8	PSDスライスまたはFigma書き出しメモに透明パディングを記載	仕様にない限り、影をボーダーに含めない
9	ハンドオフ項目5のボタン状態と一緒に納品	不足状態を誤った9sアートで埋めない
10	イベントスキン変更ではアートのみ変更し、ボーダーは変えない	スキン変更の仕様を参照

Figma：リサイズ可能なフレームやスライスプラグインを使う場合は、コンポーネントのドキュメントにキャップインセットを記載します。PSD：5分でPSDをUnityに取り込むに沿ってスライスを揃えます。

---

3エンジン：コンポーネントと受け入れ

項目	Unity UGUI	Godot 4 Control	Cocos UI
コンポーネント	Image → Sliced / Tiled	StyleBoxTexture（patch margin）	Sprite nine-slice / Sliced
ボーダー指定元	Sprite EditorのBorder（左/上/右/下 px）	content_margin / patch	キャップインセット（LTRB）
コンテンツ領域	RectTransform + 子のパディング	MarginContainer + Theme	Widget / レイアウトのパディング
よくある失敗	Simpleの誤用、スケールの異なるボーダー	patchとテクスチャサイズの不一致	アトラスの回転でインセットが壊れる
合格	幅150% / 200%で角がシャープ、中央がきれい	同様。ThemeプレビューがPlayと一致	同様。実機で長いリストをスポットチェック

Unity Editorでの受け入れ（他エンジンにも対応）：

1. PrefabのImageをSlicedにし、デザインに合ったボーダーを設定します。
2. パネルのRectTransformをデザインの最小幅と最大幅までドラッグします。
3. 角、エッジ、中央をFigma/PSDのキャプチャと比較します。
4. Playモードで問題なければ → 出荷前チェックリストに従って実機を1回確認します。

フルスクリーンの考え方：キャンバス分割と再書き出し

PNGやAIのフルスクリーンアートしかない場合、ボーダーを推測することはできません。手順は、VberAI Studio（AI Studio、Google AI Studioとは別物）のその場での分割 → 伸縮可能なパネルをマーク → Prefab書き出し（決定的であり、LLMのYAMLではない）です。

ステップ	アクション	受け入れ
1	キャンバスにフルスクリーンを配置し、Panel_*と固定アイコンを分割	階層に名前が付いている
2	キャンバス上または書き出し前にパネルの9スライス意図を確認	インセットの責任者が文書化されている
3	Unity / Godot / CocosのPrefabを書き出し	上表に従ってSliced QAを実施
4	スキン変更 / ロケール対応後は、ツリー全体を再書き出し	ボーダー仕様が変わらなければ、インセットも変わらない

Figma/PSDがレイヤー化されている場合：Figma → UnityまたはPSDからUGUIへを優先し、その後エンジンでボーダーを微調整します。イベントごとに20枚のバラPNGを再書き出しするのは避けましょう。

---

修正のルーティング

症状	考えられる原因	対応	担当
角がぼやける	画像全体へのSimpleスケール	Sliced + 正しいボーダー。デザインがインセットを明記	エンジニアリング + デザイン
中央の継ぎ目 / 繰り返しブロック	インセットが1〜2pxずれている、スケール不一致	デザインのpxに合わせ、スプライトを再インポート	エンジニアリング
角が楕円に伸びる	アートが9スライスに適していない	固定サイズ、または新しい角アート	デザイン
スキン変更後にボーダーが変わる	新しいアートのサイズやパディング	スキン変更仕様でキャンバスサイズを固定し、スキン変更後に再QA	デザイン
リスト行の背景が変形する	行の背景をパネル全体のように伸縮	行専用の9s、または固定高さ	デザイン
特定の解像度でのみ失敗	Canvas Scalerの非整数スケール	エンジンチェックリストのAnchor/Scaler	エンジニアリング

ルール： ボーダーがデザインと異なるなら → まずマークまたはスプライトの元データを修正し、その後Prefabを直します。納品物を更新せずInspectorだけを直すと → 次の書き出しで失われます。

---

「PNGパックのみ」のハンドオフとの比較

アプローチ	向いている	向いていない
手動書き出し + エンジニアがボーダーを埋める	パネルが少ない、デモ	頻繁なスキン変更、多数の画面
Figma/PSD + VberAI Studioの構造化書き出し	マルチ画面、マルチエンジン、イベント	インセットのマークとQAの代替にはならない
エンジンでの一時的なSliced	1画面のホットフィックス	デザインソースなしでの長期的運用

推奨：デザインでインセットをマーク → 構造化Prefab書き出し → Unity Editorで2つの幅でSliced確認 → ロジックはMCP。Raycastとバインディングについては、エンジン + MCPチェックリストを参照してください。

---

よくある質問

角丸パネルに9スライスは使えますか？
使えますが、インセットはまっすぐな伸縮エッジ上に置き、角は非伸縮のコーナータイルに残す必要があります。パネルサイズとともに角の丸みが大きくなるなら → 不合格です。アートを修正するか、最大サイズを制限します。

影はボーダーに含めますか？
製品仕様で決めます。影が伸縮しない場合は、レイヤーを分けるか、外側のグローを除いた単色矩形にインセットをマークします。

TiledとSlicedのどちらを使いますか？
額縁のあるパネルはSliced、中央のテクスチャを繰り返す場合はTiled（またはタイル可能な中央アート）です。仕様に明記し、エンジニアに推測させないようにします。

Godot / Cocos用に別々のスライスが必要ですか？
インセットの意味は1つです。キャンバスのマルチエンジン書き出しで書き出し先を切り替え、表に従ってpatch/capを検証します。

VberAI Studioはボーダーを自動で埋めますか？
書き出しとアセットに依存します。受け入れは常にエンジンのSliced/StyleBoxです。デザインにインセットがなければ → エンジニアがEditorでボーダーを設定し、仕様に記録します。

VberAI StudioはGoogle AI Studioと同じですか？
いいえ。比較を参照してください。