MD-Blog_Web System

暑い毎日にいつまでも慣れない、北国出身WEBプロダクション事業部のMATです。
7月は夏風邪に胃腸炎と体調崩しがちでしたが、やっと体力戻ってきました。
皆さまも熱中症や食中毒に気をつけてお過ごしください。

さて、今回のテーマですが、
昨年から新規やリニューアル案件をいくつも担当していて、毎回悩んでいる
「ブレイクポイント」 についてです！

最近はスマートフォンも機種によって縦横が多種多様で、パソコンも2K/4Kディスプレイにノートパソコンも横幅の違うものが多いですよね...

モンスターダイブが作ったサイトは、どのデバイスでも綺麗に見てもらいたい！！
なので、今回はレスポンシブデザインのブレイクポイント 【2024最新版】 をまとめていきたいと思います！

レスポンシブデザインについて

まずは基本の「レスポンシブデザイン」を説明します。

先に記載した通り、WEBサイトをユーザーはパソコンやスマートフォン、タブレットなど様々なデバイスで訪れます。
デバイス毎に画面サイズが違うので、マークアップ時に特に何も行わないと、画像や文字の大きさ、画面幅などが各デバイスに適応されずに、小さかったり大きかったりとバラバラに表示されてしまいます。
どのデバイスであっても、表示幅を最適となるようにデザインしたものを「レスポンシブデザイン」と言います。

レスポンシブデザインでなくても、スマートフォン、タブレット、パソコンの3種類の画面幅用にHTMLファイルを準備して、デバイス判定で最適なサイズで表示させる方法もありますが、更新の都度3ファイルの修正が必要となるので運用が大変です。
レスポンシブデザイにすれば1つのファイルを更新するだけ完了します。
コストや定期的な運用のしやすさから、近年のWEBサイト作成は、レスポンシブデザインが主流となっています。

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

デザインを作っても、切り替えポイントが無ければ適切な画面サイズでデバイスに表示がされません。
設定した画面サイズでデザインが切り替わるように指定をするポイントのことを「ブレイクポイント」といいます。

WEBサイトのブレイクポイントは、主に「パソコン」「タブレット」「スマートフォン」　の画面幅に合わせて設定されます。

どのデバイスも毎年新しい製品が登場され、画面サイズの種類も増えています。
最適なレスポンシブデザインとブレイクポイントは日々変わるので、サイト制作毎に見直す必要があります。

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

レスポンシブデザインに最適なブレイクポイントを決めるには、各デバイスの画面サイズを知る必要があります。

デバイスのサイズは、既存サイトであればGoogleのGA4で調べることも出来ますし、新規サイトは国内のシェア率を調べられる、アクセス解析サービス「StatCounter」などを利用して適切なサイズを決めていきます。

「StatCounter」 の2024年6月時点のパソコンの画面サイズの国内シェア年間平均数を確認してみましょう。

No.	画面サイズ（px）	シェア率
1	1920x1080	27.30%
2	1536x864	11.31%
3	1366x768	8.45%
4	1280x720	5.60%
5	1440x900	4.37%
6	2560x1440	4.23%

（参考：Desktop Screen Resolution Stats Japan）

【PC版は】 960px〜1280px がおすすめ

表から、パソコンは1,280px〜1,920pxの画面サイズがシェア率が高いことが分かります。
Windows PCなどの4Kモニタなどもありますので、1,920pxよりもウィンドウを縮小した表示を想定し、960～1,280pxのブレークポイントの設定がおすすめとなります。

次に、タブレットのサイズの国内シェア年間平均数を確認してみましょう。

No.	画面サイズ（px）	シェア率
1	768x1024	31.45%
2	810x1080	12.25%
3	820x1180	7.22%
4	834x1194	6.68%
5	744x1133	5.87%
6	800x1280	4.38%

（参考：Tablet Screen Resolution Stats Japan）

【タブレット版は】 768px〜1280px がおすすめ

タブレットは横に回転したときのサイズで、最大1,280pxが上位にあることから、縦使いと横使いのサイズ幅で、シェア率の高い768px〜1,280pxでの設定がよいと判断できます。
画面分割ができるタブレットもありますので、２つ項目表示の対応も検討する必要があります。

画面分割を検討するときは、どのサイズのタブレットでビューを維持したいかを決め、そのサイズのタブレットを横向けで持ったとき、画面が半分となったサイズを確認し、ブレイクポイントとして決定してください。
例として、3番目のシェア率「820x1180」サイズの横設定分割を利用場合、590pxで設定する必要があります。

最後にスマートフォンのサイズの国内シェア年間平均数を確認してみましょう。

No.	画面サイズ（px）	シェア率
1	390x844	18.81%
2	375x667	10.9%
3	375x812	9.32%
4	414x896	8.81%
5	393x852	4.53%
6	428x926	4.48%

（参考：Mobile Screen Resolution Stats Japan）

【スマホ版は】 390～500px がおすすめ

近年スマートフォンの画面サイズは大型の傾向となっています。
スマートフォン画面では幅375px〜414pxのシェアが高いですが、タブレットの横利用時の分割サイズで影響が出ない大きさとして、ブレイクポイント設定は390～500px程度が綺麗に表示されそうです。

ここまで、「パソコン」「タブレット」「スマートフォン」　のブレイクポイントについてまとめてきましたが、全ての範囲に合わせて作成する必要はありません。
デバイスの画面サイズが多岐にわたっているため、多くのユーザーにサイトを気持ちよく利用していただくには、ターゲットを絞り、シェア率の高い画面サイズでより綺麗に見えるようにレスポンシブデザインを設計することが必要です。
綺麗なサイトを保つためにも、定期的にデバイスのシェア率をGA4などの解析ツールでチェックして、適正なサイズのブレイクポイントへアップデートをしていきましょう！

「WEBサイトのレスポンシブデザインのブレイクポイントまとめ 【2024最新版】 」のご紹介は以上になります。

常に最新情報へアップデートしている、MONSTER DIVEのデザイナーへサイト設計を依頼してみませんか?
最適なブレイクポイントだけでなく、お客様にマッチした最高のデザインを仕上げます！
WEBサイト運営でお困りごとございましたら、お気軽にご質問やご相談など、問い合わせください。