取り組みの背景
ゲーム開発をしていると、UI資産の作成に時間がかかることがありませんか？メニュー画面、HPバー、インベントリ画面、ボタン——これらすべてを一からイラストレーターやPhotoshopで作るのは非常に手間です。
Figmaは、こうしたゲームUI資産を効率的に設計・エクスポートするために最適なツールです。ここではUnity開発者がFigmaを活用してゲームUIを作成し、Unityプロジェクトにシームレスに統合する方法を丁寧に解説します。
ゲーム開発の生産性を高めたい、Figmaをまだ使ったことがない開発者の方は、ぜひご一読ください。
Figma を使う利点と Unity 統合のメリット
まず、なぜFigmaはゲーム開発に適しているのでしょうか。
1. ブラウザベースで環境構築が不要 Figmaはブラウザで動作します。インストール不要で、Macでも Windowsでも、Linuxでも同じUIで作業できます。特にゲーム開発チームが複数のOS環境を使っている場合、Figmaの汎用性は大きな利点になります。
2. リアルタイム協調編集 チーム開発の場合、デザイナーとプログラマーが同時にプロジェクトを編集できます。変更内容がリアルタイムで反映されるため、コミュニケーション効率が格段に上がります。複数デバイスから同時アクセス可能で、クラウドベースのバージョン管理が自動的に行われます。
3. コンポーネント機能による部品管理 ボタンやUIパネルをコンポーネント化できます。一度作成すれば、それを複数の画面で再利用でき、修正時にすべてのインスタンスが自動更新されます。ゲームのように複数画面・複数状態が必要な場合、この機能は大幅な時間削減につながります。
4. SVG / PNG 形式でのエクスポート SVGはベクター形式です。Unityにインポート後、解像度を損なわず任意のサイズにスケーリングできます。PNGでも書き出せるため、用途に応じた形式選択が可能です。
5. プロトタイプ機能 アニメーションやインタラクションをプロトタイプとして実装でき、UI/UXの検証が迅速に行えます。ステークホルダーへのプレゼンテーション用に、実際の操作感を見せることができます。
ゲーム UI 要素の設計方法と実装戦略
では、FigmaでゲームUIを実際にデザインしていきましょう。主要なUI要素ごとに解説します。
メニュー画面の設計
メニュ画面は、ゲームのエントリーポイントです。Figmaでは以下の要素を配置します：
主要な構成要素
- 背景：テクスチャやグラデーション（ゲームの世界観を反映）
- タイトルテキスト：ゲーム名、フォントサイズは大きく視認性優先
- ボタン群：スタート、設定、終了など（状態別のバリアント設定）
- ロゴ・イラスト：ゲームのビジュアルアイデンティティを表現
- 装飾要素：パーティクル、光の効果（Figmaで実装または参考画像として配置）
Figmaで矩形ツール（Rectangle Tool）を使ってボタンを作成し、テキストレイヤーを重ねます。重要なのは、これらをグループ化し、さらにコンポーネント化しておくことです。
メニュー画面の設計手順
- キャンバスサイズを Unity の Canvas サイズに合わせる（例：1920 × 1080）
- 背景レイヤーを配置（グラデーションまたはテクスチャ）
- タイトルテキストを中央上部に配置
- ボタンを垂直に並べる（各ボタン間隔は 80-120px）
- ボタンをコンポーネント化し、バリアント（Normal/Hover/Pressed）を設定
HUD（ヘッドアップディスプレイ）要素の配置
HPバー、マナバー、ミニマップといったHUD要素は、ゲーム画面の隅に常時表示されます。
主要なHUD要素
- HPバー：背景 + 満タン時の色分けされたフィル、テキストで数値表示
- マナバー：同様の構造（色は通常青系）
- アイコン：キャラクターの顔、敵アイコンなど
- テキスト数値：スコア、レベル、ウェーブ数など
- 時間表示：制限時間がある場合
Figmaではこれらを正確に配置します。特に、異なる解像度・アスペクト比での表示を想定して、アンカーポイント（Figmaではオートレイアウト）を正しく設定する点が肝心です。
HUD 配置のベストプラクティス
- 左上：プレイヤー情報（レベル、名前）
- 右上：敵情報またはボス情報
- 左下：インベントリアイコン、アイテム数
- 右下：スコア、時間、コンボカウンター
- 中央下：能力ゲージ、集中度メーター
各要素は重ならず、かつスマートフォンのノッチやセーフエリアを考慮した配置が必要です。
ボタン設計とステート管理
ボタンはUI要素の基本です。通常、以下の状態を持ちます：
ボタンの各ステート
- Default（デフォルト状態）：ユーザーが何もしていない状態
- 背景色：通常のボタンカラー
- テキスト：白またはハイコントラスト色
- Hover（ホバー状態）：マウスが上に乗った状態（PC/コンソール向け）
- 背景色：わずかに明るく、または異なる色
- 光の効果：外枠に発光
- Pressed（押下状態）：実際に押されている状態
- 背景色：より濃い色
- 位置：わずかに下にオフセット（押込み感を表現）
- サイズ：わずかに縮小
- Disabled（無効状態）：クリック不可の状態
- 背景色：グレーアウト
- テキスト色：薄いグレー
- 不透明度：50-60%
Figmaではこれら複数の状態をコンポーネントの「バリアント」機能で管理できます。これにより、Unityでの状態管理が容易になります。
Figmaでのボタンコンポーネント作成
- 矩形 + テキストを配置
- グループ化
- 右クリック → 「Create component」
- 「+」で「State」バリアントを追加
- Default / Hover / Pressed / Disabled を設定
- 各バリアントのスタイルを微調整
インベントリ画面の設計
RPGゲームで見かけるインベントリ画面も、Figmaで効率的に設計できます。
主要な構成要素
- グリッドレイアウト：アイテムスロットを規則正しく配置（4×6 や 5×4 など）
- アイテムアイコン：各スロット内のアイコン、64×64px 程度が標準
- 説明パネル：選択したアイテムの詳細情報を表示
- ソート・フィルタコントロール：アイテム種別別フィルタ
- 装備スロット：装備中のアイテムを別枠で表示
Figmaのグリッドツール（Layout Grid）を使うと、正確なグリッド配置が可能です。具体的には：
- グリッドを有効化（右パネル → Layout Grid → Add grid）
- グリッドサイズ：72px（アイテム 64px + 余白 8px）
- グターサイズ：8px
- オフセット：8px
これにより、すべてのアイテムが自動的に整列され、美しいグリッドレイアウトが実現できます。
ダイアログボックスと会話シーン UI
プレイヤーとの会話シーンなどで使用するダイアログボックスも設計します。
主要な構成要素
- 背景パネル：セミトランスペアレント（透明度 80-90%）、その背景のゲーム画面をぼかし表現
- キャラクター名：テキスト、フォントサイズ 24-28px
- 台詞：テキスト、複数行対応、ジャストメディウムまたはボールドウェイト
- 次へボタン：アニメーション可能（点滅や矢印アニメーション）
- チョイスボタン：選択肢がある場合、複数ボタンを配置
9-Slice スライス設定と Unity 統合
ここが重要です。Unityにインポートしたグラフィックスで「9-slice」（ナイン・スライス）を設定することで、要素を自由にスケーリングできるようになります。
9-Slice の概念と実装方法
9-sliceとは、画像を9つのセクションに分割し、コーナーと辺の部分を固定したまま、中央部だけをスケーリングする手法です。これにより、テクスチャの歪みを避けながら、ボタンやパネルを自由なサイズに拡大・縮小できます。
9-Slice の 9 つのセクション
[1]━━━━[2]━━━━[3]
┃ ┃ ┃
[4]━━━━[5]━━━━[6]
┃ ┃ ┃
[7]━━━━[8]━━━━[9]
- セクション 1, 3, 7, 9（コーナー）：スケーリングされない
- セクション 2, 4, 6, 8（辺）：スケーリングで伸縮
- セクション 5（中央）：自由にスケーリング
Figmaで設計する際は、以下を意識してください：
- コーナー部分：角丸ボタンの場合、丸い部分を十分に大きく確保（最低 24×24px）
- 辺部分：拡張可能な領域を明確に（最小 16px 幅）
- 中央部分：任意にスケーリング可能な領域（パターンやグラデーション配置）
後でUnityのSprite Editorで9-sliceを設定する際、このFigmaでの設計が役に立ちます。
Unity Sprite Editor での 9-Slice 設定手順
- Figmaからエクスポート（PNG形式）
- Unityプロジェクトの Assets フォルダにドラッグ&ドロップ
- Sprite を選択
- Inspector で Texture Type を「Sprite (2D and UI)」に変更
- Inspector で「Sprite Editor」を開く
- スライスガイドを設定（左上コーナー X:24, Y:24; 右下コーナー X:24, Y:24 など）
- 「Apply」をクリック
SVG エクスポートと PNG エクスポート
Figmaからのエクスポート手順
Figmaで設計したUIを右クリックして「Export」を選択します。形式をSVGまたはPNGに指定し、「Export」ボタンをクリック。ファイルがダウンロードされます。
SVG エクスポート時の設定
- フォーマット：SVG
- 「Include "id" attribute」：OFF（不要な属性を削除）
- 「Include stroke content」：必要に応じて ON
- 複数色の場合：「Flatten selection」は OFF に
PNG エクスポート時の設定
- フォーマット：PNG
- スケール：1x / 2x / 3x のいずれか（Unityでの使用解像度に応じて選択）
- 背景：Transparent（透明）に設定
複数のUI要素を一度にエクスポートしたい場合、それらを選択してから同じ手順を実行します。フォルダ単位での一括エクスポート機能もあり、非常に便利です。
Unity へのインポート
ダウンロードしたSVGまたはPNGをUnityプロジェクトのAssets フォルダにドラッグ&ドロップします。
Unityは自動的にSVGをテクスチャに変換します。ただし、設定を調整する必要があります：
詳細なインポート設定手順
- インポートしたテクスチャを選択
- Inspector ウィンドウで以下を設定：
- Texture Type：「Sprite (2D and UI)」に設定
- Sprite Mode：「Single」に設定（単一要素の場合）
- Pixels Per Unit：100 設定（解像度に応じて調整）
- Filter Mode：「Point (no filter)」（ドット絵系）または「Bilinear」（グラデーション系）
- Compression：「None」または「Fast」（品質を重視）
- 「Apply」をクリック
これでUnityでスプライトとして使用できるようになります。
テクスチャアトラス作成とパフォーマンス最適化
複数要素のアトラス化
複数のUI要素を一つのテクスチャアトラスにまとめることで、描画呼び出し（Draw Call）を削減し、パフォーマンスを向上させます。
Figmaでは、複数のUI要素を正確なグリッドに配置しておくと、後でアトラス化するのが容易です。
Figma での配置戦略
- ボタン系：8x8 グリッドで配置（各ボタン 64×64px）
- HUD 要素：別グリッドで配置（16×16, 32×32, 64×64 サイズ混在）
- 間隔：各要素間 2-4px の余白確保（エッジブリード対策）
Unityでは、複数の個別テクスチャを「Sprite Atlas」として統合できます。以下の手順で実行：
- Project ウィンドウで右クリック
- 「Create」→「2D」→「Sprite Atlas」を選択
- 作成された Sprite Atlas を選択
- Inspector で「Add」をクリック
- アセット（スプライト）を追加
- 「Pack Preview」で確認
- 「Pack」をクリック
アトラス化することで：
- Draw Call が 1/10 以下に削減
- メモリ効率が向上
- ゲームのパフォーマンスが大幅改善
Sprite Editor との連携と高度な設定
UnityのSprite Editorは、テクスチャを細かく制御するための強力なツールです。
Sprite Editor の主要機能
Figmaからエクスポート した画像をSprite Editorで開くと、以下の操作が可能です：
-
スライス設定：9-sliceの設定
- スライスボタンをクリック
- 「Automatic」または「Manual」を選択
- コーナーと辺の寸法を設定
-
フレーム分割：スプライトシート内の各フレームの定義
- 「Slice」→「Grid by Cell Size」
- セルサイズを指定（例：64×64）
- 「Slice」をクリック
-
ボーン設定：スケルタルアニメーション用のボーン配置
- スケルタルアニメーション使用時のみ必要
- ボーンの階層構造を定義
特に複雑なUI要素の場合、Sprite Editorで細かく調整することで、Unityでのレンダリングが最適化されます。
実装例：ボタンの Sprite Editor 設定
- ボタン画像を Inspector で選択
- 右側パネルで「Sprite Editor」開く
- スライス設定：
- L（左）：16px（背景左端）
- R（右）：16px（背景右端）
- T（上）：16px（背景上端）
- B（下）：16px（背景下端）
- 「Apply」→「Pack」
- Unity Canvas でボタン配置時、自動的に9-sliceで拡大縮小
解像度・アスペクト比の考慮と Cross-Platform 対応
ゲームはさまざまなデバイスで実行されます。スマートフォン、タブレット、PC——各デバイスの解像度やアスペクト比は異なります。
デバイス別解像度と DPI 考慮
スマートフォン向け
- 標準解像度：1080×1920 px（1:1.78 アスペクト比）
- 高解像度：1440×2560 px（1:1.78）
- 超広角：1080×2340 px（1:2.17）
- DPI：330-480 DPI
タブレット向け
- iPad：2048×1536 px（4:3）
- Android タブレット：1280×800 px 〜 2560×1600 px（16:10）
- DPI：150-320 DPI
PC 向け
- フルHD：1920×1080 px（16:9）
- WQHD：2560×1440 px（16:9）
- DPI：96-192 DPI
Figmaで設計する際は、以下を考慮します：
- 基準解像度の決定：例えば 1920×1080 を基準とする
- UI の配置：重要な要素は中央に、拡張可能な要素は辺に配置
- テキストサイズ：小さすぎず、読みやすいサイズを選択（最小 24px 推奨）
- セーフエリア：画面端から 20-40px の余白確保
Unityでは、Canvas Scalerを使って異なる解像度に自動適応させます。Figmaでの計画的な配置があれば、この設定がスムーズです。
Canvas Scaler 設定
- UI Scale Mode：「Scale With Screen Size」
- Reference Resolution：1920×1080（Figma のデザイン基準）
- Screen Match Mode：「Match Width Or Height」
- Match：0.5（横縦のバランス）
コンポーネント機能で UI 部品を管理
Figmaのコンポーネント機能は、ゲームUI管理の実用的の武器です。
コンポーネント化による効率化
ボタンをコンポーネント化すると、それをメインメニュー、ポーズメニュー、設定画面など、複数の場所で「インスタンス」として再利用できます。
重要なのは、メインコンポーネントを編集すると、すべてのインスタンスが自動的に更新される点です。
例えば、ボタンのホバー時の色を変更したい場合、メインコンポーネントを一度編集するだけで、プロジェクト全体のすべてのボタンが更新されます。
コンポーネント階層の設計例
Buttons/
├─ PrimaryButton
│ ├─ Small (48×48)
│ ├─ Medium (64×64)
│ └─ Large (80×80)
└─ SecondaryButton
├─ Small
├─ Medium
└─ Large
HUD/
├─ HPBar
│ ├─ Compact
│ └─ Full
└─ MiniMap
├─ 256×256
└─ 512×512
Panels/
├─ MenuPanel
├─ DialogBox
└─ SettingsPanel
Figmaのコンポーネントシステムを活用することで、UI設計の一貫性と修正効率が飛躍的に向上します。更新は1回の編集で全インスタンスに反映されるため、大規模ゲーム開発でも品質を保ちながら効率的に進められます。
Color Space 管理と色空間の統一
Figmaから Unity へのインポート時に注意すべき点が、色空間（Color Space）です。
Linear vs sRGB 色空間
- sRGB（標準）：モニター表示用、Figma のデフォルト
- Linear：レンダリング計算用、物理ベース表現に適切
Unityで Linear 色空間を使っている場合、インポート時に色が異なって見える可能性があります。
設定方法
- テクスチャを選択
- Inspector で「sRGB (Color Texture)」の チェックボックス確認
- Linear 色空間の場合、OFF にする
Figmaでの設計時は sRGB で問題ありません。Unity でのプロジェクト設定に応じて調整します。
まとめ
FigmaはゲームUI開発を大きく効率化するツールです。本記事で紹介した以下のポイントを押さえることで、Figmaから効果的にゲームUIを設計・エクスポートできます：
主要なポイント
- メニュー、HUD、ボタン、インベントリなど、各UI要素の設計方法
- 9-slice スライス設定の意図的な配置
- SVG / PNG エクスポートとUnityインポートの手順
- コンポーネント機能による部品管理
- 解像度・アスペクト比への対応
- テクスチャアトラスによるパフォーマンス最適化
- Color Space 管理による色の正確性確保
次のステップ
- 小規模なUI（ボタン数個）から始める
- コンポーネント化とバリアント設定に慣れる
- テクスチャアトラス化でパフォーマンス測定
- チーム開発環境での協調編集テスト
ゲーム開発をより楽しく、効率的に進めるために、ぜひFigmaをプロジェクトに取り入れてみてください。わからないことがあれば、公式ドキュメントやコミュニティも活発ですので、遠慮なく相談してみましょう。
Figma と Unity の連携により、プロトタイプから完成形まで、スムーズな開発フローを実現できます。皆様のゲーム開発の成功を心からお祈りします。