iPhoneの解像度とは？

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

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

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

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

解像度は、72px/inchが一般的。

iPhoneで撮影した写真も、ネット上にアップされている写真素材も、基本は72px/inch。

解像度と画素数の違い。

意味は異なるが、解像度も画素も、基本的に数が多いほど密度の高い綺麗な画像となる。

• 解像度：点の密度。画像の１辺の1インチあたりのピクセル数。（例：72px/inch）
• 画素：点の数。写真を構成している縦横中身全てのピクセル数。（例：4800万画素）

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

iPhone 14シリーズの画素数。

iPhone 14とiPhone 14 Plusのカメラは、iPhone 13シリーズと同じ1200万画素。
iPhone 14 ProとiPhone 14 Pro Maxの画素数は、4倍の4800万画素（48MP）。

iPhone 15シリーズの画素数。

iPhone 15のモデルは、全て4800万画素（48MP）に対応。

レティナディスプレイ。

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

当初は2倍の密度だったので、単純にサイズを2倍にした画像を用意し、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="img/sample_720x540.jpg">
 <source media="(min-width: 1024px)" srcset="img/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 14、iPhone 15の大きさは？

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

6.1インチモデル。

• iPhone 14とiPhone 14 Proは対角で6.1インチの画面。（iPhone 13と物理的には同じサイズ。）
• iPhone 15とiPhone 15 Proも同様。

6.7インチモデル。

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

引用元：iPhone 14とiPhone 14 Plus – 仕様 – Apple（日本）
引用元：iPhone 15とiPhone 15 Plus – 仕様 – Apple（日本）

Androidのシェアの拡大。

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

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

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

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

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

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

カメラの性能の向上。

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

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

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

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

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

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

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

AndroidのXperiaやRakuten Handには横幅360pxもある。iPhoneにも「拡大表示（Zoom）」モードがあり、この場合は320pxとなるようだ。

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

ブレイクポイントの書き方。メディアクエリの指定例。

※後日追記）

別記事にまとめました。

参考メモ：CSSのブレイクポイントの書き方。メディアクエリはいくつがおすすめ？

iPhoneのSafe Area問題。

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

画像引用：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」の指定が必要となる。

• 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 14〜15の解像度一覧。（CSSピクセルサイズは一番右。）

• 参考サイト：iPhoneの拡大表示時の解像度一覧 Display Zoom Mode
  著者：Shin さま
• 参考サイト： Screen Sizes さま
• 参考サイト：How iOS Apps Adapt to the various iPhone 14 Screen Sizes
  
  著者：Geoff Hackworth さま
• 参考サイト： iPhone 14とiPhone 14 Plus – 仕様 – Apple（日本）
• 参考サイト：iPhone 14 ProとiPhone 14 Pro Max – 仕様 – Apple（日本）
• 参考サイト： iPhone 15とiPhone 15 Plus – 仕様 – Apple（日本）
• 参考サイト：iPhone 15 ProとiPhone 15 Pro Max – 仕様 – Apple（日本）

デバイス全体の解像度と、CSSのブレイクポイント。

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

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

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

また、上位にPCのサイズはなく、タブレットもしくはPCと思われる768×1024がギリギリ20番目に入っている。

参考メモ：iPhoneの解像度一覧（iPhone8〜13まで）と、CSSブレイクポイントの目安は？

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

数値の目安。

以上の理由から、、、

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

となるだろう。

（※400px未満のスマホのスタイルは、@media〜の前に書く。）

関連：CSSのブレイクポイントの書き方。メディアクエリはいくつがおすすめ？

画像サイズ。

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

ブレイクポイント。

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

HTML

HTMLで画像を切り替える場合。（WebP）

<picture>
 <source media="(max-width: 1023px)" srcset="img/sample_720x540.webp">
 <source media="(min-width: 1024px)" srcset="img/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にも効果的に。

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

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