NowLoading...

NowLoading
  1. ホーム
  2. 技術備忘録
  3. スマホアプリのデザインサイズ ’26

デザイン

  • facebook
  • twitter
  • line
  • hatena
  • pocket

スマホアプリのデザインサイズ ’26

スマホアプリを制作する際に画面のデザインサイズをいくつにするか? デザイナーにとっては最も重要な課題です。
本ブログでもこの話題は過去に2度記事にしていますが、スマホの画角や性能は日進月歩で進化しているため、最近はまた状況が変わってきているように感じます。

>「2023年版 アプリのデザインサイズどうするよ?」
>「アプリの画面デザインで最低限知っておかないと恥ずかしい基礎知識」

――というわけで今回も始めていきましょう。2026年版 スマホアプリの画面サイズはいくつ(何px)で作ればいいのか論争!

いきなり結論

私が考える2026年時点でのスマホにおける画面デザインサイズの最適解は
1080 x 2340

画面の解像度と画角

Source: StatCounter Global Stats – Screen Resolution Market Share


最新のデジタルデバイスにおける画面サイズのシェア状況を調べると2023年の頃よりもさらに高解像度化が進んでおり、端末のサイズはより大型化に向かってきているような状況です。
Web-Saku「日本国内のデバイス別ディスプレイサイズ(解像度)シェア(2026年3月)」

[414×896]や[375×812]などiPhoneの主要機種で採用されている5.4~6.5inchの端末が圧倒的に多く、iphoneSEで採用されている[375×667]の4.7inchも依然として6%くらいのシェア率があります。

高解像度化に伴い、端末サイズも若干大型化してきている印象ですが、上記からも分かるように画角自体は2023年頃からほぼ変わらす、iphoneX以降から採用されている[9:19.5]とPCモニターやTVサイズで採用されているフルHD[9:16](iphoneSEと同じ画角)の2つの画角が現在も主流なようです。
そのため、デザイン時における画角の考え方は2023年時点のままで問題なさそうです。 aspect

端末性能

2023年時点では心もとなかった端末の性能も格段に上がっているため、高解像度向けに開発されているアプリでも難なく動かせるようになってきていると思われます。
以前は使用率の高かったiphoneX以前の旧端末もOSのサポートが切れるなどの理由からか、新端末に乗り換えた人が多いのかもしれません。
端末がより高解像度の表現に対応できるなら、デザイン側も少し解像度を上げた対応をしてもいいかもしれません。
>「スマホアプリの解像度対応」

こちらで言及している通り、現実サイズ(cssピクセル)とデータ作成時のサイズは違うため、デザイン制作時のデータは2~3倍相当のサイズでデザインする必要があります。
2023年時点でご紹介したサイズではSuperRetinaに相当する3倍デザインでは低スペックの端末が耐えられないかもしれないと言及しましたが、端末性能が向上したことでSuperRetinaのサイズそのままでも無理なく動かせるシチュエーションが増えてきているように感じます。

CSSサイズ:375×812 3倍→ デザインサイズ:1125×2436
CSSサイズ:393×852 3倍→ デザインサイズ:1179×2556

多端末画角対応

前述したとおり画面の解像度は日々進化していますが、画面の画角(アスペクト比)はほぼ変わっていません。
対応方法は コチラ>「多様な画角に対応するデザイン」 で紹介している通り、最小の画面サイズでレイアウトを設計し、画面サイズが変わったときにUIを移動するなどして端末に対応させるという方法が一般的です。

タブレットに関しても端末の解像度状況は同じで、4:3や1:1.4のような正方形に近いタイプの端末が多いので、スマホ用のデザインをそのまま拡張すれば対応可能です。
Appstoreでは多端末対応しないと申請で弾かれる可能性があるので、16:9(FHD)、19.5:9、4:3(タブレット)の3つの画角には最低でも対応しておきましょう。
>「多様な画角に対応するデザイン」

フルHD基準に考えてみる

iPhoneのRetina端末やAndroidのxxhdpi端末がまだ主流であることを考えると、SuperRetinaのような3倍解像度にフォーカスするのは時期尚早かもしれません。
高解像度にフォーカスすると低スペック端末の動作に不安が残るので、
フルHD[1080×1920]なら2倍Retinaより解像度が高く、3倍Retinaには若干届かないくらいの中間の解像度です。両方をカバーできるでしょう。
また、フルHDサイズはPCやTVモニターに採用されるのが多いサイズなので、スマホ以外への展開も視野に入れるなら、難なく対応できる解像度になります。
フルHDサイズ[1080×1920]を基準にスマホの画面も設計するのが最もバランスの良い選択肢です。

まとめ

端末の性能が上がったことで、より高解像度のデザインに対応したデータを作れるようになりました。
ただし、高スペックにフォーカスするとユーザー層を限定してしまうため、RetinaとSuperRetina両方の中間ぐらい フルHD解像度の1080×1920 にフォーカスするのがよさそうです。
画角は2023年から変わらないので、作成時のデザインデータは16:9(FHD)基準で19.5:9に対応できるようにしておきましょう。
また、タブレットにも対応するため4:3の画角分を足したデザインも用意すれば完璧です。

画面デザインのカンバスサイズは
スマホ:1080 x 2340、タブレット:1754 x 2340

①メインのデザインは1080×1920(FHD)の範囲内に収めつつ
画面サイズ ②FHDよりも大きな端末で表示した際にレイアウトが対応できるようにUIを画面に追従させる
vertical
③ipad等画角が大きく違う端末にも対応できるように、背景側のデザインを4:3のサイズで制作しておく。
horizonal

さらに高解像度を目指すなら
iphone11pro:1125×2436 タブレット:1759×2346
iphone15pro:1179×2556 タブレット:1846×2556
でどうでしょう?

関連記事

もっと見る

技術備忘録でよく読まれている記事

人気記事TOP10