こんにちは。アイレットデザイン事業部のディレクターの川又です。アイレットデザイン事業部ではINSIDE UI/UXと題して、所属メンバーがデザイン・SEO・アクセシビリティ・UI/UXなどそれぞれスペシャリティのある領域に対する知見を幅広く発信しています。
今回は、レスポンシブデザインにおけるブレイクポイントを決める際のポイントについてまとめてみました。

レスポンシブデザインで考慮するポイント

レスポンシブデザインとは、デバイスや画面のサイズに応じてWebサイトの表示を切り替える手法です。
WEBサイトを制作する上で、今では当たり前となっているレスポンシブデザインですが、デバイスや画面サイズが多様化し、どのデバイスや画面幅に合わせてデザインすればよいか、どのようにエンジニアに伝えればよいかなど、考えることが多く、いつも頭を悩ませています。
レスポンシブデザインでWEBサイトを制作する際には、まず、以下内容を考慮して作成するようにしています。

  • モバイルファースト、PCファーストのどちらで制作をするか？
  • ブレイクポイントをどこに設定するか？
  • デザインカンプをどの幅で作成するか？
  • デザインカンプ以外のサイズのときのレイアウト、挙動をどうするか？

など、主に画面幅に応じた表示をどうするかがポイントになってくるかと思います。

レスポンシブデザインの基本については、割愛しますので、こちらの記事をご覧ください。
レスポンシブウェブデザインとリキッドデザインの違い・特徴

ブレイクポイントを設定するときのポイント

ブレイクポイントについて

画面幅に応じてWEBサイトのデザインを切り替える境目がブレイクポイントです。
ブレイクポイントについては、様々な意見がありターゲットや案件などにより異なりますが、ブレイクポイントに関する記事や画面解像度のシェアなどを参考にして考慮した結果、基本は、PC、タブレット、スマホの3段階で設定して、案件や条件などにより、設定を変えるのがよいと思っています。

今までブレイクポイントは、375px、1024pxで、設定することが多かったのですが、あらためて、ブレイクポイントについて調べた際に、参考記事の内容に納得したのもあり、以下の数値を取り入れるようにしています。

ブレイクポイント

スマートフォン 設定なし（実質519px以下）
タブレット 520px以上
PC 960px以上

※スマホ基準（モバイルファースト）で作成した場合

各デバイスのサイズ範囲

スマートフォン 320〜519px
タブレット 520〜959px
PC 960px以上

ブレイクポイントを上記に設定した主なポイントとしては、

  • Android Tablet 8インチのランドスケープ（960px）は、PC表示でよい
  • 1,024px幅は、画面解像度のシェア率からPC表示でよさそう
  • 現時点でタブレットの最小の横幅は600pxのようなので、スマホは375〜599pxの範囲内で適宜決めるのがよさそう
  • 一部のiPadのSplit View（iPad10.2（535px）以上）は、PC表示でよさそう。
  • モバイルファーストの場合は、スマホの設定は不要でよさそう（タブレット、PCはメディアクエリを指定）

（メディアクエリやコーディングに関する話はここでは省略します）

以下の記事に掲載されているデバイスと画面幅をまとめた図がとても分かりやすいです。
（ブレイクポイントの根拠は、ここに書かれている内容がすべてなのですが。。。）
【図解で納得】レスポンシブデザインのブレイクポイントの細かすぎる新解釈 [2022年更新版] – webのあれこれ

ついでながら、cloudpackのLPでは上記ブレイクポイントの設定で制作してみました。
EC サイト構築サービス on Google Cloud
スピーディかつ柔軟なアジャイル開発でビジネス発展を支援

まとめ

今後もデバイスや画面サイズが多様化していく中で、ブレイクポイントをどこに設定するかは、様々な意見があったり、案件や対象ユーザーにもよって異なったり、明確な指針がなかったりするので、こうするべき、これがベストプラクティスというのを決めるのは難しいところですが、基準となるプレイクポイントを決めておき、案件や条件などにより、検討して変更していくのがよいかと思います。
ブレイクポイントについては、今後、メンバーとディスカッションしながらアイレット デザイン事業部としてのベストプラクティスを検討していこうと思っています。

参考記事

ブレイクポイントについて調べる上で以下の記事以外にもさまざまな記事を参考にさせていただきました。
【図解で納得】レスポンシブデザインのブレイクポイントの細かすぎる新解釈 [2022年更新版] – webのあれこれ
レスポンシブデザインにおけるブレイクポイントの決め方とは？ | Fleeksブログ
【2022年】レスポンシブデザインのブレイクポイントまとめ｜どのデバイスでも綺麗に見える秘訣とは ｜caroa design magazine
【2022年】レスポンシブデザインのブレイクポイントまとめ！ – PENGIN BLOG

一緒に働いてくれる仲間を募集中！

アイレットでは、一緒に働いてくれるエンジニアやディレクター、デザイナーなど様々な職種で一緒に働く仲間を募集しています。詳しくは、採用情報をご覧ください。
アイレット採用情報　募集職種