ブレイクポイントについて考え直す@2021

久しぶりの武井です。
社内で週1、持ち回りで勉強会というのをやっているのですが、その中で私が発表した内容を公開してみます。

レスポンシブWebサイトと呼ばれるものが登場して長らく経ちましたが、その手法についてアップデートせずに、なんとなくで作ってたりするなぁと思い立ったのがきっかけです。
メディアクエリ・コンテナクエリと単位の話もまとめたかったのですが、今回はブレイクポイントについて。

ブレイクポイントをちゃんと考え直そう

問題提起

ブレイクポイントは768pxが主流でやってきた。
しかし、「とりあえず768pxでしょ?」って何も考えずに設定してないだろうか?
768pxって何の数字?

情報整理

768pxとは、「タブレットの最小幅」
ではなく、iOS(iPad)の縦持ち時の最小幅
Androidの場合は、タブレットは600pxとか更に小さいのもある。

大きいサイズも小さいサイズもあるけど、タブレットの6割以上が「768 × 1024」なので、
タブレット = ほぼ768px とも言える。

要するに
768px以上をPC表示とすれば、タブレットをPCビュー
768px以下をSP表示とすれば、タブレットをSPビュー
となり、そもそもタブレットをどちらにしたいかがポイントになる。

タブレットビューは、アクセスユーザーも少なく、工数もかかるのでほぼ作らない。
タブレットはタッチデバイスであるため、SPビューの方が合っている。

これからのブレイクポイント

タブレットの縦持ちをSPビューにする場合、iPad Proの大きいサイズなどは1024pxの横幅がある。
1024px以下がスマホビューでも良いのではないか?
1024pxはPCユーザーもそこそこいるが、
そもそもPCでのアクセス率自体が低くなって、SPメインとなっている(サイトにもよるが多くの場合)
デザインでも1400〜1900pxなど大きいサイズで制作しているため、1024px程度のPCでの小さいブラウザではレイアウトを多く調節する必要があり、都度最適化していくコストが割りに合わない。

1024pxでSPにするのは悩ましい、、という場合は、間を取って900pxくらい。
と現時点の私の最適解は、この辺りです。

実際に制作してみて

900pxのブレイクポイントで制作したところ、多少はブレイクポイント付近でのPCビュー部分最適化が必要となりましたが、3カラムを落とすなど大幅な調整は必要なくなり、快適でした!

更に1024pxでの制作も行ってみましたが、自分の主観としてはPCで1024px以下にするのは、かなり狭い印象でして、それだけ狭くした時にレイアウトがSPビューになっても何も違和感はありませんでした。

あとは、案件ごとのアクセス割合とか、要件によって判断すればよいのかな、と思います。
個人的にはタブレットでPCビューにしてもSPビューにしても、レイアウトがいまいちだな、という部分が気になるので、やっぱりタブレットビューが作れると一番うれしい!という感じです。
受託制作においては、費用対効果が大事ですが、自主制作などの時には丁寧にタブレット最適化したい気持ちです。