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

Transcript

1. ブレイクポイントを ちゃんと考え直そう 2021.06.09 By ErinaTakei
2. ブレイクポイント レスポンシブWebサイトの制作に不可欠。 画面幅に合わせてCSSを切り替える時に使用する、切り替えポイントのこと。 メディアクエリと併用し、レイアウトが可変するポイントを設定することで、各デバイスに最適化した Webサイトを実現。
3. ブレイクポイント といえば768pxでしょ？ うんうん、知ってる知ってる。
4. 思考停止していませんか？ 何故768pxなのでしょうか？
5. 768pxって何？ タブレットの最小幅 → iOS（iPad）の縦持ち時の最小幅 Androidのタブレットは600pxとか更に 小さいのもある しかし、タブレットの中でも、 768 × 1024が6割以上のシェア率 実際のところ タブレット = ほぼ768px とも言える
6. つまり、768pxをブレイクポイントにすると？ 768px以上をPC表示 → タブレットをPCビューにする 768px以下をSP表示 → タブレット（768px）をSPビューにして、大きいサイズのタブレットはPCビューにする そもそもタブレットビューをどっちにしたいのか？ ということがポイントになってくる
7. タブレットビューを作らないのか？ そりゃタブレット用に最適化したレイアウトにするのが一番きれい しかし、 多くの案件の既存アクセスデータを見てみても、 タブレットでのアクセスは1〜2割程度のケースが多い ビューを1つ増やすには、デザインも実装も工数がその分増える・・・ しかし、PCビューにしてもSPビューにしても、 やっぱりタブレットサイズで見るとレイアウトが微妙で部分最適化する必要がある
8. タブレットビューのブレイクポイントは？ iPadの縦持ち最小サイズは768px（iPad mini）、最大サイズは1024px（iPad Pro） Androidタブレットの最小サイズは600px iPhoneの縦持ち最小サイズは320px（SE）、最大サイズは428px（iPhone 12ProMax） iPhoneの横持ち最小サイズは568px（SE） タブレット最小の600px以上をタブレットビューとして、 iPhoneSEの横持ちはSPビュー、それ以上のサイズの横持ちはタブレットビュー 600px〜1024pxをタブレットビューの範囲とする　のが良さそう
9. 結局PCとSPのブレイクポイントは？ 今までタブレットをPC表示にした際に、 ビューポートで1024px相当のレイアウトに固定する、という手段があった → UAによる操作が出来なくなるため、ビューポートの書き換えは出来なくなる 何も最適化せずに、768px幅でPCビューに すると、3カラム、4カラムのレイアウトが かなり厳しい。。。 小さいタブレットはSPビューにするのがよ いのではないか？
10. 結局PCとSPのブレイクポイントは？ 1024px以下がスマホビューでも良いのではないか？ → そもそもPCでのアクセス率自体が低くなっている（サイトによるが大半は） → PCでの小さいブラウザに最適化していくコストが割りに合わない さすがに、、 1024px以下だと切り替え早すぎる・・・、1024pxはPCの方が多いだろう。 という場合は、 やはり768px以下をスマホビューにして、PCビューは1024pxを最小幅固定がよい。 少し大きいiPadを考えて820px以下辺りでも可。 PC1024px以下のアクセス率は低い。 「1920px×1080px」と「1366px×768px」がダントツでシェアが多い。 900pxという意見もある https://www.6666666.jp/html/20200213/
11. ありがとうございました！