久しぶりの武井です。
社内で週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ビューにしても、レイアウトがいまいちだな、という部分が気になるので、やっぱりタブレットビューが作れると一番うれしい!という感じです。
受託制作においては、費用対効果が大事ですが、自主制作などの時には丁寧にタブレット最適化したい気持ちです。