日々コーディングをしていると、あれブレイクポイントって768pxだっけ？767pxだっけ？
ってなります。

私はものすごく忘れっぽいので、メモをデスクトップに貼り付けて間違いのないようにしているのですが、
間違えているときに、スマホとかタブレットでページを確認するとデザインが崩れまくっていて、

ええええええええ〜〜ーーーー！？

ってなります。
そして、10分ぐらい原因を探さないと見つけられないこともたまにあります。

そもそも、レスポンシブコーディングのチェックシートでも用意しておけばいいだけの話なのですが・・。

ですので、これを見ている人は、是非ともチェックシートを用意しましょう！

いままでのブレイクポイント

さて、本題のレスポンシブデザインのブレイクポイントについてなのですが、
日々スマホの画面の大きさが変わることがよくあり、どこまで対応したらいいのか迷ってしまうことがよくあります。

究極を言えば、全デバイスのサイズを調査してそれに合わせればいいだけの話なのですが、
実際のところ、そんなことしたらCSSの読み込みは遅くなるはメンテナンスが後々多くなるはの状態なので、
私は今現在は
480pxと768px
の２箇所にブレイクポイントを置いているだけです。

仕事柄、シンプルなランディングページを作ることが多いからです。

これがコーポレートサイトとかポータルサイトとかになってきたら１０２４pxにブレイクポイントを追加したりしていますね。

ただ、この従来のブレイクポイントは「特定の製品の解像度を基準」にして設定されてしまっているんです。
お分かりかもしれませんが、あなたを含め周りの友人や同僚にはiphoneを使っている人は多くないですか？
また、タブレットはiPadが多いことも然りです。

つまり、Apple製品に偏ってブレイクポイントを設定してしまっている!
わけなんです。

なので、レスポンシブデザインのブレイクポイントの最新事情を調査したら全くの別物になっていました。

特定の端末に依存しないブレイクポイント

これであれば、ある程度のサイズは網羅しているので、微妙なサイズ変更があったとしても
激変するようなことはないでしょうから、当分は大丈夫そうです。

また、コーディングを書くときにより精度の高い細かいコーディングを描くことができます。
ただし、デバイスのシャア率などを調査した上で、優先すべきサイズはどこなのかをしっかり考慮した上で
コーディングを進めることをお勧めします。

▶︎MEMO
StatCounterというサイトを使えば、リアルタイムでOSやデバイスのシェアを知ることができます。
また、国や地域を絞ることができるので、日本に限らず海外のサイトできになるデザインがあればどのデバイス向けに作られているのか
予測を立てることもできます。ちなみに今現在の日本国内のデバイスのシェア率はこちら↓

まとめ

▼従来のブレイクポイントは
460px,768px,1024pxの３箇所

▼最新のブレイクポイントは
480px,600px,960px,1280pxの４箇所

これを使えばスマホでも縦横のデザインに対応していて、なおかつ特定の端末に依存しないので
今後海外のデバイスのシェアが日本で上がってきたとしても対応するようにできます。