Figma から Unity へ：AI First のあと、UI の手作業を工程の中心に置かなくてよい
要約
本サイトが Figma から Unity へ を公開したあと、状況ははっきりした。AI は旧来のゲーム開発工程を強く動かしている。Saharukh が 2026 年 5 月に書いた Figma to Unity の黄金ルールも、少なくとも半分は、もう進捗を止めない。AI First から見れば、自動化できる手順をさらに自動化しているだけであり、速度はそれに続く。
本サイトのチュートリアルと公開メモは、同じ AI First の論理に乗っている。エンジンを先に極める手順は置いておく。すでに動く AI を使い、ゲームを作る楽しさに戻る。端から端まですでに回る組み合わせは次のとおりである。
- Codex：コードの生成
- VberAI Studio：美術の一括生成と処理
- Unity MCP：コーディングツールとエンジンのあいだの同期
- Unity：最後の検証、プレイテスト、完成したプロジェクト
元記事の細部の半分は、もう成り立たない
元記事の経験を先に並べ、表で各行を対応させる。
Figma で見た目のよい画面は、動くゲーム UI ではない。 元記事の言い方では、UI は動き、応答し、拡縮し、複数の状態を持ち、別デバイスで動き、リアルタイムエンジンでも安く済む必要がある。Figma から Unity へは、「画像を一枚書き出して終わり」ではない。
Figma は作画、Unity は現場である。 ファイルが Unity に入ったあと、本当の問いが出る。ボタンはクリックできるか、ホバーで何が起きるか、無効のとき何が起きるか、別言語で溢れるか、ポップアップはスマホと PC の両方に収まるか、動きは滑らかか、UI はフレームレートを落とすか。
ボタンは、矩形に一行の文字を足したものではない。 元記事は通常、ホバー、押下、無効、選択、コントローラーのフォーカス、音、クリックの動き、ローカライズ、レスポンシブな拡縮、光り得る演出、プレイに繋がるイベントを列挙する。「ボタンを Figma から書き出す」は軽く聞こえる。プロジェクトのなかでは軽くない。
切り出して書き出す作業は、仕事の一片にすぎない。 チームはなお決める必要がある。何が画像になるか、何を Unity で組むか、何が再利用できる Prefab になるか、何に 9-slice、動き、シェーダー、ローカライズ、キーボード、マウス、タッチ、コントローラーが要るか。
画面全体を一枚の画像として書き出さない。 元記事が挙げるのは、全画面、文字付きボタン、固定サイズのパネル、静止画の進捗バー、PNG に焼き込んだ文案である。焼き込んだ文案は翻訳しにくい。パネル全体は拡縮しにくい。静止画の進捗バーは滑らかに埋まらない。画面ごとに巨大な PNG 一枚は重く、改めにくい。きれいな分け方はこうである。文字は Unity のなかで本物の文字のまま残す。ボタンは再利用できるコンポーネントにする。パネルは 9-slice。バーは塗りつぶし画像かシェーダー。アイコンはスプライトとして書き出す。繰り返しは Prefab にする。
命名は、プロジェクトが大きくなるまで退屈に見える。 Rectangle 124、Group 56、Icon copy 9、Frame 32 は、開発者やテクニカルアーティストに推測を強いる。元記事のよりよい名前は btn_primary_bg、icon_currency_gold、panel_shop_base、hud_health_fill、popup_reward_frame、img_avatar_border_rare である。
画面だけで考えず、コンポーネントで考える。 ショップ画面はヘッダー、通貨バー、アイテムカード、購入ボタン、スクロール領域、カテゴリタブ、確認ポップアップに分かれる。Figma のコンポーネントは Unity の Prefab に対応する。例えば Shop Item Card から PF_ShopItemCard へ。中にアイコン、名前、価格、レア枠、購入ボタン、ロック / 選択 / ホバーを置く。
Figma のレイアウトは Unity のレイアウトではない。 同じ UI がスマホ、タブレット、PC、超ワイド、ノッチとセーフエリア、別言語、別入力に当たることがある。実装にはアンカー、拡縮、セーフエリア、レイアウトグループ、伸び縮みする余白が要る。UI を一つの解像度に貼ったシールにはできない。
動きを最後まで残さない。 ポップアップのフェードイン、ボタンのわずかな拡縮、体力バーの点滅、報酬の光、エラー時の揺れ——これらは、何が起きたかをプレイヤーに伝える。遅い動きは、レイアウト、タイミング、性能、プレイの流れとぶつかる。
UI も性能を食う。 重ねた透明度、大きなテクスチャ、ぼかし、マスク、パーティクル、動くアイコン、散らかったキャンバス、ばらばらのスプライトの過多、頻繁なレイアウト再構築。ハイエンド PC では静かである。スマホでは本物になる。
元記事の十手順： Figma ファイルを整える → 再利用できるコンポーネントを印す → 何を書き出すか決める → サイズとアルファを用意する → Unity に読み込み、テクスチャ、圧縮、アトラスを設定する → Prefab を組む → 状態を足す → 動きとフィードバックを足す → 多くの画面で試す → ドローコール、メモリ、オーバードロー、キャンバス再構築を早く見る。
元記事が避けようとする失敗： 全画面の画像書き出し、文案のスプライトへの焼き込み、ボタン状態なし、解像度が一つだけ、レイヤー名がでたらめ、ローカライズなし、コントローラーやタッチなし、ユニークアセットが多すぎる、アトラスなし、動きが遅すぎる、セーフエリアなし、性能を最後まで残す。
UI テクニカルアーティスト はデザインとエンジニアリングのあいだに座る。アセットを用意し、Prefab を組み、シェーダーを書き、動きを作り、最適化し、再利用できる部品を作り、解像度に合わせ、デザイナーにエンジンの限界を見せ、開発者が見た目を保てるように助ける。仕事は、デザインを守り、制作のなかで生き残らせることだと書かれている。
「人を先に、ツールを後に」の時代では、上の各行が時間を食う。
AI First のあと、まだ成り立つものと、中心から外れたもの
ホームページははっきり書いている。Figma に近い面でアートを整え、エンジン MCP で濃く同期し、人手に寄っていた旧い手順を分ける。元記事に対して見ると、次の表になる。
| 元記事がいまも強調すること | AI First のあと |
|---|---|
| きれいなファイルは動く UI ではない | いまも真である。クリック、拡縮、言語は、Unity のなかで証明する必要がある。 |
| 切り出して書き出す作業が全体ではない | いまも真である。ただし中心は動いた。隙間は、人が切り方を一つずつ決めることではない。Codex が読めるエンジンのフォルダに、ファイルが入るかどうかである。 |
| 全画面書き出しをしない、文案を焼き込まない | いまも真である。ローカライズの記事ですでに書いた。文字が画像に入ると、フレーム全体を作り直すことになる。 |
Rectangle 124 のような名前がプロジェクトを壊す | いまも真である。Auto Layering（自動レイヤー分割） は検出した端から切り出し、意味のある名前のファイルを書く。悪い名前は、あとで Prefab とスクリプトを壊す。 |
| ホバー、押下、無効、フォーカス、音、イベント | 半分は真である。それらの状態は、なお Unity のなかに存在する必要がある。UI テクニカルアーティストが読み込み前に手で全部組む必要はない。Codex と Unity MCP は、Prefab が入ったあとに足せる。 |
| 9-slice、シェーダー、アトラス、キャンバス再構築 | 半分は真である。スマホではいまも爆発する。AI First の順は、UI をプロジェクトに入れて動かし、開いているエディタを Codex に見させることである。これらは入口の条件ではない。 |
| コンポーネントが Prefab になる | いまも真であり、書き出しがすでに一部を担っている。Figma から Unity へ は Prefab（.prefab）を書ける。解凍すると Assets/Prefabs は組んだ UI、Assets/Textures は切り出しである。 |
| 動きと性能は書き出し前の計画に置かなければならない | もう中心ではない。元記事はそれらを手順 8 と 10 に置き、その計画なしでは書き出せないかのように読めた。いまよくある道は、使える Prefab を書き出し、動きとコストの作業を Unity のなかで Codex と Unity MCP に足させることである。 |
| UI テクニカルアーティストが真ん中に座らなければならない | ゲーム開発の経歴がない人にとって、ここが最初に外れる。ホームページの前提は、エンジンを先に極めなくてよい、である。入口はこう変わる。VberAI Studio がファイルをエンジンのフォルダに書き、Unity MCP が開いているシーンとスクリプトを Codex に渡す。 |
「UI の手作業を工程の中心に置かなくてよい」は、UI を雑にしてよい、という意味ではない。元記事の人手十手順を、Figma から Unity へ進むための前提に置かなくてよい、という意味である。
この組み合わせが実際に変えたもの
VberAI Studio は、人手に寄っていた前半に当たる。レイヤーを整え、使える名前を付け、何を切るか決め、Unity の Assets 構成で書き出す。.fig を Import Project（プロジェクトを読み込む）で入れ、Auto Layering（自動レイヤー分割） を走らせ、Export to Unity（Unity に書き出す）する。ここまでが、ファイルが Unity のプロジェクトフォルダに構造化して入る道である。ホバー状態、ローカライズした文字サイズ、パーティクルの見た目は扱わない。元記事の後半であり、デザインツールが一度で終える前提は置けない。
Unity は、いまも証明の場である。Prefab がシーンに入ったあと、元記事の問いは残る。クリックできるか、別言語で溢れるか、ノッチが覆うか、フレームレートが落ちるか。
Unity MCP は、MCP ができてデザインツールができないことに当たる。いまのシーン、階層、スクリプトを AI ツールへ同期する。Figma と Cursor のあと、デザインファイルを Godot に読み込む は、すでに同じ分担を書いている。MCP は開発とシーンの文脈を保ち、デザインツールはファイルを編集し続け、必要なときにエンジンのフォルダへ書き出す。Unity でも同じ分け方である。
Codex は、元記事が UI テクニカルアーティストやプログラマに残した配線に当たる。ボタンイベントを繋ぎ、状態をいくつか足し、文字を翻訳できるテキストのまま残し、解像度を一つ以上試す。本サイトの立場は、基礎的なコードが書けるデザイナーであり、エンジンの専門家ではない。その配線が、先に UI フレームワーク一式を手で組むことをまだ要求するなら、AI First は止まる。
四つの部品を順に置くとこうなる。
- AI 画像ツールでゲーム UI をスクリーンショットとして生成し、Figma では端の例外と修正だけを行う。
- VberAI Studio に読み込み、Auto Layering を走らせ、Unity の
Assets（Prefab と切り出し）を書き出す。 - 開いている Unity プロジェクトで、Unity MCP にいまの UI ツリーを Codex へ見せる。
- Codex にインタラクション、状態、基本の収まりを足させる。アートが変わったら、エンジンのなかでテクスチャ名を手で直さない。VberAI Studio からもう一度書き出す。
元記事の UI テクニカルアーティストは、制作がデザインを失わないように守っていた。いまの守り方は別である。レイヤーと名前は、書き出しの時点ですでに揃っている。人が結果を判断する。Codex がエンジンのなかで編集する。
どの文字列もレイヤーに焼き込むやり方は、いまは不格好に見える。AI 生成と自動ラベルのコストと都合が、旧い手直しの総コストをすでに上回るなら、問題でなくなることもある。
まとめ
- AI は、ゲーム開発のなかでまだ手作業だった部分を食っている。
- VberAI Studio は、この垂直方向でもう一段、AI First を走らせた。この種のツールは、ゲーム開発をさらに大きな規模で速くする。
- この組み合わせがまだ自動化していない余地は、速く縮む。