SYMMETRIC Web開発ブログ
レスポンシブWebデザイン、CSSフレームワークなど、Webフロントエンド開発に関するBLOGです。
※SYMMETRIC公式BLOGと統合し、ブログ名称を変更しました

レスポンシブサイト用ブレイクポイント考察!時代に適するサイズとは?

こんにちは、開発チームの青木です。
普段はレスポンシブと同様のマルチデバイス対応を実現する「スマホのサイト制作。PCは自動変換 | alter.js」に携わっています。
今回は、レスポンシブサイト用のブレイクポイントについてお話していきます。

2019年発売のスマホ端末の状況も鑑みて、今年の適切なブレイクポイントは480px/959pxだと認識しています。
本記事ではこの数字にした理由について解説していきます。
なお、この記事ではスマホ・タブレット端末の長い辺を縦、短い辺を横としています。

ブレイクポイントの基礎知識

年々スマホ端末の高解像度化が進んでおりますが、ブレイクポイントもそれに比例して上昇していくのか、というとそうではありません。
iPhone 4のRetinaディスプレイで有名ですが、最近のスマートフォンは仮想的な1pxを複数の実ピクセルで表現する手法によって美しい画面を実現しています。
(iPhone 4は640 x 960の解像度を持ちますが、ブラウザ上ではサイズは320 x 480であると認識されて画面が構成されます。)
つまり、解像度が高くなるにつれ、その分1pxに対して高密度化していくため、結果的には想定するべき幅はあまりかわらないということです。
このブラウザ上で構成される画面の幅・高さはCSSピクセルと呼ばれ、その数字を元にブレイクポイントを設定する必要があります。

参考:レスポンシブサイト用ブレイクポイント考察!時代に適するサイズとは?

ブレイクポイント設定のためのiOS端末のサイズ

iOS端末については極端に大きいものはないのですが、単純に日本国内でシェアが高いのでデザインで失敗しないために触れておきます。
最新端末で且つ大きい種類のiPhone XS maxの解像度は1242 x 2688ですが、CSSピクセルは414 x 896となります。
iPhone SEはCSSピクセルが320 x 568となりますが、この端末はいまだシェアが4.27%と高く、これが現在スマートフォンでまともに表示されるべき最小の画面となります。
ウェブサイトのデザインをする際にはこのiPhone SEの横幅を最小の基準に要素を作ったり、文言の長さを調整することになると思います。
iPadのCSSピクセルは768 x 1024で、この横幅768pxはタブレット用のブレイクポイントでよく基準にされています。

iPhoneのシェアについては以下を参考にしています。
DeviceAtlas

ブレイクポイント設定のためのandroid端末

多くの種類が販売されておりますので、極端なサイズのものがあります。
今年2019年発売となったGalaxy S10+は480 x 1013と横・縦ともにかなりの大きさで、特に横置きした際は想定されたブレイクポイントを超える可能性が高いです。
また、同じく今年発売の4KスマホのXperia 1が411 x 960でかなりの縦長で、こちらも一般的には超えているように思います。
横幅についてはGalaxy S10+と同値の480pxとなるpixel3 XL(pixel3a XLではありません)があります。
多くのandroid端末は横幅360px、縦幅は640~780pxとなるものですので、このあたりの数字は包括できるようにしたいです。

実際のブレイクポイント設定について

最初に記載しましたが、2019年のブレイクポイントは以下で設定しています。

480px/959px
(~480px:スマホ縦向け、481px~959px:タブレット縦向け、960px~:PC向け)

スマホの縦置きで横のCSSピクセルが高くなるのはGalaxy S10+、及びpixel3 XLの480pxですので、こちらに合わせています。
スマホの横置きで本当はPC画面を表示したくはないのですが、960pxという数字はPC画面で多く使用されている基本のコンテンツ幅ですので、上記で言及したGalaxy S10+とXperia 1の横置きについてはPCで表示されます。
このふたつの端末が爆発的にシェアをあげてくる、もしくはPCからのアクセスがかなり少ない等の理由がなければこのように妥協してもいいと考えています。
多くのスマホ端末では横置きの場合にタブレット表示になるようになります。

実際にコーディングする際に使えるように、このブレイクポイントでのCSSのメディアクエリの書き方を以下に記載しておきます。
モバイルファーストといってスマートフォン用にサイトを構築するのを重要視される流れがありますので、スマホ用CSSがベースになるような順序で書いています。

/* スマホ用CSSをベースに記述する */

/* タブレット用CSSをメディアクエリ内に記述する */
@media screen and (min-width: 481px) {

}
/* PC用CSSをメディアクエリ内に記述する */
@media screen and (min-width: 960px) {

}

参考:レスポンシブ対応のフォントサイズで使用できる単位

まとめ サイトをデザインするうえでブレイクポイントについて考えるべきこと

ブレイクポイントを多く設定するとその分要求されるデザインが多くなり、そのコスト・サイト構築難度が高くなります。
レスポンシブデザインのサイトを制作する際には多くてもデザインの数は3つに抑えたいものですが、最初の設計の段階でブレイクポイント設定で間違えると端末個別の対応がかなりの数増えてしまい、サイト運用も難化していくため、気を付けたいです。

シンメトリックでは、ブレイクポイントの設定不要でレスポンシブと同様のマルチデバイス対応を実現する「スマホのサイト制作。PCは自動変換 | alter.js」を提供しています。
スマホ中心のサイト制作、リニューアルをお考えでしたら、ぜひ使ってみてください。

また、alter.jsを使用したLP制作サービス「スマホからLP制作」も展開しています。
こちらもご興味ありましたら是非お問い合わせください。

レスポンシブ対応関連記事

レスポンシブ対応のためのJavaScriptによる2つの切替手法
今こそ!CSS グリッドレイアウトでレスポンシブ対応ページを作る!
レスポンシブ対応するためのCSSの書き方
レスポンシブデザイン対応のテンプレートサイト10選

Page Top