レスポンシブ・ウェブを実装する際の画面幅のサイズ一覧とテスト

レスポンシブ・ウェブを実装する際にテストすべき画面サイズ(幅)の一覧をまとめてみました。この一覧をベースに、既存サイトのアクセス解析と見比べてテストの比重を調整するのが良いかと思います。

画面サイズ幅のブレイクポイント一覧

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の調整をするべきです。

実機テスト

検証用の実機レンタルサービスもあるようですし、コストがかかって最終チェックは可能な限り実機で行いたいですね。

参考

About the author

「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。アメリカの大学を卒業後、ボストン近郊のウェブ制作会社に勤務。帰国後、東京のウェブ制作会社に勤務した後、ウェブ担当者として日英バイリンガルのサイト運営に携わる。詳しくはこちら

ウェブ制作・ディレクション、ビデオを含むコンテンツ制作のお手伝い、執筆・翻訳のご依頼など、お気軽にご相談ください。いずれも日本語と英語で対応可能です。まずは、Twitter @rriver またはFacebook まで。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です