【2023年】デバイス別レスポンシブデザインのブレイクポイントまとめ|Webサイト制作・CMS開発|LeadGrid

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

目次

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

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

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

ブレイクポイントとは

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

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

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

  1. パソコン

  2. タブレット

  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;
  }
}
}

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

サイトのレスポンシブデザイン対応はLeadGridがおすすめ

本記事では、各デバイスに最適なブレイクポイント、メディアクエリの設定方法を解説しました。

しかし「HTMLやCSSなんてよくわからない、もっと簡単に設定をしたい」というWeb担当者がほとんどでしょう。

そのような場合は、CMSLeadGrid」でWebサイトを制作するのがおすすめです。

LeadGridは、レスポンシブデザインに対応済のリード獲得に特化したCMSです。すでにレスポンシブデザインに対応しているため、Webの知識がなくても、安心してWebサイト運用をすることができます。

すでに多くの企業が導入済みで、コーポレートサイトやサービスサイト、採用サイトなど、さまざまなホームページで使われています。

▼より詳しく知りたい方は、こちらの資料で制作事例を紹介しています。


LeadGridサイト制作事例集|Webサイト制作・CMS開発|LeadGrid

goleadgrid.com

og_img

さらにLeadGridはレスポンシブデザインに対応しているだけではなく、誰でも直感的に操作できる「見たまま編集」機能があるので、サイトのページ編集をしたいとき業者や専門の部署に都度依頼する必要がありません。

Webについて特別な知識が必要なく、簡単操作でWebサイト運用をしたいなら、ぜひLeadGridをご検討ください。下記資料では、より詳細にLeadGridの解説をしています。


サービス紹介資料|Webサイト制作・CMS開発|LeadGrid

goleadgrid.com

og_img

さらに現在、LeadGridでは14日間の無料デモを提供中です。「まずは使ってから考えたい……!」という方は、この機会にぜひ一度LeadGridをお試しください!


無料デモ相談

LeadGridはWebサイト制作からコンテンツSEO、問い合わせ管理、LP制作などWebマーケティングに必要な機能を開発したCMSです。上場会社、スタートアップ企業を中心にWebマーケティングの強化やサービス立上げ時にご利用頂いています。サービスサイトやオウンドメディアなど見込顧客獲得に貢献できるWebサイト制作を得意としています。

goleadgrid.com

og_img


見たまま編集ができる、デザイン×リード獲得に強いCMS『LeadGrid』

サービス資料はこちら

リード獲得に強いCMS・Webサイト運用ツール LeadGrid

LeadGridを使えば、Webマーケティングに強いサービスサイト、オウンドメディア、コーポレートサイト制作をスピーディに制作可能です。

ページを見たまま編集できる「ページ編集機能」や「フォーム管理機能」など、Webの知識がなくても担当者ベースで施策が実行できます。

くわえてご希望の方には、WebマーケティングやSEOコンテンツの設計、運用、分析までトータルでご支援しています。

Webサービスやオウンドメディアの立ち上げ、コーポレートサイトリニューアルなど、御社のプロジェクトをお気軽にご相談下さい。

得意領域

  • Webマーケティングに強いWebサイト制作
  • サービスサイト、オウンドメディアサイトの立ち上げ
  • Webマーケティングの戦略設計、運用支援

記事を書いた人

LeadGrid BLOG編集部

LeadGrid BLOG編集部

LeadGrid BLOG(リードグリッド ブログ)は、リード獲得に役立つ情報を発信するWebマーケティングメディアです。

お役立ち資料

サイト制作、マーケティング戦略設計、コンテンツ制作、Webコンサルティング
関連のお役立ち資料をご紹介します。

Web制作・CMS開発・Webマーケティングに関してお気軽にご相談ください。

多くのWeb制作、オウンドメディア制作、Webコンサルティング、コンテンツマーケティングの実績から制作から運用・改善までトータルでサポートします。