UnityでUIの表示順が思い通りにならない原因と解決策

UnityでUIを作っていると、表示順が思い通りにならないことがありますよね。

ボタンが背景の後ろに隠れてしまったり、テキストが画像の下に表示されてしまったり。

この記事では、UIの表示順が崩れる原因をCanvas設定・Sort Order・Hierarchyの観点から整理します。

初心者が混乱しやすいポイントを具体例で解説し、2D/3D混在時の注意点も触れていきましょう。

ゲーム開発講師

UIの表示順が崩れる原因は、いくつかあります。

Canvas設定、Sort Order、Hierarchyを確認してみましょう。

＼読むだけで終わらせない！実際にゲームを作って実力をつけよう／

トレンド×入門に最適

Unity ノンフィールドRPG
＋スレスパ風JRPG講座

★★★★★ (Unity6対応)

Unity6対応・スマホ化対応の最新カリキュラム。今もっとも人気のデッキ構築型ゲームをJRPGと組み合わせて実装。初心者が最初に選ぶ一本として最適です。

講座を見てみる ＼スマホ対応！初心者から最速で1本完成させる／

王道アクションに挑戦

Unity 2Dアクションゲーム
の作り方講座（ロックマン風）

★★★★★ (スマホ化・広告実装)

ロックマン風の本格横スクロールACTをスマホ化・広告実装まで対応。7ステージ＋ラスボスという市販ゲームに近い本格構成で、リリースまで見据えて作れます。

講座を見てみる ＼入学前に1本完成させてスタートダッシュ！／

3D入門に最適

ゼルダ風3Dアクションゲーム
の作り方講座

★★★★★ (スマホ化対応)

ゼルダの伝説・モンハン・原神のような3Dアクションをスマホ対応で作れる入門講座。初心者でも全16回でしっかり3D開発の基礎を習得できます。

講座を見てみる ＼初心者でも3Dアクションが作れる！／

UIの表示順が崩れる原因

UIの表示順が崩れる原因は、いくつかあります。

どのような原因があるのでしょうか。

原因の分類

UIの表示順が崩れる原因は、以下のように分類できます：

• Canvas設定の問題：CanvasのRender Modeや設定の問題
• Sort Orderの問題：CanvasのSort Orderが適切でない
• Hierarchyの問題：Hierarchy上の順序が適切でない

原因を分類することで、問題を特定しやすくなります。

確認すべきポイント

UIの表示順が崩れる場合、以下のポイントを確認しましょう：

• CanvasのRender Mode：適切なRender Modeが設定されているか
• CanvasのSort Order：Sort Orderが適切に設定されているか
• Hierarchy上の順序：UI要素の順序が適切か

これらのポイントを確認することで、原因を特定できます。

Canvas設定の問題

Canvas設定が原因の場合があります。

どのような問題があるのでしょうか。

問題1：Render Modeが適切でない

CanvasのRender Modeが適切でない場合、表示順が崩れることがあります。

「Screen Space – Overlay」モードでは、UIが最前面に表示されます。

「Screen Space – Camera」や「World Space」モードの場合、3Dオブジェクトの後ろに表示されることがあります。

Render Modeを確認することで、問題が解決することがあります。

問題2：複数のCanvasの設定が不統一

複数のCanvasがある場合、設定が不統一だと表示順が崩れることがあります。

各CanvasのRender ModeやSort Orderが異なっている場合、表示順が予測できなくなります。

統一した設定にすることで、表示順を制御しやすくなります。

設定を統一することで、問題が解決することがあります。

問題3：Canvas Scalerの設定

Canvas Scalerの設定が原因の場合もあります。

Canvas Scalerは、画面サイズに応じたUIのスケーリングを制御します。

設定が適切でない場合、UIの表示が崩れることがあります。

Canvas Scalerの設定を確認することで、問題が解決することがあります。

【ゲームの作り方講座プレゼント中！】

Sort Orderの問題

Sort Orderが原因の場合があります。

どのような問題があるのでしょうか。

問題1：Sort Orderが同じ

複数のCanvasのSort Orderが同じ場合、表示順が不安定になることがあります。

同じSort OrderのCanvasがあると、どちらが前に表示されるか分からなくなってしまいます。

各Canvasに異なるSort Orderを設定することで、表示順を明確にできます。

各Canvasに異なるSort Orderを設定することで、問題が解決します。

問題2：Sort Orderの値が適切でない

Sort Orderの値が適切でない場合、意図した表示順にならないことがあります。

UI用のCanvasのSort Orderを大きく設定することで、UIを最前面に表示できます。

Sort Orderが0の場合、他のCanvasの後ろに表示される可能性があります。

Sort Orderの値を適切に設定することで、問題が解決します。

問題3：Sort Orderの間隔が狭い

Sort Orderの間隔が狭すぎる場合、後から追加するCanvasを配置しにくくなります。

Sort Orderを10や20など、間隔を空けて設定することで、後から調整しやすくなります。

これにより、表示順を柔軟に制御できます。

Sort Orderの間隔を空けることで、後から調整しやすくなります。

Hierarchyの問題

Hierarchyが原因の場合があります。

どのような問題があるのでしょうか。

問題1：Hierarchy上の順序が適切でない

Hierarchy上の順序が適切でない場合、意図した表示順にならないことがあります。

Canvas内での描画順は、Hierarchy上の順序で決まります。

下にある要素が、上に表示されるというわけですね。

Hierarchy上の順序を調整することで、描画順を制御できます。

問題2：親オブジェクトの順序

親オブジェクトの順序も、描画順に影響します。

親オブジェクトの順序が変わると、その子要素の描画順も変わってしまいます。

親オブジェクトの順序を意識することで、子要素の描画順も制御できます。

親オブジェクトの順序を意識することで、描画順を制御できます。

問題3：動的に生成された要素

スクリプトで動的にUI要素を生成した場合、生成順が描画順に影響します。

後から生成された要素が、上に表示されるというわけですね。

動的に生成する場合は、生成順を意識する必要があります。

動的に生成する場合も、生成順を意識することで、描画順を制御できます。

2D/3D混在時の注意点

2Dと3Dが混在する場合の注意点を説明します。

注意点1：CanvasのRender Mode

2Dと3Dが混在する場合、CanvasのRender Modeに注意が必要です。

「Screen Space – Overlay」モードでは、UIが常に最前面に表示されます。

「Screen Space – Camera」や「World Space」モードの場合、3Dオブジェクトの後ろに表示されることがあります。

Render Modeを適切に設定することで、2D/3D混在時も問題なく表示できます。

注意点2：2Dオブジェクトとの関係

2Dオブジェクト（スプライト）とUIの関係について説明します。

2Dオブジェクトは、Sorting LayerとOrder in Layerで表示順を制御します。

一方、Canvasは、Sort Orderで表示順を制御します。

通常、Canvasは2Dオブジェクトよりも後に描画されるため、UIが最前面に表示されます。

2DオブジェクトとUIの関係を理解することで、表示順を制御できます。

注意点3：3Dオブジェクトとの関係

3DオブジェクトとUIの関係について説明します。

「Screen Space – Overlay」モードでは、UIが常に最前面に表示されます。

「Screen Space – Camera」や「World Space」モードの場合、3Dオブジェクトの位置によって表示順が変わります。

3DオブジェクトとUIの関係を理解することで、表示順を制御できます。

まとめ

この記事では、UnityでUIの表示順が思い通りにならない原因と解決策を解説しました。

重要なポイントをおさらいします。

UIの表示順が崩れる原因は、いくつかあります。

Canvas設定、Sort Order、Hierarchyを確認してみましょう。

Unity入門の森で、UI設計の基礎として、初心者が混乱しやすいポイントを具体例で解説し、UI表示順を含めたUnityの基礎を体系的に学べます。

あなたのペースで、少しずつ進めていけば大丈夫です。