歴代iPhoneの壁紙サイズ・画面サイズ・ブラウザサイズをまとめて紹介

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

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

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

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

機種 画面サイズ(px) サイズ(インチ)
iPhone X 2436 x 1125 5.8
iPhone 8 Plus 1920 x 1080 5.5
iPhone 8 1334 x 750 4.7
iPhone 7 Plus 1920 x 1080 5.5
iPhone 7 1334 x 750 4.7
iPhone 6s Plus 1920 x 1080 5.5
iPhone 6s 1334 x 750 4.7
iPhone 6 Plus 1920 x 1080 5.5
iPhone 6 1334 x 750 4.7
iPhone 5s 1136 x 640 4
iPhone 5c 1136 x 640 4
iPhone 5 1136 x 640 4
iPhone 4s 960 x 640 3.5
iPhone 4 960 x 640 3.5

iPhone Ⅹは歴代iPhoneの中で最も大きな端末で、その画面サイズは5.8インチ(2436 x 1125)となっています。iPhone 8およびiPhone 8 Plusに関しては画面サイズもブラウザサイズもiPhone 7時代と変わりありません。

歴代iPhoneの壁紙サイズまとめ

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

機種 壁紙サイズ(px) アスペクト比
iPhone X 2436 x 1125 2:1
iPhone 8 Plus 1920 x 1080 16:9
iPhone 8 1334 x 750 16:9
iPhone 7 Plus 1920 x 1080 16:9
iPhone 7 1334 x 750 16:9
iPhone 6s Plus 1920 x 1080 16:9
iPhone 6s 1334 x 750 16:9
iPhone 6 Plus 1920 x 1080 16:9
iPhone 6 1334 x 750 16:9
iPhone 5s 1136 x 640 16:9
iPhone 5c 1136 x 640 16:9
iPhone 5 1136 x 640 16:9
iPhone 4s 960 x 640 3:2
iPhone 4 960 x 640 3:2

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

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

歴代iPhoneのブラウザサイズまとめ

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

機種 ブラウザサイズ(px)
iPhone X 812 x 375(全体)
667 x 375(互換)
iPhone 8 Plus 736 x 414(互換)
667 x 375(拡大)
iPhone 8 667 x 375(互換)
568 x 320(拡大)
iPhone 7 Plus 736 x 414(互換)
667 x 375(拡大)
iPhone 7 667 x 375(互換)
568 x 320(拡大)
iPhone 6s Plus 736 x 414(互換)
667 x 375(拡大)
iPhone 6s 667 x 375(互換)
568 x 320(拡大)
iPhone 6 Plus 736 x 414(互換)
667 x 375(拡大)
iPhone 6 667 x 375(互換)
568 x 320(拡大)
iPhone 5s 568 x 320
iPhone 5c 568 x 320
iPhone 5 568 x 320
iPhone 4s 480 x 320
iPhone 4 480 x 320

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

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

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

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

iPhoneにおすすめな壁紙サイト一覧

iPhone X

iPhone 8

iPhone 7

歴代iPhoneの壁紙サイズ/まとめ

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

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

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