レスポンシブ・ウェブを実装する際にテストすべき画面サイズ（幅）の一覧をまとめてみました。この一覧をベースに、既存サイトのアクセス解析と見比べてテストの比重を調整するのが良いかと思います。
画面サイズ幅のブレイクポイント一覧
| 320px | スマートフォン縦 |
| 480px | スマートフォン横 |
| 600px | タブレットPC（小）縦 |
| 768px | タブレットPC縦 |
| 1024px | タブレットPC横・一部ネットブックなどのデスクトップPC |
| 1280px | デスクトップPC |
※先日読んだ「Responsive Web Design」という本では、Media Queriesを設定する際にレイアウト調整の起点となるサイズを「Breakpoint」と読んでいたので、ここでもその名称をそのまま使います。
各サイズでのブラウザテスト
各画面サイズでのブラウザテストはFirefoxやChromeの「Web Developer」拡張機能などを使って行うのが便利です。Chrome版「Web Developer」では、画面サイズの追加機能はありませんが、先日紹介した方法でサイズが追加可能です。
ブレイクポイント間のテスト
上記一覧はあくまでテストの目安でしかありません。たとえば、1280pxのスクリーンを利用しているユーザが必ずしもウィンドウをフルサイズにして使っているとは限りません。ウィンドウサイズをドラッグしてリサイズして、各ブレイクポイント間でも大きなレイアウトの崩れがないかをチェックしCSSの調整をするべきです。
実機テスト
検証用の実機レンタルサービスもあるようですし、コストがかかって最終チェックは可能な限り実機で行いたいですね。
参考
- List of displays by pixel density—Wikipedia
- レスポンシブ・ウェブデザインの Media Queries の設定と15px—allWebクリアエイター塾
- CSS Media Queriesについてまとめてみた—ぺーぺーエンジニアのおぼえがき
2011年6月17日に公開され、2012年4月28日に更新された記事です。
About the author
「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。アメリカの大学を卒業後、ボストン近郊のウェブ制作会社に勤務。帰国後、東京のウェブ制作会社に勤務した後、ウェブ担当者として日英バイリンガルのサイト運営に携わる。詳しくはこちら。
ウェブ制作・ディレクション、ビデオを含むコンテンツ制作のお手伝い、執筆・翻訳のご依頼など、お気軽にご相談ください。いずれも日本語と英語で対応可能です。まずは、Mastodon @rriver@vivaldi.net 、Twitter @rriver 、またはFacebook までご連絡ください。