iPad Proが発売され、iPad Airでも画面の分割ができるようになったりと、改めてブレイクポイントについて考えてみました。
画面サイズの多様化
レスポンシブをうたっていていながら、
基本的にはPCの固定レイアウトで、640pxのブレイクポイントだけでスマホ対応してるサイトを結構見かけます。
最近の画面サイズの多様化を考えると、ユーザにとっては不親切に思います。
昔はiPadイコールPCと同じレイアウトで通用したかもしれませんが、
iPad AirとiPad miniで表示される面積は違うのに解像度が同じと考えると、
iPad miniでPC版のサイトを見るのはちょっと見にくいとかがあるかと思います。
また、Split Viewでも見やすいようにしなければいけません。
そこで、基準はiPhone、iPad、iPad proとポートレート、ランドスケープ、Split Viewも含めて考えてみました。
フレイムワークのブレイクポイント
ちなみに、Foundationとbootstrapは以下のようになっています。
Foundation6 640px/1024px
bootstrap4 alpha 544px/768px/992px/1200px
bootstrapのブレイクポイントは特殊な気がしますが、追って調べてみることにします。
ブレイクポイントのポイント
640px未満をスマホと設定
- ポートレートとランドスケイプは用途を分けて考えたい
※iPhone5のランドスケープ（568px）をスマホに入れようとすると、iPad Pro Split Viewが活かせなくなるので、ここは妥協。
1024px未満をタブレットと設定
- iPad Proのポートレート（1024px）はPC扱いにしたい
- iPad Proのランドスケープ（1024px）はPC扱いにしたい
1024pxをPC側に含ませることで、iPadやNexusのランドスケープ時、iPad proでの表示切り替えに対応させることができます。
※コンテンツ幅によっては1024pxの数字を調整することで対応しやすくなります。
上記でお伝えしたランドスケープ時のことを考えると982px〜1023pxの間で調整するのが、良いかと思います。
まとめ
まとめると、個人的には以下が一番使いやすいと思っています。
320px（最小）
640px未満 @media screen and (max-width: 639px) {...}
1024px未満 @media screen and (max-width: 1023px) {...}
※「以下」ではなく「未満」にするために、メディアクエリの数字を一つ減らすのがポイントですね。
つまり、
スマホ 320〜639px
タブレット 640〜1023px
PC 1024px以上
結果としてFoundation6と同じですね。
お知らせ
YouTubeチャンネル「ちいさなデザインの話」を開設しました。
「WEB制作ドキュメント」「10分デザイン考」などデザイン情報を発信していますのでこちらもぜひよろしくお願いいたします。
