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

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

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

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

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

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

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

768px縛りをやめてみた

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

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

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

900pxのメリット：最小限のブレイクポイントで違和感のないレイアウトを実現

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

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

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

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

900pxのデメリット：iPad縦持ちがスマホ表示になる

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

まとめ

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

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

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

正しい効果測定は、正しい計測設定から！Googleアナリティクス設定項目チェックシート（無料）

Googleアナリティクスは、適切な初期設定を行って初めて、解析に役立つデータを計測できます。 正しい効果測定を行う上で、必要な設定項目のチェックシートをご用意しました。