【2018年版】レスポンシブデザインにおけるブレイクポイントの最適解はこれだ！

やっぱりファミコンカラーが好きな四条せつなです。

これまで「ブレイクポイントについては、色々な考えが出てきていると思います。“768px”を1つの区切りにするのが、一般的な考え方だと思います。

でも、どうしてもしっくりこないんだよねー。だから、モバイルフレンドリーで、しっくりくる「ブレイクポイント」を考えてみたよ！

あ、もちろん根拠があっての、「ブレイクポイント」設定ですよ！なので、私なりのブレイクポイント論を紹介していきますね。

従来のブレイクポイントの欠点

一般的な「ブレイクポイント」の考え方だと、768pxでPC表示とスマホ表示を切り替えます。これは、iPadの縦持ちしたときの表示解像度が、768pxというところに起因しています。

つまり、iPad基準なんだね！確かに、iPadやiPhoneは普及率も高いもんね！

しかし、ここには1つの疑問点があります。それは、「特定の製品の解像度を基準にしてよいものなのか」です。

当たり前ですが、デバイスの解像度は日々進化（変化）しています。2017年だと、「iPhone X」や「GALAXYシリーズ」は、あからさまな変態解像度です。

この”768px”のような、「デバイス依存」のブレイクポイント設定だと、基準となるデバイスの解像度が変わってしまった場合が大変です。なぜなら、デバイスの解像度が変わった際に、ブレイクポイントも基準となるデバイスに合わせたものにコーディングし直しになるからです。

例えば、iPadの縦持ちの解像度が、768pxから960pxとかに変わっちゃうと、いちいちブレイクポイントを960pxに再設計しないといけない訳です。これって、凄い手間ですよね…

このブレイクポイントは、海外のmaterial.ioさんを参考にさせてもらいましたっ！！

従来の768pxをブレイクポイントにする考え方とは異なり、端末の解像度に依存した考えではありません。なので、端末の解像度の変化の際に、仕様変更しなくていい訳です。

このようなある一定の指標をこちら側が決めることによって、制作がしやすいというメリットもあります。

ブレイクポイントを今回は全て、“8の倍数“になるようにしています。これは、デザイン理論の観点から8の倍数でpx指定すると、美しいデザインになるようにしているのです。

何となく768pxをブレイクポイントに指定していた人が多いと思います。だけど、今回のような考え方もアリだと思います。実際に、この考えがデファクトスタンダードであると提唱する人も出てきていますからね！コーディングの際の1つの指標にしてくださればと思いますっ！

つまりは…

ってことですねっ！

ということで、“【2018年版】レスポンシブデザインにおけるブレイクポイントの最適解はこれだ！”でした！でわでわっ！