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

こんにちは。和田です。

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

 

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 タブレット