Webサイト制作

【2023年】デバイス別レスポンシブデザインのブレイクポイントまとめ

# Webサイト

2022.10.24

この記事ではパソコン、タブレット、スマートフォンに最適なレスポンシブデザインサイズを紹介します。

関連記事：レスポンシブ対応とは？ 5つの対応方法や注意点をWeb制作会社が解説

各デバイスの最適なブレイクポイントを知り、自社のWebサイト制作にお役立てください。

ブレイクポイントとは

ブレイクポイントとは、レスポンシブデザインの表示を切り替えるポイントを指します。

デザインが可変するポイントをデバイスごとに設定すると、各デバイスに適したWebサイト表示ができます。

Webサイトを表示させるデバイスは豊富で、おもに3種類の画面幅に合わせて設定します。

パソコン
タブレット
スマートフォン

一般的には、これらのデバイスの中で主要な機種の画面幅に合わせてブレイクポイントを設定することが一般的です。

レスポンシブデザインの最適なデバイス別サイズ一覧

ここではレスポンシブデザインの最適なデバイス別サイズ一覧を紹介します。

パソコン
タブレット
スマートフォン

3つのデバイスごとに解説しますので、ブレイクポイント設定の参考にしてください。

パソコンのブレイクポイント

パソコンのブレイクポイントは、960～1,280px程度にしておきましょう。2022年12月段階に国内で利用されているパソコンの画面サイズは、次のとおりです。

画面サイズ（表示解像度）	シェア
1,920×1,080	28.2％
1,536×864	11.45％
1,366×768	10.9％
1,280×720	5.06％
2560×1440	3.83％
1,440×900	3.48％

（参考：Desktop Screen Resolution Stats Japan）

この表によると、パソコンの画面幅は1,280px〜1,920pxで高いシェアを占めています。そこで1,920pxのモニターの半分にサイトを表示したときを想定して、960～1,280pxをブレークポイントにするのがおすすめ、となります。

ちなみにこのサイズでMacも（一般的な表示倍率であれば）対応可能です。参考までに、Macの画面サイズを下記表にまとめます。

▼iMacの画面サイズ一覧

機種	画面サイズ（モニタのピクセル数）
iMac 20インチ	1,680×1,050
iMac 24インチ	1,920×1,200
iMac 21.5インチ	1,920×1,080
iMac 27インチ	2,560×1,440
iMac Pro/iMac Retina 5K	5,120 x 2,880
iMac Retina 4K	4,096 x 2,304
iMac （24-inch, M1, 2021）	4,480 x 2,520

▼MacBookの画面サイズ一覧

機種	画面サイズ（モニタのピクセル数）
MacBook 13インチ	1,280×800
MacBook Retina, 12インチ	2,304x1,440
MacBook Air 11インチ	1,366x768
MacBook Air 13インチ	1,440x900
MacBook Air Retina, 13インチ	2,560x1,600
MacBook Pro 13インチ	1,280×800
MacBook Pro 14インチ	3,024x1,964
MacBook Pro 15/17インチ	1,440×900
MacBook Pro 16インチ	3,072x1,920
MacBook Pro Retina, 13インチ	2,560x1,600
MacBook Pro Retina, 15インチ	2,880x1,800

（参考：MacBook のモデルを識別する - Apple サポート（日本））

（参考：MacBook Air のモデルを識別する - Apple サポート（日本））

（参考：MacBook Pro のモデルを識別する - Apple サポート（日本））

タブレットのブレイクポイント

タブレットのブレイクポイントは、768px〜1,280pxがおすすめ。

次の表の通り、タブレットでは768px〜1,280pxで高いシェアを占めています。

画面サイズ（表示解像度）	シェア
768x1,024	38.05％
810x1,080	8.6％
800x1,280	5.41％
834x1,194	4.86％
1,280x800	4.61％
744x1,133	4.58％

（参考：Tablet Screen Resolution Stats Japan）

またタブレットの画面分割表示（iPadのSplit Viewなど）への対応についても検討する必要があります。

タブレットを分割したときでもタブレットビューを維持したい場合は、どのサイズから画面分割表示のタブレットビュー対応を行うのか検討しましょう。

たとえば「iPad air4（10.9インチ）以上の画面サイズのタブレットを横向けで持ったときに、画面を半分にしたとき以上のサイズでタブレットビューを維持しよう」と思うと、590pxがブレイクポイントとなります。

▼iPadの画面サイズ一覧

機種	画面サイズ（表示解像度）
iPad mini，iPad mini2～5	768x1,024
iPad mini6	744x1133
iPad，iPad 2，iPad Air，iPad Air2	768x1,024
iPad（第7～9世代）	810x1080
iPad Pro 10.5，iPad Air（第3世代）	834x1112
iPad Air（第4世代）	820x1180
iPad Pro（11インチ）	834x1194
iPad Pro（12.9インチ）	1024x1366

（参考：iPad のモデルを識別する - Apple サポート（日本））

（参考：iPad画面サイズ、ピクセル数早見表 - Qiita）

上記よりタブレットのブレイクポイントは768px〜1,280pxに、画面分割に対応する場合は対応させたい幅に設定するとよいでしょう。

スマートフォンのブレイクポイント

スマートフォンのブレイクポイントは、基本的には「タブレットビューのブレイクポイント以下」となります。

国内で利用されているスマートフォンの画面サイズは、次の表のとおりです。

画面サイズ（表示画面サイズ）	シェア
390×844	17.48％
375×667	14.76％
375×812	11.98％
414×896	11.04％
428×926	4.07％
360×640	3.6％

（参考：Mobile Screen Resolution Stats Japan）

この表の通り、タブレットの画面分割に対応させたとしても、ほとんどのスマホ表示には影響しないことがわかります（「タブレットのブレイクポイント」にて例として挙げたiPadAir4の画面幅の半分である590pxをブレイクポイントとしても、ほとんどのスマホでスマホ表示を維持できる）。

なおスマホのブレイクポイントを設定する際には上記の表を踏まえて、390～500px程度とするのがおすすめです。

ブレイクポイントの設定方法

検討したブレイクポイントをHTMLやCSSを用いて設定する方法について紹介します。

今回はメディアクエリを設定する方法で解説します。

メディアクエリとは

メディアクエリとは、Webサイトを表示するデバイスに合わせてデザインを変化させるために必要なタグのことです。

「この〇〇px以上はパソコンビューで」「〇〇px以下の場合で、××px以上はタブレットビューで」「××px以下の場合はスマホビュー」といった設定を行う際に利用します

メディアクエリの設定方法

メディアクエリを設定するには、HTMLやCSSを記載します。

まずはデザインに適用させるため、以下のようなコードをHTMLに記述しましょうす。

今回は例として以下に設定したブレイクポイントをメディアクエリにて設定する方法を紹介します。

PCビュー：1,280px～
タブレットビュー：768px～
スマホビュー：～767px

【HTML】

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>レスポンシブデザインのブレイクポイント例</title>
</head>
<body>
<p >画面幅を変えることで、文字の色が変わるコードです。
</p>
</body>
</html>

次にHTMLを装飾するため、以下のようなコードをCSSに記述します。

そうすることで「1280px以下の表示サイズのとき文字色が黄色、768px以下の表示サイズのとき文字色が青色になる」装飾ができます。

【CSS】

body {
background-color: #ffffff;
color: #000000;
/*1280px以下で文字色が黄色に*/
@media screen and （max-width: 1280px） {
.tablet {
/* 1280px以下で適用させたいcssを記述する部分 */
  color: #F9D342;}
}
/*768px以下で文字色が青色に*/
@media screen and （max-width: 768px） {
  .sp {
  /*768 px未満で表示させたいcssを記述する部分 */
    color: #213C5F;
  }
}}

このようにメディアクエリを活用することで、ブレイクポイントを設定できます。