UnityでUIを作っていると、描画順が思った通りにならないことがありますよね。
ボタンが背景の後ろに隠れてしまったり、テキストが画像の下に表示されてしまったり。
この記事では、Canvas内の描画順がどのように決まるかを解説します。
初心者が混乱しやすいポイントを整理し、トラブルを防ぐ設計視点として説明していきましょう。
- Canvas内の描画順の仕組み
- 描画順が崩れる原因
- Hierarchy順と描画順の関係
- 描画順を制御する方法
- ベストプラクティス
Canvas内の描画順は、Hierarchy上の順序で決まります。
順序を意識することで、描画順の問題は解決できますよ。
＼読むだけで終わらせない！実際にゲームを作って実力をつけよう／
トレンド×入門に最適
Unity ノンフィールドRPG
＋スレスパ風JRPG講座
Unity6対応・スマホ化対応の最新カリキュラム。今もっとも人気のデッキ構築型ゲームをJRPGと組み合わせて実装。初心者が最初に選ぶ一本として最適です。
王道アクションに挑戦
Unity 2Dアクションゲーム
の作り方講座（ロックマン風）
ロックマン風の本格横スクロールACTをスマホ化・広告実装まで対応。7ステージ＋ラスボスという市販ゲームに近い本格構成で、リリースまで見据えて作れます。
3D入門に最適
ゼルダ風3Dアクションゲーム
の作り方講座
ゼルダの伝説・モンハン・原神のような3Dアクションをスマホ対応で作れる入門講座。初心者でも全16回でしっかり3D開発の基礎を習得できます。
あなたのオリジナルゲーム、今年こそ完成させませんか？
RPG・アクション・ホラー…Unityで本格ゲームを作りたい人のための学習サイトです。
実際に完成するゲームを題材に、
ソースコード・素材・プロジェクト一式をすべて公開。
仕事や学校の合間の1〜2時間でも、
「写経→改造」で自分のゲームまで作りきれる環境です。
Canvas内の描画順の仕組み
Canvas内のUI要素は、Hierarchy上の順序で描画されます。
上から順番に描画されるため、下にある要素が上に表示されるという仕組みですね。
描画順の基本ルール
Canvas内の描画順は、以下のルールで決まります：
- Hierarchy上の順序：上から順番に描画される
- 後から描画されたものが上：下にある要素が、上に表示される
- 同じ階層内での順序：同じ親の子要素同士での順序
Hierarchy上の順序が、そのまま描画順になるということを覚えておきましょう。
具体例
具体例を挙げて説明します。
以下のようなHierarchy構造があるとします：
- Canvas
- └─ Background（画像）
- └─ Button（ボタン）
- └─ Text（テキスト）
この場合、描画順は Background → Button → Text の順になり、Textが一番上に表示されます。
下にある要素が上に表示されるというのが、Unityの描画順の特徴です。
描画順が崩れる原因
描画順が崩れる原因は、いくつかあります。
よくある原因を説明しましょう。
原因1：Hierarchy上の順序が適切でない
Hierarchy上の順序が適切でない場合、意図した描画順にならないことがあります。
例えば、ボタンを背景の上に表示したいのに、Hierarchy上でボタンが背景の上（前に）あると、背景が上に表示されてしまいます。
Hierarchy上の順序を調整することで、描画順を制御できます。
原因2：動的に生成されたUI要素の順序
スクリプトで動的にUI要素を生成した場合、生成順が描画順に影響します。
後から生成された要素が、上に表示されるというわけですね。
動的に生成する場合は、生成順を意識する必要があります。
動的に生成する場合も、生成順を意識することで、描画順を制御できます。
原因3：親オブジェクトの順序
親オブジェクトの順序も、描画順に影響します。
親オブジェクトの順序が変わると、その子要素の描画順も変わってしまいます。
親オブジェクトの順序を意識することで、子要素の描画順も制御できます。
Hierarchy順と描画順の関係
Hierarchy上の順序と描画順の関係を、より詳しく説明します。
階層構造の影響
Hierarchyの階層構造も、描画順に影響します。
同じ親の子要素同士では、Hierarchy上の順序が描画順になります。
異なる親の子要素同士では、親オブジェクトの順序が優先されます。
階層構造を理解することで、描画順をより細かく制御できます。
RectTransformの順序
RectTransformコンポーネントにも、順序に関する設定があります。
ただし、Canvas内での描画順には、Hierarchy上の順序が最も重要です。
RectTransformの設定よりも、Hierarchy上の順序を優先して考えると良いでしょう。
Hierarchy上の順序を最優先で考えて、描画順を制御しましょう。
描画順を制御する方法
描画順を制御する方法を説明します。
方法1：Hierarchy上の順序を変更する
最も簡単な方法は、Hierarchy上の順序を変更することです。
以下の手順で行います：
- Hierarchyで、UI要素を選択
- ドラッグ&ドロップで、順序を変更
- 下に移動させると、上に表示される
Hierarchy上の順序を変更することで、描画順を簡単に制御できます。
方法2：Transform.SetAsLastSiblingを使う
スクリプトで描画順を制御する場合、Transform.SetAsLastSiblingというメソッドを使えます。
このメソッドを使うと、オブジェクトをHierarchyの最後に移動できます。
つまり、一番上に表示されるようになります。
スクリプトで描画順を制御する場合、SetAsLastSiblingが便利です。
方法3：複数のCanvasを使う
複数のCanvasを使う方法もあります。
重要なUIを別のCanvasに分けることで、描画順をより確実に制御できます。
CanvasのSort Orderを設定することで、Canvas間の表示順も制御できます。
複数のCanvasを使うことで、描画順をより柔軟に制御できます。
ベストプラクティス
描画順を管理するためのベストプラクティスを説明します。
ベストプラクティス1：Hierarchyを整理する
Hierarchyを整理することで、描画順を管理しやすくなります。
以下のような構成がおすすめです：
- Canvas
- └─ Background（背景）
- └─ Content（コンテンツ）
- └─ Buttons（ボタン）
- └─ Text（テキスト）
親オブジェクトで分類することで、描画順を管理しやすくなります。
Hierarchyを整理することで、描画順の管理がしやすくなります。
ベストプラクティス2：命名規則を統一する
UI要素の命名規則を統一することで、Hierarchyを整理しやすくなります。
以下のような命名がおすすめです：
- Background_Image：背景画像
- Button_Start：スタートボタン
- Text_Score：スコアテキスト
命名規則を統一することで、要素を探しやすくなります。
命名規則を統一することで、UI設計が分かりやすくなります。
ベストプラクティス3：コメントを残す
複雑なUI構造の場合は、コメントを残すこともおすすめです。
空のGameObjectを作成して、コメントとして使う方法もあります。
コメントを残すことで、後から見返した時に構造を理解しやすくなります。
コメントを残すことで、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の描画順が崩れる原因を解説しました。
重要なポイントをおさらいします。
- Canvas内の描画順はHierarchy上の順序で決まり、上から順番に描画され、下にある要素が上に表示される
- 描画順が崩れる原因として、Hierarchy上の順序が適切でない、動的に生成されたUI要素の順序、親オブジェクトの順序などがある
- Hierarchy順と描画順の関係として、階層構造も影響し、Hierarchy上の順序が最優先で考えられる
- 描画順を制御する方法として、Hierarchy上の順序を変更する、Transform.SetAsLastSiblingを使う、複数のCanvasを使うなどの方法がある
- ベストプラクティスとして、Hierarchyを整理する、命名規則を統一する、コメントを残すことで、描画順の管理がしやすくなる
Canvas内の描画順を理解すれば、UIの表示問題は解決できます。
Hierarchy上の順序を意識して、分かりやすいUI設計をしていきましょう。
Unity入門の森で、Canvasの描画順を含めたUI設計の基礎として、Unityの基礎を体系的に学べます。
トラブルを防ぐ設計視点として、ぜひチェックしてください。
あなたのオリジナルゲーム、今年こそ完成させませんか？
RPG・アクション・ホラー…Unityで本格ゲームを作りたい人のための学習サイトです。
実際に完成するゲームを題材に、
ソースコード・素材・プロジェクト一式をすべて公開。
仕事や学校の合間の1〜2時間でも、
「写経→改造」で自分のゲームまで作りきれる環境です。
コメント