スマートフォン時代のブレイクポイント戦略｜過去の常識は通用しない

こんにちは！

今日は「スマートフォン時代に本当に必要なブレイクポイント設定」について解説します。

昔のブレイクポイント設定が機能しなくなった理由

僕が駆け出しの頃は、ブレイクポイントと言えば768pxと1024pxが定番やったんです。
「タブレットはこれ、PCはこれ」みたいな感じで、ほぼ業界統一みたいなものやったんですよ。
でもね、今この設定で実装すると、現場では本当に困ることが多いんです。

理由は単純で、デバイスの種類と画面幅の多様化が進み過ぎたからなんですよ。
今や390pxから2560pxまで、本当にありとあらゆる幅のデバイスが存在します。
フォルダブルスマートフォン、タブレット各種、ノートパソコン、ウルトラワイドモニター……正直、キリがありません。

さらに困るのが、「同じ画面幅でも、デバイスによって扱い方が全然違う」ってことなんです。
例えば820px幅のiPadと、820px幅のAndroidタブレットって、UXが全然違ったりするんですよ。
だから「この幅だからこのレイアウト」という単純な発想では、ユーザー体験が崩れてしまうわけです。

デバイス幅よりも「コンテンツ優先」のブレイクポイント設計

現場で成功している案件って、みんな同じ考え方をしてるんですよ。
それは「デバイス幅に合わせるのではなく、コンテンツが快適に読める幅に合わせる」という戦略です。

具体的に説明しますね。
例えば、あなたが作ってるサイトに記事一覧があるとします。
この記事カードを2列で表示するのか、3列で表示するのか？
昔の考え方なら「768px以上なら3列」みたいに決めるわけです。
でも現在の正解は「コンテンツがちゃんと読める幅になるまで、列数を増やさない」という考え方です。

つまり、こういう流れになります：

• 1列で表示してみる
• 横幅を広げていく
• 「あ、ここで2列にしたら見やすくなるな」という地点を探す
• その幅をブレイクポイントに設定する

僕の現場では、このプロセスを「コンテンツドリブン・ブレイクポイント」と呼んでるんです。
実装例を見てもらいましょう。

昔のやり方：

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

/* PC以上で3列 */
@media (min-width: 1024px) {
  .card-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

現在のやり方：

/* モバイル：1列 */
.card-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

/* コンテンツが2列で快適になる幅（例：640px） */
@media (min-width: 640px) {
  .card-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* コンテンツが3列で快適になる幅（例：1000px） */
@media (min-width: 1000px) {
  .card-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

見た目は似てるように思えるかもしれませんが、全然違うんですよ。
後者は「実際にそのサイトのコンテンツが快適に見える幅」に基づいてるからです。
ほんまこれ、現場で使うと、デザイナーさんからの修正指示が激減するんです。

実装時の落とし穴と対策方法

とはいえ、この考え方で実装するときには、めっちゃ注意が必要なポイントがあるんです。
僕も過去にハマった落とし穴をいくつか紹介しますね。

落とし穴1：「中途半端な幅」のテストを忘れる

コンテンツドリブンでブレイクポイントを設定すると、つい「480px」「640px」「1000px」みたいに、キリのいい数字だけでテストしがちなんです。
でも実際には、その間の「590px」とか「850px」みたいな幅でも表示されるわけです。

そういう中途半端な幅でも、ちゃんとレイアウトが崩れていないか確認する必要があります。
僕がよくやるのは、ブラウザの開発者ツールで「最大化→最小化を繰り返す」という地道な方法です。
めっちゃアナログですが、これ以上に確実な方法ないですよ。

落とし穴2：パディングとマージンが固定値のままになってる

よくあるミスが、コンテンツ幅は可変なのに、パディングやマージンは固定値のままってパターンです。
例えば：

/* これはダメな例 */
.container {
  max-width: 1200px;
  padding: 20px; /* 常に20px */
  margin: 0 auto;
}

この書き方だと、超小さいスマートフォン（例：320px）で表示した時に、paddingで20px取られて、実コンテンツ幅が280pxになっちゃうんです。
これ、めっちゃ窮屈で使いにくいサイトになりますよ。

対策としては、こんな感じでブレイクポイントごとにパディングを調整します：

/* モバイル */
.container {
  padding: 16px;
}

/* タブレット以上 */
@media (min-width: 640px) {
  .container {
    padding: 24px;
  }
}

/* PC以上 */
@media (min-width: 1000px) {
  .container {
    padding: 40px;
  }
}

あるいは、CSSのclamp()関数を使って、もっとスマートに書くこともできます。
これはブレイクポイントなしで、流動的にパディングを調整する方法です。

落とし穴3：メディアクエリの順番を間違える

僕が