はじめまして、デザイナーのSATです。とうとうiPhone Xが発売されましたね。
アプリ制作に携わるデザイナーのみなさまは、この特異な形状にどう対応する必要があるのか気になるところかと思います。
そこで今回は改めてアプリ制作向けにAppleから公式で発表されている情報をまとめてみました。

Human Interface Guidelines

Human Interface Guidelinesが更新されiPhone Xに関する記述も追加されています。
スクリーンサイズやレイアウトの注意点などを確認することができます。
ポイントとしては以下になります。

スクリーンサイズ
縦向きの場合、iPhone Xのディスプレイの横幅は、iPhone 6〜8の4.7インチディスプレイの幅と一致しますが高さは145pt高くなります。
また、画像素材についてはiPhone Plusと同様に@3xとなります。

・ポートレートサイズ
1125ピクセル×2436ピクセル(375ピクセル×812ピクセル@ 3ピクセル)
・ランドスケープサイズ
2436ピクセル×1125ピクセル(812ピクセル×375ピクセル@ 3ピクセル)


https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/

レイアウト
アスペクト比が変更されています。
全画面の画像素材の扱いには注意が必要そうですね。

Designing for iPhone Xi

iPhone Xに関するデザイン上の注意点が開設された動画です。
基本的にはHuman Interface Guidelinesと同じ内容になっています。
ただ、音声は全て英語なのでご注意を。
https://developer.apple.com/videos/play/fall2017/801/
※Safariでしか視聴できません

新しいOSのデザインリソース(Photoshop・Sketch・Adobe XD形式)

Apple公式のデザインリソースがダウンロードできます。
デザインするにあたって一度データを触っておくとイメージがつかめるかと思います。
https://developer.apple.com/design/resources/#ios-apps

いかがでしたでしょうか。
これまでのiPhoneからかなり大きく変更されたことが分かりますね。
すでにリリースしたアプリの対応含め、今後はiPhoen Xとは長い付き合いになりそうです。
とはいえ多くのユーザが期待を寄せる端末です。
ここから新たなユーザー体験を作り出すことはデザインの醍醐味ではないでしょうか。
そんなアプリのUIを一つでも多く生み出せるよう頑張っていきます!

投稿者プロフィール

SAT
SAT