Web制作

今時のブレイクポイントは何px？768pxをやめて900pxにしてみたメリット

レスポンシブデザインにする際、ブレイクポイントは何pxにしていますか？

多くの教材や、スクール、実案件でも「768px」にしているパターンが多いのではないでしょうか？

なぜ768pxが多く使われるのか

ずばり、iPad縦持ち時の横幅の長さが768pxになるからです。

現状タブレットと言えばiPadというのが主流なので、768pxでの画面切り替えが重宝されているようです。

世の中のサイトを見ていても実際に768pxをブレイクポイントにしているサイトは多いです。

私もこの便利な768pxという呪文を使い続けていたのですが、

ある時、グローバルナビゲーションがデザイン上、768pxになる前にヘッダーに収まりきらなくなるという問題が発生。

この時使用したのが900pxのブレイクポイントでした。

ブレイクポイントを増やすとなると必然と作業工数が増えます。

限られた時間の中で制作するにあたり900pxというブレイクポイントは

スマホ・タブレットの768pxより大きく、PCの最小幅960pxよりも小さいという絶妙な大きさであり

768px以上に、1つ設定するだけでレイアウトが制御できる柔軟性があるように感じました。

元々768pxがほぼiPad専用の数値のため、必然とiPadでの表示がスマホのものになります。

工数や、変更による影響を最小限に抑えつつ、デザインの幅がぐっと広がる点はとても魅力的でした。

900pxだとiPadの表示がスマホになる点については、想定されるサイト訪問時のユーザーの端末と相談すべきかもしれません。

デザインの為にブレイクポイントを増やすほどでは‥‥という時に900pxのブレイクポイントを検討してみてください！

Webマーケティングにおけるパフォーマンス改善のための資料がダウンロードできます。