If UNITY_EDITOR

Unityメニュー画面の作り方徹底解説！Canvas設定とシーン遷移

インディーゲームから商業タイトルまで、プレイヤーがゲームを起動して最初に触れる「メニュー画面」は、作品の第一印象と操作体験を決定づける極めて重要な要素です。洗練されたUIはゲーム全体のクオリティを底上げする一方、画面崩れや反応の悪さはプレイヤーの離脱に直結します。

メニューUIの構築は、uGUIの基本機能であるCanvas設定やアンカーの調整、C#スクリプトによるシーン遷移やポーズ制御など、ゲーム開発の根幹となる基礎技術が凝縮されています。初心者から中級者に向けて、破綻しないレスポンシブなUI設計から実用的なスクリプト実装まで、現場で役立つ手順を網羅して解説します。

📌 【この記事の重要ポイントまとめ】

• 要点1：解像度崩れを防ぐ鍵は、Canvas Scalerの「Scale With Screen Size」と適切なUIアンカー設定にある
• 要点2：ボタンのクリックイベントとSceneManagerを連携させ、安全でスムーズなシーン遷移をスクリプトで制御する
• 要点3：ポーズ画面はTime.timeScaleとUIパネル切り替え、オプション設定はAudio Mixerやデータ永続化を組み合わせて実装する

【基礎構築】Unity UI Canvas設定と画面解像度に対応するアンカー設計

UnityでUIを作成する際、すべてのUI要素を配置する土台となるのがCanvas（キャンバス）です。Hierarchy上で右クリックし、「UI > Canvas」を選択すると自動的にEventSystemとともに生成されます。初心者が最初につまずきやすい「スマホや異なるモニターで表示したときにUIが画面外にはみ出る、あるいは極端に小さくなる」というトラブルは、CanvasとRect Transformの設定を見直すことで根本的に解消できます。

まず必須となるのがCanvas Scalerコンポーネントの調整です。デフォルトの「Constant Pixel Size」のままでは解像度の変化に追従できません。UI Scale Modeを「Scale With Screen Size」に変更し、Reference Resolutionに基準とする解像度（一般的な横画面ゲームなら「1920×1080」など）を設定します。さらに「Match」スライダーは、横画面主体なら幅基準（Width: 0）、縦画面主体なら高さ基準（Height: 1）、汎用的なアスペクト比対応なら0.5（中間値）に設定するのが鉄則です。

次に理解すべきがUIアンカー（Anchor）のレスポンシブ設定です。ボタンやテキストなどの各UI要素が持つRect Transformには、親要素に対する位置の基準点を決めるアンカーが存在します。例えばタイトルロゴは「Top-Center」、左下の戻るボタンは「Bottom-Left」にアンカーを固定することで、画面サイズが伸縮しても常に四隅や中央からの相対位置が保たれます。画面全体に広げる背景パネルの場合は、Alt（MacはOption）キーを押しながら「Stretch-Stretch」を選択すると、瞬時に親要素全体へフィットさせることが可能です。

【ボタン実装】uGUIのクリックイベントとC#スクリプトによるメニュー制御

メニュー画面の中核となるのが、プレイヤーの入力を受け付けるボタン（Button）です。uGUIのButtonコンポーネントは、標準でマウスオーバーやクリック時の色変化（Color Tint）、画像差し替え（Sprite Swap）などの視覚フィードバック機能を備えています。デザイン性を高める際は、Transition設定を適切に変更するだけで手触り感が劇的に向上します。

ボタンが押された際の処理（クリックイベント）を記述する際は、専用のマネージャースクリプトを作成して一括管理する方法が推奨されます。以下のC#スクリプトは、メニュー全体のボタン操作を安全かつ拡張性高く制御するための標準的なテンプレートです。

using UnityEngine; using UnityEngine.UI; public class MenuController : MonoBehaviour { [Header("UI Panels")] [SerializeField] private GameObject titlePanel; [SerializeField] private GameObject optionsPanel; public void OnStartButtonClicked() { Debug.Log("ゲームを開始します"); } public void OnOptionsButtonClicked() { titlePanel.SetActive(false); optionsPanel.SetActive(true); } public void OnBackButtonClicked() { optionsPanel.SetActive(false); titlePanel.SetActive(true); } public void OnQuitButtonClicked() { UnityEditor.EditorApplication.isPlaying = false; #else Application.Quit(); #endif } } 

作成したスクリプトをシーン上の空のGameObject（例: `MenuManager`）にアタッチし、Buttonコンポーネントの「On Click ()」リストにそのオブジェクトをドラッグ＆ドロップします。プルダウンメニューから該当するメソッド（例: `MenuController.OnStartButtonClicked`）を登録すれば、ノーコード感覚で確実なイベント連携が完了します。

【画面遷移】SceneManagerを活用したタイトル画面からゲーム本編への切り替え

タイトル画面の「START」ボタンを押した後にゲームプレイ用のシーンへ移行させるには、Unity標準のUnityEngine.SceneManagement名前空間を利用します。シーンを切り替える前に、メニューバーの「File > Build Settings」を開き、「Scenes In Build」に対象となるすべてのシーン（タイトル用シーン、メインゲームシーンなど）をドラッグ＆ドロップして登録しておく作業を忘れてはなりません。

即座にシーンを切り替える同期読み込みと、ローディング画面を挟みながら裏でデータを読み込む非同期読み込み（Async）の2つの手法が存在します。小規模なシーンであれば `SceneManager.LoadScene("MainGameScene");` の1行で完結しますが、ロード時間が数秒以上かかる本格的なプロジェクトでは、ゲームがフリーズしたように見えないようLoadSceneAsyncを活用したローディングバーの実装が標準的です。

using System.Collections; using UnityEngine; using UnityEngine.SceneManagement; using UnityEngine.UI; public class SceneLoader : MonoBehaviour { [SerializeField] private Slider progressBar; [SerializeField] private GameObject loadingScreen; public void LoadScene(string sceneName) { StartCoroutine(LoadSceneAsyncCoroutine(sceneName)); } private IEnumerator LoadSceneAsyncCoroutine(string sceneName) { loadingScreen.SetActive(true); AsyncOperation operation = SceneManager.LoadSceneAsync(sceneName); while (!operation.isDone) { float progress = Mathf.Clamp01(operation.progress / 0.9f); if (progressBar != null) { progressBar.value = progress; } yield return null; } } } 

【実践機能】Time.timeScaleを活用したポーズ画面の実装方法

ゲームプレイ中にESCキーやメニューボタンを押してゲームを一時停止させる「ポーズ画面」は、アクションやRPGにおいて不可欠なシステムです。Unityにおけるポーズ機能の実装は、時間の流れを制御するTime.timeScaleの変更と、UIパネルの表示・非表示の切り替えを連動させるのが基本設計となります。

ポーズ状態を制御するスクリプトでは、キーボード入力（`Input.GetKeyDown(KeyCode.Escape)` または新Input SystemのAction）を監視し、フラグの反転とともに `Time.timeScale = 0f;` を適用してゲーム内の物理演算やタイマーを停止させます。メニューを閉じてゲームへ復帰する際は必ず `Time.timeScale = 1f;` に戻す処理を徹底しなければ、シーン遷移後もゲームが停止したままになる重大なバグの原因となります。

using UnityEngine; public class PauseMenuManager : MonoBehaviour { [SerializeField] private GameObject pauseMenuUI; private bool isPaused = false; void Update() { if (Input.GetKeyDown(KeyCode.Escape)) { if (isPaused) { Resume(); } else { Pause(); } } } public void Resume() { pauseMenuUI.SetActive(false); Time.timeScale = 1f; isPaused = false; } public void Pause() { pauseMenuUI.SetActive(true); Time.timeScale = 0f; isPaused = true; } } 

注意点として、ポーズ画面内でもUIアニメーションを動かしたい場合は、AnimatorのUpdate Modeを「Unscaled Time」に設定するか、DOTweenなどのライブラリで `.SetUpdate(true)` を指定する必要があります。これにより、ゲーム世界の時間を止めたままUIだけを滑らかに動かす演出が可能になります。

【演出と設定】パネル切り替えアニメーションとゲーム設定オプション画面の構築

単調な表示切り替えにとどまらず、UIパネルがスライドインしたりフェードインするアニメーションを加えることで、メニュー画面の高級感は格段に跳ね上がります。Unityの標準機能であるCanvas Groupコンポーネントを使用すると、パネル配下の全オブジェクトに対して一括でAlpha（不透明度）やInteractable（操作可否）を制御できるため、フェードイン処理を極めて軽量に実装できます。

また、プレイヤー体験を支える重要要素が「音量調整」や「グラフィック設定」を行うオプション画面です。音量設定では、BGMやSEのAudio Sourceを直接操作するのではなく、Audio Mixerを作成してMaster・BGM・SEの各グループ音量をExposed Parameterとして公開し、UIのSliderコンポーネントからデシベル換算（`Mathf.Log10(val) * 20`）で制御するのが現場のベストプラクティスです。

using UnityEngine; using UnityEngine.Audio; using UnityEngine.UI; public class SettingsMenu : MonoBehaviour { [SerializeField] private AudioMixer audioMixer; [SerializeField] private Slider bgmSlider; public void SetBGMVolume(float volume) { float db = Mathf.Log10(Mathf.Max(volume, 0.0001f)) * 20f; audioMixer.SetFloat("BGMVolume", db); PlayerPrefs.SetFloat("BGM_VOL_KEY", volume); } } 

調整したパラメータはPlayerPrefsを用いてローカルに保存することで、次回起動時にもプレイヤーの設定が保持される実用的なメニューシステムが完成します。

【UI選定基準】uGUIとUI Toolkitの使い分けとメニューUIデザインのコツ

UnityのUI開発基盤には、長年使われてきた実績豊富なuGUIに加え、Web技術（HTML/CSS）に近いアーキテクチャを持つUI Toolkitが本格普及しています。どちらを選択すべきかは、プロジェクトの規模とチーム構成によって明確に分かれます。

インディーゲーム開発や小規模プロトタイプ、直感的にシーンビュー上でドラッグ配置したい場合は、アセットストアのプラグインや知見が豊富なuGUIが最適です。一方、大規模開発やエディタ拡張との共通化、スタイルシート（USS）によるデザインの分離管理や描画パフォーマンスの最大化を狙う場合はUI Toolkitが威力を発揮します。

メニュー画面全体のデザイン性を高める上では、以下のレイアウト原則を意識することが成功の近道です。

• 視線誘導の徹底（Fの法則・Zの法則）：タイトル画面では左上から右下へ視線が流れるため、ロゴを上部に、メインボタン（START）を視線の終着点付近に配置する。
• フォントと配色の統一：ゲームの世界観に合ったフォントを選定し、アクセントカラーは決定・強調ボタンだけに絞って使用する。
• 十分なクリック・タップ領域の確保：モバイル対応時は特に、ボタンのコライダーやRect領域を最低でも48×48px以上に設定し、誤操作を防ぐ。
• 明確なフィードバック：ボタン押下時のサウンド効果（SE）とわずかなスケールダウン演出を加えるだけで、操作の手応えが劇的に向上する。

【Unity メニュー画面 作り方】に関するよくある質問（FAQ）

Q1：ボタンを押してもOnClickイベントが反応しない原因は何ですか？
A1：最も多い原因は、ヒエラルキー上に「EventSystem」が存在しないケース、または前面にある別の透明なImage（Raycast Targetが有効な背景パネルなど）がクリック判定を遮っているケースです。また、Time.timeScaleが0のときに一部のアニメーション遷移が止まっている可能性もあります。

Q2：異なる解像度のスマホ実機でUIが極端に小さくなる・はみ出る場合の修正方法は？
A2：CanvasコンポーネントのCanvas Scalerを確認してください。UI Scale Modeを「Scale With Screen Size」に変更し、Reference Resolutionに基準解像度を設定した上で、各ボタンのRect Transformのアンカー（Anchor Presets）を適切に親の四隅や中央に固定することで解決します。

Q3：メニュー画面のBGMがシーン遷移時に途切れてしまいます。どうすれば維持できますか？
A3：BGMを再生しているGameObjectに `DontDestroyOnLoad(gameObject);` を記述したスクリプトをアタッチすることで、シーンを跨いでも破棄されずに音楽を再生し続けることができます。

まとめ：直感的で洗練されたメニュー画面でゲームの完成度を高めよう

メニュー画面の構築は、単なるUIの配置作業にとどまらず、プレイヤーが快適にゲームの世界へ没入するための架け橋となる重要な工程です。破綻のないCanvas設計とアンカー設定を押さえた上で、スクリプトによる確実なシーン遷移やポーズ制御を組み込むことで、商用レベルの堅牢なメニューシステムが実現します。

視覚的な演出やクリック音などの細かなフィードバックを積み重ね、触れていて気持ちの良いメニュー画面を作り上げてください。 （出典: unity メニュー 画面 作り方（Yahoo!ニュース））