〜UIデザイナーのための各端末サイズ比較〜解像度/アスペクト比/Retina(高精細液晶)サイズ早見表

さっそくですがなんでnoteにはテーブルタグがないんでしょう、、

ということなのでかなり使いづらく見辛いとは思いますが、画像で紹介していきます

各種端末サイズ早見表

2020年12月現在の各種端末のサイズを調査しました。※独自調べなので誤差があるかもしれませんのでご了承ください

画像だけだとあまりに使いづらいと思うので下記に数値貼っておきます

iPhone 12 Pro Max | 6.7(6.68) | 1284 | 2778 | 3 | 428 | 926 | 9:19.5 | 第14世代 | 2020 | iOS | iPhone
iPhone 12 Pro | 6.1 | 1170 | 2532 | 3 | 390 | 844 | 9:19.5 | 第14世代 | 2020 | iOS | iPhone
iPhone 12 | 6.1 | 1170 | 2532 | 3 | 390 | 844 | 9:19.5 | 第14世代 | 2020 | iOS | iPhone
iPhone 12 mini | 5.4 | 1080 | 2340 | 2.88 | 375 | 812.5 | 9:19.5 | 第14世代 | 2020 | iOS | iPhone
iPhone SE(2nd generation) | 4.7 | 750 | 1334 | 2 | 375 | 667 | 9:16 | 第13世代 | 2020 | iOS | iPhone
iPhone 11 Pro Max | 6.5 | 1242 | 2688 | 3 | 414 | 896 | 9:19.5 | 第13世代 | 2019 | iOS | iPhone
iPhone 11 Pro | 5.8 | 1125 | 2436 | 3 | 375 | 812 | 9:19.5 | 第13世代 | 2019 | iOS | iPhone
iPhone 11 | 6.1 | 828 | 1792 | 2 | 414 | 896 | 9:19.5 | 第13世代 | 2019 | iOS | iPhone
iPhone XR | 6.1 | 828 | 1792 | 2 | 414 | 896 | 9:19.5 | 第12世代 | 2018 | iOS | iPhone
iPhone XS Max | 6.5 | 1242 | 2688 | 3 | 414 | 896 | 9:19.5 | 第12世代 | 2018 | iOS | iPhone
iPhone XS | 5.8 | 1125 | 2436 | 3 | 375 | 812 | 9:19.5 | 第12世代 | 2018 | iOS | iPhone
iPhone X | 5.8 | 1125 | 2436 | 3 | 375 | 812 | 9:19.5 | 第11世代 | 2017 | iOS | iPhone
iPhone 8 Plus | 5.5 | 1080 | 1920 | 3 | 360 | 640 | 9:16 | 第11世代 | 2017 | iOS | iPhone
iPhone 8 | 4.7 | 750 | 1334 | 2 | 375 | 667 | 9:16 | 第11世代 | 2017 | iOS | iPhone
iPhone 7 Plus | 5.5 | 1080 | 1920 | 3 | 360 | 640 | 9:16 | 第10世代 | 2016 | iOS | iPhone
iPhone 7 | 4.7 | 750 | 1334 | 2 | 375 | 667 | 9:16 | 第10世代 | 2016 | iOS | iPhone
iPhone SE(1nd generation) | 4 | 640 | 1136 | 2 | 320 | 568 | 9:16 | 第9世代 | 2016 | iOS | iPhone
iPhone 6s Plus | 5.5 | 1080 | 1920 | 3 | 360 | 640 | 9:16 | 第9世代 | 2015 | iOS | iPhone
iPhone 6s | 4.7 | 750 | 1334 | 2 | 375 | 667 | 9:16 | 第9世代 | 2015 | iOS | iPhone
iPhone 6 Plus | 5.5 | 1080 | 1920 | 3 | 360 | 640 | 9:16 | 第8世代 | 2014 | iOS | iPhone
iPhone 6 | 4.7 | 750 | 1334 | 2 | 375 | 667 | 9:16 | 第8世代 | 2014 | iOS | iPhone
iPhone 5s | 4 | 640 | 1136 | 2 | 320 | 568 | 9:16 | 第7世代 | 2013 | iOS | iPhone
iPhone 5c | 4 | 640 | 1136 | 2 | 320 | 568 | 9:16 | 第7世代 | 2013 | iOS | iPhone
iPhone 5 | 4 | 640 | 1136 | 2 | 320 | 568 | 9:16 | 第6世代 | 2012 | iOS | iPhone
iPhone 4s | 3.5 | 640 | 960 | 2 | 320 | 480 | 2:3 | 第5世代 | 2011 | iOS | iPhone
iPhone 4 | 3.5 | 640 | 960 | 2 | 320 | 480 | 2:3 | 第4世代 | 2010 | iOS | iPhone
iPhone 3GS | 3.5 | 320 | 480 | 1 | 320 | 480 | 2:3 | 第3世代 | 2009 | iOS | iPhone
iPhone 3G | 3.5 | 320 | 480 | 1 | 320 | 480 | 2:3 | 第2世代 | 2008 | iOS | iPhone
iPhone | 3.5 | 320 | 480 | 1 | 320 | 480 | 2:3 | 第1世代 | 2007 | iOS | iPhone
Samsung Galaxy S10 | 6.1 | 1440 | 3040 | 4 | 360 | 760 | 9:19 |  | 2019 | Android | Samsung
Google Pixel 5 | 6.0 | 1080 | 2,340 | 3 | 360 | 780 | 19.5:9 | 第５世代 | 2020 | Android | Google
Pixel 4a | 5.81 | 1080 | 2340 | 3 | 360 | 780 | 19.5:9 | 第４世代 | 2020 | Android | Google
Google Pixel 4 | 5.7 | 1080 | 2280 | 3 | 360 | 760 | 9:19 | 第４世代 | 2019 | Android | Google
Google Pixel 4XL | 6.3 | 1440 | 3040 | 4 | 360 | 760 | 9:19 | 第４世代 | 2019 | Android | Google
XPERIA 5II | 6.1 | 1,080 | 2,520 | 3 | 360 | 840 | 9:21 |  | 2020 | Android | SONY
XPERIA 8Lite | 6.0 | 1080 | 2520 | 3 | 360 | 840 | 9:21 |  | 2020 | Android | SONY
Xperia Ace | 5.0 | 1,080 | 2,160 | 3 | 360 | 720 | 9:18 |  | 2019 | Android | SONY

UIデザイナーが必要な数値はデバイスピクセル比（Retina,K)の数値とdp解像度あたりかと思います

デバイスピクセル比とdp解像度がよく分からない方はこちらの記事をどうぞ

設計画面サイズの比較

dp解像度を元に画面サイズを比較した画像がこちら

まずはiPhoneシリーズを近年のもので比較してみました

Androidは端末数が多いので、絞って比較しています。

こうやって比較するとあまり差のないように見えますが、EXPERIAの縦長度合いは実機見ると震え上がるほどの比率です

UIデザイナーならわかってもらえると思いますが、全画面を想定した画像作成の時にこの比率が極端に違うと画像が予期しない見え方をしてしまうので一苦労、、

EXPERIAのアスペクト比は9:21。以前(iPhone8まで)は9:16が主流だったところ9:19になり、9:21まで出てきてしまいました

iPhoneとAndroidの端末を重ねて見るとこんな感じになります

アスペクト比だけで見るとiPhoneもAndroidも近年の比率は同じものが多く主流は9:19のようです

dp解像度はiPhoneの方がやや大きく、iPhone基準で作成していればAndroid側は問題なさそうです

ステータスバーのサイズ比較

iPhoneXやProが出だしてステータスバーの主流サイズも変わってきました

AndroidもiPhoneも最近では、中央にインカメラを設置し、左右の空いたスペースにステータスを表示するタイプが増えてきています

今まで画面に端末固有のパーツが重なることがなかったのですが、主流が変わってきたことによってステータスバーが倍以上も高くなりました

iPhone8以前をベースにデザインしている人は、ステータスバーの範囲が44px(iPhone基準)まで伸びているので注意しましょう

UI設計はどのサイズでするべきか

基本的にはiPhone端末ベースで設計をしていきますが、ではどの世代のサイズをベースに作成していくべきでしょう

端末普及率や、プロジェクト方針、どのOSまでをサポートするかなどの問題もあり、基本的には関わるサービスの要件に合わせて調整が必要ですが、その辺りを無視してデザインの観点のみで考えてみます

近年のiPhone端末(iPhone 12+12 Pro/iPhone11/iPhone 11 Pro)で比べて見るとこのような大きさになりました

iPhone12になってdp解像度自体は小さくなっていますが、その分iPhone12シリーズは全て3K(Retina)対応になっています

アスペクト比自体はどれも同じ9:19.5なので、どれで設計しても大丈夫そうですが、画像書き出しは3倍で書き出していくのが主流となってきそうです

ということで、個人的な見解ですが2021年からのUI設計サイズ推奨は下記の通りです

UI設計推奨サイズ(独自見解)

UI設計サイズ：基準(iPhone12)：390dp(px) × 844dp(px)

画像書き出し：基準(iPhone12@3x)：1170px × 2532px

ステータスバー：44px開けて作成する

以上、独自調べですが端末サイズとUI設計の推奨サイズについてでした

noteにテーブルタグを追加して欲しいです。同意される方、ぜひ♡押していただけると嬉しいです

この記事はBrewus.incの業務を元に作成しています