ブレークポイントの決め方

今回は個人的なブレークポイントの決め方を共有してみようと思います。

1. iPhoneの最大サイズを調べる

まずはiPhoneの最大サイズを調べます。

日本ではiPhoneのシェアが大きいのでiPhoneを基準として、iPhoneで一番大きいサイズまではSPデザインとします。
現時点では iPhone 12 Pro Maxの 428px が一番大きいようです。

次にiPadの最小サイズを調べます。
現時点では iPad mini の 768px が最小。

1 と 2 で調べたサイズの間、iPhoneの最大サイズとiPadの最小サイズ (428px~768px) でPCとSPを切り替える、というのがひとつの基準になるかと思います。

基本的にはiOS端末基準で決めてしまって大丈夫だと思いますが、Androidも考慮する場合、GoogleのPixelや、SonyのXperia、SumsungのGalaxyあたりが基準にしやすいかと思います。
「[デバイス名] viewport」とかで検索するとCSSのサイズが出てきます。

大抵のスマホは411pxぐらいまでで, 450pxは超えていないイメージです。

重要なのは、どの端末を基準にするか と、どの端末でどのデザインを表示したいか だと思います。

タブレットのデザインを用意せず、1つのブレークポイントでPC, SP切り替える場合は 768px に近いほうがバランスが良いです。(PCデザインを縮めすぎずに済むため。)

なのでキリよく 750px ぐらいでいいかなぁと個人的には思っています。

逆にタブレットのデザインを用意する場合は、SPとタブレットのブレークポイントは 428px に近くていいと思います。

またしてもiPadを基準にブレークポイントを決めていきます。
細かく言うと、iPadのどのサイズまでをタブレット表示とするか、を決めます。

と、この他にも考慮すべき点は多くあります。

個人的には、横向きは一旦無視してiPad Pro (12.9 inch)の縦画面サイズ 1024px以下 をタブレット表示でいいのかなという気がしています。
これだとだいたいのタブレットの横向きはPC表示になります。

PC / SP のブレークポイント1つで切り替える場合
- 428px ~ 768px ぐらいの範囲で 768px に近い場所
PC / タブレット / SP のブレークポイント2つで切り替える場合
- 428px ~ 768px ぐらいの範囲で 428px に近い場所と、
- 1024px 付近の場所

こんな感じ。

上記では主に端末のシェアを考慮しながらブレークポイントを決定してきましたが、感覚的な話をすると、

という風にバランスを見て決定しても良いかと思います。

割とiOSデバイス基準で考えてしまっていますが、個人のプロジェクトであればこの程度で良いかと思いますし、
自分は"バランスが悪くなったタイミングで〜"のパターンでブレークポイントを決めちゃうことも多いです。

他にも考慮すべき点は多々ありますので、他のブログ記事などで紹介されている決め方も参考にしながら考えると良いかと思います。

個人のプロジェクトではなく、会社の業務などで決める際は、Google Analytics のデータなどがあれば、そちらを参考に決定するのもいいと思います。