レスポンシブのブレイクポイントを設定する前に知っておくべきこと

HTML・CSS

breakpoint
Googleも推奨するレスポンシブウェブデザインですが、最初の設計がしっかりしていれば将来性も上がってメンテナンスにも有利なサイト運営ができると思います。
そこで、レスポンシブウェブデザインで最初にブレイクポイントを決めるのは矛盾していますよね。
モバイルファーストで考えて、大画面ブラウザに見やすいポイントを設定する方法が一般的です。

とは言っても、世の中の増え続ける大画面スマホやタブレットの主流を押さえておくことは重要です。
では設計を行う前に将来性を考えて指定すべきブレイクポイントを考えてみます。

デバイスピクセル比

まず考えるポイントとしてブレイクポイントをどこにしようかと悩むと思います。もちろんサイト構成で一概に目安を設けるのは難しいですが、画面サイズの手引きとして端末の解像度・ピクセルを気にしていると思います。

まずは、主要端末の画面ピクセル数を確認してみましょう。

主要端末のピクセル値

iPhone4s	640px × 960px
iPhone 5s	640px × 1136px
iPad Air	1536px × 2048px
Galaxy S4	1080px × 1920px
Nexus 7	1200px × 1920px

これはあくまでも解像度であって、これを参考にブレイクポイントを考慮するとユーザビリティに影響します。
なぜなら実際に表示されるブラウジング画面サイズは以下のようになるからです。

主流端末のブラウザサイズ

iPhone 3GS	320px x 480px
iPhone 4s	320px x 480px
iPhone 5	320px x 568px
iPad Air	768px x 1024px
Gaalxy S2	320px x 533px
Galaxy S4 Xperia Z	360px × 568px
Nexus7	600px × 960px

こうしてみると解像度はほとんど関係ないことがわかります。ではこの数値はどこでわかるのかと言うと、devicePixelRatio（デバイスピクセル比）から求められます。計算方法は以下の通り。

iPhone3GS devicePixelRatio 1 = 320px/1 x 480px/1 = 320px x 480px
iPhone5 devicePixelRatio 2 = 640px/2 x 1136px/2 = 320px x 568px

viewport を「width=device-width」として指定すると、解像度とviewportを一致させることができます。
「device-width」の値は「各デバイスの解像度 ÷ デバイスピクセル比」と覚えておきましょう。

ちなみにdevicePixelRatioを求めるにはjavascriptだと「window.devicePixelRatio」で取得できます。

実機デバッグ環境がなく、解像度だけを鵜呑みにしてしまい、レスポンシブウェブデザインでのブレイクポイント指定を難しくしてしまう間違いも多いので注意しましょう。

メディアクエリ

そもそもレスポンシブウェブデザインとは、CSS3の@media（メディアクエリ）を使用して、閲覧環境に合わせたブラウザ幅に適用するCSSを切り替える方法です。

上記で説明したデバイスピクセル比に応じた表示切替をしたい場合には、

@media only screen and (-webkit-min-device-pixel-ratio:2){
  font-size:14px;
}

といった指定もできます。ここまで考え始めるとかなり複雑なコーディングになってくるので、一般的に使われるのは以下のように画面サイズを指定する方法です。

/*まずはスマホ*/
@media screen and (min-width:480px){ /*大きいスマホ*/ }
@media screen and (min-width:768px){ /*タブレット*/ }
@media screen and (min-width:1024px){ /*パソコン*/ }

メディアクエリで「min-width:○○px」で指定する値は○○px以上のサイズに適用という意味になります。
逆に「max-width:○○px」だと○○px以下という指定になります。
例えば、1920pxのパソコンで閲覧した場合「min-width:1024px」の部分のCSSで上書きされることになります。

ブレイクポイント

さて、デバイスピクセル比とメディアクエリがわかった上で最も適したブレイクポイントはどこなのか？という作業に移ります。
何度も言いますが、サイト構成によって適したポイントは違います。一般的に主要端末を意識したブレイクポイントが前提となります。

考えるポイントとして

スマホは余裕を持って~480pxまで確保
旧型のスマホのランドスケープ（横画面）も~480pxに含めて考える（iPhone 4s Landscape = 480px）
小型タブレットは481px~768pxとしてiPad Portraitも含める
iPadなどのタブレットは768px~1024pxまでを適用
iPad Landscape1024pxではPC向けを適用
1024px~はパソコンと同じデザインを適用

これだととっても売れたNexus7は現行機種のランドスケープでも960pxです。
パソコン用は見れません。7インチ端末の需要から考えると960pxというブレイクポイントもおもしろいかもしれません。

おまけ：主要端末のブラウザサイズ

こういった情報を参考にあなたにあった、レスポンシブでブレイクなポイントさんを探してみてください。

【iphone5s】4.0インチ / 解像度1136×640px / 326ppi / ピクセル比2.0 / ブラウザサイズ 320×568px
【iphone5c】4.0インチ / 解像度1136×640px / 326ppi / ピクセル比2.0 / ブラウザサイズ 320×568px
【iphone5】4.0インチ / 解像度1136×640px / 326ppi / ピクセル比2.0 / ブラウザサイズ 320×568px
【iphone4S】3.5インチ / 解像度960×640px / 326ppi / ピクセル比2.0 / ブラウザサイズ 320×480px
【iphone4】3.5インチ / 解像度960×640px / 326ppi / ピクセル比2.0 / ブラウザサイズ 320×480px
【Xperia Z1 f SO-02F】4.3インチ / 解像度1280×720px / 341ppi / ピクセル比2.0 / ブラウザサイズ 360×640px
【Xperia Z1 SO-01F】5.0インチ / 解像度1920×1080px / 440ppi / ピクセル比3.0 / ブラウザサイズ 360×640px
【Xperia A SO-04E】4.6インチ / 解像度1280×720px / 319ppi / ピクセル比2.0 / ブラウザサイズ 360×640px
【Xperia AX SO-01E】4.3インチ / 解像度1280×720px / 342ppi / ピクセル比2.0 / ブラウザサイズ 360×640px
【Xperia Z1 SOL23】5.0インチ / 解像度1920×1080px / 440ppi / ピクセル比3.0 / ブラウザサイズ 360×640px
【Xperia UL SOL22】5.0インチ / 解像度1920×1080px / 441ppi / ピクセル比3.0 / ブラウザサイズ 360×640px
【Xperia VL SOL21】4.3インチ / 解像度1280×720px / 342ppi / ピクセル比2.0 / ブラウザサイズ 360×640px
【GALAXY Note 3 SC-01F】5.7インチ / 解像度1920×1080px / 368ppi / ピクセル比2.0 / ブラウザサイズ 540×960px
【GALAXY J SC-02F】5.0インチ / 解像度1920×1080px / 440ppi / ピクセル比3.0 / ブラウザサイズ 360×640px
【GALAXY S4 SC-04E】5.0インチ / 解像度1920×1080px / 441ppi / ピクセル比3.0 / ブラウザサイズ 360×640px
【GALAXY Note II SC-02E】5.5インチ / 解像度1280×720px / 267ppi / ピクセル比2.0 / ブラウザサイズ 360×640px
【GALAXY Note 3 SCL22】5.7インチ / 解像度1920×1080px / 386ppi / ピクセル比3.0 / ブラウザサイズ 360×640px
【GALAXY SIII Progre SCL21】4.8インチ / 解像度1280×720px / 306ppi / ピクセル比2.0 / ブラウザサイズ 360×640px
【iPad（第3/4世代）】9.7インチ / 解像度2048×1536px / 264ppi / ピクセル比2.0 / ブラウザサイズ 768×1024px
【iPad（第1/2世代）】9.7インチ / 解像度1024×768px / 132ppi / ピクセル比1.0 / ブラウザサイズ 768×1024px
【iPad mini（第2世代）】7.9インチ / 解像度2048×1536px / 326ppi / ピクセル比2.0 / ブラウザサイズ 768×1024px
【iPad mini（第1世代）】7.9インチ / 解像度1024×768px / 163ppi / ピクセル比1.0 / ブラウザサイズ 768×1024px
【Nexus 7（2012）】7.0インチ / 解像度1280×800px / 216ppi / ピクセル比1.3 / ブラウザサイズ 604×966px
【Nexus 7（2013）】7.0インチ / 解像度1920×1200px / 323ppi / ピクセル比2.0 / ブラウザサイズ 600×960px