レスポンシブWebデザインのブレイクポイントについて

menu

2020年4月27日

レスポンシブWebデザインを考える際、特に重要視されているのはブレイクポイントの設定ではないでしょうか？
ブレイクポイントと言ってもさまざまな基準値があり、設定に迷ってしまいますね。ここでは、ブレイクポイントの基本から標準値の考え方についてお話していきます。

・ブレイクポイントについて
ブレイクポイントとは、ブラウザのウィンドウ幅にあわせてCSSを切り替え、最適なレイアウトでWebサイトを見れるように設定する境界値のことです。

Webサイトを閲覧するとき、スマートフォン、タブレット、PCでは画面サイズが異なりますね。各デバイスの画面サイズを考慮したレイアウトで、Webサイトを作成するためにブレイクポイントの設定が必須となっているのです。

・ブレイクポイントの分割数について
近年ではデバイスの種類が多数存在するため、「ブレイクポイントを細かく設定した方が良いのでは」と思うかもしれません。しかしながら、ブレイクポイントを細かく設定することはレイアウト調整の増加につながり、コストがかかるため避けた方が良いでしょう。
ブレイクポイントの分割数は、だいたい2～3つに設定することが一般的となっています。

・ブレイクポイントの標準値について
レスポンシブWebデザインで設定するブレイクポイントは、制作者によってさまざまな観点で決めるため、これといった数値がありません。
ブレイクポイントの標準値について調べてみたところ、次の数値に設定することが多いようです。