#260
UI設計パターン
#260ぶれーくぽいんと
ブレークポイント (Breakpoint)
別名・表記:Breakpoint分岐点
UIXHERO Definition
「デザインが変わる境界線」。CSSのメディアクエリで「ここから先はスマホ用の見た目」「ここからはPC用」と指定するピクセル値のこと。
概要
CSSの @media (min-width: 768px) のように記述される数値のこと。
かつてはデバイスの解像度（320px, 768px, 1024px）が基準だったが、デバイスの多様化により「コンテンツベース」のブレークポイント設定が推奨されるようになっている。
UXでの活用
- 読みやすさの維持: 一行の文字数が長くなりすぎないように、適切な幅でレイアウトを切り替える。
- 操作性の確保: 指でタップするモバイル向けUIと、マウスで操作するPC向けUIを適切な画面幅で切り替える。
💡 使いどころ
レスポンシブデザインの実装時。どの画面サイズでレイアウトを崩さないようにするかを決める時。
⚠️ 注意点・誤用
「iPhoneのサイズ」「iPadのサイズ」など特定のデバイスサイズに合わせすぎると、新機種が出るたびに修正が必要になる。「コンテンツが崩れるタイミング」でブレークポイントを設定するのが理想。
具体例
- 768px未満をスマホ、768px以上をタブレット、1024px以上をPCとする。
- Tailwind CSSのデフォルト: sm(640px), md(768px), lg(1024px), xl(1280px)
出典・参考文献:
- W3C: Media Queries Level 4
- Tailwind CSS: Breakpoints
- MDN Web Docs – Responsive Design / Media Queries