こんにちは。和田です。
ここ数日暑いですが皆様いかがお過ごしですか？
私共は先日、アシアルの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 | タブレット |