モバイルファーストデザインは実際にどう機能するのか？ブレークポイントの基本と最適な設定数を解説

モバイルファーストデザインとは、まずスマートフォン向けにWebサイトを構築し、その後CSSのメディアクエリを使って、タブレットやデスクトップなどより大きな画面サイズでの表示を制御していく手法のことです。言い換えれば、メディアクエリを活用してWebサイトをレスポンシブ（さまざまな画面サイズに適応する設計）にしていく、ということです。

メディアクエリの基準となる画面幅のことを「ブレークポイント」と呼びます。たとえば、画面幅800pxを境にモバイルレイアウトからタブレットレイアウトへ切り替えたい場合は、次のようなメディアクエリを作成します。

@media screen and (min-width: 800px) {
  /* ここにタブレット用のスタイルを記述 */
}

これで800pxが最初のブレークポイントになります。

さらに、デスクトップ用のブレークポイントを1200pxに設定してみましょう。

@media screen and (min-width: 1200px) {
  /* ここにデスクトップ用のスタイルを記述 */
}

これが2つ目のブレークポイントとなり、合計2つのブレークポイントが揃いました。

上記のブレークポイントモデルを実際に使ったレイアウトのデモはこちらです。

https://codepen.io/StrengthandFreedom/pen/abzywPd

ご覧のとおり、「モバイル：0〜800px」「タブレット：800〜1200px」「デスクトップ：1200px以上」という3つの画面サイズ範囲ができあがりました。これを実現するために、合計2つのCSSメディアクエリ（ブレークポイント）を定義しています。

この例はシンプルなものですが、仕組みの要点は十分に伝わるはずです。ブレークポイントの間では、フォントサイズからレイアウト幅まで、あらゆる要素を自由に調整できます。

3つ以上のブレークポイントが必要になるケースはある？

状況によっては、2〜3個程度では足りず、よりきめ細かなアプローチが求められることもあります。100〜200pxごとにブレークポイントを設定し、10個も使用しているWebサイトを見たことがありますが、ほとんどのケースでは、それはやりすぎと言えるでしょう。

Webサイトに理想的なブレークポイントの数とは？

実は、正解となる「理想の数」は存在しません。重要なのは、サイトの特性（コンテキスト）に応じて判断することです。Webサイトが複雑になるほど、ターゲットユーザーが使う主要なデバイスや画面サイズで見栄えよく表示するために、より多くのブレークポイントが必要になるのが一般的です。

経験則として、平均的なWebサイトであれば2〜4個のブレークポイントでほとんどのケースをカバーできます。私自身は4個を使うことが多いです。

2個のブレークポイントを使う例はすでに紹介しました。次に、4個を使った例を見てみましょう。

4つのブレークポイントを使ったレスポンシブレイアウト

先ほどと同じ記事レイアウトに、ブレークポイントをいくつか追加して、より細かい制御を可能にします。モバイルで0pxから800pxへのジャンプは少し大きすぎると感じます。特にスマートフォンなどの端末を横向き（ランドスケープ）で使う場合、この設定ではうまく収まらないことがあります。

その理由は、フォントサイズ自体は大型のモバイルデバイスでも問題なく機能するものの、h1（見出し）がやや大きすぎるためです。同時に、画面幅が500pxを超えるあたりからコンテンツ幅が広すぎになり、1行の長さ（行長）が長くなって、1行あたりの文字数が増えすぎて読みにくくなります。快適な読書体験のためには、1行あたり40〜80文字程度に収めるのが理想的です。

この問題を解決するために、最初のブレークポイントを480pxに設定し、さらにデスクトップ以上のブレークポイントを1200pxではなく1900px（超大画面向け）に追加してみましょう。

4ブレークポイント版のデモはこちらです。

https://codepen.io/StrengthandFreedom/pen/mdyMMeL

ブラウザのウィンドウ幅を変更してみると、2ブレークポイントの例と比べて、4ブレークポイントのレイアウトではタイポグラフィがより滑らかに拡大・縮小（適応）することがわかります。これは、モバイルとタブレットの間にブレークポイントを追加したことで、コンテンツ幅や余白（パディング・マージン）、フォントサイズをより精密に制御できるようになったためです。

また、1900pxのブレークポイントは、外部モニターのような超大画面向けにデザインする際に役立ちます。最近では外部モニターを使う人がますます増えているため、こうした画面サイズを見過ごすべきではありません。

ブレークポイントを1つだけにすることはできる？

私はシンプルさを大切にしています。システムの構成要素が少ないほど、メンテナンスも容易になるからです。ただし、レイアウトをシンプルにできるのにも限界があります。

デザイナーや開発者の中には、Webサイト全体でブレークポイントを1つしか使わない人もいます。1つのブレークポイントということは、次の2つのレイアウトだけで構成するということです。

1. モバイルレイアウト
2. デスクトップレイアウト

この場合、ブレークポイントは通常、600〜960pxあたりの画面幅に設定されます。

しかし、さまざまな画面サイズやデバイスタイプに対応する必要がある現代において、それは少し楽観的すぎる設定だと言わざるを得ません。

さまざまなデバイスや画面サイズを使う幅広いユーザーに優れたユーザー体験を提供したいのであれば、通常は1つより多いブレークポイントが必要になります。

繰り返しになりますが、サイトの特性（コンテキスト）に応じてデザインを判断することが何よりも重要です。