モバイルファーストとは？デザインとCSSでの考え方と実践方法

モバイルファーストがコンテンツ、レイアウト、CSSにとって何を意味するのか、デスクトップファーストとの違い、コード例とよくある失敗を解説します。

モバイルファーストとは、最も小さい画面を基準に先に設計・実装し、画面に余裕ができるにつれてレイアウトや機能を足していく考え方です。CSSでは、デフォルトのスタイルがスマホ表示になり、min-width のメディアクエリで広い画面向けの段組みを追加します。何が一番大事かを最初に決めることになるため、通信環境や画面の広さに最も制約のある訪問者にとって、軽くて速いページになりやすいのが特徴です。

設計プロセスとしてのモバイルファースト

この考え方は、デザイナーのルーク・ウロブルスキーが2009〜2011年ごろに広めたもので、コードより先に優先順位の話です。スマホの画面にはスクロールなしで見出し、1文、1つの操作ボタンほどしか収まりません。その広さから始めると、次のことを決めざるを得なくなります。

ページで最も重要な操作は何か
欠かせないコンテンツはどれで、飾りはどれか
1カラムしかないとき、どの順番で並べるか

その後タブレットやデスクトップへ広げるとき、増えたスペースは補足的なコンテンツに使われます。スマホ版に足りなかったものを埋めるためではありません。デスクトップのデザインから始めたチームは、あとから縮めたり隠したりすることになりがちで、それがスマホで重要な情報が消える原因になります。

モバイルファーストとデスクトップファーストのCSSの違い

同じレイアウトは、どちらの方向からでも書けます。

デスクトップファーストは、広いレイアウトをデフォルトにして max-width で要素を減らしていきます。

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }

@media (max-width: 1023px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 639px) {
  .cards { grid-template-columns: 1fr; gap: 1rem; }
}

モバイルファーストは、1カラムをデフォルトにして min-width で足していきます。

.cards { display: grid; gap: 1rem; }

@media (min-width: 640px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .cards { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
}

モバイルファーストの書き方には実務上の利点があります。スマホでは基本ルールだけが適用されるので、ブラウザが処理する上書きが少なくなります。スタイルを打ち消すのではなく積み上げていくため、CSSが追いやすくなります。また、メディアクエリを無視するブラウザやメールクライアントでも、押しつぶされたデスクトップ表示ではなく、使える1カラム表示になります。

フレームワークも同じ考え方です。Tailwind CSS でも Bootstrap でも、接頭辞なしのクラスは全サイズに適用され、ブレイクポイントの接頭辞は「この幅以上」を意味します。

モバイルファーストはパフォーマンスの話でもある

回線の弱いスマホに、デスクトップでしか使わないものをダウンロードさせるべきではありません。具体的には次のとおりです。

画像はデフォルトで小さいものを配信し、大きいものは srcset で出し分ける
地図、背景動画、大きなカルーセルなど重いコンポーネントは必要なときだけ読み込む
デスクトップ専用機能のJavaScriptは初期バンドルに含めない

Googleはページのモバイル版をインデックスするため、検索エンジンが評価するのもモバイルでの体験です。結果の測り方はモバイルでのサイト表示速度の測定で解説しています。

実際のプロジェクトでモバイルファーストを進める手順

まずコンテンツの階層を書き出す。 ビジュアルデザインの前に、ページの内容を優先順に1カラムで並べます。
360〜390pxのレイアウトを設計する。 現在使われているスマホの多くは、幅が360〜440 CSSピクセルの範囲です。
自然なブレイクポイントで広げる。 キャンバスを広げていき、レイアウトが間延びして見えたところにブレイクポイントを置きます。よく使われる値はレスポンシブのブレイクポイントの記事にまとめています。
CSSも同じ順番で書く。 スマホ向けの基本スタイルを先に書き、それ以外は min-width で追加します。
スマホサイズは最後ではなく作りながら確認する。 Chromeでスマホ表示を開いたままにしておくと楽です。DevToolsのデバイスモードでもよいですし、ワンクリックで切り替えられ、ページを移動してもスマホの枠を保つ Mobile View Extension も使えます。

モバイルファーストでよくある失敗

CSSだけモバイルファースト。 デザインをデスクトップで仕上げてしまっていたら、CSSをモバイルファーストで書いてもコンテンツの優先順位の問題は解決しません。
「モバイル」を1つのサイズとして扱う。 360pxと440pxのスマホでは幅が20%違います。両方と横向きも確認しましょう。
並べ替えずに隠す。 スマホで見せる価値がないなら、そもそも表示する価値があるのかを考えましょう。
大画面のタッチ操作を忘れる。 タブレットやタッチ対応ノートPCはデスクトップのレイアウトを表示しますが、ホバーがありません。ホバー前提の演出は @media (hover: hover) で囲みます。
モバイルファーストで、デスクトップは後回し。 広い画面にも配慮が必要です。長すぎる1行のテキストや引き伸ばされた画像は、同じプロセスのデスクトップ側の失敗です。

よくある質問

モバイルファーストとレスポンシブデザインの違いは？

レスポンシブデザインは目的で、どんな画面にも合わせて表示が変わる1つのサイトのことです。モバイルファーストはそこへたどり着くための方法で、最も小さい画面から始めます。詳しくはレスポンシブデザインとはをご覧ください。

メディアクエリは常にmin-widthを使うべきですか？

ほとんどのレイアウトではそうです。ただし、ある幅以下だけに適用する小さな調整など、例外的な場面では max-width も役に立ちます。

2026年でもモバイルファーストは有効ですか？

有効です。多くのサイトでトラフィックの大部分をスマホが占めており、Googleはページのモバイル版をインデックスします。モバイルから始めれば、そうした訪問者に機能を削った版を見せずに済みます。