【ココ重要ですよ!】スマホアプリのブラウザ解像度&アスペクト比率を本気で考えてみたんだってさ。

こにゃにゃちわ。YMOです。
もとい、ワイ!エム!オー!!です。(ジー!〇ム!オー!!みたいに言ってます

ストリクスではネイティブアプリ(いわゆるスマホにダウンロードするアプリ)の画面デザインをよく作るのですが、スマホって画面サイズやブラウザのアスペクト比率もいろいろあってよく分からないから、ちょっと整理してみようかと思ったんだってさ。


ということで、今回はiOSはiPhone6以降、AndroidはAndroid OS 6 以降の端末をターゲットに、どのサイズに向けてデザインするのが好ましいかをお話ししてみるんだとさ。

iOS(iPhone6以降)

まずはiOS(iPhone6以降)です。

ポイントで言うと、横幅375pxが1番狭く、アスペクト比率で言うと16:9が横幅に対した高さが1番短いです。

次に1番横幅が広いのが414pxで、アスペクト比率では約2:1の機種が横幅に対し高さが1番長いです。

そんなこんなで1番小さいのは iPhone6 などの 高さ 667px×横幅 375px、そして1番でっかいヤツが iPhone11 ProMax などの 高さ896px×横幅414pxで、ステータスバーやホームエリアを差し引くと↓のセーフエリアとなります。

iPhone6(左)と iPhone11 ProMax(右)

Android(Android OS 6 以降)

続いてAndroid(Android OS 6 以降)です。

Androidは x1(1倍) でみたとき全ての機種の横幅が360pxになります。
※例外の機種があるかも知れませんが。

ですのでアスペクト比率を見て、最小・最大サイズを割り出せばオッツのケーです。

1番高さが短いのは約19:6、逆に高いのは約18.5:9になります。
Androidはステータスバーとボタンナビゲーションがありますので、その分を差し引いたセーフエリアは↓のようになります。

Androidで1番小さいサイズ(左)と1番大きいサイズ (右)

ほんでターゲットサイズを決めて

どの画角をターゲットにしてUIを設計するかは「決め」にはなりますが、制作コストを抑えたい場合はサイズパターンを減らしたいと思いますので、 iOS&Androidの中から最小・最大サイズをピックしてみましょう。

↓のイメージを見てもらうと分かるとおり、最小はAndroid(16:9)、最大はiPhone11ProMaxの(27:1)になりましたね。

上から順に大きいサイズ

最小・最大サイズを意識した設計を

トップ画面などは見栄えを気にしたいところですので、最小・最大でレイアウトを組むのが良いかと思います。

組み方はイロイロですが、1アイデアとしてこんな感じどうでしょう?

こんなにサイズに違いがあるんですね

どうでしたか?

ターゲットが後から変更となると大変なことになっちゃうので、 初めからシッカリ計画を立てて進めたいところですね。

では、さよおなら。