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

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

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

SPONSORED LINK

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

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

デバイス ブラウザサイズ 解像度(ピクセル)
iPhone 6 Plus
iPhone 6s Plus
iPhone 7 Plus
414×736 1242×2208
iPhone 6
iPhone 6
iPhone 7
375×667 750×1334
iPhone 5
iPhone 5s
iPhone 5c
iPhone SE
320×568 640×1136
iPhone 4
iPhone 4s
320×480 640×960
iPhone 3GS 320×480 320×480
iPad Mini 2
iPad Mini 3
iPad Mini 4
768×1024 1536×2048
iPad 3
iPad 4
iPad Air
iPad Air 2
iPad Pro 9.7
768×1024 1536×2048
iPad Pro 12.9 1024×1366 2048×2732

デバイスの解像度(ピクセル)

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

テレビで考えた時に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が必要ですが。

device-widthの値はデバイス解像度 ÷ 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で上書きされることになります。
ここでのpxはブラウザサイズが基準になります。

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

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

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

考えるポイントとして

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Google Nexus 7 600×960

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

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

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

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

順位 デバイス 解像度
1 Apple iPhone 375×667
2 Apple iPhone 320×568
3 Apple iPhone 7 Plus 414×736
4 Apple iPad 768×1024
5 Sony SO-01H Xperia Z5 360×640
6 Sony SO-02G Xperia Z3 Compact 360×640
7 Sony SO-01G Xperia Z3 360×640
8 Sony SO-02H Xperia Z5 Compact 360×640
9 Sony SOL26 Xperia Z3 360×640
10 Sony SOV32 Xperia Z5 360×640
11 Sony SO-04H Xperia X Performance 360×640
12 Samsung SC-02F GALAXY J SC-02F for DoCoMo 360×640
13 Sony SO-03G Xperia Z2 SO-03F for DoCoMo 360×640
14 Samsung SC-04F GALAXY S5 SC-04F for DoCoMo 360×640
15 Sony S0-04G Xperia A4 360×640
16 Sharp SH-04G Aquos Ever 360×640
17 Sony SOV31 Xperia Z4/Z3+ Dual 360×640
18 Apple iPod 320×568
19 Sony 501SO Xperia Z5 360×640
20 Google Nexus 5 360×640
21 Samsung SC-05G Galaxy S6 360×640
22 Sony SO-03H Z5 Premium 360×640
23 Sony 401SO Xperia Z3 360×640
24 Sharp SH-01G 360×640
25 Sony SO-03F Xperia Z2 SO-03F for DoCoMo 360×640
26 Asus Z00ED Zenfone 2 Laser 360×640
27 Google Nexus 5X 412×732
28 Sony SO-02 Xperia Z3 Compact 360×640
29 Apple iPhone 320×480
30 Samsung SCV33 Galaxy S7 Edge 360×640
31 Sharp SH-O2G Disney Mobile SH-02G 360×640
32 Samsung SC-04E GALAXY S4 SC-04E for DoCoMo 360×640
33 Sony SO-02 Xperia Z3 Compact 360×592
34 DoCoMo F-02H arrows NX F-02H 360×640
35 Sony Xperia SOL25 ZL2 360×640
36 Sharp Aquos mini SHV31 360×640
37 Fujitsu F-04G Arrows NX 360×640
38 Google Nexus 7 600×960
39 Fujitsu F-01H Arrows Fit 360×640
40 Sharp SHL25 Aquos Serie 360×640
41 FREETEL FTJ152C Samurai Miyabi 360×640
42 Samsung SCL23 GALAXY S5 SCL23 for KDDI 360×640
43 Sony SO-04E Xperia feat. HATSUNE MIKU SO-04E for DoCoMo 360×640
44 Sharp Aquos Zeta SH-01H 360×640
45 Sony 402SO Xperia Z4 360×640
46 Fujitsu F-01F ARROWS NX F-01F for DoCoMo 360×640
47 Samsung SCV31 Galaxy S6 360×640
48 Sharp SH-03G Aquos Zeta 360×640
49 LG DM-01G 360×640
50 DoCoMo SO-01F Xperia Z1 360×640

まとめ

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

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

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

SPONSORED LINK
トップへ戻る