iPhone 14の解像度と、画像サイズ、CSSのピクセル設定をどうするか?ブログメモ デザイナー、コーチ、ディレクター|井川

igawa design.

Memo

iPhone 14の解像度と、画像サイズ、CSSのピクセル設定をどうするか?

です・ます調の文章でなくてすみません。当初は個人的なメモ書きだったためです。

iPhone 14の「解像度」とは?

デバイスの解像度と、画像サイズと、CSSの解像度。

意外と知らない!? 解像度を知っておこう。

基本的にWebで使用する写真などの解像度は72px/inchであり、Photoshopの解像度の設定も72px/inchが一般的。

これはWindowsが普及する前の時代、Macの前身であるMacintoshの解像度に由来していると思われ、今でもデジタル写真の解像度を調べると普通は72px/inchである。

例えばiPhoneで撮影した写真の解像度は72px/inchであり、ネット上にアップされている写真素材も普通は72px/inchである。

(ソフトの解像度の設定を間違えていたり、何らかの意図がない限りは72px/inchが普通。)

iPhone 14の解像度と、画像サイズ、CSSのピクセル設定をどうするか?

iPhone 14シリーズの画素数。

ちなみにiPhone 14とiPhone 14 PlusのカメラはiPhone 13シリーズと同じ1200万画素だが、iPhone 14 ProとiPhone 14 Pro Maxの画素数は4倍の4800万画素(48MP)となっている。

1画素は1pxなので、カメラボタンをカシャっと押すと、4800万個の点が集合したきめ細かな写真ができあがる。

レティナディスプレイ。

2010年頃にAppleがレティナディスプレイを発表してからは、物理的なデバイスのモニター解像度とCSS解像度が一致しなくなっている。

当初は2倍の密度だったので、単純にサイズを2倍にした画像を用意し、CSSでレスポンシブ対応するのが基本だった。

iPhone 14の解像度と、画像サイズ、CSSのピクセル設定をどうするか?

レスポンシブ対応の例。

スマホの幅と、PCの横幅。

スマホの幅を360pxと想定し、PC表示のブレイクポイントを1024px未満と1024px以上で切り替える場合。

例)

  • スマホの場合は、720px × 540pxの画像を表示。横幅360pxの2倍。1カラムを想定した場合。
  • パソコンの場合は、1024px × 768pxの画像を表示。横幅512pxの2倍。2カラムを想定した場合。
HTML

例)

HTMLで画像を切り替える場合。
<picture>
 <source media="(max-width: 1023px)" srcset="sample_720x540.jpg">
 <source media="(min-width: 1024px)" srcset="sample_1024x768.jpg">
 <img alt="サンプル" width="360" height="240" loading="lazy" src="sample_720x540.jpg">
</picture>
CSS

例)

CSSで背景画像を切り替える場合。
.example {
 background: url(assets/img/sample_720x540.jpg);
}
@media (min-width: 1024px){
.example {
 background: url(assets/img/sample_1024x768.jpg);
 }
}

ところがそうしているうちに、3倍以上のデバイス解像度が出始めた。

iPhoneの他にもデバイスが増えた。


デバイスに合わせているとキリがない。

iPhone 14の大きさは?

Apple社のサイトで確認すると、、、

  • iPhone 14とiPhone 14 Pro、は対角で6.1インチの画面で、iPhone 13と物理的には同じサイズ。
  • iPhone 14 PlusとiPhone 14 Pro Maxは、対角で6.7インチとiPhone 13 Pro Maxと物理的に同じサイズ。

となっている。

そして、ppi(1インチあたりのピクセル数)は、、、

  • iPhone 14とiPhone 14 Pro、iPhone 14 Pro Maxは460ppi。
  • iPhone 14 Plusは458ppi。

となっている。

1インチ(約2.54cm)あたり460pxや458pxということになるが、対角でのインチなのか、これからでは計算方法がよくわからない。72の倍数というわけでもないので、単純に2倍、3倍にするという計算では成り立たない。

Androidのシェアの拡大。

XperiaやGalaxyなど、Androidスマホもシェアを広げており、もちろんその他のスマホやパソコンもたくさんある。

こうなるともう、キリがない状態だ。

iPhone14とデバイスとCSSと..zzz


ひとまずは、スマホで綺麗に見えるように。

高解像度に未対応なデバイスは、古いWindowsくらい。

前述の通りMacは10年以上も前からすでに高解像度となっており、スマホも同様だ。

現在では高解像度や4K、5Kなど、綺麗な画質は当たり前となっている。反面、明確なppiの基準は定まっていない。

となると制作側の解決策としては、Macや古いWindowsなど使用者の少ないパソコンよりも、シェア率の高い「スマホ」に合わせて画像を書き出したり、CSSを指定したりする方が効率的となる。

カメラの性能の向上。

画素数やレンズやイメージセンサーなど、カメラの性能が上がったことにより写真自体の質が向上しているので、使用画像の目安としては、従来とあまり変わらず縦横のサイズが2倍以上の写真を使うとおおむね綺麗に見られる。

単純に3倍だと、画像容量が大きくなり重くなるという問題も出てくる。

なので全画面フルスクリーンや写真がフィーチャーされるサイトや、元の画質がよぼど悪くない限りは、以下のサイズでほぼほぼ問題ない。

  • PC用の画像は大きくても横幅1920pxのサイズ。横幅がCSSピクセルサイズで1921ピクセル以上のノートPCはまずない。デスクトップでもこのサイズ以上で見るユーザーの割合は少ない、という理由から。
  • スマホ用の画像は横幅620px〜800pxのサイズ。縦幅がCSSピクセルサイズで1024pxというスマホもなかなかないだろう。少なくても現時点のiPhoneのモデルでは存在しない。

iPhone 14の解像度と、CSSのブレイクポイント。

解像度から見る、CSSブレイクポイントの目安。

iphone 13の物理サイズとCSS解像度から想定、また公式や他サイトから調べると、iPhone 14のCSS解像度は下記の「iPhone 14の解像度一覧」のようになる。

近年ブレイクポイントの最小値は、小型のiPhoneに多い375pxが主流となっていが、AndroidのXperiaやRakuten Handには横幅360pxもある。iPhoneにも「拡大表示(Zoom)」モードがあり、この場合は320pxとなるようだ。

なので極力は320pxや360pxの横幅でも崩れないような設計をした方が良いかもしれない。

また、ノッチや角丸のディスプレイがあるiPhoneは、そのノッチや角丸の部分がCSSのブレイクポイントとズレる。

iPhoneのSafe Area問題。)

iPhoneのSafe Area問題。

画像引用:Layout Guide, Margins, Insets and Safe Area demystified on iOS 10 & 11
Killian THORON さま


petsviewport-fit=cover

例えばiPhone 12 miniの縦のサイズは812pxだが、CSSのブレイクポイントを812pxに指定してもノッチや角丸の領域部分が表示されないので、実際には812pxではなく、ブレイクポイントは768px以下となる。

そのため場合によってはmeta要素に「viewport-fit=cover」の指定が必要となる。
Safe Areaの外の角丸領域をカバーできる。)
iOSのChromeはカバーされないが、シェア率が低く、スマホを横にしてサイトを見るユーザーは少ないので、プログレッシブエンハンスメント的に割り切る。)

例)

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

参考:viewport-fit=coverで対応。iPhoneのSafe Area問題。

iPhoneのSafe Area外の角丸領域をカバー。

iPhoneの解像度一覧。(CSSピクセルサイズは一番右。)

iPhone 14の解像度一覧 – (?)は推定もしくは不明。
Device
デバイス
Scale
スケール
Native Scale
ネイティブ・スケール
ppi
ピクセルパーインチ
Resolution(pixel)
解像度(物理ピクセル)
Resolution(pixel)
解像度(CSSピクセル)
iPhone 14 Pro Max 3.0(?) 3.0(?) 460 2796×1290 430×932
iPhone 14 Pro Max(Zoomed) 3.0(?) 3.0(?) (?) (?) 375×812
iPhone 14 Pro 3.0(?) 3.0(?) 460 2556×1179 393×852
iPhone 14 Pro(Zoomed) 3.0(?) 3.0(?) (?) (?) 320×693
iPhone 14 Plus 3.0(?) 3.0(?) 458 1284×2778 428×926
iPhone 14 Plus(Zoomed) 3.0(?) 3.0(?) (?) 1125×2436(?) 375×812
iPhone 14 3.0(?) 3.0(?) 460 1170×2532 390×844
iPhone 14 (Zoomed) 3.0(?) 3.65625(?) (?) 960×2079(?) 320×693
iPhone 8〜13の解像度一覧
Device
デバイス
Scale
スケール
Native Scale
ネイティブ・スケール
Resolution(pixel)
解像度(物理ピクセル)
Resolution(pixel)
解像度(CSSピクセル)
iPhone 13 Pro Max 3.0 3.0 1284×2778 428×926
iPhone 13 Pro Max (Zoomed) 3.0 3.0 1125×2436 375×812
iPhone 13 Pro 3.0 3.0 1170×2532 390×844
iPhone 13 Pro (Zoomed) 3.0 3.65625 960×2079 320×693
iPhone 13 3.0 3.0 1170×2532 390×844
iPhone 13 (Zoomed) 3.0 3.65625 960×2079 320×693
iPhone 13 mini 3.0 2.88 1125×2436 375×812
iPhone 13 mini (Zoomed) 3.0 3.375 960×2079 320×693
iPhone 12 Pro Max 3.0 3.0 1284×2778 428×926
iPhone 12 Pro Max (Zoomed) 3.0 3.0 1125×2436 375×812
iPhone 12 Pro 3.0 3.0 1170×2532 390×844
iPhone 12 Pro (Zoomed) 3.0 3.65625 960×2079 320×693
iPhone 12 3.0 3.0 1170×2532 390×844
iPhone 12 (Zoomed) 3.0 3.65625 960×2079 320×693
iPhone 12 mini 3.0 2.88 1125×2436 375×812
iPhone 12 mini (Zoomed) 3.0 3.375 960×2079 320×693
iPhone SE 2nd Gen 2.0 2.0 750×1334 375×667
iPhone SE 2nd Gen (Zoomed) 2.0 2.34375 640×1136 320×568
iPhone 11 Pro Max 3.0 3.0 1242×2688 414×896
iPhone 11 Pro Max (Zoomed) 3.0 3.312 1125×2436 375×812
iPhone 11 Pro 3.0 3.0 1125×2436 375×812
iPhone 11 Pro (Zoomed) 3.0 3.515625 960×2079 320×693
iPhone 11 2.0 2.0 828×1792 414×896
iPhone 11 (Zoomed) 2.0 2.208 750×1624 375×812
iPhone Xs Max 3.0 3.0 1242×2688 414×896
iPhone Xs Max (Zoomed) 3.0 3.312 1125×2436 375×812
iPhone Xs 3.0 3.0 1125×2436 375×812
iPhone Xs (Zoomed) 3.0 3.515625 960×2079 320×693
iPhone XR 2.0 2.0 828×1792 414×896
iPhone XR (Zoomed) 2.0 2.208 750×1624 375×812
iPhone X 3.0 3.0 1125×2436 375×812
iPhone X (Zoomed) 3.0 3.515625 960×2079 320×693
iPhone 8 Plus 3.0 3.0 1242×2208 414×736
iPhone 8 Plus (Zoomed) 3.0 3.312 1125×2001 375×667
iPhone 8 2.0 2.0 750×1334 375×667
iPhone 8 (Zoomed) 2.0 2.34375 640×1136 320×568

スマホやPCを含んだデバイス全体の解像度と、CSSのブレイクポイント。


スマホやPCを含んだデバイス全体の解像度と、CSSのブレイクポイント。

ユーザー数から見る、CSSブレイクポイントの目安。

Google Analyticsで月間ユーザー数が6万〜7万人の一般層向けのサイトで確認したモニター解像度とユーザー数は以下のようになっている。(2022年)

「360px」や「320px」は全体から見るパーセンテージは低いが、人数としては3桁から4桁のユーザーがおり、合計では数千人となる。
また、上位にPCのサイズはなく、タブレットもしくはPCと思われる768×1024がギリギリ20番目に入っている。

Googleアナリティクスによるユーザーの画面解像度。
Googleアナリティクスによるユーザーの画面解像度。

参考:iPhoneの解像度一覧(iPhone8〜13まで)と、CSSブレイクポイントの目安は?

画像サイズとブレイクポイントの目安。


画像サイズとブレイクポイントの目安。

pets以上の理由から、、、

  • 画像のサイズは、表示サイズの2倍が目安。SP:620px〜800pxくらいの間。PC:1920pxくらいまで。
  • CSSのブレイクポイントの目安は、SP & Tablet:600px〜768px、PC:1024pxくらいから。
  • フルスクリーンなどは別途に指定。

となるだろう。

画像サイズ。

iPhone 14はおそらくiPhone 13同様に3倍のピクセル密度だと思われるが、3倍のサイズの画像を用意するよりもWebP形式にした方が効率が良さそう。綺麗に見せたい箇所や大きく見せたい箇所は別途で用意する。

ブレイクポイント。

タブレットは意外とブラウザシェア率が低く、その中で最も多いiPadの横(ランドスケープ)はmin-width: 1024px〜でカバーできる。なので、HTMLとCSSは従来通り1024pxを基本とできる。

HTML

例)

HTMLで画像を切り替える場合。(WebP)
<picture>
 <source media="(max-width: 1023px)" srcset="sample_720x540.webp">
 <source media="(min-width: 1024px)" srcset="sample_1024x768.webp">
 <img alt="サンプル" width="360" height="240" loading="lazy" src="sample_720x540.webp">
</picture>
CSS

例)

CSSで背景画像を切り替える場合。(WebP)
.example {
 background: url(assets/img/sample_720x540.webp);
}
@media (min-width: 1024px){
.example {
 background: url(assets/img/sample_1024x768.webp);
 }
}
ブレイクポイントと画像を追加する場合。(WebP)
.example {
 background: url(assets/img/sample_720x540.webp);
}
@media (min-width: 768px) {
.example {
 background: url(assets/img/sample_768x576.webp);
 }
}
@media (min-width: 1024px){
.example {
 background: url(assets/img/sample_1024x768.webp);
 }
}
petsWebPについて。

2022年6月のIEサポート終了により、モダンブラウザは全てWebPに対応している。

参考:WebP?JPGからWebPへ。HTMLへの実装・検証結果。
参考:WebPへの対応。実は変換も簡単、SEOにも効果的に。

iPhone14の解像度は?

以上、参考になれば幸いです。


Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いています。(元々はメモ書きでしたので順次見直し、更新しています。) 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 写真は主にUnsplashPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、購入素材、もしくは自前のものを使用しております。

デザイナー、ディレクター、講師、コーチ / 井川宜久

お問い合わせ CONTACT..

    免責事項について

    • 記事ページ(Memosのページ)は当初は文字通りメモ書きでした。その後、修正や更新をしております。
    • 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ早急に対応いたします。
    • 一個人のポートフォリオサイトですので、万一損害・トラブル等が発生した場合でも、一切の責任を負いかねます。

    個人情報について

    • 個人情報はお問い合わせやお客さま対応のみでの利用とさせていただいております。
    • こちらから営業目的でご連絡することはありません。
    • ご本人様の了解や、法に基づいた理由がない限り、第三者へ開示することはありません。