いろいろ振り返る画面サイズ。
新たな概念 (iPhone 6 Plus にて) が加わってくる。それはダウンサンプリングだ。今のところ iPhone 6 Plus だけであるがダウンサンプリングがかかわってくるということは、それを視野に入れた設計もできる。例えば、ダウンサンプリング後のピクセルを想定して画像のデータを減らす、ということもできる。いろいろあるので、久々に見ていこうではないか。
| 機種 | サイズ (inch) | D解像度 | D比率 | 仮想解像度 | 描画解像度 | DS比率*1 | D密度 (ppi) |
|---|---|---|---|---|---|---|---|
| Xperia ray | 3.3 | 480 x 854 | 1.5 | 320 x 569 | 480 x 854 | 1.0 | 296.9 |
| iPhone/3G/3GS | 3.5 | 320 x 480 | 1.0 | 320 x 480 | 320 x 480 | 1.0 | 164.8 |
| iPhone 4/4s | 3.5 | 640 x 960 | 2.0 | 320 x 480 | 640 x 960 | 1.0 | 329.7 |
| Xperia SX | 3.7 | 540 x 960 | 1.5 | 360 x 640 | 540 x 960 | 1.0 | 297.7 |
| iPhone 5 | 4.0 | 640 x 1136 | 2.0 | 320 x 568 | 640 x 1136 | 1.0 | 326.0 |
| Xperia arc | 4.2 | 480 x 854 | 1.5 | 320 x 569 | 480 x 854 | 1.0 | 233.3 |
| Xperia Z1f | 4.3 | 720 x 1280 | 2.0 | 360 x 640 | 720 x 1280 | 1.0 | 341.5 |
| Lumia 925 | 4.5 | 768 x 1280 | 2.0 | 384 x 640 | 768 x 1280 | 1.0 | 331.7 |
| AQUOS PHONE | 4.5 | 1080 x 1920 | 3.0 | 360 x 640 | 1080 x 1920 | 1.0 | 489.5 |
| Xperia A | 4.6 | 720 x 1280 | 2.0 | 360 x 640 | 720 x 1280 | 1.0 | 319.3 |
| iPhone 6 | 4.7 | 750 x 1334 | 2.0 | 375 x 667 | 750 x 1334 | 1.0 | 325.6 |
| Lumia 930 | 5.0 | 1080 x 1920 | 2.68 | 403 x 659 | 1080 x 1920 | 1.0 | 440.6 |
| Xperia Z | 5.0 | 1080 x 1920 | 3.0 | 360 x 640 | 1080 x 1920 | 1.0 | 440.6 |
| iPhone 6 Plus | 5.5 | 1080 x 1920 | 3.0 | 414 x 736 | 1242 x 2208 | 1.15 | 400.5 |
| ??? | 5.5 | 1080 x 1920 | 2.4 | 450 x 800 | 1080 x 1920 | 1.0 | 400.5 |
| isai FL | 5.5 | 1440 x 2560 | 4.0 | 360 x 640 | 1440 x 2560 | 1.0 | 534.0 |
| Lumia 1520 | 6.0 | 1080 x 1920 | 2.2 | 491 x 873 | 1080 x 1920 | 1.0 | 367.2 |
(追記: ※ Windows Phone は 96 dpi が基準なので、2.0 とかではなく、1.875 と表記すべきかもしれない。ちなみに @-ms-viewport { width: device-width; } を指定。)
スマフォ業界の革命ですね。新たなパラメーターが加わりました。ダウンサンプリング比率です。仮想スクリーンに描画し、そのあとダウンサンプリング。そもそも iPhone 6 Plus OS 全体で内部で 1242x2208 という仮想スクリーンを持っている気がします。このパネル、特注すればよかったのに…
というか、iPhone、整数比率捨てるぐらいなら 2.5 スケーリングとか導入すべきだった。ピクセルという概念が完全に捨ててしまった iPhone 6 Plus。うーん、どうなんだろう… 少なくとも俺は Windows 派で、やっぱりダウンサンプリングって無駄な処理だと思うんすよ。Windows は座標演算でスケーリングかけたりして、最終レンダリングはスクリーンと一致を採用してて、やっぱりその方法がいいなぁ、って思ってしまいます。
とりあえず、スマフォは 320～414 px は最低のサポートってことで、まあ Windows ストア アプリ的に考えると narrow layout mode は ～500px というところでいいかと思います。PC でもスナップ表示したとき、やっぱり画面に最適になるとうれしかったりするので、このあたりは Web デザインする上で必須ですね。
横画面に関しては一覧を見ていただくと、480～736 px という感じですか。ただまあ、3:2 の iPhone でコンテンツ詰め込むとごちゃごちゃになるので、このあたりはシングルカラムでいいんじゃないかと。だからやっぱり 500 px が一つの基準で、もう一つが 800 px ぐらいじゃないですかね。
自分だとこんな感じ。
- ～500px: 狭いレイアウト、基本シングルカラム
- ～800px: 広いレイアウト、基本ダブルカラム
- ～: 画面サイズに合わせて配置。基本的に 1366 px ぐらいが最大横幅を想定。それ以上は max-width で固定
こんな感じかなぁ。しかし案外かわらないな。そもそも Android の isai FL とか dpr = 4 じゃなくて 3 にしてもっと情報量増やしてもいい気がするけどどうなんだろう。画面デカクなってるだけで情報量変わらない (変えられない) のはちょっと辛いかも。画面サイズに応じていろいろごにょれたらいいな、って思ってしまう私なのでした。
以上！
*1:ダウンサンプリング比率
