UnityでUIを作っていると、要素が重なってしまったり、消えてしまったりすることがありますよね。
これは、Canvasのレイヤー設定が原因かもしれません。
この記事では、Canvasのレイヤー設定によってUIが重なったり消えたりする理由を解説します。
Sorting Layerや描画順との関係を整理し、UI設計の基礎として説明していきましょう。
- Canvasレイヤーの仕組み
- UIが重なる原因
- Sorting Layerとの関係
- 描画順の制御方法
- 対処法とベストプラクティス
Canvasレイヤーの設定は、UI設計で重要な要素です。
設定を理解すれば、UIの重なり問題は解決できますよ。
＼読むだけで終わらせない！実際にゲームを作って実力をつけよう／
トレンド×入門に最適
Unity ノンフィールドRPG
＋スレスパ風JRPG講座
Unity6対応・スマホ化対応の最新カリキュラム。今もっとも人気のデッキ構築型ゲームをJRPGと組み合わせて実装。初心者が最初に選ぶ一本として最適です。
王道アクションに挑戦
Unity 2Dアクションゲーム
の作り方講座（ロックマン風）
ロックマン風の本格横スクロールACTをスマホ化・広告実装まで対応。7ステージ＋ラスボスという市販ゲームに近い本格構成で、リリースまで見据えて作れます。
3D入門に最適
ゼルダ風3Dアクションゲーム
の作り方講座
ゼルダの伝説・モンハン・原神のような3Dアクションをスマホ対応で作れる入門講座。初心者でも全16回でしっかり3D開発の基礎を習得できます。
あなたのオリジナルゲーム、今年こそ完成させませんか？
RPG・アクション・ホラー…Unityで本格ゲームを作りたい人のための学習サイトです。
実際に完成するゲームを題材に、
ソースコード・素材・プロジェクト一式をすべて公開。
仕事や学校の合間の1〜2時間でも、
「写経→改造」で自分のゲームまで作りきれる環境です。
Canvasレイヤーの仕組み
Unityでは、複数のCanvasを配置することができます。
各Canvasは、独立したレイヤーとして機能します。
複数のCanvas
Unityでは、複数のCanvasをシーンに配置できます。
以下のような用途で使われます：
- UIの分類：メニューUI、ゲーム内UI、ポップアップUIなど
- 表示順の制御：どのUIを前に表示するかを制御
- 機能の分離：機能ごとにCanvasを分ける
複数のCanvasを使うことで、UIを分類して管理できます。
Sorting LayerとSort Order
Canvasには、Sorting LayerとSort Orderという設定があります。
これらの設定により、Canvasの表示順を制御できます。
- Sorting Layer：Canvasを分類するレイヤー
- Sort Order：同じSorting Layer内での表示順（数値が大きいほど前に表示）
これらの設定により、複数のCanvasの表示順を制御できます。
UIが重なる原因
UIが重なってしまう原因は、いくつかあります。
よくある原因を説明しましょう。
原因1：複数のCanvasのSort Orderが同じ
複数のCanvasのSort Orderが同じ場合、表示順が不安定になることがあります。
同じSort OrderのCanvasがあると、どちらが前に表示されるか分からなくなってしまいます。
各Canvasに異なるSort Orderを設定することで、表示順を明確にできます。
原因2：Sorting Layerの設定が適切でない
Sorting Layerの設定が適切でない場合、意図した表示順にならないことがあります。
Canvasを分類するSorting Layerを適切に設定し、各Canvasに適切なSort Orderを設定する必要があります。
Sorting LayerとSort Orderを適切に設定することで、UIの重なりを制御できます。
原因3：Canvas内のUI要素の順序
同じCanvas内でも、UI要素の順序が表示順に影響します。
Hierarchy上の順序が、描画順に影響する場合があります。
下にある要素が、上に表示されるというわけですね。
Hierarchy上の順序を調整することで、同じCanvas内での表示順を制御できます。
Sorting Layerや描画順との関係
Canvasのレイヤー設定と、Sorting Layerや描画順の関係を説明します。
CanvasのSorting Layer
Canvasには、Sorting Layerという設定があります。
これは、2DオブジェクトのSorting Layerとは別のものです。
Canvas用のSorting Layerは、Canvas同士の表示順を制御するために使われます。
CanvasのSorting Layerと、2DオブジェクトのSorting Layerは別物なので、混同しないように注意しましょう。
描画順の判定
Canvasの描画順は、以下の順序で判定されます：
- Sorting Layerの順序（リストの上にあるものが先に描画）
- 同じSorting Layer内では、Sort Orderの値（小さい値が先に描画）
- 同じSort Orderでは、Hierarchy上の順序
この順序により、どのCanvasが前に表示されるかが決まります。
2Dオブジェクトとの関係
Canvasと2Dオブジェクト（スプライトなど）の描画順は、別々に管理されます。
Canvasは通常、最後にレンダリングされるため、2Dオブジェクトの前に表示されます。
ただし、World SpaceのCanvasを使う場合は、3D空間内に配置されるため、この限りではありません。
通常のCanvas（Screen Space）は、2Dオブジェクトよりも前に表示されます。
対処法とベストプラクティス
UIの重なりを解決する方法と、ベストプラクティスを説明します。
対処法1：Sort Orderを適切に設定する
各Canvasに、適切なSort Orderを設定しましょう。
以下のような設定がおすすめです：
- メインUI：Sort Order = 0
- ポップアップUI：Sort Order = 10
- ダイアログUI：Sort Order = 20
数値に余裕を持たせることで、後から追加するCanvasも適切な位置に配置できます。
Sort Orderを10や20など、間隔を空けて設定すると、後から調整しやすくなります。
対処法2：Sorting Layerを分類する
Canvasを分類するために、Sorting Layerを使いましょう。
以下のような分類がおすすめです：
- Default：通常のUI
- Popup：ポップアップUI
- Dialog：ダイアログUI
Sorting Layerで分類することで、Canvasを管理しやすくなります。
ベストプラクティス：Canvasの構成
UI設計のベストプラクティスとして、以下のような構成がおすすめです：
- メインCanvas：ゲーム中に常に表示されるUI（HPバー、スコアなど）
- メニューCanvas：メニュー画面のUI
- ポップアップCanvas：一時的に表示されるUI（アイテム取得通知など）
この構成により、UIを分類して管理できるようになります。
用途ごとにCanvasを分けることで、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のCanvasレイヤー設定について解説しました。
重要なポイントをおさらいします。
- Canvasレイヤーの仕組みとして、複数のCanvasを配置でき、Sorting LayerとSort Orderにより表示順を制御できる
- UIが重なる原因として、複数のCanvasのSort Orderが同じ、Sorting Layerの設定が適切でない、Canvas内のUI要素の順序などがある
- Sorting Layerや描画順との関係として、CanvasのSorting Layerは2Dオブジェクトとは別で、描画順はSorting Layer→Sort Order→Hierarchy順で判定される
- 対処法として、Sort Orderを適切に設定し、Sorting Layerで分類することで、UIの重なりを制御できる
- ベストプラクティスとして、用途ごとにCanvasを分けることで、UI設計が分かりやすくなる
Canvasレイヤーの設定を理解すれば、UIの重なり問題は解決できます。
適切な設定を心がけて、分かりやすいUI設計をしていきましょう。
Unity入門の森で、Canvasレイヤーを含めたUI設計の基礎として、Unityの基礎を体系的に学べます。
あなたのペースで、少しずつ進めていけば大丈夫です。
あなたのオリジナルゲーム、今年こそ完成させませんか？
RPG・アクション・ホラー…Unityで本格ゲームを作りたい人のための学習サイトです。
実際に完成するゲームを題材に、
ソースコード・素材・プロジェクト一式をすべて公開。
仕事や学校の合間の1〜2時間でも、
「写経→改造」で自分のゲームまで作りきれる環境です。
コメント