Asial Blog

Recruit! Asialで一緒に働きませんか?

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

カテゴリ :
デザイン・UI
タグ :
レスポンシブデザイン
スマートフォン
タブレット
こんにちは。和田です。

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

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

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


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

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


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


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


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


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

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




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

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



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

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

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

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


↓各デバイスとサイズの一覧表
No.通信事業者デバイスサイズ(px)備考
1docomoGoogle Nexus one480×720スマホ
2docomoGALAXY S III (SC-06D)720×1280スマホ
3docomoARROWS X  (F-10D)720×1280スマホ
4docomoAQUOS PHONE sv (SH-10D)720×1280スマホ
5docomoREGZA Phone (T-02D)540×960スマホ
6docomoOptimus Vu (L-06D)768×1024スマホ
7docomoAQUOS PHONE ZETA (SH-09D)720×1280スマホ
8docomoELUGA power (P-07D)720×1280スマホ
9docomoXperia GX (SO-04D)720×1280スマホ
10docomoGALAXY S II LTE (SC-03D)480×800スマホ
11docomoARROWS X LTE (F-05D)720×1280スマホ
12docomoOptimus LTE (L-01D)720×1280スマホ
13docomoMEDIAS LTE (N-04D)720×1280スマホ
14docomoGALAXY Note(SC-05D)800×1280スマホ
15docomoAQUOS PHONE(SH-06D)720×1280スマホ
16docomoARROWS μ (F-07D)480×800スマホ
17docomoMEDIAS PP (N-01D)480×800スマホ
18docomoP-04D540×960スマホ
19docomoXperia PLAY (SO-01D)480×854スマホ
20docomoBlackBerry Bold 9900640×480スマホ
21docomoMEDIAS  ( N-07D)720×1280スマホ
22docomoOptimus it (L-05D)480×800スマホ
23docomoXperia SX (SO-05D)540×960スマホ
24docomoANTEPRIMA (F-09D)480×800スマホ
25docomoARROWS Me (F-11D)480×800スマホ
26docomoELUGA V (P-06D)720×1280スマホ
27docomoAQUOS PHONE st (SH-07D)480×854スマホ
28docomoDisney Mobile on docomo (P-05D)540×960スマホ
29docomoDisney Mobile on docomo (F-08D)720×1280スマホ
30docomoGirls' (F-03D)480×800スマホ
31docomoPRADA phone by LG (L-02D)480×800スマホ
32docomoQ-pot.Phone (SH-04D)540×960スマホ
33docomoXperiaTM acro HD (SO-03D)720×1280スマホ
34docomoAQUOS PHONE slider (SH-02D)540×960スマホ
35docomoLUMIX Phone (P-02D)540×960スマホ
36docomoMEDIAS ES (N-05D)720×1280スマホ
37docomoP-01D480×800スマホ
38docomoF-12C480×800スマホ
39docomoARROWS Tab LTE (F-01D)800×1280タブレット
40docomoGALAXY Tab 10.1 LTE (SC-01D)800×1280タブレット
41docomoMEDIAS TAB (N-06D)800×1280タブレット
42auHTC J (ISW13HT )540×960スマホ
43auAQUOS PHONE SERIE (ISW16SH )720×1280スマホ
44auARROWS Z (ISW13F)720×1280スマホ
45auURBANO PROGRESSO 480×800スマホ
46auAQUOS PHONE SL (IS15SH)540×960スマホ
47auAQUOS PHONE CL (IS17SH )540×960スマホ
48auGALAXY SII WiMAX (ISW11SC)720×1280スマホ
49auINFOBAR (C01)480×854スマホ
50auXperia acro HD (IS12S )540×960スマホ
51auOptimus X (IS11LG )480×800スマホ
52auMOTOROLA RAZR (IS12M )540×960スマホ
53auARROWS ES (IS12F )480×800スマホ
54auAQUOS PHONE (IS14SH )540×960スマホ
55auARROWS Z (ISW11F )720×1280スマホ
56auDIGNO (ISW11K )480×800スマホ
57auHTC EVO 3D (ISW12HT )540×960スマホ
58auMOTOROLA PHOTON (ISW11M )540×960スマホ
59auMEDIAS (IS11N )480×800スマホ
60auWindows Phone (IS12T )480×800スマホ
61auMIRACH (IS11PT )480×800スマホ
62auINFOBAR (A01 )540×960スマホ
63auG'zOne (IS11CA )480×800スマホ
64auREGZA Phone (IS11T )480×854スマホ
65auSIRIUS α (IS06 )480×800スマホ
66auREGZA Tablet (AT500)800×1280タブレット
67auMOTOROLA XOOM™ Wi-Fi (TBi11M)800×1280タブレット
68auSMT-i9100600×1024タブレット
69SoftBankAQUOS PHONE Xx (106SH)720×1280スマホ
70SoftBankARROWS A (101F)540×960スマホ
71SoftBankPANTONE 5 (107SH)480×854スマホ
72SoftBankAQUOS PHONE (102SHII)720×1280スマホ
73SoftBankAQUOS PHONE (102SH)720×1280スマホ
74SoftBankAQUOS PHONE (104SH)720×1280スマホ
75SoftBankLUMIX Phone (101P)540×960スマホ
76SoftBank102P540×960スマホ
77SoftBankHONEY BEE®(101K)480×800スマホ
78SoftBankAQUOS PHONE THE HYBRID (101SH)480×854スマホ
79SoftBankAQUOS PHONE (103SH)540×960スマホ
80SoftBankSTAR 7 (009Z)480×800スマホ
81SoftBankMEDIAS CH (101N)480×800スマホ
82SoftBankDELL Streak Pro (101DL)540×960スマホ
83SoftBankAQUOS PHONE THE HYBRID SoftBank (007SH)480×854スマホ
84SoftBankAQUOS PHONE THE HYBRID SoftBank (007SH J)480×854スマホ
85SoftBankSoftBank (007SH KT)480×854スマホ
86SoftBankAQUOS PHONE SoftBank (006SH)540×960スマホ
87SoftBankAQUOS PHONE THE PREMIUM SoftBank (009SH)540×960スマホ
88SoftBankYahoo! Phone SoftBank (009SH Y)540×960スマホ
89SoftBankSweety SoftBank (003P)480×854スマホ
90SoftBankVision SoftBank (007HW)480×800スマホ
91SoftBankシンプルスマートフォン SoftBank (008Z)480×800スマホ
92SoftBank GALAPAGOS SoftBank (003SH)480×800スマホ
93SoftBank GALAPAGOS SoftBank (005SH)480×800スマホ
94SoftBank Libero SoftBank (003Z)480×800スマホ
95SoftBank dynapocket SoftBank (X02T)480×800スマホ
96SoftBankSoftBank (X01SC)320×240スマホ
97SoftBankiPhone3G/3GS320×480スマホ
98SoftBankiPhone4/4S640×960スマホ
99SoftBankiPad/iPad2768×1024タブレット
100SoftBankNew iPad1536×2048タブレット