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

多解像度対応 はUIデザイナーの悩みのひとつ。
世の中にはさまざまな画面サイズのスマホがあふれています。

たいていシェア率から対応端末をしぼって開発をしますが、
理想は どんな解像度でも正常に表示されること でしょう。

今回紹介する「画面の端にくっつくUI」は、
多解像度の対応に必須スキル です。

まだ本格的に多解像度対応をやったことがない方にも
わかるように解説していきます。

※1行もプログラミングは出てきません。

RectTransformのピボットとアンカーの理解が必須

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

多解像度の対応は
スマホ向けUIデザイナーの必須スキル
その始め方として画面の端にくっつくUIを作って学びます。

Unity上でどのような設定をすると
画面の端にくっつくのか理解 していおくと、
作ったUIにも説得力が出てきます。

また今回登場する ピボットアンカー をマスターすれば
uGUIをマスターしたも同然 です。

ぜひとも画面の端にくっつくUIをマスターしてみましょう。
では詳細の解説に入ります。

この記事の内容

そもそも多解像度対応とは?

あらためて多解像度対応とは、
「さまざまな画面比率の端末に適したUIを提供すること」

一例ではありますが、
さまざまな端末が世の中に出回っています。

GUI PRO Kit - Casual Gameというアセット(有料)の
一画面をつかって3種類の解像度違いのレイアウトを確認してみましょう。

16:9のレイアウト

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

21:9のレイアウト

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

4:3のレイアウト

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

16:9、21:9レイアウトは多解像度対応できているようですが、
4:3レイアウトでは中央のリストが崩れていますね。

オオバだったら↓このように実装します。

修正前後UIレイアウト
修正前
【UIデザイナー向け】Unityで画面の端にくっつくUIの作り方_3
修正後
【UIデザイナー向け】Unityで画面の端にくっつくUIの作り方_4

左のリストを 解像度の高さに合わせて伸縮 させました。
このように有料アセットでも多解像度対応は甘かったりします。

繰り返しになりますが、多解像度対応とは、
「さまざまな画面比率の端末に適したUIを提供すること」 です。

その最初の学習として、
画面の端にくっつくUIの作り方のマスターをオススメします。

Unityで画面の端にくっつくUIをつくる

👇「戻るボタン」を左上にくっつける方法の
解説を通して学んでいきましょう。

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

ボタンの配置座標

ボタンは 左上からY軸15pxの位置 に配置します。

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

ボタンは画像一枚

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

本来はボタン背景と、三角形画像を分離した方が良いですが、
今回はわかりやすさ重視で一枚の画像を使います。

ファイル名back_button.pngとしました。
Unityに追加します。

Unityに画像を追加する方法はこちらで詳しく解説しています。

画像をスプライトに変更

UnityのUI (以下:uGUI) で使用する画像は、
基本的にスプライトを使用します。

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

back_buttonのインスペクタから、
Texture TypeSprite (2D and UI) に変更します。

スプライトとは 「縦横の長さのサイズ保存することができる画像」 です。
ここではUIを作る上で便利な形式という認識で大丈夫。

Imageを使って戻るボタン画像の表示

Imageコンポーネント (以下:Image) を使って
戻るボタンの画像を表示します。

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

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

するとCanvasにImageを配置されます。

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

この状態では白い四角が画面に表示されただけ。
Imageにback_buttonを適用します。

そもそもCanvasの設定がわからない人はこちらの記事をどうぞ。

Imageにスプライトを適用

Imageの Source Image
back_button.pngをセットします。

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

↑のとおりドラッグアンドドロップします。

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

するとback_buttonが表示されます。
ただし 画像のサイズと比率が正しくありません。

SetNativeSizeで元画像のサイズに設定

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

Imageの SetNativeSize でリサイズしましょう。

Imageはデフォルトサイズが 100×100px
何も設定しなければ100×100pxのままです。

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

SetNativeSize をクリックすると、
元画像のサイズにリサイズ してくれます。

とても便利な機能なので覚えておきましょう。

RectTransformのアンカーを左上にする

画像の表示ができたら、
次は画像の基準点を設定します。

デフォルトは画像の中心です。
今回は左上に配置するため、
画像の左上を基準点 にします。

BeforeAfter
【UIデザイナー向け】Unityで画面の端にくっつくUIの作り方_16
【UIデザイナー向け】Unityで画面の端にくっつくUIの作り方_16
基準点 : 中心基準点 : 左上

基準点の変更はRectTransformのPivot

RectTransformのPivotが基準点の設定項目 です。

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

すると、基準点は中央から左上に変化します。

アンカーを左上に変更

アンカーとはUIの配置座標の基準点です。
さきほど出てきたピボットとは違います。

ピボットとは画像(UIパーツ)内における基準点。
アンカーは配置の基準点 です。

「座標(0, 0)にしたときの配置場所」
と考えておくと良いでしょう。

今回は 左上に配置したい ため、
アンカーを左上に設定します。

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

この状態では画面上に何も変化はありません。
変化しているのは座標 です。

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

座標(PosX、PosY)を共に0にしてみましょう。

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

すると左上に配置されました。

分かりづらいアンカーの補足説明

アンカーは非常にとっつきにくいです。

オオバ
オオバ
16種類もありますからね。
  1. 配置座標の基準点
  2. ストレッチの指定(サイズの可変)

↑の通りアンカーには2種類の意味があります。
本記事では 「1.配置座標の基準」 にしぼって補足解説します。

繰り返しになりますが、
アンカーとはUIの配置座標の基準点 です。
図で見たほうがイメージしやすいでしょう。

中央アンカーの場合

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

左上アンカーの場合

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

このように UIの座標とはアンカーからの距離 なんです。
(※Y座標はマイナス値であることに注意)
これだけ覚えておきましょう。

座標の調整

Pivotとアンカーを設定したら座標の調整です。

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

ボタンの座標は画面左上から Y軸15px の位置でした。

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

Y軸に -15 をセットします。
Y座標は上に行く大きく、下に行くほど小さく なります。

【完成】多解像度に対応した画面の端にくっつくUI

16:9のレイアウト

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

21:9のレイアウト

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

4:3のレイアウト

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

このようにピボットとアンカーを適切に設定して、
意図した画像の配置ができました。

まとめ : Unityで画面の端にくっつくUIの作り方

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

こんな感じです。

正直難しかったと思います。
オオバもピボットとアンカーの関係性理解に
時間がかかった記憶があります。

先日このようなツイートをしました。

UIデザインの説明をされて「このUIデザイナーできる」と思う瞬間
~解像度編~

→ iPhoneセーフエリアの考慮がある
→ iPad4:3比率の考慮がある
→ Xperia21:9比率を考慮がある
→ 中途半端な比率の考慮がある

ここまで考慮されてたら、うなずくのみ。

UIデザイナーさんから説明を受けるときに、
多解像度が理にかなった状態で考慮がされていると
本当にうなずくだけ なんですよね(尊敬)

ただそのようなUIデザイナーは
絶滅危惧種かなってくらい少ない

オオバ
オオバ
ほんとうに少ない

つまりピボットとアンカーを理解するだけで
頭一つ飛び抜けることが可能 だということです。チャンス!

そのためにまずは ピボットとアンカーの理解 を進めるのがオススメです。

むしろピボットとアンカーを理解できると
uGUIを制したようなもの。
uGUIの肝中の肝 と言ってもいい。

本ブログでも今後重点的に
uGUIのピボットとアンカーについて取り上げていきます。

ぜひともUnityを使うUIデザイナーの皆さんに理解してもらいたい。
ピボットとアンカーが完璧だと相当強い ですよ。


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

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

オススメ記事
検証環境