こにゃにゃちわ。YMOです。
もとい、ワイ！エム！オー！！です。（ジー！〇ム！オー！！みたいに言ってます）
ストリクスではネイティブアプリ（いわゆるスマホにダウンロードするアプリ）の画面デザインをよく作るのですが、スマホって画面サイズやブラウザのアスペクト比率もいろいろあってよく分からないから、ちょっと整理してみようかと思ったんだってさ。
ということで、今回はiOSはiPhone6以降、AndroidはAndroid OS 6 以降の端末をターゲットに、どのサイズに向けてデザインするのが好ましいかをお話ししてみるんだとさ。
iOS（iPhone6以降）
まずはiOS（iPhone6以降）です。
ポイントで言うと、横幅375pxが１番狭く、アスペクト比率で言うと16：9が横幅に対した高さが１番短いです。
次に１番横幅が広いのが414pxで、アスペクト比率では約2：1の機種が横幅に対し高さが１番長いです。
そんなこんなで１番小さいのは iPhone6 などの 高さ 667px×横幅 375px、そして１番でっかいヤツが iPhone11 ProMax などの 高さ896px×横幅414pxで、ステータスバーやホームエリアを差し引くと↓のセーフエリアとなります。
Android（Android OS 6 以降）
続いてAndroid（Android OS 6 以降）です。
Androidは x1（1倍） でみたとき全ての機種の横幅が360pxになります。
※例外の機種があるかも知れませんが。
ですのでアスペクト比率を見て、最小・最大サイズを割り出せばオッツのケーです。
１番高さが短いのは約19：6、逆に高いのは約18.5：9になります。
Androidはステータスバーとボタンナビゲーションがありますので、その分を差し引いたセーフエリアは↓のようになります。
ほんでターゲットサイズを決めて
どの画角をターゲットにしてUIを設計するかは「決め」にはなりますが、制作コストを抑えたい場合はサイズパターンを減らしたいと思いますので、 iOS＆Androidの中から最小・最大サイズをピックしてみましょう。
↓のイメージを見てもらうと分かるとおり、最小はAndroid（16：9）、最大はiPhone11ProMaxの（27：1）になりましたね。
最小・最大サイズを意識した設計を
トップ画面などは見栄えを気にしたいところですので、最小・最大でレイアウトを組むのが良いかと思います。
組み方はイロイロですが、１アイデアとしてこんな感じどうでしょう？
どうでしたか？
ターゲットが後から変更となると大変なことになっちゃうので、 初めからシッカリ計画を立てて進めたいところですね。
では、さよおなら。
