WEBサイトやアプリのデザインを制作する際に問題になってくる「解像度」。
スマホやタブレットはほとんどが高解像度ディスプレイだけど、最近はPCもRetinaディスプレイや4kという高解像度ディスプレイの新商品が続々と出ているようだ。
一つの結論としては、「デザイン制作はRetinaディスプレイで行う」事が一番分かりやすいんじゃないかと思った。
というわけで、MacBook pro Retinaを買って、デザイン制作はこれをメインにしていく予定。
(さらに、iMac Retina 27インチも必要になりそうだけど)
Apple製品は現在ほとんどがRetinaディスプレイになっている(Macbook Airだけ従来の解像度)。
そこで、RetinaディスプレイのApple製品の解像度を大きい順に並べてみた。
タブレットとスマホに関しては縦向き(ホームボタンが下)の時の横×縦の表記に統一。
ソースはすべてAppleの公式サイトから。
実サイズは単純に2で割ったサイズです。
横 × 縦で、単位はピクセル。インチも一応書いときます。
■デスクトップ
iMac retina 27インチ
解像度:5,120 x 2,880
実サイズ:2,560 x 1,440
iMac retina 21.5インチ
解像度:4,096 x 2,304
実サイズ:2,048 x 1,152
■ノート(ラップトップ)
MacBookPro Retina 15インチ
解像度:2,880 x 1,800
実サイズ:1,440 x 900
MacBookPro Retina 13インチ
解像度:2,560 x 1,600
実サイズ:1,280 × 800
MacBook Retina(12インチ)
解像度:2,304 x 1,440
実サイズ:1,152 × 720
■タブレット
iPad Pro 12.9インチ
解像度:2,048 x 2,732
実サイズ:1,024 x 1,366
iPad Pro 9.7インチ
解像度:1,536 x 2,048
実サイズ:768 x 1,024
iPad air 9.7インチ
解像度:1,536 x 2,048
実サイズ:768 x 1,024
iPad mini 4 (7.9インチ)
解像度:1,536 x 2,048
実サイズ:768 x 1,024
ipad mini 2(7.9インチ)
解像度:1,536 x 2,048
実サイズ:768 x 1,024
※ iPadについては、9.7インチと7.9インチで解像度が同じ表記である。(スケーリング?が若干違うのだろうか・・・)
■スマホ
iPhone 6s Plus(5.5インチ)
解像度:1,080 x 1,920
実サイズ:540 x 960
iPhone 6s (4.7インチ)
解像度:750 x 1,334
実サイズ:375 x 667
iPhone SE(4インチ)
解像度:640 × 1,136
実サイズ:320 x 568
iPhone 6s Plus、iPad proはあんまり使っている人を見たこと無いんだけど、売れ行きとしてはどうなんだろう。それぞれ、スマホとしては大きすぎ、タブレットとしては大きすぎで使いづらそうな印象を受けた。
iMac 27インチは凄い。さすがにフルスクリーンでブラウザを見ることはあんまり無いだろうけど、写真の元データサイズを加工せずに見せるぐらいが丁度いいくらいの解像度である。。この解像度に合わせてサイトを作るのは現実的ではないだろうなあ。
もし、写真を大きく見せるサイトを作る時には、iMac27インチの横5,120ピクセルからiPhone SEの横640ピクセルまで、1種類の画像で対応するするのは流石に難しそう(笑)
横幅いっぱいに写真を見せる場合に、画像サイズの横幅としてはPC用が2,000〜2,500ピクセル、タブレットが1,536ピクセル、スマホが750ピクセルが現時点では良いかな。あとはpngファイルの軽量化は必ず行い、遅延ロードも適宜利用する。テキストは全てプレーンテキストにすれば、軽快さは保ちつつ、写真も綺麗に見せれるサイトになるかなと思う。
おそらく、使用ユーザー数としてはiPhoneが圧倒的で、iPadとMacはiPhoneに比べればかなり少数のはずなので、まずはiPhoneで快適に見られることが最優先で、プラスで高解像度PCでも画像を綺麗に表示できれば良し、というくらいが良いかもしれない。
将来的には8kの端末とかも出てきそう(笑)
肉眼ではそこまで違いが分からなそうだが。。
2016.04.19 | Apple製品のRetinaディスプレイの解像度を比べてみる(2016年4月時点) |
---|---|
2016.04.19 | WEBサイトの採用・求人ページは常に表示! |
2016.04.18 | 1ページだけのサイトを薦めない理由 |
2016.04.17 | チャレンジしない人生なんて面白く無い |
2016.04.10 | 全角英数字なんて無くなればいいのに |