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

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

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

スポンサーリンク

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

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

機種 画面サイズ(px)
iPhone 8 Plus 1920 x 1080
iPhone 8 1334 x 750
iPhone 7 Plus 1920 x 1080
iPhone 7 1334 x 750
iPhone 6s Plus 1920 x 1080
iPhone 6s 1334 x 750
iPhone 6 Plus 1920 x 1080
iPhone 6 1334 x 750
iPhone 5s 1136 x 640
iPhone 5c 1136 x 640
iPhone 5 1136 x 640
iPhone 4s 960 x 640
iPhone 4 960 x 640

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

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

機種 壁紙サイズ(px) アスペクト比
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 8 Plus 414 x 736
iPhone 8 375 x 667
iPhone 7 Plus 414 x 736
iPhone 7 375 x 667
iPhone 6s Plus 414 x 736
iPhone 6s 375 x 667
iPhone 6 Plus 414 x 736
iPhone 6 375 x 667
iPhone 5s 320 x 568
iPhone 5c 320 x 568
iPhone 5 320 x 568
iPhone 4s 320 x 480
iPhone 4 320 x 480

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

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

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

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

最後に

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

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

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

  iPhoneで通話を録音する方法!無料アプリを使えば脱獄なしで簡単に可能
スポンサーリンク

Twitterフォロー&シェアよろしくです♪