スマホ用ブレークポイントは何pxにすべき？SEOに強いレスポンシブCSS設計

スマホ用ブレークポイントを考えるとき、多くの人が「スマホは何px以下にすればよいのか」「iPhone基準で390pxにするべきか」「768px以下をスマホ扱いにしてよいのか」と迷います。しかし実務では、スマホ用の幅を1つだけ決めてすべてを管理するよりも、スマホ向けのCSSを通常スタイルとして先に書き、画面が広くなったタイミングでタブレットやPC向けのCSSを追加する方が、読みやすく保守しやすい設計になります。この考え方はモバイルファーストと呼ばれ、現在のレスポンシブデザインでは非常に一般的です。

結論として、スマホは通常CSSで作り、小さいスマホだけ調整したい場合は 480px未満、大きめスマホや小型タブレットを意識する場合は 600px前後、タブレット以上として本格的に切り替えるなら 768px以上、PC向けの2カラムやサイドバー表示を始めるなら 1024px以上 を目安にすると分かりやすいです。ただし、これらは絶対的な正解ではなく、本文の読みやすさ、ボタンの押しやすさ、画像の見え方、カードの幅、ナビゲーションの折り返しなど、実際のコンテンツが自然に見えるかどうかを確認しながら調整することが重要です。

1. スマホ用ブレークポイントとは

スマホ用ブレークポイントとは、スマートフォンの画面幅に合わせてCSSを切り替えるための基準値です。たとえば、画面幅が480px未満のときだけ見出しを小さくする、768px以上になったらカードを2列にする、1024px以上になったらサイドバーを表示する、といった条件を作るために使います。CSSでは主に @media を使って指定し、画面幅に応じてレイアウト、余白、文字サイズ、画像サイズ、表示順などを調整します。

ただし、スマホ用ブレークポイントは「この幅以下は必ずスマホ」と機械的に決めるものではありません。スマートフォンの画面幅は機種によって異なり、同じ端末でもブラウザ、表示倍率、縦向き・横向き、OSの設定によって見え方が変わります。そのため、特定の端末名だけで決めるのではなく、コンテンツが読みやすいか、操作しやすいか、横スクロールが出ないかを基準にして設計する必要があります。

1.1 ブレークポイントの役割

ブレークポイントの役割は、画面幅に合わせてユーザーが見やすい表示へ切り替えることです。スマホでは1カラムで本文を読みやすくし、タブレットでは余白を広げ、PCでは横並びや2カラムにすることで、同じHTMLでもデバイスごとに自然なレイアウトを作れます。特にSEO記事、ブログ、LP、ECサイト、企業サイトでは、スマホでの読みやすさがユーザー体験に直結するため、ブレークポイントの設計は見た目だけでなく成果にも関わります。

ブレークポイントを正しく設計すると、狭い画面でコンテンツが詰まりすぎる問題や、広い画面で余白が不自然に大きくなる問題を防げます。逆に、ブレークポイントが適切でないと、スマホで文字が小さすぎる、カードが横に潰れる、ボタンが押しにくい、画像がはみ出す、本文にたどり着く前にサイドバーが表示されるといった問題が起きます。レスポンシブデザインでは、こうした不便を避けるために、画面幅に応じた切り替えを丁寧に設計することが重要です。

1.2 スマホ幅を固定で考えない

スマホ用ブレークポイントを考えるときに注意したいのは、「スマホは375px」「スマホは390px」「スマホは414px」といったように、特定の端末幅だけを基準にしすぎないことです。実際には小さいスマホもあれば、大きいスマホもあり、折りたたみ端末や横向き表示もあります。そのため、1つの端末幅に合わせてCSSを書きすぎると、別の端末で不自然な表示になることがあります。

実務では、スマホ全体を通常CSSでカバーし、どうしても狭い画面で崩れる部分だけ max-width: 479px のように補助調整するのが安全です。大切なのは、端末名ではなく、コンテンツが崩れる位置を見ることです。見出しが4行以上になって読みにくい、ボタンが横に並ばない、カード内のテキストが詰まりすぎるといった具体的な問題が出たときにだけ、必要なブレークポイントを追加する考え方が保守しやすいです。

2. 結論：スマホは通常CSSで作る

スマホ用ブレークポイントの結論は、スマホを通常CSSで作ることです。つまり、スマホ用に毎回 @media (max-width: 767px) を書くのではなく、メディアクエリの外に書くCSSをスマホ向けの基本スタイルにします。そのうえで、画面幅が広くなったら @media (min-width: 768px) や @media (min-width: 1024px) を使って、タブレットやPC向けのスタイルを追加します。

この書き方にすると、CSSの流れが自然になります。最初に小さい画面向けの1カラム、狭めの余白、縦並びのボタン、読みやすい本文サイズを作り、広い画面になったらカードを2列にする、ナビゲーションを横並びにする、2カラムにする、余白を広げる、という順番で設計できます。SEO記事やブログではスマホ閲覧が多いため、スマホを後回しにせず最初から基準にすることが重要です。

2.1 モバイルファーストで考える

モバイルファーストとは、最初にスマホ向けのスタイルを作り、画面が広くなるにつれてCSSを追加していく設計方法です。スマホでは画面幅が狭く、ユーザーは縦スクロールで読むことが多いため、1カラム、十分な行間、押しやすいボタン、読みやすい余白を基本にします。この基本がしっかりしていれば、タブレットやPCでの拡張も自然に行えます。

PC向けデザインを先に作ってからスマホで無理に縮めると、余白が大きすぎる、横並びが崩れる、画像がはみ出す、文字が小さすぎるといった問題が起きやすくなります。モバイルファーストなら、スマホ表示が土台になるため、SEO記事やLPのようにスマホでの読みやすさが重要なページでも安定しやすいです。

2.2 min-widthを基本にする理由

モバイルファーストでは、min-width を使うのが基本です。たとえば、通常CSSでスマホ向けの1カラムを作り、768px以上でカードを2列にし、1024px以上で3列にすると、CSSが上から下へ自然に拡張されます。この流れは読みやすく、どの幅で何を追加しているのか把握しやすいです。

一方、max-width を多用すると、PC向けCSSを先に書いてからスマホ向けに上書きする形になりがちです。既存サイトの修正では便利な場合もありますが、新規制作では上書きが増えやすく、CSSが複雑になります。スマホを基準にしたい場合は、まず通常CSSをスマホ用にして、広い画面だけ min-width で追加する方が管理しやすいです。

2.3 スマホ基本のコード例

スマホではカードを1列にし、768px以上で2列、1024px以上で3列にする基本例です。スマホ用にメディアクエリを書いていない点がポイントです。

ファイル名: style.css｜言語: CSS｜用途: スマホ基本・広い画面でカード列数を増やす

.card-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.card {
  padding: 20px;
  background: #ffffff;
  border: 1px solid #e5e5e5;
}

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

@media (min-width: 1024px) {
  .card-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
}

3. 480px未満は小さいスマホ向け

480px未満は、小さいスマホだけを微調整するために使いやすいブレークポイントです。たとえば、見出しが大きすぎて4行以上に折り返される、ボタンの内側余白が広すぎて文字が窮屈になる、左右余白が大きくて本文幅が狭くなる、といった場合に使います。スマホ全体を480px以下として扱うのではなく、狭い画面だけの補助調整として考えるのがポイントです。

480px未満の調整は、ページ全体の大きなレイアウト変更よりも、文字サイズや余白の微調整に向いています。小さいスマホで見たときに、ファーストビューが詰まっている、CTAボタンが押しにくい、フォームの入力欄が窮屈に見えるといった問題がある場合だけ追加します。最初からすべての要素に480px未満のCSSを書く必要はありません。

3.1 480px未満で調整する内容

480px未満では、主に見出し、余白、ボタン、フォーム、カード内の余白を調整します。たとえば、通常のスマホでは見出しを32pxにしていても、狭い画面では28pxに落とすと自然に収まることがあります。セクション余白も、通常は左右20px、狭いスマホでは16pxにすると本文幅を確保しやすくなります。

ただし、文字サイズを小さくしすぎると読みづらくなるため注意が必要です。狭い画面だからといって本文を極端に小さくするのではなく、見出しや装飾的な要素を少し抑える程度にします。本文の読みやすさを守ることが、SEO記事やブログでは特に重要です。

3.2 480px未満のコード例

以下は、小さいスマホだけ見出しとセクション余白を調整する例です。通常CSSでスマホ全体に対応し、狭い画面だけ max-width: 479px で補正しています。

ファイル名: style.css｜言語: CSS｜用途: 480px未満の小さいスマホだけ微調整する

.hero-title {
  font-size: 32px;
  line-height: 1.3;
}

.section {
  padding: 40px 20px;
}

@media (max-width: 479px) {
  .hero-title {
    font-size: 28px;
  }

  .section {
    padding: 32px 16px;
  }
}

4. 600px前後は大きめスマホ・小型タブレット向け

600px前後は、大きめスマホ、小型タブレット、横向き表示などを意識した調整に使いやすい幅です。このあたりの画面幅では、通常のスマホより少し余裕があるため、余白を広げたり、ボタンを横並びにしたり、フォームやCTAの見せ方を少し整えたりできます。ただし、まだ本格的なPCレイアウトにするには狭い場合が多いため、2カラムや複雑な横並びを始めるかどうかは慎重に判断します。

600px前後は、フレームワークでも小サイズの境界として使われることがあります。たとえば、Bootstrapでは576px、Tailwind CSSでは640px、Material UIでは600pxが小サイズの目安として使われます。自作CSSでは、厳密に同じ値を使う必要はありませんが、大きめスマホを意識した軽い切り替えとして600px前後を覚えておくと便利です。

4.1 600pxで変えやすい要素

600px以上では、セクションの余白、CTAボタンの並び、フォームの横幅、カード内の余白などを少し広げると自然です。スマホでは縦に並べていたボタンを横並びにする、カードの内側余白を増やす、入力欄の周囲に余裕を持たせる、といった調整が向いています。

一方で、本文とサイドバーの2カラムを600pxで始めるのは早すぎることがあります。本文幅が狭くなり、1行あたりの文字数が少なすぎて読みにくくなるからです。特にSEO記事では、600px前後ではまだ1カラムを維持し、余白だけ整える方が安全です。

4.2 600px以上のコード例

以下は、600px以上でCTAエリアの余白を広げ、ボタンを横並びにする例です。大きなレイアウト変更ではなく、少し広いスマホに合わせた見た目の調整として使います。

ファイル名: style.css｜言語: CSS｜用途: 600px以上でCTA余白とボタン配置を調整する

.cta {
  padding: 40px 20px;
}

.cta-buttons {
  display: grid;
  gap: 12px;
}

@media (min-width: 600px) {
  .cta {
    padding: 56px 32px;
  }

  .cta-buttons {
    display: flex;
    gap: 16px;
  }
}

5. 768px以上はタブレット以上の目安

768px以上は、タブレット以上の画面として扱いやすい代表的なブレークポイントです。多くのCSS設計で、768pxはスマホ中心の表示からタブレット向け表示へ切り替える目安として使われます。カードを2列にする、画像とテキストを横並びにする、余白を広げる、フォームを2列にするなど、比較的大きな見た目の変更を始めやすい幅です。

ただし、768pxになったからといって、すべてのレイアウトを横並びにする必要はありません。本文とサイドバーの2カラムのように、両方に十分な幅が必要なレイアウトは、768pxではまだ狭い場合があります。768pxでは「タブレット向けに少し広げる」程度にして、PC向けの本格的な2カラムは1024px以上で始めると読みやすくなります。

5.1 768pxで切り替えやすい内容

768px以上では、カード一覧を2列にする、画像とテキストを横並びにする、セクション余白を大きくする、フォームの一部項目を横並びにする、といった切り替えが向いています。この幅ではスマホよりも画面に余裕があるため、情報を少し横に広げても読みやすさを保ちやすくなります。

一方、ナビゲーションやサイドバーは、項目数や文字量によっては768pxでは窮屈になることがあります。メニュー項目が少ないサイトなら768px以上で横並びにしても問題ありませんが、項目が多い企業サイトやECサイトでは1024pxまでハンバーガーメニューのままにする方が自然な場合もあります。

5.2 768px以上のコード例

以下は、768px以上でカード一覧を2列にする例です。スマホでは1列で読みやすくし、タブレット以上で余裕が出たら2列に切り替えます。

ファイル名: style.css｜言語: CSS｜用途: 768px以上でカード一覧を2列にする

.card-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

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

6. 1024px以上はPC向けレイアウトの目安

1024px以上は、PC向けの本格的なレイアウトを始める目安として使いやすい幅です。SEO記事やブログでは、1024px以上で本文とサイドバーを横並びにする、LPでは画像とテキストを大きく横並びにする、管理画面ではサイドメニューを常時表示する、といった切り替えに向いています。スマホやタブレットでは本文を優先し、PC以上で補足情報を横に置くと、読みやすさと情報量のバランスを取りやすくなります。

特に2カラムレイアウトでは、本文幅とサイドバー幅の両方を確保する必要があります。サイドバーを300px、カラム間の余白を32pxにすると、それだけで332px程度が必要になります。768pxで2カラムにすると本文が狭くなりがちですが、1024px以上なら本文にもある程度の幅を残しやすくなります。

6.1 2カラムは1024px以上が安全

SEO記事やブログで2カラムを作る場合、1024px以上から横並びにするのが安全です。スマホとタブレットでは本文を1カラムで見せ、PC以上でサイドバーを右側に表示することで、本文の読みやすさを優先できます。サイドバーには関連記事、プロフィール、カテゴリー、広告、CTAなどを置けますが、スマホでは本文の後に表示する方が自然です。

2カラムを早すぎる幅で始めると、本文が極端に細くなり、1行あたりの文字数が少なくなって読みにくくなります。ユーザーが文章を読むページでは、レイアウトの華やかさよりも本文の可読性を優先するべきです。1024px以上で2カラムにすれば、スマホ・タブレットでは読みやすく、PCでは情報を整理して見せることができます。

6.2 1024px以上のコード例

以下は、スマホでは1カラム、1024px以上で本文とサイドバーを2カラムにするSEO記事向けの例です。

ファイル名: style.css｜言語: CSS｜用途: 1024px以上でSEO記事を2カラムにする

.page {
  max-width: 1120px;
  margin: 0 auto;
  padding: 24px 20px;
}

.sidebar {
  margin-top: 32px;
}

@media (min-width: 1024px) {
  .page {
    display: flex;
    gap: 32px;
  }

  .main {
    flex: 1;
    min-width: 0;
  }

  .sidebar {
    flex: 0 0 300px;
    margin-top: 0;
  }
}

7. スマホ向け推奨ブレークポイント表

スマホ向けブレークポイントは、用途ごとに整理しておくと実装時に迷いにくくなります。すべての値を必ず使う必要はありませんが、通常CSSをスマホ基本、480px未満を小さいスマホ補正、600px以上を大きめスマホ調整、768px以上をタブレット、1024px以上をPC、1280px以上を大型画面と考えると、幅の役割が分かりやすくなります。

ブレークポイントを表にしてチームで共有しておくと、CSSの中に中途半端な値が増えにくくなります。たとえば、ある人は640px、別の人は700px、さらに別の人は750pxで調整するようになると、CSSが複雑になります。プロジェクト全体で基準値を決めておくことが、保守性の高いレスポンシブ設計につながります。

7.1 最小セットで始める

最初から多くのブレークポイントを用意する必要はありません。小規模サイトやブログなら、通常CSS、768px以上、1024px以上の3段階だけでも十分な場合があります。スマホは通常CSS、タブレット以上で余白やカード列数を調整し、PC以上で2カラムや横並びを追加する流れです。

小さいスマホで見たときに問題が出る場合だけ、480px未満を追加します。たとえば、見出しが大きすぎる、CTAボタンが窮屈、セクション余白が広すぎるといった問題がある場合です。必要なときだけ増やすことで、CSSが短くなり、後からの修正もしやすくなります。

7.2 SEO記事向けのセット

SEO記事やブログでは、スマホ表示の本文読みやすさが重要です。そのため、通常CSSで1カラム、480px未満で小さいスマホ補正、768px以上で余白拡張、1024px以上で2カラムという4段階が使いやすいです。1280px以上は、全体の最大幅や余白を整えたい場合に追加します。

この構成にすると、スマホでは本文が先に表示され、PCではサイドバーを使って関連記事やカテゴリーを見せられます。検索流入が多い記事ページでは、ユーザーがすぐ本文に入れることが重要なので、スマホでサイドバーを前に出さない設計が安全です。

8. SEO記事ではスマホ本文を最優先にする

SEO記事では、スマホで本文が読みやすいことが最優先です。検索結果から訪問したユーザーは、まず疑問の答えを知りたい状態でページを開きます。そのとき、本文の前にサイドバー、広告、関連記事、装飾的な要素が多く表示されると、目的の情報にたどり着きにくくなります。スマホでは画面が狭いため、特に本文の表示順と余白設計が重要になります。

ブレークポイント設計でも、スマホでは1カラムで本文を先に出し、PC以上でサイドバーを横に表示する構成が安全です。記事本文の読みやすさを保ちつつ、広い画面では関連情報も見せられるため、SEOとユーザー体験の両方に配慮できます。単に見た目を整えるだけでなく、ユーザーが情報を探しやすい順番になっているかを確認することが大切です。

8.1 本文を先に書く

HTMLでは、本文を先に書き、サイドバーを後に書く構造が自然です。スマホではHTMLの順番どおりに上から表示されるため、本文を先に書いておけば、ユーザーはすぐにメインコンテンツを読めます。サイドバーや関連記事は、本文の後ろに置くか、PC以上で横に表示すると邪魔になりにくいです。

CSSの order を使えば見た目の順番を変えることもできますが、読み上げ順やキーボード操作順と視覚的な順番がずれる可能性があります。SEO記事や情報ページでは、HTML構造そのものを自然な順番にしておく方が、保守性とアクセシビリティの面でも安全です。

8.2 SEO記事向けHTML例

以下は、スマホで本文を先に表示するSEO記事向けの基本構造です。PCではCSSで2カラムにできますが、HTML上では本文が先、サイドバーが後という順番を維持します。

ファイル名: index.html｜言語: HTML｜用途: スマホで本文を先に表示するSEO記事構造

<div class="page">
  <main class="main">
    <article>
      <h1>スマホ用ブレークポイントは何pxにすべき？</h1>
      <p>ここに記事本文を入れます。</p>
    </article>
  </main>

  <aside class="sidebar">
    <h2>関連記事</h2>
    <ul>
      <li><a href="#">レスポンシブデザインの基本</a></li>
      <li><a href="#">Flexboxで2カラムを作る方法</a></li>
    </ul>
  </aside>
</div>

9. LPではファーストビューを基準にする

ランディングページでは、スマホ用ブレークポイントを考えるときにファーストビューが非常に重要です。LPでは、最初の画面に大きな見出し、説明文、画像、CTAボタンが配置されることが多く、スマホではそれらが縦に積み重なります。見出しが長すぎたり、余白が広すぎたりすると、重要なCTAが画面下に押し出されてしまうことがあります。

そのため、LPでは480px未満の小さいスマホで見出しサイズや余白を調整し、768px以上で見出しを大きく戻したり、画像とテキストを横並びにしたりする設計が使いやすいです。SEO記事では本文の読みやすさが中心ですが、LPではファーストビューで価値が伝わるか、CTAが見えるか、スクロール前に情報が詰まりすぎていないかを確認する必要があります。

9.1 LPでは見出しサイズに注意する

LPの見出しは、PCでは大きく美しく見えても、スマホでは折り返しが多くなりすぎることがあります。特に日本語の長いキャッチコピーや、英数字を含むサービス名が入る場合、画面幅によって不自然な改行になることがあります。小さいスマホでは見出しを少し小さくし、行間を調整することで、ファーストビュー全体が見やすくなります。

ただし、見出しを小さくしすぎるとLPの訴求力が弱くなります。重要なのは、スマホでも読みやすく、かつページの主張が伝わるサイズを探すことです。480px未満で少し抑え、768px以上で大きくする設計にすると、画面幅に合わせた自然な見出しになります。

9.2 LP向けコード例

以下は、LPのファーストビューで、スマホ基本、小さいスマホ補正、タブレット以上の拡張を行う例です。

ファイル名: style.css｜言語: CSS｜用途: LPの見出しと余白をスマホ幅に合わせて調整する

.hero {
  padding: 48px 20px;
}

.hero-title {
  font-size: 32px;
  line-height: 1.25;
}

@media (max-width: 479px) {
  .hero {
    padding: 40px 16px;
  }

  .hero-title {
    font-size: 28px;
  }
}

@media (min-width: 768px) {
  .hero {
    padding: 80px 32px;
  }

  .hero-title {
    font-size: 48px;
  }
}

10. ECサイトでは商品カード幅を基準にする

ECサイトでは、スマホ用ブレークポイントを商品カードの幅から考えると実務的です。商品カードには、商品画像、商品名、価格、レビュー、ボタン、ラベルなど複数の情報が入るため、幅が狭すぎると読みにくくなります。スマホでは1列または2列、タブレットでは2列または3列、PCでは3〜4列にすることが多いですが、商品名の長さや画像比率によって最適な列数は変わります。

ECサイトで大切なのは、列数を増やすことではなく、商品情報を比較しやすくすることです。スマホで2列にすると商品一覧は多く見せられますが、カードが小さくなりすぎると商品名や価格が読みにくくなります。小さいスマホでは1列、大きめスマホでは2列、タブレット以上で3列というように、実際の商品データを入れて確認することが重要です。

10.1 商品カードの最小幅を見る

商品カードは、最低限必要な幅を決めてからブレークポイントを設計すると安定します。たとえば、画像をきれいに見せたいならカード幅をある程度確保する必要がありますし、商品名が長いジャンルでは、2列にするとテキストが詰まりすぎることがあります。価格やボタンも同時に表示するため、見た目だけでなく操作性も確認する必要があります。

スマホで2列にする場合、狭い端末ではカードが小さくなりすぎることがあります。そのため、360px未満では1列に戻す、768px以上で3列にする、1024px以上で4列にするような設計が使えます。商品一覧はコンテンツ量が多いため、ブレークポイントの影響が大きい部分です。

10.2 ECカード一覧のコード例

以下は、スマホでは基本2列、小さいスマホでは1列、タブレット以上で3列、PC以上で4列にする例です。

ファイル名: style.css｜言語: CSS｜用途: EC商品カードの列数をスマホ幅に合わせて調整する

.product-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

@media (max-width: 359px) {
  .product-list {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 768px) {
  .product-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}

@media (min-width: 1024px) {
  .product-list {
    grid-template-columns: repeat(4, 1fr);
  }
}

11. フォームでは入力しやすさを基準にする

問い合わせフォーム、会員登録フォーム、予約フォームでは、スマホで入力しやすいことが最も重要です。スマホでは画面幅が狭く、キーボードも表示されるため、入力欄が横に狭いと操作しづらくなります。そのため、スマホでは基本的に1カラムにし、ラベル、入力欄、補足テキスト、エラーメッセージを縦に並べるのが安全です。

600px以上や768px以上では、名前と姓、郵便番号と住所の一部など、一部の入力欄を横並びにできる場合があります。しかし、メールアドレス、住所、問い合わせ内容のように長い入力が必要な項目は、広い幅を確保した方が入力しやすいです。フォームのブレークポイントは見た目だけでなく、ユーザーがミスなく入力できるかを基準にする必要があります。

11.1 スマホでは1カラムが基本

スマホフォームでは、1カラムにすることで視線の流れが分かりやすくなります。ラベルの下に入力欄、入力欄の下にエラー文という構造にすれば、ユーザーがどこを入力すればよいか迷いにくくなります。横並びのフォームはPCでは効率的に見えますが、スマホでは幅が足りず、タップしづらくなることがあります。

フォームはコンバージョンに直結するため、スマホでの使いやすさを優先するべきです。入力欄は十分な高さと横幅を確保し、ボタンも押しやすいサイズにします。ブレークポイントは、フォームが読みやすく入力しやすい状態を保つために使います。

11.2 フォームのコード例

以下は、スマホでは1カラム、768px以上で2カラムにするフォーム例です。長い入力欄は .full を付けて横幅いっぱいにします。

ファイル名: style.css｜言語: CSS｜用途: フォームをスマホ1カラム・タブレット以上2カラムにする

.form-grid {
  display: grid;
  gap: 16px;
}

.form-field input,
.form-field textarea {
  width: 100%;
  padding: 12px;
}

@media (min-width: 768px) {
  .form-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .form-field.full {
    grid-column: 1 / -1;
  }
}

12. ナビゲーションは項目数で判断する

ナビゲーションのスマホ用ブレークポイントは、画面幅だけでなくメニュー項目の数や文字数を見て決める必要があります。項目が少ないサイトなら768px以上で横並びにしても問題ありませんが、項目数が多い企業サイト、ECサイト、メディアサイトでは、1024px未満までハンバーガーメニューにしておく方が自然な場合があります。無理に横並びにすると、メニューが折り返したり、文字間が詰まりすぎたりします。

ナビゲーションはサイト全体の操作性に関わるため、ブレークポイント設計の中でも重要です。スマホではメニューを畳み、PCでは横並びにするのが一般的ですが、いつ横並びに切り替えるかはコンテンツ次第です。端末名ではなく、メニューが折り返さずに読める幅、タップしやすい余白、ヘッダー全体の見やすさを基準に決めます。

12.1 768pxか1024pxで切り替える

ナビゲーションの横並び切り替えは、768pxまたは1024pxが候補になります。項目数が少ないシンプルなサイトなら、768px以上で横並びにしても自然です。たとえば、メニューが3〜4個程度なら、タブレットでも十分な幅を確保できることがあります。

一方、メニューが6個以上ある場合や、項目名が長い場合は、1024px以上で横並びにする方が安全です。スマホやタブレットで詰まったナビゲーションを表示するより、ハンバーガーメニューやドロワーメニューで整理した方が使いやすい場合があります。

12.2 ナビゲーションのコード例

以下は、スマホでは縦並び、1024px以上で横並びにするナビゲーション例です。

ファイル名: style.css｜言語: CSS｜用途: ナビゲーションをPC以上で横並びにする

.nav-list {
  display: grid;
  gap: 12px;
  padding: 0;
  list-style: none;
}

@media (min-width: 1024px) {
  .nav-list {
    display: flex;
    align-items: center;
    gap: 24px;
  }
}

13. よくある失敗

スマホ用ブレークポイントでよくある失敗は、端末ごとの幅に合わせて細かくCSSを書きすぎることです。360px、375px、390px、414px、430px、480px、600px、640pxのように細かい値が増えると、どの幅で何を上書きしているのか分かりにくくなります。最初は便利に見えても、後から修正するときに影響範囲が追いにくくなります。

もうひとつの失敗は、PCデザインを先に作り、スマホで崩れた部分を後から max-width で大量に直すことです。この方法ではCSSの上書きが増え、スマホ表示だけ別物のようになってしまうことがあります。新規制作では、最初からスマホを基準にして作る方が、CSSもHTML構造も整理しやすくなります。

13.1 端末名だけで決める

「iPhoneの幅に合わせる」「このAndroid端末に合わせる」という考え方だけでブレークポイントを決めると、端末の種類が変わったときに対応しにくくなります。もちろん主要な端末幅で表示確認することは大切ですが、CSSの基準値を端末名だけで増やし続けるのは避けるべきです。

大切なのは、端末幅ではなくコンテンツの状態です。見出しが自然に読めるか、本文の1行が短すぎないか、カードが潰れていないか、ボタンが押しやすいか、ナビゲーションが折り返していないかを確認します。問題が出る位置でブレークポイントを決める方が、実務では安定します。

13.2 ブレークポイントを増やしすぎる

ブレークポイントが多すぎると、CSSの保守性が下がります。たとえば、あるコンポーネントは600px、別のコンポーネントは640px、さらに別の箇所は700pxで切り替えるようになると、プロジェクト全体のルールが見えにくくなります。チーム制作では、こうした中途半端な値が増えるほど修正コストが上がります。

基本は、通常CSS、480px未満、768px以上、1024px以上、1280px以上くらいに整理すると扱いやすいです。どうしても例外的な値が必要な場合は、なぜその値を使うのかコメントを残しておくと、後から見た人が判断しやすくなります。

13.3 例外値のコード例

以下は、360px未満だけCTAボタンの余白を調整する例です。例外的なブレークポイントには理由をコメントで残しています。

ファイル名: style.css｜言語: CSS｜用途: 例外ブレークポイントに理由を残す

/* 360px未満ではCTAボタンが2行で窮屈になるため、この幅だけ余白を調整 */
@media (max-width: 359px) {
  .cta-button {
    padding-inline: 14px;
    font-size: 14px;
  }
}

14. フレームワーク基準との違い

スマホ用ブレークポイントを決めるときは、Bootstrap、Tailwind CSS、Material UIなどのフレームワークの値を参考にできます。ただし、各フレームワークの値は少しずつ違います。Bootstrapは576px、768px、992pxをよく使い、Tailwind CSSは640px、768px、1024pxを使い、Material UIは600px、900px、1200pxを使います。どれが唯一の正解というわけではなく、プロジェクトで使っている技術やデザイン方針に合わせることが大切です。

フレームワークを使っている場合は、そのフレームワークのブレークポイントに合わせるのが自然です。たとえば、Tailwind CSSを使っているのに独自CSSだけ別の値を使うと、md や lg の感覚と自作CSSの切り替えがずれて混乱しやすくなります。自作CSSだけで作る場合は、768px、1024px、1280pxを基本にすると、多くのサイトで扱いやすいです。

14.1 比較表

代表的なフレームワークのブレークポイントを比較すると、同じ「小」「中」「大」でも値が異なることが分かります。この違いを理解したうえで、プロジェクト内では1つの基準に統一することが大切です。

14.2 自作CSSなら何を選ぶか

自作CSSで迷う場合は、スマホを通常CSS、768px以上をタブレット、1024px以上をPC、1280px以上を広いPCと考えるのが分かりやすいです。小さいスマホだけ問題がある場合に480px未満を追加し、大きめスマホや小型タブレットで軽い調整をしたい場合に600px前後を使います。

この設計にすると、ブレークポイントが増えすぎず、ブログ、SEO記事、LP、企業サイト、サービスサイトに対応しやすくなります。重要なのは、フレームワークの値をそのまま暗記することではなく、各値が何のためにあるのかを理解して、自分のサイトに合う形で使うことです。

15. 実務でおすすめの設定

実務でおすすめのスマホ用ブレークポイントは、通常CSS、480px未満、768px以上、1024px以上、1280px以上の組み合わせです。通常CSSをスマホ基本にし、480px未満で小さいスマホ補正、768px以上でタブレット向け調整、1024px以上でPCレイアウト、1280px以上で広い画面向けの余白や最大幅を調整します。この構成なら、SEO記事、ブログ、LP、ECサイト、企業サイトで幅広く使いやすいです。

最初からすべてのブレークポイントを使う必要はありません。まずは通常CSS、768px、1024pxの3つで作り、必要に応じて480px未満や1280px以上を追加します。ブレークポイントは多ければよいものではなく、必要な場所にだけ使う方が保守しやすくなります。CSSを長く運用するなら、値を増やす前に、余白、最大幅、グリッド設定、コンテンツ量で解決できないかを確認することも大切です。

15.1 推奨セット

以下の表は、実務で使いやすいスマホ用ブレークポイントの推奨セットです。チームでCSSを書く場合は、このように名前、条件、用途を決めておくと、設計のブレが少なくなります。

15.2 推奨CSS

以下は、スマホ基本、480px未満の補正、768px以上の余白拡張、1024px以上の2カラム、1280px以上の最大幅調整をまとめた実務向けのCSS例です。

ファイル名: style.css｜言語: CSS｜用途: 実務向けスマホブレークポイントの基本セット

.page {
  max-width: 1120px;
  margin: 0 auto;
  padding: 24px 20px;
}

.main {
  min-width: 0;
}

.sidebar {
  margin-top: 32px;
}

@media (max-width: 479px) {
  .page {
    padding-inline: 16px;
  }
}

@media (min-width: 768px) {
  .page {
    padding: 40px 32px;
  }
}

@media (min-width: 1024px) {
  .page {
    display: flex;
    gap: 32px;
  }

  .main {
    flex: 1;
  }

  .sidebar {
    flex: 0 0 300px;
    margin-top: 0;
  }
}

@media (min-width: 1280px) {
  .page {
    max-width: 1200px;
  }
}

おわりに

スマホ用ブレークポイントは、1つの固定値で決めるものではありません。最もおすすめなのは、通常CSSをスマホ向けに作り、広い画面に向けて min-width で段階的に上書きする方法です。そのうえで、小さいスマホだけ調整したい場合は480px未満、大きめスマホや小型タブレットの軽い調整には600px前後、タブレット以上の切り替えには768px以上、PC向けの2カラムやサイドバー表示には1024px以上を使うと実務で扱いやすくなります。

SEO記事やブログでは、スマホで本文が読みやすいことを最優先にしましょう。スマホでは1カラム、本文を先に表示、PC以上でサイドバーを横に置く構成が安全です。LPではファーストビュー、ECサイトでは商品カード幅、フォームでは入力しやすさ、ナビゲーションでは項目数を基準にして、コンテンツに合わせたブレークポイントを選ぶことが重要です。

最終的に大切なのは、数値を暗記することではなく、実際の表示を確認しながら調整することです。ブレークポイントは、デバイス名ではなくコンテンツの読みやすさと操作しやすさを守るために使います。必要以上に値を増やさず、スマホ基本、768px、1024pxを軸に設計すれば、SEOにもユーザー体験にも強いレスポンシブCSSを作りやすくなります。