[Unity]スマートフォンのノッチとセーフエリア
![[Unity]スマートフォンのノッチとセーフエリア](https://torisan-net.com/wp/wp-content/uploads/2022/12/eyecatch-4.png)
こんにちは。プログラマーのIです。
今回はUnityを利用してスマートフォンアプリのUIを作成する際、
注意が必要な部分とその処理方法について説明したいと思います。
本投稿は
Unity2021.3.14f1 をベースで作成した内容になるため、
それより古いバージョンでは一部の機能は導入されていない可能性があります。
ご注意ください。
![](https://torisan-net.com/wp/wp-content/uploads/2022/11/00.png)
まず簡単なUIを用意しました。
TopとBottomが今回のメインになるUIです。
![](https://torisan-net.com/wp/wp-content/uploads/2022/11/01.png)
用意したUIをGameビューで確認すると問題なく表示されます。
![](https://torisan-net.com/wp/wp-content/uploads/2022/11/02.png)
それでは、普通のGameビューの代わりに
Simulatorビューで確認してみましょう。
![](https://torisan-net.com/wp/wp-content/uploads/2022/11/03.png)
まずは iPhone8 で確認するために
端末リストから iPhone8 を選択しましょう。
![](https://torisan-net.com/wp/wp-content/uploads/2022/11/04.png)
特に問題なく表示されているのが確認できます。
![](https://torisan-net.com/wp/wp-content/uploads/2022/11/05.png)
ただ、最近のスマートフォンは
大体「ノッチ」と呼ばれるカメラーなどの部品が搭載されている部分が存在しています。
その「ノッチ」の部分を考えずにUIを作成してしまうと…
![](https://torisan-net.com/wp/wp-content/uploads/2022/11/06.png)
なんということでしょう!
UIがカメラに食われてしまいました…
![](https://torisan-net.com/wp/wp-content/uploads/2022/11/07.png)
iPhoneの場合はノッチ部分だけではなく、
下段のホームバーまで
UIとダブってしまう事態が発生しました。
ノッチやホームバーに影響がない部分を
セーフエリアと呼びます。
UIをデザインする際は必ずセーフエリア内に全てのUIを位置することが推奨されています。
それではこの問題を簡単に解決できる方法について
説明したいと思います。
![](https://torisan-net.com/wp/wp-content/uploads/2022/11/08-1024x487.png)
Unity Asset Storeから
「Safe Area Helper」アセットをダウンロードしましょう。(無料)
リンク:https://assetstore.unity.com/packages/tools/gui/safe-area-helper-130488
![](https://torisan-net.com/wp/wp-content/uploads/2022/11/09.png)
![](https://torisan-net.com/wp/wp-content/uploads/2022/11/10.png)
![](https://torisan-net.com/wp/wp-content/uploads/2022/11/11.png)
続いてアセットのインポートまで進みます。
![](https://torisan-net.com/wp/wp-content/uploads/2022/11/12-1024x362.png)
それではいよいよ設定してみましょう。
設定方法はすごく簡単です。
対象になるTopとBottomのUIをグループ化して、
そのグループオブジェクトに先ほど追加したアセットの
Safe Areaコンポネントを追加するだけです。
それではもう一度Simulatorビューで
UIの変化を確認したいと思います。
![](https://torisan-net.com/wp/wp-content/uploads/2022/11/13.png)
UIが正しくカメラを避けて表示されることが確認できます。
![](https://torisan-net.com/wp/wp-content/uploads/2022/11/14.png)
iPhoneの場合はノッチ部分だけではなく、
下段のホームバーの部分も正しく避けて表示されることが確認できます。
以上、Unityのセーフエリアに
対応する方法についての話でした。
ユーザー経験的にはこれは必須的な対応となるし、
Appleの場合は特にこの部分については厳しく、
アプリケーションがリジェクトされる場合もあります。
この方法で簡単に回避できる問題なので
是非ご活用ください。