はじめに

2017年ごろから様々な解像度やアスペクト比のディスプレイを持つ端末が登場しています。
先陣を切ったiPhoneXはディスプレイが全面になり、端末の角丸部分も表示領域に……。
消滅したホームボタン（物理）の代わりにホームバーを画面内に導入……、さらにはノッチ（切り欠き）を採用……、これらとセットに「SafeArea」という概念を導入してくれました……。

最近の端末はパンチホールが主流で、iPhoneは14Pro以降からそれにプラスして、用途によって表示領域が変わる「DynamicIsland」という機能を採用しているようです。

さてこれらにより、これまでは決まった領域だけの考慮で良かったのですが、様々なアスペクト比に対応できるように、またノッチなどに情報が被らないようにデザインを制作する必要がでてきました。

ノッチやパンチホール

ということで今回は「スマホゲームアプリの画面デザイン」について、弊社での対応例をご紹介します。
WEBや通常のアプリについての記事はたくさんありますが、「スマホのゲームアプリ」についての記事は少ないようなので、そこに焦点を当てたものにしてみました。

💡エンジニア・コラム１：UI の違い

 
アプリとゲームの UI の作り方は実は全く違います。
アプリを作っている人がゲームを、逆にゲームを作っている人がアプリを作る、ということは滅多にないため、違いを意識することはほとんど無いでしょう。実際にどのような違いがあるのか下に記しました。

📱アプリの UI
アプリの UI は「部品をどこに配置するのか」を考えて設計します。
例えば、ディスプレイ上部にタイトル、下部にボタン、余ったところにメモ、といった具合です。
もしも解像度が違っても上部に置いたタイトルは上部にありますし、下部に置いたボタンも下部にあります。
そのため様々な解像度に対応できるのです。

🎮ゲームの UI
ゲームは「カメラ」という物が存在します。
カメラに写った範囲が端末のディスプレイに映ります。
そのため、ディスプレイ上部に何かを置こうといった事が非常に難しくなっています（通常カメラの撮影エリアは端末によらず一定です）。
また、端末のディスプレイの解像度と合っていないと、下図右側のように上下に黒帯が表示されてしまったりします。
そのため、ゲームの UI を作成する場合は黒帯を出さないための工夫も必要になります。

UI の違い

 
本記事ではこのように、デザイン制作上でエンジニアの観点から重要だと思われるポイントについて「エンジニア・コラム」としてまとめていきます。
 
 

「SafeArea」について

前述のとおり、iPhoneX以降から表示領域が全面の端末が主流になり、各OSのUIも画面内に入り込むようになりました。
「SafeArea」とは、これらの画面内に入り込むような部分に情報が被らないようにするための、安全な領域のことです。

iPhoneの「SafeArea」のサイズは大体決まっているものの、Androidは端末によって様々なので、これらをデザイン側で対応するのはなかなか難しいです。
「SafeArea」についてはそこまで気にせずデザインを制作し、実際には開発側で対応をしてもらった方が良いでしょう。

SafeArea

「アスペクト比」について

表示領域が全面になったことで、「アスペクト比（画面の縦横比）」も様々なものが登場しました。
当時衝撃だったのはXperiaの9：21で、「このままいくとテレビのリモコンぐらいの端末とか出てきそうだね」などと社内で冗談を言うほどでしたが、現状で最も長いのは2024年7月に発売したGalaxy Z Flip6の約9：23.1のようですね……。（流石だ）

とはいえ、それ以外の端末はiPhoneシリーズと同じ約9：19.5に安定しているように見えますし、Xperia1Ⅵもついに9：21を捨てたようです。
今後は約9：19.5に安定していくのでしょうか（Xperia10Ⅵは9：21のままですけど……。）

アスペクト比（参考サイト：Android 画面サイズ・ピクセル数早見表）

制作サイズについて

弊社ではほとんどの場合9：16（1080×1920px）を基準に、様々なアスペクト比にも対応できるように

📌画面が縦に長い端末は横幅は固定で縦に伸ばす
📌横に広い端末は縦幅は固定で横に伸ばす

……というようなイメージで制作しています。

様々なアスペクト比への対応イメージ

UI部分は9：16内に配置します。
背景は1440×2520px（1：1の端末も考慮する場合は2520×2520px）として、重要な部分はなるべく9：16内に配置します。

前述のとおり、最近の端末のアスペクト比は約9：19.5が主流になってきているようですが、9：21あたりの端末もまだまだあり、タブレットに関しては9：16以外にiPadの4：3もあるため、それらを考慮したサイズです。

制作サイズ

アスペクト比が変わった際のUI部分の対応

さてUI部分です。
9：16の場合は問題ありませんが、他のアスペクト比の場合には対応が必要になります。

前項（制作サイズについて）で出てきたこちらですね。

📌画面が縦に長い端末は横幅は固定で縦に伸ばす
📌横に広い端末は縦幅は固定で横に伸ばす

この際に各オブジェクトの位置をどうするか、ということを考慮する必要があります。
いくつかあるので場合によって対応しましょう。

①9：16の位置のまま固定

①9：16の位置のまま固定

②オブジェクトの位置を上下左右に追従

②オブジェクトの位置を上下左右に追従

③伸ばせるものは端末のサイズに伸ばす

③伸ばせるものは端末のサイズに伸ばす

💡エンジニア・コラム３：背景画像

 
記事中で説明があったように、解像度毎に背景画像をどのように表示するか検討しなければなりません。
最も簡単なのは背景画像を拡大する事ですが、背景がぼやけてしまう場合があります。
そのため、テクスチャ・アトラスに余裕がある場合は、2520×2520 の画像を用意して中央だけ使ったりします。
（タイトル画面など「ぼやけて困る」かつ「配置されているオブジェクトが少ない」場合に使います）

背景画像

気を付けるポイント

デザイン制作時に気を付けたいポイントはいくつもありますが、本項では弊社のデザイナーが気を付けている以下の２つのポイントについてご紹介します。

１．横画面の場合サイドに張り付くデザインには気を付ける。

画面の回転をした際にノッチやパンチホールの位置が左右切り替わるため、破綻する可能性を避けるためです。

サイドに張り付く場合に注意

２．ヘッダーフッターにベースがある場合は大きめに作成する。または見えてもいいように作成する。

「SafeArea」の範囲によって、見える部分が異なるため変に切れてしまうのを避けるためです。
また、横に広い端末の場合も横にのびた際に切れる場合があるので、2520pxで用意すると安全です。

ベース素材に注意

おわりに

いかがでしたでしょうか。
スマホアプリ開発の際に、様々なディスプレイへの対応は本当に頭の痛い問題ですね。
そろそろ規格が安定すると良いのですが……。
この記事が少しでも皆様の参考になれば幸いです。