歴代iPhoneの壁紙・画面・ブラウザサイズ【iPhone 11 Pro対応】

今回の記事では、歴代iPhoneに最適な壁紙サイズを紹介していきます。この壁紙サイズですが、「デバイス上の最適なサイズ」「Webサイト閲覧時の最適なサイズ」「壁紙にする際の最適なサイズ」の3つで異なります。

Webデザインをしている人ならば、Webサイト閲覧時の最適なサイズを意識しなければなりませんし、アプリ制作者であればデバイス上の最適なサイズを意識しなければなりません。

2019年10月時点での最新iPhoneは、iPhone 11 Pro、iPhone 11 Pro Max、iPhone 11になります。

歴代iPhoneの画面サイズまとめ

まずはiPhoneの画面サイズをまとめました。

iPhone X以降の端末では、いくつか画面サイズが同じものが存在します。

2019年時点でiPhone Xの発売から約2年経過していますが、画面サイズに関して大きな刷新は見られません。

次に歴代iPhoneの壁紙サイズをまとめました。

基本的に画面サイズと一緒になりますが、iPhoneには「視差効果」という機能がありますので、実際はアスペクト比を守りながら上記壁紙サイズよりも大きい壁紙を用意するのが無難です。

この視差効果とは、iPhoneを傾けたりすること奥行きを演出する機能です。この機能は「設定アプリ → 一般 → アクセシビリティ」まで進み、「視差効果を減らす」をオンにすることで無効化できます。

実際の物理的な解像度とブラウザサイズは異なります。最新のiPhone 8からiPhone 4までのブラウザサイズをまとめたので参考にしてください。

Webデザインをしている方は、このブラウザサイズでサイトを作ってはいけません。その理由はiPhoneの画面がRetina対応となっているからです。

Retinaディスプレイは、アップル製品のうち、100〜200dpi程度であった従来の倍の解像度、高画素密度のディスプレイを指す名称である。「Retina」（レティナ）は英語で「網膜」という意味で、画素が細かく人間の目で識別できる限界を超えている、ということから命名された。

簡単に言ってしまうと、ブラウザサイズピッタリでWebサイトを作ってしまうと、画像が荒くなってしまうよ、ということです。ですので、iPhoneを意識してWebデザインを行う場合は、ブラウザサイズの2倍の大きさでデザインを行うのが良いです。

例えば、iPhone 8の場合ですと、ブラウザサイズの横幅が375pxなので、実際にデザインする場合は750pxで作ったほうが、より鮮明に画像を表示することが出来ます。最初のほうで紹介した「画面サイズ」で調整してあげれば良いです。

以上が、歴代iPhoneの壁紙サイズ、画面サイズ、ブラウザサイズの紹介でした。

Webサイトのデザインをしている方は、ブラウザサイズではなく実際の画面サイズを意識してWebサイトを作ることをオススメします。Retina倍率というややこしい部分もありますが、基本的には画面サイズに合わせれば問題ないでしょう。

壁紙を設定する場合は、アスペクト比に注意してください。