TR Output

フロントエンドエンジニアの備忘録

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

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

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

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

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

2. iPadの最小サイズを調べる

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

3. SPデザインを切り替えるブレークポイントを決定する

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

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

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

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

4. タブレットのデザインを用意するか否か

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

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

4-1. タブレットのデザインを用意する場合

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

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

  • スマホで横向きでページを見る人は少数だと思うので考慮しなくていいと思いますが、タブレットでは横向きでも見られることを考慮する必要があります。
  • iPadの横向きは 1000px を超えてくるが、それぐらいになってくるとノートPCのサイズにもなってきて、タブレットで見られるよりPCで見られることが増える

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

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

結論

こんな感じ。

感覚的な決め方

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

  • PCサイズのまま縮めてみてバランスが悪くなるタイミング
  • SPサイズのまま広げてみてバランスが悪くなるタイミング

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

さいごに

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

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

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