【2026年】デバイス別レスポンシブデザインのブレイクポイントまとめ｜Webサイト制作 / CMS・MAツール｜LeadGrid（リードグリッド）

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

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

レスポンシブデザインやWebサイト更新についてお悩みがありましたら、ぜひLeadGridの導入をご検討ください。
LeadGridのサービス紹介ページでは、対応できる機能や導入事例、実際の活用シーンをご紹介しています。
Webサイト制作・運用の改善を検討されている方は、併せてご覧ください。

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

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

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

レスポンシブデザインという考え方は2010年に発表されました。2015年にはGoogleがスマートフォン対応のページを検索結果で優遇する「モバイルフレンドリーアップデート」を実施し、2016年には「モバイルファーストインデックス（MFI）」の導入を発表しました。これをきっかけに、レスポンシブデザインへの関心が高まりました。

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

ブレイクポイントとは

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

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

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

1. パソコン

2. タブレット

3. スマートフォン

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

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

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

• パソコン

• タブレット

• スマートフォン

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

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

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

（参考：Desktop Screen Resolution Stats Japan）

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

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

▼iMacの画面サイズ一覧

▼MacBookの画面サイズ一覧

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

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

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

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

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

2026年9月時点では、次の表のとおり、タブレットでは768px〜1,280pxの画面幅が高いシェアを占めています。

（参考：Tablet Screen Resolution Stats Japan）

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

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

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

▼iPadの画面サイズ一覧 

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

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

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

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

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

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

（参考：Mobile Screen Resolution Stats Japan）

2026年秋の新しいiPhoneは、iPhone 18 Pro／18 Pro Max（9月18日発売）と、Appleとして初めての折りたたみ型iPhone「iPhone Duo」（10月23日発売）です。3月にはエントリーモデルのiPhone 17eも発売されています。なお、標準モデルのiPhone 18は、2026年9月の発表会では発表されませんでした。

▼2026年発売のiPhoneの画面サイズ一覧

iPhone 18 ProとiPhone 18 Pro Maxの解像度は、iPhone 17 Pro／17 Pro Maxと同じです。iPhone Duoのビューポートは、Appleが数値を公表していないため、物理解像度を3で割った推定値です。iPhone Duoは開くと横長の画面になり、幅が890px前後になる点に注意しましょう。

（参考：iPhone 18 Pro - 仕様 - Apple（日本）、iPhone Duo - 仕様 - Apple（日本）、iPhone 17e - 仕様 - Apple（日本））

2025年9月に発売されたiPhone 17シリーズとiPhone Airのビューポートサイズは以下のとおりです。2025年にはiPhone Airが新たに追加され、Plusモデルは廃止されました。

▼iPhone 17シリーズ・iPhone Airの画面サイズ一覧【2025年9月発売】

iPhone 17シリーズの特徴として、ベースモデルのiPhone 17とiPhone 17 Proが同じ6.3インチディスプレイを共有しています。これはiPhone 16 Proと同サイズで、ProMotionや常時表示ディスプレイがベースモデルにも搭載されました。

2024年9月に発売されたiPhone 16シリーズのビューポートサイズは以下のとおりです。2026年10月現在、AppleではiPhone 16が引き続き販売されています。

▼iPhone 16シリーズの画面サイズ一覧【2024年9月発売】

※iPhone 16eは2025年2月発売のエントリーモデルです。

2026年10月現在、iPhoneシリーズのビューポート幅は以下のように分布しています。

• 375px〜393px：iPhone SE/8/X/XS/11 Pro/12/13/14/14 Pro/15/15 Pro/16/16e/17e

• 402px：iPhone 16 Pro/17/17 Pro/18 Pro

• 414px：iPhone XR/XS Max/11/11 Pro Max

• 420px：iPhone Air

• 430px：iPhone 14 Plus/14 Pro Max/15 Plus/15 Pro Max/16 Plus

• 440px：iPhone 16 Pro Max/17 Pro Max/18 Pro Max

• 466px：iPhone Duo（閉じたとき・推定）

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

ただし、iPhone Duoを開いたときの幅（890px前後）は、768px以上をタブレットビューにする設定ではタブレット表示になります。折りたたみ端末への対応は、後述の「フォルダブルデバイスへの対応」も参考にしてください。

スマホのブレイクポイントを設定する際には390～500px程度とするのがおすすめです。

関連記事：スマホ対応サイトの作り方2つ｜注意点やおすすめ作成サービス・ツール7つも紹介！

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

検討したブレイクポイントを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 Container Queries」

2026年現在、従来のメディアクエリに加えて「CSS Container Queries」という新しい技術が注目されています。

メディアクエリはビューポート（画面全体）のサイズに基づいてスタイルを変更しますが、 Container Queriesはコンテナ（親要素）のサイズに基づいてスタイルを変更できます。これにより、コンポーネントがどこに配置されても適切に表示される、真にモジュラーなデザインが可能になります。

Container Queriesのメリットは次の3つです。

• 同じコンポーネントをサイドバーでもメインコンテンツでも使用可能

• グローバルなメディアクエリに依存しないため、コードの管理が容易

• コンポーネントが自身の文脈に応じて自動で調整可能

Container Queriesを使用するには、まず親要素をコンテナとして定義し、子要素でクエリを記述します。

【CSS】

/* 親要素をコンテナとして定義 */
.card-container {
  container-type: inline-size;
  container-name: card;
}

/* コンテナの幅が400px以上の場合のスタイル */
@container card (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 1rem;
  }
}

/* コンテナの幅が400px未満の場合のスタイル */
@container card (max-width: 399px) {
  .card {
    display: flex;
    flex-direction: column;
  }
}

2026年10月現在、Chrome、Safari、Firefox、Edgeの主要ブラウザで対応しています。

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

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

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

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

画像サイズや解像度を確認する

レスポンシブデザインを実装した後、ファーストビュー（ページを開いた最初の画面）を確認して問題がなかったからと言ってOKを出さないようにしましょう。画面をスクロールさせ、画像のサイズや解像度に問題がないかを確認することが重要です。

仮に画面枠に合わせて画像がはまっていても、解像度が適切でなければドットが粗い画像で表示されてしまいユーザーにとって見づらい画面になってしまいます。

またレスポンシブデザインにする際、表やリストを設定し忘れて縦に長くなっているページも散見されます。

きちんとレスポンシブデザインを設定してページを公開するためにも、きちんとページ全体が表示されているかを確認しましょう。

モバイルフレンドリーになっているか確認する

レスポンシブデザインの設定が終わったら、当該サイトがモバイルフレンドリーに対応できているか確認しましょう。

PageSpeed Insightsにアクセスし当該サイトのURLを入力すると、サイトが分析され、「パフォーマンス」「ユーザー補助」「おすすめの方法」「SEO」の4項目でスコアが算出されます。スコアが低い場合はCSSやサイト構造を修正してみましょう。

フォルダブルデバイスへの対応

2026年現在、Samsung Galaxy Z FoldシリーズやGoogle Pixel Foldシリーズに加え、Appleからも折りたたみ型の「iPhone Duo」が登場し、フォルダブル（折りたたみ）スマートフォンの選択肢が増えています。

Galaxy Z Foldシリーズは折りたたみ時374px、展開時832pxと 同一デバイスで幅広い画面幅に対応する必要があります。iPhone Duoも、閉じたときは466px前後、開いたときは890px前後（いずれも推定）と、開閉によって画面幅が大きく変わります。フォルダブル端末の市場は、今後も拡大すると予想されています（参考：Mordor Intelligence）。

FlexboxやCSS Grid、Container Queriesを活用した柔軟なレイアウトを採用しておくことで、将来的なフォルダブルデバイスへの対応も容易になります。

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

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

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

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

LeadGridは、レスポンシブデザインに対応済のリード獲得に特化したCMSです。すでにレスポンシブデザインに対応しているため、Webの知識がなくても、PCスマホ両方に対応したサイト制作、運用が可能です。

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

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

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

goleadgrid.com

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

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

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

goleadgrid.com

「まずは使ってから考えたい……！

よくある質問（FAQ）

レスポンシブデザインとは何ですか？

レスポンシブデザインとは、パソコンやスマートフォンなどユーザーが使用するデバイスに合わせて、Webサイトの画面サイズを最適化したデザインのことです。2010年に考え方が発表され、2015年のGoogleの「モバイルフレンドリーアップデート」や、2016年に発表された「モバイルファーストインデックス（MFI）」をきっかけに広く普及しました。

ブレイクポイントとは何ですか？

ブレイクポイントとは、各デバイスの画面サイズに応じてレスポンシブデザインの表示を切り替えるポイントのことです。一般的にはパソコン、タブレット、スマートフォンの3種類の画面幅に合わせて設定します。

各デバイスの推奨ブレイクポイントはいくつですか？

パソコンは960〜1,280px程度、タブレットは768px〜1,280px、スマートフォンは390〜500px程度が推奨されています。タブレットの画面分割表示（iPadのSplit Viewなど）に対応する場合は、590px程度をブレイクポイントとして検討するとよいでしょう。

レスポンシブデザインを実装する際の注意点は何ですか？

実装前には、各端末やブラウザでの見え方の確認、画像サイズや解像度のチェック、モバイルフレンドリーへの対応確認が重要です。PageSpeed Insightsなどのツールを使用してサイトを分析し、スコアが低い場合はCSSやサイト構造を修正しましょう。