最新版、レスポンシブデザインのブレークポイントはこれ！

レスポンシブデザインのブレイクポイントというものは、明確に定義されているわけではないので、どこに設定するか悩むところですよね。

そこで、今回は、2020年最新のデバイス事情にも配慮しつつ、今後しばらくこれでOKなブレイクポイントをご紹介します。

この記事は、私が実際、年間100件以上のレスポンシブ案件の中でも使用している方法ですので、安心してお使いください。

ブレークポイントを絞る理由と最適なポイント

冒頭でデバイス事情に配慮しつつと書きましたが、この点で配慮すべきは次の３つのパターンです。

「PC」
「タブレット（縦）」
「スマートホン（縦）」

あえて（縦）というワードをいれたのは、横向きなど細かいケースまで配慮しすぎると「ブレークポイント」を絞り切れなくなるからです。

ブレークポイントを作る目的は、様々なデバイスに対応するためというよりは、どんなデバイスで確認しても見やすく可読性の高いサイトを保つことなので、ブレイクポイントを増やし過ぎて、サイトの統一感が損なわれたり、編集しにくくなったりということは避けるべき問題です。

そこで、追加すべきブレイクポイントは次の2点ということになります。

「PC」と「タブレット（縦）」の間
「タブレット（縦）」と「スマートホン（縦）」の間

ここから、現在のデバイス事情と「どんなデバイスで確認しても見やすく可読性の高いサイトを保つ」という課題を配慮したブレークポイントがこれです。

ブレークポイントを1点に絞る場合

できるだけPC向けデザインのイメージを保ちたい場合は「PC・タブレット」向けと「スマートフォン」向けに分ける方法もあります。この場合の最適ポイントはこれです。

先ほどのブレイクポイント2点の場合は、いろいろな各デバイスのだいたい平均を考慮した値になりますが。
この、ブレイクポイント１点については、タブレットまではPCサイズ、それ以下のサイズのデバイスではスマートフォンサイズで表示という指定になります。

ブレイクポイント１点のブレークポイントが、はじめに指定したブレイクポイント2点の場合のスマートホン対応サイズ（599px以下）と同じにしない理由は、PCサイズの表示をiPad以下のデバイスで見たとき、文字等が小さくなりすぎる可能性があるためです。
これは、「どんなデバイスで確認しても見やすく可読性の高いサイトを保つ」という本来の目的に配慮した結果ということになります。

最後に

ここまで、レスポンシブデザインのブレイクポイントをどこで作ればいいかという「数値」をご紹介してきましたが、一番大切なのは「どんなデバイスで確認しても見やすく可読性の高いサイトを保つ」ということです。もし、サイトのデザインによって、この数値と違うものを使わなければならない場合でも、このことを配慮する必要があります。

そして今回、紹介したブレークポイントついては、「どんなデバイスで確認しても見やすく可読性の高いサイトを保つ」ということを完全に満たしているので、安心して使ってください。