こんにちわ、オオバです。

Unity UI (以下:uGUI) の配置って思い通りにいかなくないですか?
配置方法も16種類あるんですが、 多すぎて覚えられない

お気持ち分かります。Unityエディタ上では説明といった説明もありません。
あったとしても英語でよくわかない。

uGUIの配置をマスターするためには
たった3種類おぼえるだけ でよいのです。

この記事は、 Unityを使ってUIを配置したい けど、
うまくいかない UIデザイナー向け にわかりやすく解説しました。

最近はUIデザイナーもUnityを使うようになりましたが、
まだ人口的には少ない。

今UIの配置方法をマスターして、
つよつよUIデザイナー になりませんか。

3種類のアンカーを暗記するだけ

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

覚えるものはこの3種類です。

  1. 「中央に配置」
  2. 「端にくっついて配置」
  3. 「伸縮 & 配置」

具体的にはこちら。

【UIデザイナー向け】Unityで自由自在にUI配置する方法 ※は3種類の「アンカー」を覚えよう!_0

これらは アンカー と呼ばれます。
アンカーとはUI配置の基準点 です。

つまり、自在にUIを配置するために必要なのは、
たった3種類のアンカーを覚えるだけということです。

オオバ
オオバ
なんかできそうでしょ?

あとは 応用 でなんとかなります。

またアンカーの選択で重要なのは、
画面比率が変わったときにどうなって欲しいか です。

この辺り含め詳しく解説していきます。

この記事の内容

UIの配置はRectTransformを使う

アンカー3種の解説に入る前に、
UIの配置ロジックを先に説明します。

結論、UIの配置は RectTransform (レクトトランスフォーム)の
アンカー を使います。

アンカーとは配置座標の基準点
今回紹介する3つのアンカーをマスターすることで
自在にUIを配置できます。

ところでRectTransformってTransform と名前が似ていますよね。
そうです。基本的に同じものですが用途が違います。

RectTransformTransform
【UIデザイナー向け】Unityで自由自在にUI配置する方法 ※は3種類の「アンカー」を覚えよう!_1
【UIデザイナー向け】Unityで自由自在にUI配置する方法 ※は3種類の「アンカー」を覚えよう!_1

RectTransformは Transformを拡張した存在 で、
UI用に機能が多いのです。

※幅高さなど設定項目がTransformより多い

これから覚えるアンカー3種は、
RectTransformの使い方を覚えるということ になります。

暗記1. 中央配置(中央アンカー)

基本である中央配置から解説します。
RectTransformのデフォルト設定は中央配置です。

【UIデザイナー向け】Unityで自由自在にUI配置する方法 ※は3種類の「アンカー」を覚えよう!_2

RectTransformのアンカーリストから
👆の 中央に点がついたアイコン をクリックします。

ここでは中央アンカーと名づけて説明します。

中央アンカー とは画面に対して 中央が配置の基準点 ということです。

【UIデザイナー向け】Unityで自由自在にUI配置する方法 ※は3種類の「アンカー」を覚えよう!_3

例えば👆のようなUIを画面右上に配置した場合は、
画面中央からの座標となります。

【UIデザイナー向け】Unityで自由自在にUI配置する方法 ※は3種類の「アンカー」を覚えよう!_4

右に行くほどX座標は大きくなり、
上に行くほどY座標は大きくなります。

画面中央に配置したいUIに使う

サンプルでは分かりづらいため
このブログでよく登場するアセットGUI PRO Kit - Casual Gameで具体例を解説します。

【UIデザイナー向け】Unityで自由自在にUI配置する方法 ※は3種類の「アンカー」を覚えよう!_5

👆のタイトルロゴは中央アンカーです。
なぜならロゴは どの画面比率でも中央付近に配置したいから

アンカー選択で重要なのは、
画面比率が変わったときにどうなって欲しいかで決める こと。

例えばこの画面をiPad系の4:3比率にしてみましょう

4:3の画面比率の場合

【UIデザイナー向け】Unityで自由自在にUI配置する方法 ※は3種類の「アンカー」を覚えよう!_6

このように画面比率を16:9 → 4:3 に変更しても
タイトルロゴは画面中央から同じ座標に配置されます。

つまり 中央から座標を固定したいものは中央アンカーを使う のです。

暗記2. 端にくっついて配置

次に画面端にくっつくアンカーの解説です。

【UIデザイナー向け】Unityで自由自在にUI配置する方法 ※は3種類の「アンカー」を覚えよう!_7

右下に点のついたアイコンをクリックします。
「右下アンカー」と、この記事では呼びます。

右下アンカーは画面右下が配置の基準点です。

【UIデザイナー向け】Unityで自由自在にUI配置する方法 ※は3種類の「アンカー」を覚えよう!_8

つまり(X:0, Y:0)としたときに、
右下に配置されるということです。

【UIデザイナー向け】Unityで自由自在にUI配置する方法 ※は3種類の「アンカー」を覚えよう!_9

👆のように配置したUIの座標は、
右下からの座標です。

左に行くほどX座標は小さく、
上に行くほどY座標は大きくなります。

右下アンカーは画面右下に配置したいUIに使う

サンプルで紹介します。
右下のGuestボタンは 右下アンカー を使っています。

【UIデザイナー向け】Unityで自由自在にUI配置する方法 ※は3種類の「アンカー」を覚えよう!_10

先と同じように画面比率を変更してみましょう。

4:3の画面比率の場合

【UIデザイナー向け】Unityで自由自在にUI配置する方法 ※は3種類の「アンカー」を覚えよう!_11

このように右下からの位置は変わらないのが
右下アンカーです。

だんだん分かってきましたね。

このルールが分かればあとは応用です。

残り7種の配置アンカーはすべて同じ

右下アンカーについて解説しましたが、
もうおわかりのように、残りの7種はすべて同じです。

【UIデザイナー向け】Unityで自由自在にUI配置する方法 ※は3種類の「アンカー」を覚えよう!_12

ただ単に基準点が違うだけなのです。

アイコンアンカー名用途
【UIデザイナー向け】Unityで自由自在にUI配置する方法 ※は3種類の「アンカー」を覚えよう!_13
左上アンカー左上基準
【UIデザイナー向け】Unityで自由自在にUI配置する方法 ※は3種類の「アンカー」を覚えよう!_14
上アンカー上基準
【UIデザイナー向け】Unityで自由自在にUI配置する方法 ※は3種類の「アンカー」を覚えよう!_15
右上アンカー右上基準
【UIデザイナー向け】Unityで自由自在にUI配置する方法 ※は3種類の「アンカー」を覚えよう!_16
左アンカー左基準
【UIデザイナー向け】Unityで自由自在にUI配置する方法 ※は3種類の「アンカー」を覚えよう!_17
右アンカー右基準
【UIデザイナー向け】Unityで自由自在にUI配置する方法 ※は3種類の「アンカー」を覚えよう!_18
左下アンカー左下基準
【UIデザイナー向け】Unityで自由自在にUI配置する方法 ※は3種類の「アンカー」を覚えよう!_19
下アンカー下基準

画面端にくっつくUIについて、こちら記事でも
別視点で詳しく解説していますのであわせてどうぞ。

初心者の方にオススメです。

暗記3. 伸縮 & 配置(伸縮アンカー)

最後のアンカーです。

【UIデザイナー向け】Unityで自由自在にUI配置する方法 ※は3種類の「アンカー」を覚えよう!_20

👆のボタンをクリックして下さい。
このブログでは、 「左右伸縮・上アンカー」 と呼びます。

左右伸縮・上アンカーとは、
「上アンカー + 幅を変更」 するアンカーです。

【UIデザイナー向け】Unityで自由自在にUI配置する方法 ※は3種類の「アンカー」を覚えよう!_21

このように「左右伸縮・上アンカー」を選ぶと
幅も作用します。

【新概念】 「Left」と「Right」の登場

左右伸縮・上アンカーを使うと
LeftRight というパラメータが登場します。

【UIデザイナー向け】Unityで自由自在にUI配置する方法 ※は3種類の「アンカー」を覚えよう!_22

別の例を見てみましょう。

【UIデザイナー向け】Unityで自由自在にUI配置する方法 ※は3種類の「アンカー」を覚えよう!_23

と設定すると、画面左端から200px、
画面右端から320pxの幅のUIになります。

つまり Left、Rightをともに0 にすると、
画面に対して左右いっぱいに広がるUIを作ることができる のです。

上下の伸縮は「Top」と「Bottom」

【UIデザイナー向け】Unityで自由自在にUI配置する方法 ※は3種類の「アンカー」を覚えよう!_24

上下に伸縮する場合は、
TopBottom に値をセットします。

残りの伸縮アンカーも同様。

アイコンアンカー名用途
【UIデザイナー向け】Unityで自由自在にUI配置する方法 ※は3種類の「アンカー」を覚えよう!_25
左右伸縮・中央アンカー中央基準
【UIデザイナー向け】Unityで自由自在にUI配置する方法 ※は3種類の「アンカー」を覚えよう!_26
左右伸縮・下アンカー下基準
【UIデザイナー向け】Unityで自由自在にUI配置する方法 ※は3種類の「アンカー」を覚えよう!_27
上下伸縮・右アンカー右基準
【UIデザイナー向け】Unityで自由自在にUI配置する方法 ※は3種類の「アンカー」を覚えよう!_28
上下伸縮・中央アンカー中央基準
【UIデザイナー向け】Unityで自由自在にUI配置する方法 ※は3種類の「アンカー」を覚えよう!_29
上下伸縮・左アンカー左基準

上下左右どちらも伸縮する特殊アンカー

上下左右の矢印しかないアンカーは
上下左右伸縮アンカー です。

【UIデザイナー向け】Unityで自由自在にUI配置する方法 ※は3種類の「アンカー」を覚えよう!_30

つまり座標の基準点はなく、
伸縮するだけのアンカー です。

【UIデザイナー向け】Unityで自由自在にUI配置する方法 ※は3種類の「アンカー」を覚えよう!_31

Left、Right、Top、Bottomそれぞれ指定します。

背景を画面いっぱいに広げるときに使ったりします。

まとめ : Unityで自由自在にUI配置する方法

👆上の3種類を覚えておけば
16種類のアンカーは応用で片付きます。
また 画面比率が変わったときの状態を想像 して
アンカーを選択しましょう。

まずはこの3種類を覚えるために、
実際に手を動かしてUnityを使ってみましょう。

アンカーを使いこなすUIデザイナーは 現時点では希少人材

覚えるのはたった 3種類のアンカー です。
ぜひともマスターしてみてください。


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

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

オススメ記事
検証環境