Webサイト制作

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

# Webサイト

2022.10.24

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

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

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

レスポンシブデザインとは？

レスポンシブデザインとは、パソコンやスマートフォンなどユーザーが使用するデバイスに合わせて、Webサイトの画面サイズを最適化したデザインを指します。

レスポンシブデザインが主流となる前は、パソコンとスマートフォンで別々のサイトを用意していました。しかしこれではWebサイトを更新する際にコストが2倍となるため、定期的な運用が難しいという問題がありました。

そこでレスポンシブデザインが2010年に発表され2015年にはGoogleが「モバイル・ファースト・インデックス（MFI）をページの評価対象にする」と発表し、レスポンシブデザインを推奨したことで、関心が高まりました。

ブレイクポイントとは

ブレイクポイントとは、各デバイスの画面サイズに応じてレスポンシブデザインの表示を切り替えるポイントを指します。

特にiPadをはじめとするタブレットは、年々画面が大きくなっています。そこでブレイクポイントをアップデートする必要があります。

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

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

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

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

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

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

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

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

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

画面サイズ（表示解像度）	シェア
1,920×1,080	26.17％
1,536×864	11.47％
1,366×768	8.34％
1,280×720	6.53％
1,440×900	4.95％
2560×1440	4.55％

（参考：Desktop Screen Resolution Stats Japan）

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

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

▼iMacの画面サイズ一覧

機種	画面サイズ（モニタのピクセル数）
iMac 20インチ	1,680×1,050
iMac 21.5インチ	1,920×1,200
iMac 24インチ	4,480×2,520
iMac 27インチ	5,120 x 2,880
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インチ	2,560×1,664
MacBook Retina, 12インチ	2,304x1,440
MacBook Air 11インチ	1,366x768
MacBook Air 13インチ	2,560x1,600
MacBook Air Retina, 13インチ	2,560x1,600
MacBook Pro 13インチ	2,560x1,600
MacBook Pro 14インチ	3,024x1,964
MacBook Pro 15/17インチ	2,880×1,800
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がおすすめ。

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

画面サイズ（表示解像度）	シェア
768x1,024	30.22％
810x1,080	13.57％
820x1,180	7.11％
834x1,194	6.36％
744x1,133	5.47％
800x1,280	4.84％

（参考：Tablet Screen Resolution Stats Japan）

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

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

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

▼iPadの画面サイズ一覧

機種	画面サイズ（表示解像度）
iPad mini，iPad mini2～5	768x1,024
iPad mini6	768x1,024
iPad，iPad 2，iPad Air，iPad Air2	768x1,024
iPad（第7～9世代）	820x1,080
iPad Pro 10.5，iPad Air（第3世代）	834x1,112
iPad Air（第4世代）	820x1,180
iPad Pro（11インチ）	834x1,194
iPad Pro（12.9インチ）	1024x1,366

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

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

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

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

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

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

画面サイズ（表示画面サイズ）	シェア
390×844	19.11％
375×667	10.41％
375×812	8.75％
414×896	8.35％
360×640	5.95％
428×926	4.62％

（参考：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;
  }
}}

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

レスポンシブデザインを実装する前の注意点

レスポンシブデザインを実装する前に、注意すべき点をご紹介します。

各端末やブラウザで見え方を確認する

CSSを作成し、モバイル実機できちんと表示されれば原則問題はありませんが、公開する前には念の為に他の端末でどのように表示されるか確認することを推奨します。テストで使用した端末よりも少しサイズダウンしたモバイル端末で表示した際、文字や画面がずれていたり、アプリやブラウザによってうまく表示されない場合があるためです。