UnityでUIを作っていると、要素の描画順が思った通りにならないことがありますよね。
ボタンが背景の後ろに隠れてしまったり、テキストが画像の下に表示されてしまったり。
この記事では、UI描画順が決まる仕組みを解説します。
初心者が混乱しやすい設定を整理し、UI設計の基礎理解として説明していきましょう。
- UI描画順が決まる仕組み
- Hierarchy順と描画順の関係
- CanvasのSort Order
- 混乱しやすい設定
- 正しい制御方法
UIの描画順は、Hierarchy上の順序で決まります。
順序を意識することで、描画順を正しく制御できますよ。
＼読むだけで終わらせない！実際にゲームを作って実力をつけよう／
トレンド×入門に最適
Unity ノンフィールドRPG
＋スレスパ風JRPG講座
Unity6対応・スマホ化対応の最新カリキュラム。今もっとも人気のデッキ構築型ゲームをJRPGと組み合わせて実装。初心者が最初に選ぶ一本として最適です。
王道アクションに挑戦
Unity 2Dアクションゲーム
の作り方講座（ロックマン風）
ロックマン風の本格横スクロールACTをスマホ化・広告実装まで対応。7ステージ＋ラスボスという市販ゲームに近い本格構成で、リリースまで見据えて作れます。
3D入門に最適
ゼルダ風3Dアクションゲーム
の作り方講座
ゼルダの伝説・モンハン・原神のような3Dアクションをスマホ対応で作れる入門講座。初心者でも全16回でしっかり3D開発の基礎を習得できます。
あなたのオリジナルゲーム、今年こそ完成させませんか？
RPG・アクション・ホラー…Unityで本格ゲームを作りたい人のための学習サイトです。
実際に完成するゲームを題材に、
ソースコード・素材・プロジェクト一式をすべて公開。
仕事や学校の合間の1〜2時間でも、
「写経→改造」で自分のゲームまで作りきれる環境です。
UI描画順が決まる仕組み
UIの描画順は、どのように決まるのでしょうか。
仕組みを説明します。
基本的なルール
UIの描画順は、Hierarchy上の順序で決まります。
上から順番に描画されるため、下にある要素が上に表示されるという仕組みですね。
このルールを理解することが、描画順を制御する第一歩です。
Hierarchy上の順序が、そのまま描画順になるということを覚えておきましょう。
Canvas内での順序
Canvas内での描画順は、Hierarchy上の順序で決まります。
同じCanvas内の要素は、Hierarchy上の順序通りに描画されます。
下にある要素が、上に表示されるというわけですね。
Canvas内での描画順は、Hierarchy上の順序で決まります。
複数のCanvasがある場合
複数のCanvasがある場合、CanvasのSort Orderで表示順が決まります。
Sort Orderが大きいCanvasほど、前に表示されます。
Canvas内の要素は、各Canvas内でHierarchy上の順序で描画されます。
複数のCanvasがある場合、CanvasのSort Orderで表示順が決まります。
Hierarchy順と描画順の関係
Hierarchy上の順序と描画順の関係を、詳しく説明します。
順序の変更方法
Hierarchy上の順序を変更することで、描画順を制御できます。
以下の手順で行います：
- Hierarchyで、UI要素を選択
- ドラッグ&ドロップで、順序を変更
- 下に移動させると、上に表示される
Hierarchy上の順序を変更することで、描画順を簡単に制御できます。
階層構造の影響
Hierarchyの階層構造も、描画順に影響します。
同じ親の子要素同士では、Hierarchy上の順序が描画順になります。
異なる親の子要素同士では、親オブジェクトの順序が優先されます。
階層構造を理解することで、描画順をより細かく制御できます。
スクリプトでの制御
スクリプトで描画順を制御する場合、Transform.SetAsLastSiblingというメソッドを使えます。
このメソッドを使うと、オブジェクトをHierarchyの最後に移動できます。
つまり、一番上に表示されるようになります。
スクリプトで描画順を制御する場合、SetAsLastSiblingが便利です。
CanvasのSort Order
複数のCanvasがある場合、Sort Orderで表示順を制御します。
どのように設定すればいいのでしょうか。
Sort Orderの意味
Sort Orderは、Canvasの表示順を決める数値です。
数値が大きいほど、前に表示されます。
例えば、Sort Orderが10のCanvasは、Sort Orderが5のCanvasよりも前に表示されます。
Sort Orderを設定することで、複数のCanvasの表示順を制御できます。
Sort Orderの設定方法
Sort Orderの設定方法は、以下の通りです：
- Canvasを選択
- Inspectorで「Canvas」コンポーネントを確認
- 「Sort Order」の値を設定
UI用のCanvasには、大きい値を設定することをおすすめします。
Sort Orderを設定することで、複数のCanvasの表示順を制御できます。
推奨される設定
複数のCanvasを使う場合、以下のような設定がおすすめです：
- メインUI：Sort Order = 0
- ポップアップUI：Sort Order = 10
- ダイアログUI：Sort Order = 20
数値に余裕を持たせることで、後から追加するCanvasも適切な位置に配置できます。
数値に余裕を持たせることで、後から調整しやすくなります。
混乱しやすい設定
UIの描画順で、混乱しやすい設定を説明します。
設定1：Hierarchy上の順序と視覚的な順序が逆
Hierarchy上の順序と視覚的な順序が逆になることが、混乱の原因になることがあります。
Hierarchy上で上にある要素が、画面では下に表示されます。
この逆転が、初心者には分かりにくい場合があります。
Hierarchy上の順序と視覚的な順序が逆になることを理解しておきましょう。
設定2：親オブジェクトの順序
親オブジェクトの順序も、描画順に影響します。
親オブジェクトの順序が変わると、その子要素の描画順も変わってしまいます。
この関係性が、初心者には分かりにくい場合があります。
親オブジェクトの順序を意識することで、子要素の描画順も制御できます。
設定3：動的に生成された要素
スクリプトで動的にUI要素を生成した場合、生成順が描画順に影響します。
後から生成された要素が、上に表示されるというわけですね。
動的に生成する場合は、生成順を意識する必要があります。
動的に生成する場合も、生成順を意識することで、描画順を制御できます。
記事を読んで「作ってみたい！」と思ったら！人気ゲームを題材にした講座で実力をつけよう
知識を読むだけで終わらせるのはもったいない。実際に手を動かしてゲームを1本完成させることで、理解が一気に深まります。人気タイトルをモデルにした講座で、ゲーム開発の第一歩を踏み出しましょう。
Unity ノンフィールドRPG＋スレスパ風JRPG講座【Unity6対応！トレンドのデッキ構築×JRPGをスマホ向けに作れる！】
- Unity6対応・スマホ化対応で最新環境のゲーム開発が学べる
- Slay the Spire風のデッキ構築システム×JRPGの組み合わせを実装
- 初心者でも取り組みやすい丁寧な解説構成
- ノンフィールドRPGとデッキ構築JRPGの2つを合わせて学ぶのがおすすめ
Unity ノンフィールドRPGの作り方講座＋Slay the Spire風デッキ構築JRPGの作り方講座は、今もっともトレンドのデッキ構築型ゲームシステムをJRPGと組み合わせて実装する方法を学べる講座です。
Unity6対応・スマホ化対応の最新カリキュラムで、コラムやTIPSで読んで「なるほど」と思った知識を、実際に動くゲームとして形にする体験ができます。
「Slay the Spireみたいなゲームを自分でも作ってみたい！」という人の最初の一歩として最適な講座です。
Unity6対応・スマホ化対応の最新カリキュラム
トレンドのデッキ構築×JRPGを最速で実装しよう
→ スレスパ風デッキ構築JRPG講座を見てみる
スマホ対応の最新環境で、ゲーム開発の第一歩を踏み出そう！
Unity 2Dアクションゲームの作り方講座（ロックマン風）【全16回！スマホ化・広告実装まで対応した本格横スクロールACTを作れる！】
- ロックマン・マリオ・カービィのような横スクロールACTをゼロから開発
- 7ステージ＋ラスボスステージの市販ゲームに近い本格的なゲーム設計
- スマホ化・AdMob広告実装まで対応してリリースまで見据えた構成
- 敵AI15体・多彩なマップギミック・武器システムを完全実装
- 完全オリジナルゲームをアセット不使用で素材提供付きで制作
Unity 2Dアクションゲームの作り方講座（ロックマン風）は、ロックマン・スーパーマリオ・星のカービィのような2D横スクロールアクションゲームを開発できるようになる本格的な講座です。
TIPSやコラムで学んだ当たり判定・物理挙動・敵AIの知識を、実際のゲームコードとして実装する体験が全16回に凝縮されています。スマホ化・広告実装まで対応しているため、作って終わりではなくリリースまで見据えた実践スキルが身につきます。
「読んで理解した知識を、動くゲームとして形にしたい」という人に強くおすすめの一本です。
スマホ化・広告実装まで対応した本格横スクロールACT
ロックマン風の2Dアクションゲームをリリースまで作り上げよう
→ 2Dアクションゲームの作り方講座を見てみる
広告収益まで視野に入れた実践スキルを今すぐ手に入れよう！
ゼルダ風3Dアクションゲームの作り方講座【全16回！初心者でも3Dアクションがスマホ対応で作れる！】
- ゼルダの伝説・モンハン・原神のような3Dアクションをゼロから開発
- 初心者でも取り組みやすい丁寧な解説構成
- スマホ化対応で実機で動かせるゲームが完成
- アセットを使った実践的なゲーム開発手法が身につく
- 画像・動画・全ソースコード公開の充実したサポート
ゼルダ風3Dアクションゲームの作り方講座は、ゼルダの伝説・モンハン・原神のような本格的な3Dアクションゲームを作りたい人におすすめの入門講座です。
コラム・TIPSで「3Dゲームはなんとなく難しそう」と感じていた人でも、全16回の丁寧な解説で確実に完成まで到達できます。スマホ化対応で実機で動かせるため、作った達成感がひときわ大きい講座です。
「3Dゲームの仕組みを理解した次は、実際に自分で作ってみたい」という人の最初の一歩として最適です。
初心者でも3Dアクションがスマホ対応で完成する
ゼルダ風3Dアクションゲームで3D開発の第一歩を踏み出そう
→ ゼルダ風3Dアクションゲームの作り方講座を見てみる
3D開発の壁を一気に突破！スマホで動くオリジナルゲームを完成させよう！
まとめ
この記事では、UnityでUIの描画順を正しく制御する方法を解説しました。
重要なポイントをおさらいします。
- UI描画順が決まる仕組みとして、Hierarchy上の順序で決まり、上から順番に描画され、下にある要素が上に表示される
- Hierarchy順と描画順の関係として、順序を変更することで描画順を制御でき、階層構造も影響し、スクリプトで制御も可能
- CanvasのSort Orderとして、複数のCanvasがある場合にSort Orderで表示順を制御し、数値が大きいほど前に表示される
- 混乱しやすい設定として、Hierarchy上の順序と視覚的な順序が逆、親オブジェクトの順序、動的に生成された要素などの問題がある
- 描画順の仕組みを理解することで、UIの描画順を正しく制御できるようになる
UIの描画順は、Hierarchy上の順序で決まります。
順序を意識することで、描画順を正しく制御できますよ。
Unity入門の森で、UI設計の基礎理解として、UI描画順を含めたUnityの基礎を体系的に学べます。
初心者が混乱しやすい設定も、丁寧に解説されていますよ。
あなたのオリジナルゲーム、今年こそ完成させませんか？
RPG・アクション・ホラー…Unityで本格ゲームを作りたい人のための学習サイトです。
実際に完成するゲームを題材に、
ソースコード・素材・プロジェクト一式をすべて公開。
仕事や学校の合間の1〜2時間でも、
「写経→改造」で自分のゲームまで作りきれる環境です。
コメント