レスポンシブデザインにおけるブレイクポイントの決め方とは？
レスポンシブデザインとはPC・スマホ・タブレットなどのデバイスの横幅に合わせて自動的にデザインを変えてくれる仕組みで、ユーザーにとって使い勝手が良くなることから近年たくさんのWebサイトで導入されています。
この記事では各デバイスに応じて表示するデザインを切り替えるために用いる、ブレイクポイントの意味から決め方まで詳しくご紹介します。
- 目次
- ■レスポンシブウェブデザインとは？
- ■レスポンシブデザインにおけるブレイクポイントとは？
- ■コンテンツベースでブレイクポイントを決める方法
- ■デバイスベースでブレイクポイントを決める方法
- PCの場合
- タブレットの場合
- スマホの場合
- ■まとめ
■ レスポンシブウェブデザインとは？
レスポンシブウェブデザインとは、デバイスや画面のサイズに応じてWebサイトを見やすく表示できるようにすることです。
HTML（webサイトで配信する情報）は1つですが、CSS（情報の大きさや配置などの表示の指定）をデバイスごとに変えて表示させます。ユーザーが受け取る情報は同じですが、デバイスによって見せ方が変わります。
どのようなデバイスや画面の大きさでも見やすく、使いやすいWebサイトを作るために必要なことと言えるでしょう。
■ レスポンシブデザインにおけるブレイクポイントとは？
Webサイトにレスポンシブデザインを導入する際によく使用されるのがメディアクエリです。
メディアクエリとはWebページのスタイル（見栄え）を記述するCSSの仕様の1つで、表示された画面の環境に応じて適用するスタイルを切り替えてくれる機能です。
このメディアクエリを使用して、デバイスの横幅ごとにCSSスタイルを切り替えるポイントをブレイクポイントと呼びます。
画面の横幅の中で、適用されるCSSスタイルを切り替える境目と捉えるとよいでしょう。
ブレイクポイントには今の所数値で示された明確な基準はなく、Webサイトを制作する人が試行錯誤を重ねながら設定を行っています。
■コンテンツベースでブレイクポイントを決める方法
ブレイクポイントを決める方法の1つとしてGoogleが推奨しているのが、コンテンツの表示内容に応じてブレイクポイントを定める方法です。
デバイスを基準としてブレイクポイントを決めるとデバイスが増加するたびに見直しをしなければならず、Webサイトのメンテナンスに手間や費用がかかるためコンテンツ内容に応じた設定方法を推奨しているのです。
具体的には最初に小さな画面に収まるようコンテンツをデザインし、次にブレイクポイントが必要となるまで画面を拡張すると最小限のブレイクポイントをメジャーブレイクポイントとして設定できます。
その後Webサイトを運用しながら適宜マイナーブレイクポイントを追加設定することで、使い勝手の良い状態を維持することができるでしょう。
コンテンツベースでブレイクポイントを決めるメリットは、デバイスサイズに影響されずコンテンツを常時最適な状態でユーザーに表示できることです。
参考：Google Developers「レスポンシブウェブデザインの基本」
■デバイスベースでブレイクポイントを決める方法
デバイスベースでブレイクポイントを決めるというのは、PC、タブレット、スマホそれぞれに適合するようにブレイクポイントを定めるということです。
基準がある程度はっきりしているため、手間をかけすぎずにレスポンシブデザイン対応ができるのがデバイスベースでブレイクポイントを決めるメリットだと言えるでしょう。
それぞれのデバイスにおけるブレイクポイントの決め方をご紹介します。
■PCの場合
PCのブレイクポイントを決める際に意識しておきたいのは、PCを使用する人は複数の窓を表示して並行作業を行うことが多いため、画面サイズよりも小さい横幅でWebサイトを見ている可能性があることです。
つまり、こちらでPCの画面サイズに合わせてブレイクポイントを設定したとしても、ユーザーが画面を見ている際の横幅と異なる場合は、そのユーザーにとって必ずしも望ましいブレイクポイントにはならないと言えます。
このことを踏まえて日本におけるデスクトップPCの画面解像度のシェアを調べてみると、statcounter Global Statsが調査した「デスクトップ画面解像度統計 日本」の2021年6月における調査結果では1920×1080が24.91％で1位、1366×768が13.11％で2位、1536×864が8.7％で3位でした。
横幅が1280px以上のPCを使用している人の割合が多いことから、PCにおけるブレイクポイントは1280px未満に設定するのが望ましいと言えるでしょう。
参考：statcounter Global Stats「デスクトップ画面解像度統計 日本」
■タブレットの場合
statcounter Global Statsが調査した「タブレット画面解像度統計 日本」の2021年6月における調査結果では768×1024が54.97％で1位、810×1080が6.11％で2位、834×1112が3.5％で3位でした。
初期のipad端末の横幅が768pxであったことと、このサイズの普及率が依然として高いことからこの数値を基準とすることが多いのですが、ipadでもAndroidでも少しずつ横幅の大きい画面の製品が増加してきていることから以前よりはこの数値にこだわる必要はないと言えます。
これらのことからタブレット端末のブレイクポイントは768px～834px未満に設定するのが望ましいでしょう。
参考：statcounter Global Stats「タブレット画面解像度統計 日本」
■スマホの場合
statcounter Global Statsが調査した「モバイル画面解像度統計 日本」の2021年6月における調査結果では375×667が22.2％で1位、414×896が15.7％で2位、375×812が14.05％で3位でした。
スマホでは画面の大型化が進んではいるものの、それほど大きなシェアを占めているわけではないため、360px～414px未満とするのが望ましいでしょう。
参考：statcounter Global Stats「モバイル画面解像度統計 日本」
■まとめ
レスポンシブウェブデザインとは機器や画面のサイズに応じてWebサイトを見やすく表示できるようにすることを指し、画面の横幅の中で適用されるCSSスタイルを切り替える境目のブレイクポイントを設定することでユーザーごとに最適な表示が可能となります。
明確な数値の基準がないため決め方が難しいかもしれませんが、この記事も参考にして自社のWebサイトに合ったブレイクポイントを考えてみてください。
