【これは知らなかった】レスポンシブデザインの2022年のブレークポイント事情とは？

ホームページやLPを発注する際に、

「レスポンシブはどうしますか？」

と訊かれたことはありませんか？

コーダーにとっては当たり前のレスポンシブデザインですが、

Web担当者や経営者の方で、この手の知識がなければ
コーディングする人にどのように指示していいかわかりませんよね。

今回は、そのレスポンシブデザインについてと
最新(2022年版)のブレークポイントについて簡単に解説します。

レスポンシブデザインとは？

端末の画面幅や種類に応じて、表示を変えるWebデザイン手法のことです。

つまり、スマホやタブレット、PCで
それぞれ表示やデザインを変えられるようにホームページなどを実装することを指します。

ただ、近年新しい端末がどんどん出てきて、
どの端末・画面幅に対応すれば良いのか、わからないよという方も増えてきています。

iPad mini6などの新しい端末も出てきて、対応する端末も増えてきているので、
次にどの端末に対応してコーディングすれば良いかについて解説します。

レスポンシブデザインには、ブレークポイントという概念があります。
ブレークポイントとは、画面幅に合わせてCSS(サイトを装飾するためのもの)を切り替えるときに使われる、切り替えポイントのようなものです。

例えば従来では、

もしくは、

といった感じで、768pxや1024pxが切り替えのポイントになっていました。

(ちなみに、なぜ768px・1024pxかというと、
iPadの画面幅が768pxで、1024pxはiPad Proの画面幅だからです)

では、最新のブレークポイントはどのようにしているのでしょうか？

2022年現在、さまざまな端末が出現している世の中ですが、
以下の２つのブレークポイント良いとされているようです。

まず、なぜ600pxかというと、
タブレットの最小サイズが600pxだからだそうです。
(これは今までにはなかったブレークポイントかと思うので、知っておいたほうが得かもしれません)

次に、520pxと960pxについては、
近年iPadの機能としてあるSplit Viewに対応したブレークポイントのようです。

ここまで簡単にブレークポイントを見てきましたが、
紹介したブレークポイントでコーディングしたり外注の方に伝えるのもありかと思います。

そして、最も重要なのが目的を忘れないことかと思います。

ということを考えた上で、
バランスも重視してコーディングしたりコーダーの方に発注すれば、
サイトを見てくれる人も制作会社の方もお互いに良い結果になるのではないでしょうか。