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

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

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

SPONSORED LINK

デバイスピクセル比

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

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

主要端末のピクセル値

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

まとめ

もう最終的には大体でもなんとかなると思いました。スマホとパソコンだけ切り替えるだけでも十分すぎるサイトもありますし。
それに、それぞれのブレイクポイントを考えたらそれはもうレスポンシブではなく、手動切り替えを作成しているのと同じ作業です。

また、ブレイクポイントにはメジャーブレイクポイントとマイナーブレイクポイントに分けて設計する方法もあります。
メジャーポイントで全体を設計して、気難しい端末にはマイナーポイントを適用させるのも一つの手法ですね。

今日も知識欲は止まらない。

関連トピック

Lined

CSSでボックスを横並びでグリッドデザインしちゃう方法まとめ

CSSで横並びを実現する方法はいくつもありますが、ちょっとした挙動の違いや注意点も含めて見ていきます。利用箇所に合わせて適切なCSSを選

css

スマホでoverflow:auto;を手軽に実装する

スマホでoverflow:auto;を手軽に実装するには、 Android2.X系のバグとか色々あってとっても面倒です。 最近はAn

css

サイト全体がずれる css スクロールバー ページの高さが長い場合

ページの高さが長い場合にスクロールバーが表示され、 サイト全体がずれる現象の対処方法メモ 一画面で収まる内容のセンタリングされたペー

css-shadow

CSSの枠線は薄っすらシャドウで影を付けるボーダーデザインが素敵

CSSだけで再現できる影付きボーダーはフラットデザインでは中々表現しにくい高級感を出したり、フラットを勘違いした古臭さを除去できると

font-family

CSSのfont-familyで流行で主流の設定はコレだ!

現時点のベストfont-familyだとを色々なサイトを参考に考察してみます。 そんなに急激に変わるものではないですが、常に最新のfo

html

仮バナー・模擬バナーを設置してサイズ確認しながらコーディング

サイトデザインで、この部分にこのサイズの画像を置いたらどういう配置なるかな? という場面で好きな画像サイズを即配置できる便利サイト。

liquid-layout

リキッドレイアウト作成方法と簡易テンプレート

可変カラムに対応したリキッドレイアウトの作り方と超簡易テンプレートです。 「レスポンシブかリキッドで悩んでいる」という意見は半分間違い

公開日:2014/06/20