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

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

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

主要デバイスのブラウザサイズと解像度

まず考えるポイントとしてブレイクポイントをどこにしようかと悩むと思います。
もちろんサイト構成で最初から不可能な目安もあったりと、難しい時もあるかもしれません。
基本的には画面サイズの手引きとして端末のブラウザサイズや解像度を気にしていると思います。
まずは、主要端末のブラウザサイズと解像度（ピクセル）を確認してみます。

デバイスの解像度（ピクセル）

これはあくまでもピクセル数であって、これを参考にブレイクポイントを考慮するとユーザビリティに影響します。
なぜなら実際に表示されるブラウジング画面のサイズは別のサイズに最適化されるからです。

テレビで考えた時に42インチのテレビと4Kの42インチのテレビでは画質は違いますが同じ42インチです。
4Kではピクセル数が4倍なので、より高精細な画質になると言うわけですね。

スマホやタブレットでも端末によってピクセル数は異なりますが表示領域はある程度決まっています。
もしも4Kディスプレイのスマホで等倍表示したら、物理的な画面サイズに比べて文字が小さすぎて読めなくなってしまいます。

ブラウザサイズ

ブラウザサイズが実際のブラウジングサイズです。
比較してみるとブラウザサイズにはほとんど差がないことがわかります。
デバイスのインチ数が上がるに比例して大きくなっている物がほとんどです。

つまり、どれだけ解像度の高いディスプレイでも、人間が扱う物としての大きさは基準が出来上がっているわけですね。
レスポンシブデザインで使うブレイクポイントを決める際にも、このブラウザサイズを利用します。

ブラウザサイズを割り出す方法

ではこのブラウザサイズの数値はどこでわかるのかと言うと、devicePixelRatio（デバイスピクセル比）から求められます。
計算方法は以下の通り。

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

devicePixelRatioが2の場合には解像度の縦と横それぞれを2で割った数がブラウザサイズになります。

devicePixelRatioを割り出す方法

devicePixelRatioを求めるにはjavascriptだと「window.devicePixelRatio」で取得できます。
Retinaディスプレイの登場によって新設された、本当の解像度との比率が設定される物です。
ただし、少し厄介な数値となっていて、ブラウザ間での差異がある報告もありました。
そしてAndroidでは1.5や1.25という複雑化にも殺意を覚えます困惑しますね。

レスポンシブとviewport

metaタグで指定できるviewportを「width=device-width」として指定すると、ブラウザサイズとviewportを一致させることができます。
viewportの指定は、パソコン向けの横幅の広いサイトを一画面で表示する時や、拡大して表示させる時などに重宝する指定です。
レスポンシブデザインでは端末のブラウザサイズを元に表示を整えるわけですから、viewportはほとんどの場合device-widthの指定になるわけです。
もちろん一画面に表示する内容を多くする構成では適切なviewportが必要ですが。

レスポンシブのメディアクエリ

いよいよ実際にレスポンシブデザインに移ります。
レスポンシブウェブデザインとは、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で上書きされることになります。
ここでのpxはブラウザサイズが基準になります。

レスポンシブのブレイクポイント

さて、ブラウザサイズとメディアクエリがわかった上で最も適したブレイクポイントはどこなのか？という作業に移ります。
何度も言いますが、サイト構成によって適したポイントは違います。
色々な情報で最適なブレイクポイントは○○だ！と読んでもあなたのサイト構成に合うとは限りません。
例えば、モバイル以外はサイドのカラムを常に表示したい時を想像して下さい。
よく推奨されるブレイクポイントである500~600px付近に指定してしまうと、メインカラムの表示領域はなくなってしまいますね。

とは言うものの、一般的に主要端末を意識したブレイクポイントが前提となります。

考えるポイントとして

• モバイルファーストで考えよう！
• モバイルとタブレットのブレイクポイントは？
• タブレットとパソコンのブレイクポイントは？

という部分になります。
一つづつ見ていきましょう。

モバイルとタブレットのブレイクポイントは？

考え方として最大モバイルのデバイスを基準にするか、最小タブレットを基準にするかで少し変わってきます。

主要端末の最大モバイルを基準にブレイクポイントを設定したい場合では、iPhone plusシリーズの414pxが目安です。
これ以上になるとタブレットサイズになるので、将来的に大幅に大きくなる事はないと思います。

主要端末の最小タブレットを基準にブレイクポイントを設定したい場合では、Nexusシリーズの7インチの600pxが目安です。
スマホでも5インチが当たり前に存在するので、タブレットとしてこれ以上小さくなる事もないでしょう。

つまり小型のタブレットで表示された時にスマホと同じにするのか、タブレット向けに表示するのかで決めることができますね。
タブレット向け表示にしたいのであれば600px以上はタブレットとするのがベストと言えそうです。

タブレットとパソコンのブレイクポイントは？

実はとても需要があるポイントがあります。

タブレットの横画面にした時はできる限りパソコンと同じ表示で表示したい！

という意見の多さです。
年間で億を越えるサイト運営に携わった時、お客さんからの要望でとても多かった意見です。

パソコンで見ていたページをタブレットから見たら項目が見当たらないという風に感じるそうです。
もちろん実際にはその項目は存在するのですが、レスポンシブによって表示する場所が変わる事で不便を感じる人も大勢いるわけですね。

考慮すべき点として、やはりユーザー目線は欠かせません。
スマホでは小さいからと思ってユーザーはタブレットを購入するが、表示したらスマホが大きくなったUIだったらどう思うでしょう。

そもそもレスポンシブデザインは強制的にパソコン向け表示をする概念ではないので、開発者のブレイクポイントに委ねられるわけですね。
という事で、最も小型のタブレットのランドスケープ表示まではパソコン向け表示でも良いかもしれません。

小型タブレットの横画面をブレイクポイントにする

全ての意見を反映させた構成は不可能です。
それほど多くのデバイスが世の中に発売されてしまっています。
そんな中でも決して外せない端末があります。

Googleの「Nexus 7」は1カ月当たり100万台販売
GIGAZINE

横画面の960pxまではパソコン向けの表示が望ましいと言えます。

この960pxはパソコンで一番普及しているフルHD（1920×1080）の半分です。
つまり、パソコン環境でも画面半分にブラウザを表示して作業をする時にパソコン表示のままで見れる利点もありますね。

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

実際のアクセス解析から利用端末順のブラウザサイズ・画面解像度を集計してみました。
こういった情報を参考にあなたのサイトにあった、レスポンシブでブレイクなポイントさんを探してみてください。

まとめ

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

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

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