こんにちわ、Unityエンジニアのオオバです。

やっぱりUnityのUI (以下:uGUI) は難しい。
感覚的に配置できないんですよね。

「アンカー」と「ピボット」が大事で、
なんとなく理解はした。でもうまく配置できない。

実は、アンカーとピボットに加えて、
もう1つ重要な要素があるんです。

その3要素を覚えれば、
トラブルが起きたとしても対処できるようになります。

本記事はUnityをつかうUIデザイナー向け。
思い通りにUIレイアウトできないときの対処法について解説します。

uGUIの親階層をチェックすると解決する

結論を簡単にまとめます。

uGUIで重要なのは、次の3つ。

  1. アンカー
  2. ピボット
  3. 親階層

この3本柱を理解することで
uGUIでのレイアウトは怖いものがなくなります。

「親階層」は初登場。
今までUIの解説記事には、わかりづらくなるため
あえて除外してきました。

今回は 「親階層」 を重点的に解説します。
余すとこなく親階層を堪能していただけます。

アンカーとピボットについては
過去記事で詳しく解説していますので、そちらをどうぞ

では詳細の解説に入ります。

この記事の内容

UIレイアウトで思い通りにいかない大半の原因は親階層の設定

Unity UI歴8年のオオバ的に、
うまくUIレイアウトできない原因の多くは 親階層の設定 です。

親階層が重要な理由は、
「親階層の幅と高さが子階層のレイアウト範囲」 だから。

つまり親のRectTransformのサイズが、
子階層のUIレイアウトの範囲であるということです。

「ピボットとアンカーは完全理解」
でもUIレイアウトがうまくいきません。

そんなときは3つ目の 「親階層」の理解 をオススメします。

ぜひとも本記事を通して
親階層の概念を理解していきましょう。

トラブルを例に親階層の解説

想定しているUIレイアウト

【Unity】思い通りにUI配置できないときは親階層を疑え_0

例としてChildが画面左端にくっつくUIを作ってみます。

👉 【UIデザイナー向け】Unityで画面の端にくっつくUIの作り方

現状の失敗UIレイアウト

【Unity】思い通りにUI配置できないときは親階層を疑え_1

このようなレイアウトトラブルが起きていると仮定します。

このトラブルを 順序立てて解決 していきます。

解決手順1. 配置したUIの設定を確認

まずはレイアウトしたいUIの設定を確認します。

つまり画面左端にくっつく設定になっているのか、
Childのアンカー、ピボットの設定を確認してみましょう。

【Unity】思い通りにUI配置できないときは親階層を疑え_2

Childの設定は正しいですね。

少し話がずれますが ピボット って忘れやすくないですか?
わかりやすい暗記シートをツイートしています。
ご参考にどうぞ。

本題に戻ります。

解決手順2. 階層関係の確認

uGUIは階層が超重要

とくに 親階層の影響 をもろに受けます。
今回のケースでは Child の親階層が大事だということ。

Childの親階層が何か、
ヒエラルキーで確認してみましょう。

【Unity】思い通りにUI配置できないときは親階層を疑え_3

Childの親階層は Parent だと確認できました

Parentの設定を確認していきます。

解決手順3. 親階層のアンカー確認

今回達成したいことは
「Childが画面左端にくっつくこと」 ですよね。

子階層は親階層の影響を受けます。
「解決手順1」でChildの設定は正しい状態でした。

つまりChildが画面左端にくっついていないトラブル原因は
親階層にあることです。

親階層のアンカー修正

結論から説明すると、
親階層(Parent)が全画面覆っていないことが原因です。

今回の画面サイズは1920×1080。

【Unity】思い通りにUI配置できないときは親階層を疑え_4

Parentの幅を1920と高さを1080に設定。

【Unity】思い通りにUI配置できないときは親階層を疑え_5

すると意図したレイアウトになりました!!

しかし、実はこれではダメ。
画面比率を変えてみてください。

UIレイアウトは画面比率変えてテストしよう

先ほどは16:9の比率でしたが、
21:9にしてみました。

16:9より横長画面です。

【Unity】思い通りにUI配置できないときは親階層を疑え_6

すると黄色背景の左右が足りなくなりました。
そして、Childは画面左端にくっつかなくなりましたね。

UIレイアウトで重要なのは
比率を変えてテストすること

スマホの解像度はいくつも種類があります。
どんな比率でも破綻しないように設定するのが理想 です。
※完全画面サイズ固定の製品を作っている場合は不要。

再び親階層のアンカーを修正

子階層Childの設定は正しいため、
再び親階層 Parentのアンカーを修正します。

【Unity】思い通りにUI配置できないときは親階層を疑え_7

Parentを👆の設定にしました。

これで画面の比率に関係なく
全画面を覆うことができます。

【Unity】思い通りにUI配置できないときは親階層を疑え_8

このように極端に縦横を変えるほどの
比率を変えてもChildは画面左端に
レイアウトされるようににありました。

「アンカー」、「ピボット」、「親階層」の理解が
重要だということが分かったと思います。

まとめ : Unityで思い通りにUI配置できないときは親階層を疑おう

記事の内容を簡単にまとめます。

こんな感じです。

ここまで読んでも、
まだ理解できないかもしれません。

やっぱりそれだけ難しいんですよね。
オオバも最初は混乱しました。

数をこなすうちにできるようになった気がします。
自分が困ったことは他の人も困っているはず。
その経験はあますことなくSNSで発信していってます。

よりわかりやすく伝えるため、
最近ではショート動画を使った解説もはじめました。

※1日1本毎日動画投稿しています。

UIデザイナーがUIレイアウトできる環境は健全です。
そのためにUnityを理解することが必要。

そのサポートができるように引き続き発信をしていきます!


フォローすると UIデザイナー力の上がるTwitter やってます!
今日から使えるテクニックを発信中。
ぜひフォローしてみてください!
👉フォローはこちら!

最後まで読んでいただきありがとうございました!
すばらしいUnity UIライフをお過ごしください。

オススメ記事