ブレークポイント

定義

ブレークポイントは、画面幅があらかじめ決めておいた値を超えたときにレイアウトを 別の形に組み替える境界線です。たとえば画面が狭いときはカードを1行に1枚ずつ 縦に積んでおき、幅がある地点を超えたら2列、3列と横に並べて見せる、という 具合です。CSSではメディアクエリでこの境目を指定し、同じコンテンツでも スマホ、タブレット、デスクトップでそれぞれ違う組み方で見せるための 中心的なしくみになります。1枚の窓を画面サイズに合わせて折りたたんだり 広げたりする折りたたみ地図のようなものだと考えると分かりやすいでしょう。

なぜ重要か

人は手のひらサイズのスマホから横に広いモニターまで、あらゆるサイズの画面で 同じページを見ます。固定した1つの配置しか用意しないと、必ずどこかで使いづらく なります。狭い画面では文字が切れたり横スクロールが出たりし、広い画面では コンテンツが中央に細く寄って余白ばかりが空いてしまいます。ブレークポイントは それぞれのサイズ帯に合った配置を選んでくれるので、すべてのユーザーが スクロールや拡大なしに自然に読んで押せるようになります。検索エンジンも スマホ画面での使いやすさを評価に反映するため、レスポンシブな配置は ユーザー体験と検索表示の両方に直接影響します。結局ブレークポイントを うまく置くことは、一部の特定端末ではなく世の中のあらゆる画面サイズを 余裕を持って配慮することであり、これがレスポンシブデザインの出発点です。

よくある間違い

• 特定の端末モデルの解像度に合わせて境目を決めてしまうことです。iPhoneが何mm、 Galaxyが何インチのように端末ごとに値を決めると、機種が少し変わるだけでずれて しまいます。端末ではなく、コンテンツが使いづらくなる地点を基準に境目を 決めるべきです。
• 境目を作りすぎることです。細かい幅ごとに配置を変えると、その合間合間の状態を すべて確認するのが難しく、保守が一気に重くなります。ほとんどの場合は2つか 3つの境目だけで十分です。
• 広い画面から先に設計して、狭い画面を後から無理やり押し込むことです。こうすると 狭い画面で要素があふれたり重なったりする問題を後追いで手当てすることになり、 最初から狭い画面を基準にするよりずっと手間がかかります。

実務のヒント

• 狭い画面から設計するモバイルファーストの方式を基本にしましょう。最も制約が 大きい環境から始めて、画面が広くなるにつれて列を増やしサイドバーを足していく 順番のほうが、広い画面から削っていく方式よりずっと安定します。640、768、 1024px あたりがよく使われる無難な境目です。
• 境目で配置が急に飛ばないか、ウィンドウをゆっくり広げたり縮めたりして目で 確認しましょう。階段のようにカクカクと切り替わる変化が気になるなら、次の概念で ある可変サイズと組み合わせて、その合間をなめらかに埋めることができます。
• 境目は、コンテンツが実際に使いづらくなる瞬間に置きましょう。ウィンドウを 縮めていって見出しが2行に折れたり、カードが痩せすぎたりする、まさにその幅が よい候補です。こうして決めれば数字を覚えなくても自然な境目を見つけられます。

関連概念