渋谷ほととぎす通信

「Unityをわかりやすく」初心者のためのゲーム作りブログ

【Unity】3つだけでいい!?覚えるべきUIアンカー

【Unity】3つだけでいい!?覚えるべきUIアンカー

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

お悩みさん
お悩みさん
  • Unity UIって直感的じゃなくて難しい
  • アンカーって何?
  • 配置方法が16種類って多すぎ覚えられない
  • オオバ
    オオバ
    本記事ではこれらの悩みを解決します。

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

    Unity UI(以下:uGUI)の配置を
    マスターするために覚えておくことは3つです。

    本記事は、 「Unity上でUIを配置したい」「だけど、上手くいかない」 そんなUI開発初心者に向けてお届けします。

    そして今回はエンジニアからデザイナーまで幅広く理解できるように解説しています。安心してください。 1行もプログラミングは出てきません。 プログラミングせずともUIのレイアウトはできます。つまり エンジニアでなくてもUIのレイアウトは可能だということ です。

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

    これを読んでUnity UIをマスターしていきましょう。 今なら希少性の高い人材になれますよ! ぜひ最後まで読んでみてください。

    また、Unity初心者やUIデザイナー向けに、 Unityをはじめる前に知っておきたいこと をまとめています。
    コチラの記事もオススメです。リンクを張っておきますね。

    UnityのUIはまず3種類のアンカーを覚えよう

    結論を簡単にまとめます。覚えるものはこちらの3種類です。

    暗記すべきアンカー3種
    • ①中央アンカー(中央配置)
    • ②端アンカー(画面端配置)
    • ③伸縮アンカー(伸縮配置)

    👇具体的にはこちらです。

    【Unity】3つだけでいい!?覚えるべきUIアンカー_0

    これらは アンカー と呼ばれます。アンカーとは 「UI配置の基準点」 。例えば「①中央配置」を選択するとします。すると画面比率が変わったとしても中央に配置されるということです。後ほど詳しく解説しますが、ここでは 「そういうもんなんだ」 と思っていただければ大丈夫です。

    先ほどの図を見ると多くの種類のアンカーが見えましたよね。でも、 たった3種類だけ覚えておけばいいのです 。あとは 応用 でなんとかなります。

    「どのアンカーを選択してよいのか判断できません。。。」という方は、安心してください。アンカー選択で重要なのは、 画面比率が変わったときのレイアウト です。正直ルールさえわかれば簡単です。

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

    ノーコード(プログラミングなし)でUIボタンを実装する方法をこちらの記事で紹介しています。Visual Scriptingに興味ある方はチェックしてみてください。

    👉DOTweenの教科書を読んでUnityアニメーションをプログラミングしてみよう!

    Unity UI基礎 配置はRectTransformを使用

    まずUIの配置の仕組みを先に解説します。

    結論、UIの配置は RectTransform (レクトトランスフォーム)の アンカー を使います。アンカーとは配置座標の基準点 。今回紹介する3つのアンカーをマスターすることで自在にUIを配置できます。

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

    RectTransformTransform
    【Unity】3つだけでいい!?覚えるべきUIアンカー_1
    【Unity】3つだけでいい!?覚えるべきUIアンカー_1
    UI専用Unity全般で使用

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

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

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

    覚えるべき3つのアンカー

    では本題の覚えるべき3つのアンカーについて解説していきます。

    覚えるべき3つのアンカー

    ①中央アンカー(中央配置)

    ②端アンカー(端にくっつく配置)

    ③伸縮アンカー(伸縮 & 配置)

    UIアンカーその①中央アンカー(中央配置)

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

    【Unity】3つだけでいい!?覚えるべきUIアンカー_2

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

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

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

    【Unity】3つだけでいい!?覚えるべきUIアンカー_3

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

    【Unity】3つだけでいい!?覚えるべきUIアンカー_4

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

    画面中央に配置するUIに使うアンカー

    このブログでよく登場するアセットGUI PRO Kit - Casual Gameで具体例を解説します。

    【Unity】3つだけでいい!?覚えるべきUIアンカー_5

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

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

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

    4:3の画面比率の場合

    【Unity】3つだけでいい!?覚えるべきUIアンカー_6

    このように画面比率を16:9 → 4:3 に変更してもタイトルロゴは画面中央から同じ座標に配置されます。つまり 中央から座標を固定したいものは中央アンカーを使う のです。

    UIアンカーその②端アンカー(端にくっつく配置)

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

    【Unity】3つだけでいい!?覚えるべきUIアンカー_7

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

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

    【Unity】3つだけでいい!?覚えるべきUIアンカー_8

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

    【Unity】3つだけでいい!?覚えるべきUIアンカー_9

    👆のように配置したUIの座標は、右下からの座標です。左に行くほどX座標は小さく、上に行くほどY座標は大きくなります。

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

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

    【Unity】3つだけでいい!?覚えるべきUIアンカー_10

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

    4:3の画面比率の場合

    【Unity】3つだけでいい!?覚えるべきUIアンカー_11

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

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

    • 中央アンカー : 画面比率を変えても中央からの座標は固定
    • 右下アンカー : 画面比率を変えても右下からの座標は固定

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

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

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

    【Unity】3つだけでいい!?覚えるべきUIアンカー_12

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

    アイコンアンカー名用途
    【Unity】3つだけでいい!?覚えるべきUIアンカー_13
    左上アンカー左上基準
    【Unity】3つだけでいい!?覚えるべきUIアンカー_14
    上アンカー上基準
    【Unity】3つだけでいい!?覚えるべきUIアンカー_15
    右上アンカー右上基準
    【Unity】3つだけでいい!?覚えるべきUIアンカー_16
    左アンカー左基準
    【Unity】3つだけでいい!?覚えるべきUIアンカー_17
    右アンカー右基準
    【Unity】3つだけでいい!?覚えるべきUIアンカー_18
    左下アンカー左下基準
    【Unity】3つだけでいい!?覚えるべきUIアンカー_19
    下アンカー下基準

    スマホ向けUIの基本的な作り方から複数解像度に対応する方法まで次の記事で解説しています。本記事とあわせて読んでみてください。

    UIアンカーその③伸縮アンカー(伸縮 & 配置)

    最後のアンカーです。

    【Unity】3つだけでいい!?覚えるべきUIアンカー_20

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

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

    【Unity】3つだけでいい!?覚えるべきUIアンカー_21

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

    【Unity UIアンカーの新概念】 「Left」と「Right」

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

    【Unity】3つだけでいい!?覚えるべきUIアンカー_22

    • Left・・・画面左端からの距離
    • Right・・・画面右端からの距離

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

    【Unity】3つだけでいい!?覚えるべきUIアンカー_23

    • Left : 200
    • Right : 320

    と設定すると、画面左端から200px、画面右端から320pxの幅のUIになります。つまり Left、Rightをともに0 にすると、画面に対して左右いっぱいに広がるUIを作ることができる のです。

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

    【Unity】3つだけでいい!?覚えるべきUIアンカー_24

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

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

    • 左右伸縮の場合 → Left、Rightを指定
    • 上下伸縮の場合 → Top、Bottomを指定
    アイコンアンカー名用途
    【Unity】3つだけでいい!?覚えるべきUIアンカー_25
    左右伸縮・中央アンカー中央基準
    【Unity】3つだけでいい!?覚えるべきUIアンカー_26
    左右伸縮・下アンカー下基準
    【Unity】3つだけでいい!?覚えるべきUIアンカー_27
    上下伸縮・右アンカー右基準
    【Unity】3つだけでいい!?覚えるべきUIアンカー_28
    上下伸縮・中央アンカー中央基準
    【Unity】3つだけでいい!?覚えるべきUIアンカー_29
    上下伸縮・左アンカー左基準

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

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

    【Unity】3つだけでいい!?覚えるべきUIアンカー_30

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

    【Unity】3つだけでいい!?覚えるべきUIアンカー_31

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

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

    まとめ : Unity UIアンカーは3つだけ覚えよう

    Unity UIのアンカーについて徹底解説してきました。簡単にまとめます。覚えることは次の3つでしたね。

    覚えるべき3つのアンカー

    ①中央に配置の「中央アンカー」

    ②端にくっついて配置の「端アンカー」

    ③左右伸縮の「左右伸縮アンカー」

    この3種類を覚えておけば、 残り13種類のアンカーは応用で対応できます。そして、アンカー選びで重要なのは、「画面比率が変わったときのレイアウト」です。
    UIの効率的な学び方は実際に手を動かしてUIを作ることです。

    次の記事ではUnityでスマホ向けUIの作り方を解説しています。基本的なUIの作り方から本格的な複数解像度対応までを紹介。 全体を通してUIづくりをマスターできるようになっています。 本記事とあわせて読んでみてください。

    また、UIを作るときに問題になるのがCanvasの設定です。次の記事で詳しくおすすめのCanvas設定を解説していますのであわせてどうぞ。

    「Unity初心者大学」というUnity初心者向けのYouTube始めました!!
    ぜひチャンネル登録をお願いします!

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

    オススメ記事
    検証環境
    • Unity2020.3.19f1