iPhoneの画面サイズ(2015年12月調べ)

iPhoneの画面サイズ

今、ホームページの制作やアプリ開発には、各デバイスの画面サイズを意識することがとても重要です。画面もですが、一緒に画像サイズについても意識する必要があるでしょう。
一昔前でしたら、意識しなくても、大体の大きさで区切って、サイズを好きに決めて制作すればいいだけの話だったんですけどね。ちょっと前のことですら、今はすぐ風化して、過去の情報になってしまいます。時代の流れって早いですね。

ipadの画面サイズ(2015年12月調べ)の記事も追加しました。iPadの画面サイズを知りたい人はそちらの記事もご確認ください。

iPhoneの画像サイズを意識するのはなぜか

じゃあなんで画面サイズを意識しなくてはいけなくなったのか。それは、各デバイスの大きさがバラバラに異なるサイズで出てきてしまったからなんです。iPhoneだけならまだしも、アンドロイド携帯のことまで考えると本当に大変!特性も理解しないと、クリエイターはもちろん、利用する人もなんとなくでも知っておいて損はない、そんなお話です。

iPhone機種別サイズ一覧

デバイス名 ディスプレイ スケール 解像度 縦横比 論理上
ピクセルサイズ
デバイス上
ピクセルサイズ
ポイントサイズ 画像用解像度

iPhone4・4s

3.5 inch Retina

@2x

326ppi

3対2

960 x 640

960 x 640

480 x 320

144ppi

iPhone5s・5c・5

4.0 inch Retina

@2x

326ppi

16対9

1136 x 640

1136 x 640

568 x 320

144ppi

iPhone6・6s

4.7 inch Retina

@2x

326ppi

16対9

1334 x 750

1334 x 750

667 x 375

144ppi

iPhone6 Plus・6s Plus

5.5 inch Retina

@3x

401ppi

16対9

2208 x 1242

1920 x 1080

736 x 414

216ppi

iPhoneの画面サイズを一覧表にしてみました。

項目の解説

デバイス名
携帯端末。デバイスです。
ディスプレイ
画面サイズです。
スケール
Retina ディスプレイでの倍率になります。Apple社が作成した単位? 元からの倍率を表しています。
解像度
解像度です。単位は「ppi(pixel per inch)」です。
縦横比
デバイスの縦横比率です。
論理上ピクセルサイズ
計算上で、そのディスプレイに表示させることができる論理的なピクセルサイズになります。デザイナーさんにわかりやすく表現するならば、アートボード的なもの、といえばどうでしょうか。最終的なものとして出力するのは別だが、出力前までの決められたサイズになります。その出力されるサイズはというと、「デバイス上ピクセルサイズ」です。
デバイス上ピクセルサイズ
各デバイスの画面に表示することができる、物理的なピクセルサイズになります。実際に表示される、最終的なサイズになります。上記のアートボードとしての考えでいけば、最終的に出力されるサイズと言えるでしょう。
ポイントサイズ
特にiPhoneアプリ開発の時に非常に意識する数値部分です。boundsやframe等で使用される画面のサイズ基準になります。iPhoneアプリ開発時にはピクセルではなくポイントで表現することが多いので、注意が必要です。
画像用解像度
スマホで画像を表示する時に、作成した画像編集後の書き出しの時に解像度を変えるだけで最適なサイズになります。ここ読んでよくわからなくても大丈夫。デザイナーが気にする部分です。デザイナーがわからないと逆に困りますので、もしそうなら他のサイトを検索などして「解像度」について調べてください。

ちょっとややこしい名称の項目名もありますが、時間かけて理解できるように頑張ってください。

iPhone6 Plus , iPhone6s Plus に注目

iPhoneの画面サイズについて一番厄介なのが、「iPhone 6 Plus」「iPhone 6s Plus」です。項目の「論理上ピクセルサイズ」と「デバイス上ピクセルサイズ」の違いに気付きましたでしょうか。

他のデバイスは、論理上もデバイス上も、ピクセルサイズが同じ値になっています。同じ値になるのが、通常の話なんです。しかし、「iPhone 6 Plus」「iPhone 6s Plus」は異なっていますよね。デバイス上ピクセルサイズの方が数値が小さいです。

iPhone 6 Plus , iPhone 6s Plus だけどうして異なるのか

何が起きたのかというと、デバイス製作時に、通常同じ論理上のサイズで表現したいところだったのですが、何かを妥協して諦めた。。。ということになります。

ディスプレイの画面サイズを大きくしたかったけど、それだとさすがに大きすぎない??あと、コストも結構気になってくるよね。。と思ったかどうかは不明ですが、理由としてはこんなところでしょう。

サイズの妥協

つまり、妥協したのは、ディスプレイのサイズなんですね。大きなディスプレイをやめて少しサイズダウンしたディスプレイを用意する。だから、表示する際に少し画面への表示サイズを小さくしてディスプレイにアウトプットする必要があるってことになります。

実際の数値では、デバイス上ピクセルサイズの1,15倍が論理上ピクセルサイズになるよう設計されているようです。

どっちの数値を気にするべきか

う〜ん、論理上?デバイス上??結局どっちの方を基準にしたほうがいいの?

実は基準にするのは、項目名で「ポイントサイズ」という部分がそれに該当するのです。でも、気になるのはそこじゃなくて、画像サイズはどうすればいいのって話ですよね。

フル画面での画像サイズは、論理上ピクセルサイズの方を参考にしてください。こっちが本当のサイズになります。デバイス上ピクセルサイズは、あくまでiPhone側の都合に合わせるために、iPhone側が勝手にリサイズしてくれる話になります。ですので、気にするのは論理上ピクセルサイズの方です。

数値は覚えなくても大丈夫

「デバイス上は、iPhone6系は多少サイズが異なるんだな」と覚えておけばいいかと思います。気になった時に検索して調べればいいでしょう。

しかし、今後のiPhoneデバイスは、上記のような、異なるサイズ表示となって発売されていく可能性があります。その時はまた表とにらめっこして、どこが異なっているのか探すのも面白いと思います。

iPhoneを意識した時に画像作成(書き出し)

おまけで、表の一番右に「画像用解像度」という項目を追加しておきました。

画像作成の際、書き出しをする時に設定する解像度になります。作成した画像を同じパターン別で書き出す場合に、その解像度にして書き出せば複数パターンに対応した画像が準備できますので、ご利用くださいね。

iPadの画面サイズ

ipadの画面サイズ(2015年12月調べ)の記事も追加しました。iPadの画面サイズを知りたい人はそちらの記事もご確認ください。

You May Also Like