ここでの"レスポンシブ実装"の前提
- レスポンシブレイアウトは画面の横幅で制御する
- media orientation など、画面の物理的サイズに寄り添えない手法はベースレイアウトには利用しない
- CSSパターンが4つ以上になったり、プロパティの影響範囲が瞬時にイメージできない構造は運用時に破綻するため避ける
ユーザー環境の実態
SP
- 1位 ： 375px
- 2位 ： 360px
- 3位 ： 320px
- 4位 ： 414px
PC
- 1位 ： 1366px
- 2位 ： 1920px
- 3位 ： 1280px
※ ： 以上、あるサービスの一例
考慮すべき横幅値
- 320px ： SP縦表示の事実上の最小横幅
- 375px ： SP縦表示の現在主流の横幅
- 414px ： SP縦表示のうち大きめの端末の主流の横幅
- 768px ： Tablet縦表示の現在主流の横幅
- 808px ： SP横表示のうち大きめの端末の主流の横幅
- 896px ： SP横表示のうち大きめの端末の現状最大の横幅
- 980px ： PCデザイン基調の現状最小と言っていい横幅
- 1024px ： Tablet横表示の現在主流の横幅
- 1300px 以上 ： PCデザイン基調の次期主流になるであろう横幅
| 横幅px値 | 端末種別 | 代表端末 | オリエンテーション | viewport-fit | |
|---|---|---|---|---|---|
| 320px | SP | iPhone 3〜5 | Portrait | ||
| 375px | SP | iPhone 6〜8 iPhone X iPhone 11 Pro |
Portrait | ||
| 414px | SP | iPhone 6〜8 Plus iPhone XR iPhone XS Max iPhone 11 iPhone 11 Pro Max |
Portrait | ||
| 414px | − | − | − | 画像リキッドレイアウト上限 ※ | |
| 724px | SP | iPhone X iPhone 11 Pro |
Landscape | contain | |
| 767px | − | − | − | ブレイクポイント下限 ※※※ | |
| 768px | Tablet | iPad | Portrait | ||
| 808px | SP | iPhone XR iPhone XS Max iPhone 11 iPhone 11 Pro Max |
Landscape | contain | |
| 812px | SP | iPhone X iPhone 11 Pro |
Landscape | cover | |
| 834px | Tablet | iPad Pro 10.5 iPad Air 3rd |
Portrait | ||
| 896px | SP | iPhone XR iPhone XS Max iPhone 11 Pro Max |
Landscape | cover | |
| 979px | − | − | − | ブレイクポイント上限 ※※ | |
| 980〜1000px | PC | PC下限 | − | ||
| 1024px | Tablet | iPad | Landscape | ||
| 1112px | Tablet | iPad Pro 10.5 iPad Air 3rd |
Landscape | ||
| 1300px 以上 | PC | PC リキッドレイアウト |
− |
- ※ ： 延伸するリキッドレイアウト画像が414pxを超過すると可読性は悪化し始める
- ※※ ： ブレイクポイント値の選択肢の一つ。PCデザインの最小幅未満にSPデザインを適用する
- ※※※ ： ブレイクポイント値の選択肢の一つ。タブレットのポートレートモード以上のすべての横幅にPCデザインを適用する
2018〜2019年現在の課題
- iPhoneX〜11シリーズのように、Viewportのアスペクト比が大きい細長い画面のスマホが存在すること
- スマートフォンの横幅の最大値がランドスケープモードにおいて 896px と、非常に大きくなっていること
細長いViewportのLandscape表示の現状
- ランドスケープ表示は、あまり利用されてないにもかかわらず実装上の対応は必要
- 単純なリキッドレイアウトでは基本的になんでも横幅いっぱい延伸する
- 単純なリキッドレイアウトでは画像表現は横幅いっぱいに縦横ともに拡大する
- 何を見ているか、何が表示されているかが判別できない
- UXが悪化する
対策案
- センタリングレイアウトオブジェクトについては、リキッドレイアウトに上限を設けて、画像などを拡大しすぎない
- SP解像度の増大を考慮し、ブレイクポイントはなるべく大きめに取る
- SP解像度の増大による解像度の多様化を考慮し、現在はブレイクポイントの設定は1つに制限し実装の複雑化を抑止する
著者の個人的なガイドライン
- センタリングするリキッドレイアウトは Max 400px
- ブレイクポイントを1つ設定する場合
（リキッドレイアウト／PCレイアウト）- PCデザインが1000px基調以上であれば 990px
- PCデザインが1000px基調以下であれば、 PC横幅 - 10px 程度のキリの良い値
- ブレイクポイントの2つ以上の設定はなるべく避ける