↓↓↓最新の2021年版を作成しましたのでこちらもご覧ください。↓↓↓
2019年Pixel 3aやGalaxy S10など一通り新機種が発表されたので、2019年改めてブレイクポイントについて考えてみました（3年ぶり！）。
3年経ってほとんどのサイトがレスポンシブデザインになって、ブレイクポイントを少なく効率よく設定していく方向になっているのだと思います
前回、ブレイクポイントの設定はフレイムワークも参考に考えていましたが、
改めて考えてみると、モバイルファーストの観点からも640px/1024pxではないのではないかと感じました。
以下が3年前の前回の記事です。
いくつかブレイクポイントを調べましたが、
だいたい以下のような分け方が多かったです。
640px/1024px
480px/896x/1024px
768px/1180px
480px/600px/960/1280px
私が考える最新のブレイクポイントはこれです！
560px/960px
ブレイクポイントのポイント
560px未満をスマホと設定
* ポートレートとランドスケイプは用途を分けて考える。←これ重要
※iPhoneSEのランドスケープ（568px）、iPad Pro 11の5:5 Split Viewもタブレット扱いにするために560pxに設定。
960px未満をタブレットと設定
* Android Tablet 8インチのランドスケープ（960px）はPC扱いにする
* iPad Pro12.9の7:3 Split ViewはPC扱いにする
ポイントは画面をポートレート、ランドスケープの切り替えで変化を起こすようにしています。
ポートレートがスマホ表示の場合→ランドスケープはタブレット表示
ポートレートがタブレット表示の場合→ランドスケープはPC表示
そうすることで、使う人が自分にあった表示でサイトを閲覧できるようになります。
また、320pxが意外と重要になります。
iPhone6,7,8で横幅375pxになり、そちらに合わせがちですが、
iPad miniが新しくなり、Split Viewでの使用で320pxは重要になります。
※デザインによっては1024px以上での表示で変化を付けてもいいかと思います。
まとめ
560px/960px
これが新定番のブレイクポイントのメディアクエリの書き方になります。
320px（最小）
560px未満 @media screen and (max-width: 559px) {...}
960px未満 @media screen and (max-width: 959px) {...}
※「以下」ではなく「未満」にするために、メディアクエリの数字を一つ減らすのがポイントですね。
モバイルファーストでスマホベースで作成していくのであればメディアクエリは以下のになります。
560px以上 @media screen and (min-width: 560px) {…}
960px以上 @media screen and (min-width: 960px) {…}
メディアクエリを２つだけにすることでシンプルで扱いやすくレイアウトのメンテナンスもしやすい。
つまり、
スマホ 320〜559px
タブレット 560〜959px
PC 960px以上
結果として実用性を兼ね備えたブレイクポイントは、これがベストだと思います。
あと何年かはこれが定番になっていくと思います。
↓↓↓最新の2021年版を作成しましたのでこちらもご覧ください。↓↓↓
お知らせ
YouTubeチャンネル「ちいさなデザインの話」を開設しました。
「WEB制作ドキュメント」「10分デザイン考」などデザイン情報を発信していますのでこちらもぜひよろしくお願いいたします。
