この記事の対象: モバイル対応に課題を感じているWebデザイナー・フロントエンドエンジニア
読了時間: 約8分
モバイルファーストデザインの実践方法は、スマートフォン画面（375px幅）のデザインを最初に作り、min-widthメディアクエリでタブレット・PCへ拡張する——これが基本です。
ただし、画面サイズを切り替えるだけでは不十分です。コンテンツの優先順位をモバイル基準で決め、タッチ操作を前提にUIを設計し、表示速度を確保する。この3つを設計段階に組み込むことで、モバイルファーストが実務として機能します。
この記事では、モバイルファーストデザインの設計手順を5つのステップに分解し、コピペ可能なCSSコード例とSoreiine!!ギャラリー掲載の参考サイトを交えて解説します。
モバイルファーストデザインとは——まず押さえる前提
【画像挿入: モバイルファーストとデスクトップファーストの設計フローを比較した図解】
モバイルファーストとは、もっとも画面が小さいスマートフォンから設計を始め、タブレット→PCへと段階的に拡張する設計アプローチです。Luke Wroblewskiが2009年に提唱し、Googleのモバイルファーストインデックス導入で事実上の業界標準になりました。
PCから先にデザインする従来のやり方では、スマホ版が「PC画面の縮小コピー」になりがちです。モバイルファーストでは画面の物理的な制約がコンテンツの取捨選択を強制するため、情報設計そのものの質が上がる点が最大のメリットです。
Googleはモバイル版のページ内容を基準に検索順位を決定します。PC版がどれだけ作り込まれていても、モバイル版の体験が悪ければSEO評価は下がります。
モバイルファーストデザインの実践手順【5ステップ】
【画像挿入: 5ステップの全体フロー図】
ここからは、モバイルファーストデザインの具体的な実践手順を5つのステップで説明します。
ステップ1: コンテンツの優先順位を決める
モバイル画面では1カラムが基本です。PC版のように情報を横に並べられないため、何を上に置くか＝何がもっとも重要かを最初に決める必要があります。
手順は次のとおりです。
- サイトの目的（問い合わせ・購入・予約など）を1つに絞る
- ユーザーが最初に知りたい情報をリストアップする
- リストを優先度順に並べ、1カラムのワイヤーフレームに配置する
PC版ではサイドバーに置いていた情報も、モバイルでは本文の下に回るか、場合によっては削除対象になります。「あれもこれも」を捨てる判断が、モバイルファースト設計の本質です。
サイトの目的をどう整理するかは「なぜWebサイト制作は事業整理から始まるのか｜最初に問うべきこと」で具体的に解説しています。
ステップ2: 375px幅でワイヤーフレームを作る
FigmaやAdobe XDで幅375pxのフレームを用意し、ステップ1で決めた優先順位どおりにコンテンツを配置します。
このとき守るべきサイズ基準は以下のとおりです。
| 要素 | モバイルの推奨サイズ |
|---|---|
| 本文テキスト | 16px以上 |
| 見出し（H2） | 24〜28px |
| ボタンの高さ | 44px以上（Apple HIGの推奨値） |
| タップターゲット | 44×44px以上 |
| 行間（line-height） | 1.6〜1.8 |
本文を16px未満にすると、iOSのSafariがフォーム入力時に自動ズームする問題が発生します。これは「小さいフォントを拡大して読ませよう」というブラウザ側の補正ですが、ユーザー体験としては混乱を招くため、16px以上を死守しましょう。
ファーストビューには、「何のサイトか」「訪問者に何をしてほしいか」がひと目で伝わる要素だけを配置します。装飾はあと回し。情報を削りきれないときは、ステップ1の優先順位づけに立ち戻ってください。
ステップ3: モバイル基準のCSSを書く
CSSはモバイルのスタイルをデフォルトとして記述し、メディアクエリはmax-widthではなくmin-widthで書くのが鉄則です。
/* ベース: モバイル（375px〜） */
.container {
padding: 16px;
}
.grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
/* 768px以上: タブレット */
@media (min-width: 768px) {
.grid {
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
}
/* 1024px以上: PC */
@media (min-width: 1024px) {
.container {
max-width: 1200px;
margin: 0 auto;
padding: 24px;
}
.grid {
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
}
このコードのポイントは、メディアクエリの外にあるスタイルがそのままモバイル用になる点です。max-widthで書くと「PCのスタイルを打ち消してモバイル用に上書きする」という逆方向のコードになり、スタイルの衝突やメンテナンスの負荷が増えます。
CSS Gridを使ったレスポンシブパターンは「CSS Gridレイアウトの実践パターン集【コピペOK・2026年版】」に多数まとめています。
ステップ4: タブレット・PCへ拡張する
モバイルのデザインが固まったら、min-widthメディアクエリでタブレット（768px〜）とPC（1024px〜）のスタイルを段階的に追加します。
拡張時に見落としやすいポイントをチェックリストにまとめました。
- ナビゲーション: ハンバーガーメニュー → 横並びメニューへの切り替え
- グリッドカラム数: 1カラム → 2〜3カラムへ展開
- 装飾画像: モバイルで非表示にした背景画像をPC版で表示
- ホバーエフェクト: タッチデバイスではホバー状態が残る問題がある。
@media (hover: hover)で分離する
ホバーの扱いは頻出の問題です。次のように書くと、マウス操作ができるデバイスだけにエフェクトが適用されます。
/* ホバー可能なデバイスだけに適用 */
@media (hover: hover) {
.card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
transition: transform 0.2s, box-shadow 0.2s;
}
}
なぜこう書くのか: hover: hoverメディア特性は「ポインティングデバイスでホバーが可能か」を判定します。スマートフォンはこの条件に該当しないため、タッチ操作後にホバースタイルが解除されない不具合を防げます。
ステップ5: テストと検証
デザインとコードが揃ったら、3段階でテストします。
1. Chrome DevTools のデバイスモード
開発者ツール（F12）でデバイスモードを有効にし、iPhone SE・iPhone 15 Pro・Pixel 8・iPadのプリセットで表示崩れがないか確認します。特にiPhone SE（幅375px）は画面が小さく崩れが出やすいため、最優先でチェックしてください。
2. 実機テスト
DevToolsではタッチ操作のフィードバックやスクロールの慣性が再現されません。iOSとAndroidの実機を各1台ずつ用意し、ボタンのタップ感やフォーム入力の挙動を確認します。
3. Lighthouseによる計測
Chromeに内蔵されたLighthouseで「モバイル」モードのスコアを計測します。パフォーマンス・アクセシビリティ・SEOの3項目が80点以上を目標にしましょう。スコアが低い場合の具体的な改善方法は「Core Web Vitalsスコア改善の実践テクニック【2026年版】」を参照してください。
Soreiine!!ギャラリーに見るモバイルファースト設計の好例
【画像挿入: ギャラリー掲載サイトのモバイル・PC比較キャプチャ】
Soreiine!!ギャラリーに掲載されているサイトの中から、モバイルファーストの設計が実際にうまく機能している事例を紹介します。
【ギャラリーサイト名A（例: 飲食・サービス系サイト）】
【ギャラリーURL挿入】
ファーストビューにキャッチコピーとCTAボタンだけを配置し、スクロールで詳細情報に誘導する構成です。モバイルでは装飾を極力そぎ落とし、指1本で迷わず操作できるUIに仕上がっています。PC版に切り替えると同じ要素が2カラムレイアウトに展開され、画像とテキストのバランスが取れた構成に変化します。
見どころは、ハンバーガーメニューの開閉時に画面全体をオーバーレイで覆い、メニュー項目を大きく表示している点。タップターゲットに余裕があり、操作ミスが起きにくい設計です。
飲食店サイトのデザイン事例は「飲食店のホームページデザイン事例10選｜予約を増やすコツ」でも多数紹介しています。
【ギャラリーサイト名B（例: コーポレート・BtoB系サイト）】
【ギャラリーURL挿入】
写真を全面に使ったビジュアル重視のコーポレートサイトですが、モバイルでの読み込みが高速です。画像にはWebPフォーマットとloading="lazy"が適用されており、ファーストビュー以外の画像読み込みを遅延させることで初期表示を軽量化しています。
PC版ではグリッドレイアウトで施工実績を一覧表示しますが、モバイルでは1カラムに切り替わり、各画像が画面幅いっぱいに展開されます。スワイプでの画像切り替えにも対応しており、モバイルの操作体系に最適化されたUIです。
画像フォーマットの選び方や軽量化テクニックは「Web画像の最適化ガイド｜AVIF・WebP対応と軽量化テクニック【2026年版】」を参考にしてください。
PC先行デザインで起きる3つの失敗パターン
モバイルファーストを採用しないとどうなるか。PC先行で制作した場合に頻出する失敗パターンを3つ挙げます。自分のサイトに心当たりがあれば、リニューアルの検討材料にしてください。
文字が小さすぎて離脱される
PC版の14pxや12pxの本文サイズをそのままモバイルに持ち込むと、視認性が著しく落ちます。ユーザーはピンチズームを強いられ、ストレスから離脱率が上がります。モバイルの本文は16px以上が鉄則です。
横スクロールが発生する
テーブルや画像がビューポート幅を超えてはみ出すと、ページ全体に横スクロールが発生します。次のCSSで防止できます。
img, video {
max-width: 100%;
height: auto;
}
table {
display: block;
overflow-x: auto;
}
画像にはmax-width: 100%とheight: autoをセットで指定してアスペクト比を維持します。テーブルは要素単体でスクロールさせ、ページ全体への影響を封じ込める方法が実用的です。
ナビゲーションが操作できない
PC版のグローバルナビをそのまま縮小表示すると、リンク同士の間隔が狭すぎてタップミスが頻発します。モバイルではハンバーガーメニューに切り替え、各メニュー項目の高さを44px以上確保しましょう。
よくある質問
モバイルファーストとレスポンシブデザインは何が違う？
レスポンシブデザインは「画面幅に応じてレイアウトを変える」技術の総称です。モバイルファーストは、レスポンシブデザインの設計順序として「スマホ側から作り始める」アプローチを指します。レスポンシブが手段、モバイルファーストが設計の方向性という関係です。
ブレイクポイントは何pxに設定すべき？
768px（タブレット）と1024px（PC）の2段階で大半のケースに対応できます。特定の端末に合わせるよりも、実際にレイアウトが崩れる画面幅を基準に設定するのが実務的です。デバイスは毎年増えるため、端末名ではなくコンテンツの見え方で判断してください。
既存のPC先行サイトをモバイルファーストに書き替えるには？
CSSを全面的に書き直すのが確実な方法です。max-widthのメディアクエリをmin-widthに反転し、デフォルトのスタイルをモバイル用に変更します。部分的な修正で済ませようとすると、上書きルールが複雑化してメンテナンスが困難になります。
モバイルファーストはBtoBサイトでも必要？
BtoBサイトはPC閲覧の比率が比較的高い傾向にありますが、Googleのインデックスはモバイル版のページ内容が基準です。SEOの観点からモバイルファースト対応は必須です。通勤中や外出先でスマホから情報収集する担当者も増えており、ユーザー体験の面でも対応する価値があります。BtoBサイトの設計事例は「BtoB企業サイトのデザイン事例10選｜問い合わせを増やす設計【2026年】」も参考になります。
モバイルファースト対応のテストはどこまでやれば十分？
最低限、Chrome DevToolsでの表示確認・iOSとAndroidの実機各1台・Lighthouseのモバイルスコア計測の3つは実施してください。Lighthouseのパフォーマンス・アクセシビリティ・SEOが80点以上であれば、基本的な品質は確保できています。
まとめ
モバイルファーストデザインの実践手順を振り返ります。
- コンテンツの優先順位を決める — モバイルの1カラム制約で情報を取捨選択する
- 375px幅でワイヤーフレームを作る — ボタン44px以上、テキスト16px以上を守る
- モバイル基準のCSSを書く —
min-widthメディアクエリで拡張する方向に統一 - タブレット・PCへ拡張する — ナビ・グリッド・ホバーを段階的に追加
- テストと検証 — DevTools → 実機 → Lighthouseの3段階で確認
PC先行の制作フローが根づいている現場では、ステップ1のコンテンツ優先順位決めが最大のハードルになります。次のプロジェクトで、モバイルのワイヤーフレームを最初に描くことから始めてみてください。1度やれば「PC版は拡張するだけ」という感覚がつかめるはずです。
