レスポンシブデザインのブレイクポイントの決め方｜端末ではなく、崩れる幅で決める

ブレイクポイントを「スマートフォンは375px、タブレットは768px」のように端末の機種から決めると、端末が増えるたびに破綻します。実際に使われている画面幅は多様で、機種名と幅は1対1で対応しません。

基準にすべきは端末ではなく、自社のレイアウトが崩れる幅です。ブラウザの幅を少しずつ狭めていくと、文字が詰まる、要素が重なる、横に伸びすぎて読みにくくなる地点が出てきます。そこがブレイクポイントです。

この記事では、崩れる幅から決める手順、実務で使う3〜4段階の分け方、必ず確認すべき箇所、そして制作を依頼する際に指定しておく項目を整理します。

崩れる幅を見つける手順

特別なツールは要りません。ブラウザの幅を変えるだけです。

1. ブラウザを最大化した状態から始める
2. 幅を少しずつ狭めていく
3. 違和感が出た幅を記録する：文字の詰まり、要素の重なり、余白の消失
4. その手前で切り替える：崩れてからではなく、崩れる前に配置を変える
5. 主要なページで繰り返す：トップ、サービス、問い合わせ

3番目で記録する「違和感」は、崩れではなく読みにくさも含みます。1行の文字数が多すぎて視線が戻りにくい、逆に少なすぎて改行だらけになる。この状態も切り替えの理由になります。

5番目が重要です。ページによって構成が違うため、崩れる幅も違います。トップページだけで決めると、他のページで破綻します。

実務で使う段階の分け方

多くのサイトは3〜4段階で足ります。増やすほど確認と保守の手間が増えます。

最終行を設定していないサイトが多くあります。画面が広いほど1行の文字数が増え、かえって読みにくくなります。本文の領域に最大幅を設けて、それ以上は左右に余白を取ってください。

中間の段階は省略できる場合があります。狭いと広いの2段階で成立するなら、そのほうが保守は楽です。段階を増やす判断は、実際に崩れるかどうかで決めてください。

ブレイクポイントより重要な設計の順序

ブレイクポイントの数値を先に決めても、何を優先して見せるかが決まっていないと、狭い画面での順序が崩れます。

1. 狭い画面で何を最初に見せるか決める：情報の優先順位
2. その順序で縦に並べる：1カラムの構成を先に作る
3. 広い画面で横に展開する：余った幅に何を置くか
4. 崩れる幅で切り替える：ここで初めて数値を決める

この順序を守ると、狭い画面で情報が後回しになる事故が防げます。広い画面を先に作ると、サイドに置いた要素が狭い画面では最下部に落ちます。そこに重要な情報があると、読まれません。

狭い画面を起点にする設計の考え方はモバイルファーストデザインとは？重要視される理由と設計のコツで扱っています。情報の優先順位そのものの決め方は情報設計（IA）とは？わかりやすいサイト構成の作り方を参照してください。

必ず確認すべき5つの箇所

1行目は業種によって頻発します。料金表や比較表は、狭い画面では必ず横にはみ出します。横スクロールできるようにするか、狭い画面では別の見せ方（カードを縦に並べる）に切り替えてください。

5行目も見落とされます。固定のヘッダーや問い合わせボタンが、狭い画面では本文の面積を圧迫します。表示領域の何割を占めているかを実機で確認してください。

制作を依頼するときに指定する項目

• 対応する幅の範囲：どこからどこまでを想定するか
• 確認する端末：実機で確認するものを具体的に挙げる
• 本文の最大幅：広い画面で伸びきらないようにする
• 表の扱い：狭い画面でどう見せるか
• 更新時の運用：自社で本文を追加したときに崩れないか

最後の項目が最も後で効いてきます。公開時は問題なくても、自社で長い文章や大きな画像を追加すると崩れることがあります。更新の担当者が触る範囲で崩れない作りになっているかを、納品時に確認してください。

点検の観点全般は使いやすいWebサイトの条件とは？自社で点検できるチェック項目にまとめています。

よくある失敗

機種名でブレイクポイントを決める

端末が増えるたびに見直しが必要になります。自社のレイアウトが崩れる幅で決めてください。

段階を増やしすぎる

確認と保守の手間が増えます。3〜4段階で足りるサイトがほとんどです。

広い画面から作る

サイドに置いた要素が狭い画面では最下部に落ちます。狭い画面の順序を先に決めてください。

本文の最大幅を設定しない

大きな画面で1行が長くなり、読みにくくなります。最大幅を設けて左右に余白を取ってください。

表の扱いを決めないまま公開する

狭い画面で必ずはみ出します。横スクロールか、別の見せ方への切り替えを決めておいてください。

よくある質問

よく使われる数値の目安はありますか

慣例的に使われる数値はありますが、それに合わせる必要はありません。自社のレイアウトが崩れる幅と偶然一致するなら使えばよく、しない場合は自社の数値を優先してください。

何台の実機で確認すべきですか

台数より、幅の範囲を網羅することが重要です。手元にある端末で狭い側と広い側を確認し、中間はブラウザの幅を変えて代替してください。

既存サイトのブレイクポイントを変更できますか

できますが、全ページの確認が必要になります。特定のページだけ崩れているなら、そのページの構成を見直すほうが影響範囲は小さくなります。

表示速度への影響はありますか

段階の数そのものより、画像の扱いのほうが影響します。狭い画面に大きな画像をそのまま読み込ませていないかを確認してください。改善の優先順位はサイトの表示速度を改善する優先順位｜何から手をつけるかを参照してください。

PC専用ページを別に作るべきですか

原則として不要です。管理する対象が2倍になり、更新の漏れが発生します。1つの構成で幅ごとに切り替えるほうが保守できます。

まとめ

ブレイクポイントを端末の機種から決めると、端末が増えるたびに見直しが必要になります。基準にすべきは自社のレイアウトが崩れる幅です。ブラウザの幅を少しずつ狭め、文字が詰まる、要素が重なる、1行が長すぎて読みにくくなる地点を記録してください。

段階は3〜4つで足ります。増やすほど確認と保守の手間が増えます。特に、広い画面での最大幅を設定していないサイトが多く見られます。画面が広いほど1行の文字数が増えて読みにくくなるため、本文の領域に上限を設けてください。

そして数値を決める前に、狭い画面で何を最初に見せるかを決めてください。広い画面から作ると、サイドに置いた要素が狭い画面では最下部に落ちます。そこに重要な情報があれば読まれません。順序を先に確定させてから、崩れる幅で切り替えます。

当社ではホームページ制作において、情報の優先順位を含めた設計からご相談を承っています。自社サイトの点検を進めたい場合は、資料をダウンロードのうえご活用ください。