はじめに
作成したアプリのボタンなどが、画面の端にある場合、一部の端末のノッチと被ってしまうケースがあります
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_628,h_338/https://umistudioblog.com/wp-content/uploads/2023/01/スクリーンショット-2023-01-12-17.16.10.png)
実機を持っていなくても、Unity上で様々な端末の実際の見え方を確認できます
※Unity 2019.3 以降が必要です
Device Simulatorの使い方
Gameウィンドウ左上の Game をクリックして Simulator に切り替えるだけです
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_512,h_331/https://umistudioblog.com/wp-content/uploads/2023/01/スクリーンショット-2023-01-12-20.58.33-1024x661.png)
※もし Simulator がなければ、Package Manager からインストールしましょう
Simulatorでは、選択した端末での見た目を確認することができます
上部の Safe Area をクリックすると、黄色い枠でセーフエリアが表示されます
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_512,h_331/https://umistudioblog.com/wp-content/uploads/2023/01/スクリーンショット-2023-01-12-20.57.52-1024x661.png)
セーフティーエリア内に配置するには
これで見え方を確認できるようになりましたが、全ての端末を一つ一つ確認するのは非常に手間がかかります
そこで、どんな端末でもセーフエリア内に収まるようにしましょう
こちらの記事が参考になりました
まず、Canvas内に空のオブジェクトを作成します
名前はなんでも良いですが、 —SafeArea— と名付けました
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_329,h_202/https://umistudioblog.com/wp-content/uploads/2023/01/スクリーンショット-2023-01-12-18.24.18.png)
こちらに以下のスクリプトを追加します
using UnityEngine;
public class SafeAreaAdjuster : MonoBehaviour
{
//セーフエリアに合わせたい箇所をtrueにする。
[SerializeField] bool left;
[SerializeField] bool right;
[SerializeField] bool top;
[SerializeField] bool bottom;
private void Start() {
var panel = GetComponent<RectTransform>();
var area = Screen.safeArea;
var anchorMin = area.position;
var anchorMax = area.position + area.size;
if(left) anchorMin.x /= Screen.width;
else anchorMin.x = 0;
if(right) anchorMax.x /= Screen.width;
else anchorMax.x = 1;
if(bottom) anchorMin.y /= Screen.height;
else anchorMin.y = 0;
if(top) anchorMax.y /= Screen.height;
else anchorMax.y = 1;
panel.anchorMin = anchorMin;
panel.anchorMax = anchorMax;
}
}
—SafeArea— に Rect Transform コンポーネントを追加し、下の画像と同じ値に設定します
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_344,h_502/https://umistudioblog.com/wp-content/uploads/2023/01/スクリーンショット-2023-01-12-20.48.53.png)
先ほどノッチと被っていたボタンを子オブジェクトにします
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_323,h_206/https://umistudioblog.com/wp-content/uploads/2023/01/スクリーンショット-2023-01-12-21.03.03.png)
ゲームを開始すると、スクリプトが動き、セーフエリア内にボタンが移動します
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_591,h_388/https://umistudioblog.com/wp-content/uploads/2023/01/スクリーンショット-2023-01-12-21.04.59-1024x674.png)
まとめ
iPadや折りたたみスマホなど、最近は端末によってアスペクト比やノッチサイズも様々なので、見栄えの確認が大変ですが、今回の方法を使えば安心してUIの配置ができそうです