ゲームUIのHUDは、解像度とアスペクトが変わると一気に崩れやすいパーツです。私もWeb案件の合間にゲーム画面のモックをFigmaで触ることがありますが、Figma Auto Layout ゲームUIの話は「WebのカードUIのやり方をそのまま流用」だと、実装側で余白やストロークの計算がずれることがあります。2026年夏以降、Auto LayoutはCSS Flexboxに近い挙動がデフォルトになり、既存フレームはLegacyのまま残せる期間も公式に案内されています（切り替えは2027年1月まで、執筆時点のFigmaヘルプ）。
この記事でわかること
- ゲームHUD向けに、Auto LayoutのLatest / Legacyをどう切り分けるか
- プレイヤー情報バー（HP・ゲージ・アイコン列）を1つのコンポーネントにまとめる手順
- 実装渡し前に、開発者と揃えるチェック項目とファイルの渡し方
先に結論
- 向いている人: ゲームUIをFigmaで作り、Unity / Unreal / WebGLいずれかに実装するチーム。HUDを画面比率ごとに微調整しているフリーランスのデザイナー
- 向いていない人: すでにデザインシステムが全部Legacy固定で、2027年以降も更新予定がない人（ただし新規HUDだけLatestにする運用は可能）
- 私のおすすめ: 新規HUDフレームはLatest（CSS寄り）で作り、既存の大きな画面モックは触るまでLegacyのまま。渡す前に「Layout version」をページ単位で表に書く
私はまずHPバー1本だけLatestで作り、崩れた旧モックとの差分をスクショで共有してから全体を移行します。
この記事には、Google AdSense による広告およびアフィリエイトリンクが含まれる場合があります。紹介経由で購入や申し込みがあると、私に紹介料が入ることがあります。
案件でFigmaを主ツールにしている人は、Figma公式のプランと権限（Dev Modeの有無）を先に揃えてから、HUD用のライブラリを分けると後悔が少ないです。Web制作全体の流れは制作フローの入口に、Miroとの棲み分けはMiroとFigmaの使い分けが参考になります。
新仕様で変わるポイント（ゲームHUDで効くところ）
| 項目 | Legacy寄りの挙動 | Latest（CSS寄り）で意識する点 |
|---|---|---|
| パディング | 極端に小さいフレームでレイアウトが縮むことがあった | パディングは必ず確保される（border-box寄り） |
| ストローク | 外側・中央ストロークがレイアウト計算に入ることがあった | 内側ストロークだけが幅にカウント |
| Fill子要素 | 見た目上は同じ幅に見えても計算がずれることがあった | パディングのある子は内側のコンテンツ幅で揃う |
| ギャップ自動 | 重なりで微調整していたケース | 自動ギャップは負にならず詰まる |
ゲームHUDでは、細い枠線＋内側パディングのバッジ（レベル表示、属性アイコン）が多いので、Latestでは「外枠のストロークを装飾にしたい」場合は、公式フォーラムでも触れている入れ子のスペーサーフレームで外側余白を再現する方法が現実的です。実装がCSSのoutline相当で描くなら、デザイン側も内側ストロークか二重フレームに寄せた方が齟齬が減ります。
仕様は執筆時点のFigma公式ヘルプ・フォーラムに基づきます。アップデートで文言が変わる場合があります。
HUDパーツを「画面」ではなく「部品」に分ける
長いプレイ画面モック1枚に全部載せるより、部品ライブラリを先に切る方が、ゲームパッチや解像度違いの差し替えに強いです。私が最低限分けるのは次の4つです。
- トップバー … ミニマップ・クエスト・通貨
- プレイヤーステータス … HP/MP・レベル・バフアイコン
- アクション領域 … スキル・アイテムショートカット
- システムメッセージ … トースト・ダイアログの土台
それぞれを別ページ（または別セクション）に置き、画面モックはインスタンス配置だけにします。Figmaのコンポーネント命名を案件ごとに揃える考え方は、HUDでも HUD/Status/Bar_HP のようにプレフィックスを固定すると検索が楽です。
画面モックは「配置の見本」、部品ページは「実装の正」——この二層に分けると、開発への説明が短くなります。
手順1：プレイヤーHPバーをAuto Layoutで組む
ここでは横長のHPバー＋左アイコンを例にします。数値は案件ごとに変えてください。
- アイコン用フレーム（固定幅 48px、高さ 48px）を作る。角丸と内側ストロークはLatestならストローク位置をInsideにする
- その右に HPバー用の横Auto Layout（Horizontal、Gap 8、Padding 左右12・上下8）を置く
- HPバーの中身は「背景トラック（Fill）」と「前景フィル（Fill＋幅%指定）」の二層。前景は親のFillではなく固定幅または%ベースで、実装側が
scaleXする想定なら、デザイン上は100%幅の子を1本示す - 親フレーム全体を選び、Auto Layoutをオン。子は「アイコン＝固定」「バー領域＝Fill container」
- 右端に小さな数字ラベル（例:
1240/1500）を置く場合、テキストは Hug contents、バーは Fill のまま
Latestでは、バー側にパディングがあるとFill子の見かけの幅がアイコン列と揃わないことがあります（公式フォーラムの説明どおり、内側コンテンツ幅で揃う挙動）。見た目を完全に同じ外寸にしたいときは、バーだけをもう一段ラップするか、親をGridに切り替える選択肢があります。実装がFlexbox一本なら、Latestの方が「コードに近い見本」になりやすいです。
手順2：安全エリアとアスペクト別フレーム
コンソールのセーフゾーンはタイトルごとに違いますが、Figmaでは基準解像度フレームを2〜3個用意するだけでも実装の勘所が伝わります。
- 16:9（例: 1920×1080）フレームを作り、四辺にガイドまたは非印刷用のマージン（上下5%、左右4%など、プロジェクトルールを1行で注釈）
- HUD部品はその内側に上下左右の配置ルールを決める（例: ステータスは左下固定、ミニマップは右上）
- 21:9やSteamデッキ想定の横長だけ、別フレームに同じコンポーネントを配置し、Fillと固定のどちらが伸びるかを見せる
WebGLやモバイル縦画面まで見る案件なら、縦フレームではアクション領域だけ別バリアントにする方が、1つの巨大コンポーネントより保守しやすいです。
手順3：LegacyとLatestの移行をページ単位で記録
既存のゲーム画面モックがLegacyのまま残っているとき、いきなり全更新はリスクが高いです。私が使っている表をそのまま共有します。
| ページ名 | 主なHUD部品 | Layout version | 移行予定 | 備考 |
|---|---|---|---|---|
| 00_Library | HPバー、バフ列 | Latest | 完了 | 実装の正 |
| 10_Flow_戦闘 | 戦闘HUD配置 | Legacy | 次スプリント | 触るときにUpdate |
| 20_Flow_マップ | ミニマップ枠 | Legacy | 未定 | 外枠ストローク依存 |
FigmaのActionsメニューから「Update layout version for selection」でプレビューできるので、ページごとに「崩れるフレーム一覧」をスクショしてから承認する運用が安全です。コンポーネントのインスタンス側ではLayout versionを切り替えられないという公式注意も、デザインシステム担当は頭に入れておくとトラブルが減ります。
開発者に「全部Latestです」と言ってからLegacyページを渡したことがあり、paddingの差で1日潰しました。表の1行がその後の保険です。
手順4：実装渡し前のエクスポートとDev Mode
画像書き出しだけだと、ゲームエンジン側では9-sliceやアンカーの指定が別途必要になることが多いです。Figma側でやることは次に絞れます。
- 色とタイポ … 変数（Variables）またはスタイルで、HP色・警告色をトークン化
- スペーシング … Auto LayoutのGapとPaddingを8の倍数に寄せる（エンジンのスナップと合わせる）
- アイコン … SVGまたはPNG@2x。細い枠線は、Latestの内側ストローク前提で書き出す
- Dev Mode … 余白とフォント指定を開発が読めるなら、部品ページのリンクを共有
Web向けミニゲームなら、ゲームUIのWebP書き出しからWordPressへ載せる流れのように、軽量画像とFigmaのレイアウト情報を分けて渡す案件もあります。コンソール向けなら、エンジン担当と「Flex相当か、固定座標か」を先に1行で決めた方が、Auto Layoutの使いどころがはっきりします。
よくある失敗と直し方
- 外側ストロークで幅を合わせていた … Latestではレイアウトに入らない。内側ストロークへ変更するか、ラッパーフレームで余白を足す
- 自動ギャップでアイコンを重ねていた … 負のギャップを手動指定するか、絶対配置のオーバーレイ用フレームを別にする
- 1つの巨大Auto Layoutに全HUD … パフォーマンスと編集性が落ちる。部品化してインスタンス配置に戻す
- 実装がまだLegacy前提の数値 … 渡し物にLayout version列を必ず付ける（前述の表）
ゲーム制作はプレイフィール優先で、デザインの微調整が後から入りがちです。コンポーネントのバリアント（例: HP低下時の色）だけ先に切っておくと、演出追加時に画面全体を触らずに済みます。
よくある質問
Q. 新規HUDはLatest、既存はLegacyの混在でも問題ないですか？
A. 問題ありません。公式も2027年1月まで切り替えを案内しています。ただし混在時は、ページ名か表でどちらの計算かを明示してください。開発がCSS Flexbox前提なら、新規はLatest推奨です。
Q. ゲームエンジンがUIツールを持っている場合、Figmaはどこまで必要ですか？
A. レイアウトとビジュアルの正としてFigma、アニメーションとデータバインドはエンジン——と役割分担する案件が多いです。Figmaは「寸法と余白の契約書」に近い使い方にすると、Auto Layoutの投資が回収しやすいです。
Q. Web制作のAuto Layoutノウハウはそのまま使えますか？
A. 基本操作は同じですが、HUDは固定・伸縮の比率がシビアです。Webのカード一覧ほど「全部Fill」にしない方が、実装のアンカー設計と噛み合います。MiroとFigmaの使い分けでワイヤー段階を済ませ、HUDの細部は部品ページに閉じる流れがおすすめです。
Q. 有料プランは必須ですか？
A. 小規模なら無料枠でも部品化は可能です。Dev Modeや共有権限が必要な案件では、チームプランを検討してください。料金は執筆時点のFigma公式で確認し、変動する場合があります。
まとめ
Figma Auto Layout ゲームUIでは、2026年以降のCSS寄り仕様を前提に、HUDを部品ライブラリへ切り出し、Layout versionを表で明示してから渡すのが安全です。今日やることは次の3つだけに絞れます。
- HPバー（または代表HUD1つ）をLatestで作り、Legacyの旧モックと並べて差分スクショ
- ページ一覧にLayout version列を追加
- 開発と「Flex相当か固定座標か」をチャットで1行合意
次の一手: 部品ページを1枚だけ作り、Figmaの共有リンクを実装担当に渡し、Dev Modeで余白が読めるか確認してください。
関連: Figma制作フロー入口 / ゲームUI WebP書き出し / MiroとFigmaの使い分け
