2012年7月9日

レスポンシブデザインのウインドウサイズの切替えについてまとめてみました

こんにちは。和田です。

ここ数日暑いですが皆様いかがお過ごしですか？

私共は先日、アシアルのHP（ブログも）をリニューアルしました！
皆さま見てていただけましたでしょうか？
まだの方は是非是非ご覧になってください。
http://www.asial.co.jp

さて今回のアシアルHPはレスポンシブデザインを採用しています。
そこで今回はFireworksから離れて、最近なにかと話題のレスポンシブデザイン-特に最初に悩むウインドウサイズの切替えについて書こうと思います。

アシアルではウインドウサイズの切替えを、タブレットはPC版のHPをそのまま表示させ、スマホのみウインドウサイズを切替える。ということにいたしましたが、
皆様はレスポンシブデザインを作成される際どのようなウインドウサイズ（幅）で切り分けていますでしょうか？
結構悩むところなのではないかと思います。

そこで、各デバイスのサイズのまとめと自分なりに基本的な切り分けサイズを考えてみようと思います。

■各デバイスの画面サイズと切替えサイズ
３キャリアから現在発売中もしくは発売予定の機種の画面サイズを調べてみました（抜けはあると思いますのご注意ください）。
そうしたらなんと、ちょうど100件！
こんなに沢山の機種が発売されているとは思いませんでした。
（各デバイスとサイズの一覧表は、ブログの最下部にまとめています）

ただ、これだけ見ていいてもよく分からないので
これを、ポートレート時、ランドスケープ時で同じ横幅毎に分けてみました。
すると、

※ 2012年7月時点の情報です。

思ったよりまとまりました。

これを更にビジュアル化してみると以下のような感じです。
といってもデバイスは有名？なものだけ載せています。

一概には言えませんが、上記の表や図を見ると
以下のような分けが出来るのではないかと思います。
・〜480px：ちょっと古いスマホ
・480〜768px：現在よく使われているスマホ
・768px〜：タブレットやPC、高解像度のスマホ

これをウインドウサイズの切り分けとして考えると
以下のようになります。

結構まとまったと思うのですがいかがでしょうか？

実際は、サイトの幅やデザイン、ページの内容・量によって切替える回数やウインドウサイズも変わってくると思うのですが、オーソドックスなサイトであれば、上記３つの分けで、ある程度対応できるのではないかな…と思います。

皆様いかがでしょうか？
もし「こんな風に切替えたよ」などございましたら
是非教えていただけたらと思います。

それではまた次回もよろしくお願いいたします。

↓各デバイスとサイズの一覧表

No.通信事業者デバイスサイズ(px)備考

1	docomo	Google Nexus one	480×720	スマホ
2	docomo	GALAXY S III　（SC-06D）	720×1280	スマホ
3	docomo	ARROWS X 　（F-10D）	720×1280	スマホ
4	docomo	AQUOS PHONE sv　（SH-10D）	720×1280	スマホ
5	docomo	REGZA Phone　（T-02D）	540×960	スマホ
6	docomo	Optimus Vu　（L-06D）	768×1024	スマホ
7	docomo	AQUOS PHONE ZETA　（SH-09D）	720×1280	スマホ
8	docomo	ELUGA power　（P-07D）	720×1280	スマホ
9	docomo	Xperia GX　（SO-04D）	720×1280	スマホ
10	docomo	GALAXY S II LTE　（SC-03D）	480×800	スマホ
11	docomo	ARROWS X LTE　（F-05D）	720×1280	スマホ
12	docomo	Optimus LTE　（L-01D）	720×1280	スマホ
13	docomo	MEDIAS LTE　（N-04D）	720×1280	スマホ
14	docomo	GALAXY Note（SC-05D）	800×1280	スマホ
15	docomo	AQUOS PHONE（SH-06D）	720×1280	スマホ
16	docomo	ARROWS μ　（F-07D）	480×800	スマホ
17	docomo	MEDIAS PP　（N-01D）	480×800	スマホ
18	docomo	P-04D	540×960	スマホ
19	docomo	Xperia PLAY　（SO-01D）	480×854	スマホ
20	docomo	BlackBerry Bold 9900	640×480	スマホ
21	docomo	MEDIAS 　（ N-07D）	720×1280	スマホ
22	docomo	Optimus it　（L-05D）	480×800	スマホ
23	docomo	Xperia SX　（SO-05D）	540×960	スマホ
24	docomo	ANTEPRIMA　（F-09D）	480×800	スマホ
25	docomo	ARROWS Me　（F-11D）	480×800	スマホ
26	docomo	ELUGA V　（P-06D）	720×1280	スマホ
27	docomo	AQUOS PHONE st　（SH-07D）	480×854	スマホ
28	docomo	Disney Mobile on docomo　（P-05D）	540×960	スマホ
29	docomo	Disney Mobile on docomo　（F-08D）	720×1280	スマホ
30	docomo	Girls'　（F-03D）	480×800	スマホ
31	docomo	PRADA phone by LG　（L-02D）	480×800	スマホ
32	docomo	Q-pot.Phone　（SH-04D）	540×960	スマホ
33	docomo	XperiaTM acro HD　（SO-03D）	720×1280	スマホ
34	docomo	AQUOS PHONE slider　（SH-02D）	540×960	スマホ
35	docomo	LUMIX Phone　（P-02D）	540×960	スマホ
36	docomo	MEDIAS ES　（N-05D）	720×1280	スマホ
37	docomo	P-01D	480×800	スマホ
38	docomo	F-12C	480×800	スマホ
39	docomo	ARROWS Tab LTE　（F-01D）	800×1280	タブレット
40	docomo	GALAXY Tab 10.1 LTE　（SC-01D）	800×1280	タブレット
41	docomo	MEDIAS TAB　（N-06D）	800×1280	タブレット
42	au	HTC J　（ISW13HT ）	540×960	スマホ
43	au	AQUOS PHONE SERIE　（ISW16SH ）	720×1280	スマホ
44	au	ARROWS Z　（ISW13F）	720×1280	スマホ
45	au	URBANO PROGRESSO	480×800	スマホ
46	au	AQUOS PHONE SL　（IS15SH）	540×960	スマホ
47	au	AQUOS PHONE CL　（IS17SH ）	540×960	スマホ
48	au	GALAXY SII WiMAX　（ISW11SC）	720×1280	スマホ
49	au	INFOBAR　（C01）	480×854	スマホ
50	au	Xperia acro HD　（IS12S ）	540×960	スマホ
51	au	Optimus X　（IS11LG ）	480×800	スマホ
52	au	MOTOROLA RAZR　（IS12M ）	540×960	スマホ
53	au	ARROWS ES　（IS12F ）	480×800	スマホ
54	au	AQUOS PHONE　（IS14SH ）	540×960	スマホ
55	au	ARROWS Z　（ISW11F ）	720×1280	スマホ
56	au	DIGNO　（ISW11K ）	480×800	スマホ
57	au	HTC EVO 3D　（ISW12HT ）	540×960	スマホ
58	au	MOTOROLA PHOTON　（ISW11M ）	540×960	スマホ
59	au	MEDIAS　（IS11N ）	480×800	スマホ
60	au	Windows Phone　（IS12T ）	480×800	スマホ
61	au	MIRACH　（IS11PT ）	480×800	スマホ
62	au	INFOBAR　（A01 ）	540×960	スマホ
63	au	G'zOne　（IS11CA ）	480×800	スマホ
64	au	REGZA Phone　（IS11T ）	480×854	スマホ
65	au	SIRIUS α　（IS06 ）	480×800	スマホ
66	au	REGZA Tablet　（AT500）	800×1280	タブレット
67	au	MOTOROLA XOOM™ Wi-Fi　（TBi11M）	800×1280	タブレット
68	au	SMT-i9100	600×1024	タブレット
69	SoftBank	AQUOS PHONE Xx　（106SH）	720×1280	スマホ
70	SoftBank	ARROWS A　（101F）	540×960	スマホ
71	SoftBank	PANTONE 5　（107SH）	480×854	スマホ
72	SoftBank	AQUOS PHONE　（102SHII）	720×1280	スマホ
73	SoftBank	AQUOS PHONE　（102SH）	720×1280	スマホ
74	SoftBank	AQUOS PHONE　（104SH）	720×1280	スマホ
75	SoftBank	LUMIX Phone　（101P）	540×960	スマホ
76	SoftBank	102P	540×960	スマホ
77	SoftBank	HONEY BEE®（101K）	480×800	スマホ
78	SoftBank	AQUOS PHONE THE HYBRID　（101SH）	480×854	スマホ
79	SoftBank	AQUOS PHONE　（103SH）	540×960	スマホ
80	SoftBank	STAR 7　（009Z）	480×800	スマホ
81	SoftBank	MEDIAS CH　（101N）	480×800	スマホ
82	SoftBank	DELL Streak Pro　（101DL）	540×960	スマホ
83	SoftBank	AQUOS PHONE THE HYBRID SoftBank　（007SH）	480×854	スマホ
84	SoftBank	AQUOS PHONE THE HYBRID SoftBank　（007SH J）	480×854	スマホ
85	SoftBank	SoftBank　（007SH KT）	480×854	スマホ
86	SoftBank	AQUOS PHONE SoftBank　（006SH）	540×960	スマホ
87	SoftBank	AQUOS PHONE THE PREMIUM SoftBank　（009SH）	540×960	スマホ
88	SoftBank	Yahoo! Phone SoftBank　（009SH Y）	540×960	スマホ
89	SoftBank	Sweety SoftBank　（003P）	480×854	スマホ
90	SoftBank	Vision SoftBank　（007HW）	480×800	スマホ
91	SoftBank	シンプルスマートフォン SoftBank　（008Z）	480×800	スマホ
92	SoftBank	GALAPAGOS SoftBank　（003SH）	480×800	スマホ
93	SoftBank	GALAPAGOS SoftBank　（005SH）	480×800	スマホ
94	SoftBank	Libero SoftBank　（003Z）	480×800	スマホ
95	SoftBank	dynapocket SoftBank　（X02T）	480×800	スマホ
96	SoftBank	SoftBank　（X01SC）	320×240	スマホ
97	SoftBank	iPhone3G/3GS	320×480	スマホ
98	SoftBank	iPhone4/4S	640×960	スマホ
99	SoftBank	iPad/iPad2	768×1024	タブレット
100	SoftBank	New iPad	1536×2048	タブレット