移行中の知識
ブレークポイント
Breakpoint
定義
ブレークポイント（breakpoint）とは、available spaceの変化によってcontentやlayoutの関係を組み替えた方がよくなる境界です。responsive designではMedia Query等の条件として表現されますが、本質は「特定deviceの代表幅」ではなく、navigation、column、line length、control配置などがそのままでは成立しにくくなる地点を見つけることです。page全体ではviewport幅、component内部ではcontainer幅など、何のavailable spaceを基準にするかも設計判断に含まれます。
実例
実際の場面で考える
同じ概念を異なる制作文脈へ持ち込み、何を観察して判断するかを見る。
local business website header
navigationが窮屈になる地点で構成を変える
見るポイント
768pxだからtablet用に切り替えるのではなく、logo、navigation、CTAが同じrowで無理なく成立しなくなる幅を探し、そこでlayoutやnavigation表現を変更する。
desktop article layout
PCの中間幅でsidebarを落とす
見るポイント
wide monitorでは本文とsidebarを並べられても、windowを狭めると本文行長やsidebar幅が両立しなくなる。mobileに到達する前でも必要ならbreakpointを置く。
注意
誤解しやすい点
- popular deviceの幅一覧をそのままbreakpoint一覧として採用する。
- mobile・tablet・desktopの3段階が必ず必要だと固定する。
- breakpointを増やすほどresponsive designが精密になると考え、content側の自然な伸縮を使わない。
関連
関連する概念
出典