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

Memo

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

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

iPhone 14の解像度は?

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

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

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

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

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

Webなどのデジタルデバイスの場合は72px/inchが基本。まずこのことを知っておいた方いいと思う。

デバイスが増えた。

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

当初は2倍の密度だったので、単純にサイズを2倍にした画像を用意し、CSSでレスポンシブ対応するのがベストだった。そうすると画像が2倍の密度になり、きめ細かな画質となる。

例)

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

  • スマホの場合は、720px × 480pxの画像を表示。
  • パソコンの場合は、1024px × 768pxの画像を表示。
HTMLで画像を切り替える場合。
<picture>
 <source media="(max-width: 1023px)" srcset="sample_720x480.jpg">
 <source media="(min-width: 1024px)" srcset="sample_1024x768.jpg">
 <img alt="サンプル" width="360" height="240" loading="lazy" src="sample_720x480.jpg">
</picture>
CSSで背景画像を切り替える場合。
selector {
 background: url(assets/img/sample_720x480.jpg);
}
@media (min-width: 1024px){
selector {
 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倍にするという計算では成り立たない。

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

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

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


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

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

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

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

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

カメラの性能が上がったことにより写真自体の質が上がっているので、使用画像の目安としては、縦横のサイズが2倍以上の写真を使うとおおむね綺麗に見られる。許容範囲内だ。3倍だと画像容量が大きくなるという問題も出てくる。

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

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

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

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

iphone 13の物理サイズとCSS解像度から想定すると、iPhone 14のCSS解像度は下記の通りとなる。(一部は推定。)

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

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

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

画像引用:Smart&Soft Blog さま

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

そのため場合によっては「viewport-fit=cover」の指定が必要となる。(角丸領域をカバーした表示ができる。)

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

iPhoneの解像度一覧。

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(?) (?) (?) (?)
iPhone 14 Pro 3.0(?) 3.0(?) 460 2556×1179 393×852
iPhone 14 Pro(Zoomed) 3.0(?) 3.0(?) (?) (?) (?)
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のブレイクポイント。

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

Google Analyticsで月間ユーザー数が6万〜7万人の一般層向けのサイト(2022年)で確認したモニター解像度とユーザー数。

全体から見るパーセンテージは低いが、人数としては3桁から4桁のユーザーがおり、合計では数千人となる。

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

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


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

以上の理由から、、、

  • 画像のサイズは、表示サイズの2倍が目安。(PC:1920pxくらいまで、SP:620px〜800pxくらいの間。)
  • CSSのブレイクポイントは、スマホやタブレット用に600px〜768px、PC用に1024pxが最低限の目安。(できれば320px画面も視野に入れる。)

となるだろう。

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


疲れた時は、栄養を。
ポスト投函で届く、人気のブドウ糖です。
砂糖の代わりにコーヒーや紅茶などに。

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

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

お問い合わせ CONTACT..

    Name(required)お名前 (必須)
    Furigana(required)ふりがな (必須)
    Email(required)メールアドレス (必須)
    Phone Number(required)電話番号 (必須)
    Message(required)ご質問・ご要望 (必須)


    免責事項について

    • 事実や経験、調査や検証を基にしていますが、私はただの人間です。万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。
    • 万一損害・トラブル等が発生した場合でも、一切の責任を負いかねます。