解像度別のアクセス数を確認、iPhone 5/5sがトップに

当サイトではアフィリエイト広告を利用しています。

ちゃんとレスポンシブデザインのことを考えようと思いはじめて、製作時のブレイクポイントの参考にジャンクワードの森の解像度別のアクセス数を確認してみたところ、トップになったのは「320x568px」。
RMATTE7HXJ

この解像度でアクセスしてくるのはiPhone 5/5sなので（iPhoneシリーズの解像度は表にまとめます）、もっともアクセスが多いのはiPhone 5/5sとなります。ちなみに2位は「1920x1080px」でした。

解像度別アクセス数トップ10

※直近1ヶ月のGoogleアナリティクスのデータから抜粋

解像度の表記は「横×縦」になるので、左側の数字が小さいのがスマートフォンorタブレット端末になります（縦長で使用することが多いですからね）。したがって10個中7個がスマートフォンorタブレット端末という結果に…

これは、パソコンのモニターサイズがある程度の規格の中に収まっていることが1番の要因になるため、スマートフォンorタブレット端末でのアクセスが特段多くてこうなったとは言い切れないです。

11位以下になると割合は3％を切ってきますが、ランキングとしては306位まであります！
それだけ端末によって解像度が違っていることの証左かな、、、、と感じています。

アクセス数が1とか2の解像度には「1843x1152px」「800x1205px」「1012x569px」「1203x677px」「613x6181px」「320x345px」など解像度で探しても端末の名称が検索できない見慣れないものも多々あります。

で、、、
レスポンシブデザインのブレイクポイントについては、あまり細かいことを考えずに大枠で「スマートフォン」と「パソコン」で分けて考えようかなと思っていますが、まだ決めかねています^^

iPhoneの解像度については、Retinaディスプレイが採用されたiPhone4以降のモデルでは表示能力を表す「画面解像度」と実寸サイズの「ベース解像度」の2つを確認する必要があります。

ここをしっかりと説明すると結構重くなるので、細かい説明は端折ってその数字だけ列挙しておきます。なお、レスポンシブデザインのブレイクポイントについては「ベース解像度」での設定になります

	画面解像度	ベース解像度	ピクセル密度	整数倍
iPhone 4/4s	960×640	480×320	326ppi	@2x
iPhone 5/5s	1,136×640	568×320	326ppi	@2x
iPhone 6	1334×750	667×375	326ppi	@2x
iPhone 6 Plus	1920×1080	736×414	401ppi	@3x

※アクセス解析と縦横が逆になっています

やはりiPhone 6 Plusだけが飛び抜けている感がありますね。
（最近こいつに嵌った経験が…）

Webサイトのデザインでスマートフォンorタブレット端末への対応は必須と言われていますが、画面サイズや解像度違いなど思い通りに表示できない悩ましさはありますね。