NinaLabo

個人ゲーム開発者の技術メモ

【Unity】iPhoneX での UI 開発(予備知識編)

11月3日に発売を予定されている iPhoneX(iPhone 10)が開発者泣かせ。主に UI に影響が出そうで、なんとか uGUI をうまく拡張して最小コストで対応できないだろうか調べ始めております(残念ながら結論は出ていない)

予備知識が全然ないので、開発を始める前にiPhone X の概要を調べてみました。

画面サイズ(解像度)

従来の iPhone 6, iPhone 7, iPhone8 では 375 x 667 (750 x 1334) で 9:16 だったのが、上に伸びて 375 x 812 (750 x 1624) で 9:19.5 になりました。

f:id:ninagreen:20171003005521p:plain

開発中のゲームの設定を改めて見てみたら、なぜか 1080 x 1920 (iPhone 8 Plusサイズ)基準で設定してました。プロジェクト始めた時は Plusシリーズが標準になると思ってたんでしょうか。自分で設定したのですがもう記憶が曖昧で・・・

f:id:ninagreen:20171003010955p:plain

また、UIは横幅基準で拡縮するように実装してあるので縦に長くなってもそれほど影響なさそうです(Canvas Scaler の Match が 0が横基準、1が縦基準)。縦幅基準で実装しているプロジェクトは影響受けそうですね・・・(多分横が見切れる)

 左が 750 x 1334、右が 1125 x 2436で、縦長になっても大丈夫そうでした。

 

f:id:ninagreen:20171003011650p:plain

f:id:ninagreen:20171003011704p:plain

 

レイアウト

iPhoneX の大きな特徴として、まず画面上部にカメラ等が収められている「センサーハウジング」と呼ばれるものがあって、凹型に画面が切り抜かれています。また、時刻や充電などのステータスを非表示にすることが非推奨になったので、上部には文字を配置せず開けておいたほうが無難です。

また、画面下部には、ホームボタンがなくなった代わりに「ホームインジケータ」と呼ばれる細長いバーがあり、スワイプすることでホーム画面が表示できるようになっています。そのため、画面下部にボタンは配置できなさそうです。

この上下の領域を除いた領域がセーフエリア(Safe Area)と呼ばれており、UIのパーツはこの領域内に収めるようにしたほうが無難だと思われます。また、セーフエリア内であっても左右に一定のマージンを取ることが推奨されています。

⬇︎セーフエリアの領域(375 x 667 基準の数値です。1125 x 2436 ならそれぞれ3倍する必要があります)

f:id:ninagreen:20171003015503p:plain

 
 f:id:ninagreen:20171003012918p:plain

 

ヘッダーは単純に位置を下にずらすだけでいいかなと思ってますが、フッターは上に位置をずらすとデザインが微妙になるので、どうしようか悩ましいです・・・

 

追記ですが、UnityにセーフエリアAPIなるものが追加されるらしいです。どんなものかよくわからないのですが、これで簡単に対応できるようになると嬉しいですね。

helpdesk.unity3d.co.jp

参考サイト  

Apple 公式ページ (英語)

iPhone X - Overview - iOS Human Interface Guidelines

 

デザインガイドラインまとめてくれてる参考記事

iPhone X対応におけるデザイン上の注意ポイント | fladdict