レスポンシブデザインのブレイクポイントとは？スマホ・タブレット・PCの画面幅の目安

Webサイトを作るときに、必ず考える必要があるのが「レスポンシブデザイン」です。

レスポンシブデザインとは、スマートフォン、タブレット、ノートパソコン、デスクトップパソコンなど、さまざまな画面サイズに合わせて、Webサイトの見た目を調整する考え方です。

現在のWebサイトは、パソコンだけで見られるものではありません。スマートフォンで見る人もいれば、タブレットで見る人もいます。さらに、パソコンでも13インチ程度のノートパソコンから、27インチ以上の大きなモニターまで、画面サイズにはかなりの幅があります。

そのため、Webサイトを作るときは「どの画面幅で、どのようにレイアウトを変えるか」を考える必要があります。

その基準になるのが、ブレイクポイントです。

この記事では、スマートフォン・タブレット・PCの代表的な画面幅をもとに、レスポンシブデザインでよく使われるブレイクポイントの考え方を、初心者にもわかりやすく解説します。

ブレイクポイントとは？

ブレイクポイントとは、画面幅に応じてCSSを切り替える基準の幅のことです。

たとえば、スマートフォンでは1列で表示していたカードを、タブレットでは2列、PCでは3列にしたい場合があります。

このようなときに、CSSではメディアクエリを使って、次のように書きます。

@media screen and (min-width: 768px) {
  /* 画面幅が768px以上のときに適用するCSS */
}

この場合、768px がブレイクポイントになります。つまり、画面幅が768px以上になったら、スマートフォン用のレイアウトから、タブレット以上を意識したレイアウトに切り替える、という考え方です。

ブレイクポイントは「この幅になったら必ず切り替えなければならない」という絶対的な決まりではありません。あくまで、レイアウトを見やすくするための目安です。

実際の制作では、デザインの内容や、コンテンツの量、ナビゲーションの形、画像の大きさなどに合わせて調整します。

代表的な画面幅の目安

レスポンシブデザインでは、一般的に次のような画面幅を目安にすることが多いです。

もちろん、すべてのデバイスがこの表にぴったり当てはまるわけではありません。

たとえば、スマートフォンでも画面幅が広い機種がありますし、タブレットでも縦向きと横向きでは幅が大きく変わります。また、PCでもブラウザを全画面で開いているとは限りません。

ここで大切なのは、デバイス名だけで考えすぎないことです。

「スマホだからこのCSS」「iPadだからこのCSS」と考えるよりも、基本的には「画面幅が何pxか」を基準にしてCSSを切り替えると、より柔軟なレスポンシブ対応ができます。

画面幅とコンテンツ幅は違う

レスポンシブデザインを学び始めたときに、混乱しやすいのが「画面幅」と「コンテンツ幅」の違いです。

画面幅とは、ブラウザやデバイスの横幅のことです。

一方、コンテンツ幅とは、実際に文章や画像、ボタン、カードなどを配置する内側の幅のことです。

たとえば、デスクトップパソコンの画面幅が1920pxあったとしても、本文やカード一覧を1920pxいっぱいに広げるとは限りません。

横に広がりすぎた文章は、1行が長くなりすぎて読みにくくなります。また、画像やカードが広がりすぎると、デザイン全体が間延びして見えることがあります。

そのため、PC表示では、画面幅が広くても、コンテンツ幅は 1140px や 1200px 程度に制限して、中央寄せにすることがよくあります。

.inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 15px;
}

このように書くと、コンテンツの最大幅は1140pxになります。

margin: 0 auto; によって、画面幅が広いときは左右の余白が自動で作られ、中央に配置されます。

また、padding: 0 15px; を指定しておくことで、スマートフォンのときに画面端に文字がくっつくのを防ぐことができます。

スマートフォン幅の考え方

スマートフォンの幅は、現在ではさまざまなサイズがあります。代表的な目安としては、375px前後の画面幅を想定しておくとよいでしょう。

たとえば、スマートフォンの縦向きでは、画面幅が375px程度になることがあります。

このとき、コンテンツを画面いっぱいに配置してしまうと、文字や画像が端に寄りすぎて、少し窮屈に見えます。

そのため、スマートフォンでは左右に15px程度の余白を取ることが多いです。

.inner {
  width: calc(100% - 30px);
  margin: 0 auto;
}

この例では、左右15pxずつ、合計30px分を引いた幅をコンテンツ幅にしています。

ただし、最近は次のような書き方もよく使われます。

.inner {
  width: min(100% - 30px, 1140px);
  margin-inline: auto;
}

この書き方では、スマートフォンでは 100% - 30px が適用され、左右に15pxずつ余白ができます。

一方、PCのように画面幅が広い場合は、最大でも1140pxまでに制限されます。

スマートフォンからPCまで同じ .inner を使いやすくなるため、実務でも便利な考え方です。

タブレット幅の考え方

タブレットの目安としてよく使われるのが、768px以上です。

たとえば、タブレットを縦向きで見たとき、画面幅が768px程度になることがあります。

スマートフォンでは1列だったカードを、タブレットでは2列にしたり、横並びのレイアウトを少しずつ取り入れたりすることがあります。

@media screen and (min-width: 768px) {
  .card-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }
}

この例では、画面幅が768px以上になったら、カードを2列にしています。

タブレット幅では、PCほど横幅に余裕があるわけではありません。そのため、すぐに3列や4列にするのではなく、まずは2列程度から考えると、読みやすいレイアウトになりやすいです。

また、ナビゲーションについても、スマートフォンではハンバーガーメニュー、タブレット以上では横並びメニューに切り替える場合があります。

ただし、メニュー項目が多い場合は、768px以上でも横並びにすると窮屈になることがあります。

このような場合は、実際のデザインを見ながら、横並びにするタイミングを少し遅らせることもあります。

992px以上は小型ノートPCや横向きタブレットを意識する

画面幅が992px以上になると、横向きのタブレットや小型ノートPCに近い幅になります。

このあたりから、よりPCに近いレイアウトを考えやすくなります。

たとえば、メインコンテンツとサイドバーを横並びにしたり、カードを3列にしたりすることがあります。

@media screen and (min-width: 992px) {
  .layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 40px;
  }
}

この例では、画面幅が992px以上になったら、メインエリアとサイドバーを横並びにしています。

ただし、992pxはまだ「広いPC画面」とまでは言えません。

サイドバーを入れる場合でも、余白や文字サイズ、画像の大きさに注意しないと、少し窮屈に見えることがあります。

特に、サイドバーにバナーやランキング、カテゴリー一覧などを入れる場合は、実際の表示を確認しながら調整することが大切です。

1200px以上はPC表示の目安

1200px以上になると、デスクトップや大きめのノートパソコンを意識したレイアウトにしやすくなります。

多くのWebサイトでは、1200px以上をPC表示の目安として、レイアウトを大きく広げたり、余白をしっかり取ったりします。

@media screen and (min-width: 1200px) {
  .section {
    padding: 120px;
  }

  .card-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

PC表示では、画面に余裕があるため、セクション間の余白を広く取ることができます。

ただし、PCだからといって何でも横に並べればよいわけではありません。

文字が小さくなりすぎたり、要素同士の関係がわかりにくくなったりすると、かえって使いづらくなります。

PC表示では、「広く使える」ことよりも、「見やすく整理されている」ことを意識しましょう。

メディアクエリの基本的な書き方

レスポンシブデザインでは、CSSのメディアクエリを使って、画面幅ごとにスタイルを切り替えます。

現在の制作では、スマートフォンの表示を基本にして、画面幅が広くなるにつれてCSSを追加していく「モバイルファースト」の考え方がよく使われます。

/* スマートフォンを基本にする */
.card-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

/* タブレット以上 */
@media screen and (min-width: 768px) {
  .card-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }
}

/* PC以上 */
@media screen and (min-width: 1200px) {
  .card-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
  }
}

このように、最初にスマートフォン用のCSSを書き、そのあとに min-width を使って、画面幅が広い場合のCSSを追加していきます。

モバイルファーストにすると、スマートフォンでの表示を先に考えられるため、余計な上書きが少なくなり、CSSも整理しやすくなります。

ブレイクポイントは何個必要？

迷いやすいのが、「ブレイクポイントをいくつ作ればよいのか」という点です。

最初は、次の3つを基準にするとわかりやすいです。

/* タブレット以上 */
@media screen and (min-width: 768px) {
}

/* 小型PC以上 */
@media screen and (min-width: 992px) {
}

/* PC以上 */
@media screen and (min-width: 1200px) {
}

スマートフォン用のCSSは、メディアクエリの外側に書きます。

そのうえで、必要に応じて768px、992px、1200pxで切り替えていくと、比較的わかりやすく管理できます。

ただし、すべての案件で必ずこの3つを使う必要はありません。

たとえば、シンプルな1カラムのLPであれば、768pxと1200pxだけで十分な場合もあります。

逆に、複雑な管理画面や一覧ページでは、より細かいブレイクポイントが必要になることもあります。

大切なのは、先に数字を決め打ちすることではなく、実際の表示を見て「ここで崩れる」「ここで読みづらくなる」というタイミングで調整することです。

WordPressテーマ制作でも必要な考え方

WordPressでテーマを作成するときも、ブレイクポイントの考え方はとても重要です。

固定ページ、投稿一覧、個別記事ページ、アーカイブページ、サイドバー、フッターなど、WordPressサイトにはさまざまなパーツがあります。

それぞれのパーツが、スマートフォン・タブレット・PCでどのように見えるかを確認しながらCSSを作成する必要があります。

たとえば、投稿一覧ページでは、スマートフォンでは1列、タブレットでは2列、PCでは3列のカード型レイアウトにすることがあります。

個別記事ページでは、PCでは本文とサイドバーを横並びにし、スマートフォンではサイドバーを本文の下に移動させることがあります。

.article-layout {
  display: grid;
  gap: 40px;
}

@media screen and (min-width: 992px) {
  .article-layout {
    grid-template-columns: minmax(0, 1fr) 300px;
  }
}

このように、WordPressでも通常のHTML/CSSと同じように、画面幅に応じてレイアウトを切り替えます。

WordPressだから特別なレスポンシブ対応が必要というよりも、基本はHTML/CSSの考え方と同じです。