モバイルファースト実装の基本と実践

レスポンシブ対応って、PCから作るかスマホから作るかで迷います。どっちがいいんですか？

迷うよね。今の制作では、スマホから作るモバイルファーストが基本になっています。理由と実装の流れをセットで整理しよう。

最初にスマホ用を作ってから、広い画面に足していく感じですか？

そういうこと。今日はその積み上げ方を、失敗例の直し方まで含めて実践で確認するよ。

モバイルファーストの考え方

モバイルファーストは、最初に狭い画面で読みやすく動くレイアウトを作り、画面が広くなるほど情報量を増やす設計です。後から削るより、後から足すほうがCSSの競合を減らしやすく、保守もしやすくなります。

モバイル起点で基本形を作る
- スマホで窮屈にならない1カラムを先に完成させると、土台が安定します
広い画面では追加で拡張する
- @media (min-width: ...) で列数や余白を段階的に増やすと管理しやすいです
上書きの衝突を減らせる
- 先にPC向けを作って縮める方法より、不要な打ち消しが少なくなります
体験を崩しにくい
- 通信環境や端末性能が厳しい環境でも、まず基本機能が成立しやすくなります

打ち消しが増える
狭い画面で上書きが多くなる

調整点が散らばる
どの幅で変えたか追いにくい

崩れの再発が起きやすい
一部修正で別幅が崩れやすい

追加の設計になる
必要な分だけ段階的に強化できる

意図が読み取りやすい
どの幅で何を足したか明確になる

保守がしやすい
競合が減り変更の影響範囲を追いやすい

min-widthで積み上げる基本

ここでは、学習カード一覧を題材に、モバイルを基準にした積み上げを作ります。最初は1カラム、次に2カラム、最後に3カラムへ拡張します。

HTML

<section class="course-list">
    <article class="course-card">HTML基礎</article>
    <article class="course-card">CSS基礎</article>
    <article class="course-card">JavaScript基礎</article>
    <article class="course-card">レイアウト実践</article>
    <article class="course-card">アクセシビリティ</article>
    <article class="course-card">公開と運用</article>
</section>

CSS

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

.course-card {
    padding: 16px;
    border-radius: 12px;
    background: #ecfdf5;
    color: #065f46;
    font-weight: 700;
}

@media (min-width: 640px) {
    .course-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        padding: 20px;
    }
}

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

CSSコード:

プレビュー:

※プレビューの右下にあるアイコンをドラッグして、実際の画面幅を動かして切り替えを確認できます。

min-widthで増やしていくと、ルールの意味が読み取りやすいですね。

その感覚が大事だよ。下から順に強化しているから、どの幅で何を追加したか追いやすくなるんだ。

実務で使える書き方テンプレート

ここでは「何を、どの順番で足していくか」が分かる書き方を練習します。

まず大事なのは次の3つです。

最初はスマホ1カラムで完成させる
- 先に土台を作ると、後で崩れた場所を見つけやすくなります
画面が広くなったときだけ追加する
- @media (min-width: ...) を使って、必要な変更だけ足します
なぜその幅かをコメントで残す
- 将来の自分やチームが見ても、判断理由をすぐ思い出せます

最小テンプレート（考え方の土台）

:root {
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
    padding: var(--space-4);
}

.dashboard-card {
    border-radius: 12px;
    padding: var(--space-4);
    background: #ffffff;
}

/* 640px: 2カラムを無理なく読める幅 */
@media (min-width: 640px) {
    .dashboard-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-4);
        padding: var(--space-5);
    }
}

/* 1080px: 情報密度を上げても詰まらない幅 */
@media (min-width: 1080px) {
    .dashboard-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-5);
        padding: var(--space-6);
    }
}

※この最小テンプレートと同じ考え方を、下の実務サンプルで「学習ダッシュボード」に広げています。

このあと確認するポイント
- 360px付近: 1カラムで読めるか
640px付近での変化
- 2カラムになっても文字が詰まらないか
1024px付近での変化
- 3カラムでも情報が窮屈にならないか
下段カードの扱い
- 優先タスクカードが横幅いっぱいで読みやすく保たれるか

HTMLコード:

プレビュー:

※右下アイコンのドラッグで、プレビューを枠外へ拡大して崩れ位置を確認できます。

ブレークポイントを実測で決める手順

モバイルファーストでも、境界値を感覚で決めると再現性が下がります。実装後は「どこで読みにくくなるか」を観察し、候補値を比較して決める流れを徹底します。

幅を連続で縮めて崩れを見つける
- 例として 420px → 390px → 360px の順に確認します
読みにくさの種類を記録する
- 行長、改行、タップミス、余白不足を分けてメモします
候補値を前後で比較する
- 例として 620px / 640px / 660px を並べて、見た目差を確認します
最終値に根拠コメントを付ける
- チームで同じ判断を再現できるように残します

観察メモの例（テキストで十分）

[component] dashboard-grid
 - 620px: 2カラムで本文が詰まり、ボタンが折り返す
 - 640px: 2カラムでも本文2行で収まり、タップ領域も確保
 - 660px: 問題なし
=> min-width: 640px を採用

境界値を安定させる判断軸

可読性
- 行長が長すぎないか、改行が不自然でないか
操作性
- ボタンとリンクのタップ領域が十分か
密度
- 情報を増やしても圧迫感が出ないか
再現性
- 別メンバーが見ても同じ値を選べる根拠があるか

崩れたときの切り分けフロー

モバイルファーストでも崩れは発生します。問題が出たときは、原因を種類で分けると修正が早くなります。

症状: 横スクロールが出る
- 原因候補: 固定幅、min-width の残存、長いURL文字列
- 先に確認する修正: width: 100%、overflow-wrap: anywhere、不要固定値の削除
症状: 文字が詰まって読みにくい
- 原因候補: 余白不足、列数過多、フォントサイズ不足
- 先に確認する修正: gap と padding の増加、1列への戻し、本文サイズの調整
症状: ボタンが押しづらい
- 原因候補: 高さ不足、間隔不足、隣接要素との密集
- 先に確認する修正: min-height、padding-block、要素間 gap の見直し
症状: 境界付近だけ崩れる
- 原因候補: 複数media queryの競合、条件順序の逆転
- 先に確認する修正: query順序の整理、不要な上書き削除、コメントで目的を明記

ありがちな失敗と修正

モバイルファーストでよくある失敗は、最初から固定幅や横並びを前提にしてしまうことです。まず失敗例を見て、どこで崩れるのかを確認しましょう。

失敗しやすいCSS

.profile-list {
    display: flex;
    gap: 16px;
}

.profile-card {
    width: 280px;
    padding: 16px;
    border-radius: 12px;
    background: #f0fdf4;
}

このコードはPCでは見えますが、スマホ幅ではカードが横にあふれてスクロールが発生しやすくなります。固定幅と横並びが先にあるためです。

修正後CSS（モバイル起点）

.profile-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.profile-card {
    width: 100%;
    padding: 16px;
    border-radius: 12px;
    background: #f0fdf4;
}

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

修正前: スマホで横はみ出し

幅360pxの画面に固定幅カードが2枚並ぶ

プロフィールA

プロフィールB

結果: 横スクロールが発生しやすい

修正後: モバイル起点で安定

初期1カラム。768px以上で2カラムへ拡張

プロフィールA

プロフィールB

768px以上: 2カラム

余白も段階的に拡張

結果: 可読性と操作性が維持される

失敗を防ぐ観点

固定幅から始めない
- モバイル起点では width: 100% を基本にすると崩れにくいです
横並びを初期値にしない
- まず縦積みにし、必要な幅で列を増やします
余白も段階的に拡張する
- 幅だけでなく gap や padding も min-width で足すと整います
実機幅で早めに確認する
- 360px前後で文字の折り返しとタップ領域を先に確認します

理解度チェッククイズ

モバイルファーストミニクイズ

モバイルファーストの説明として最も適切なのはどれですか？

最初にPCレイアウトを作って、後からスマホ向けを削る設計

最初にスマホ向けを作って、広い画面に向けて機能を追加する設計

画面幅ごとに完全に別HTMLを用意する設計

JavaScriptで画面幅判定してCSSを動的生成する設計

次のうち、モバイルファーストで一般的なmedia queryの書き方はどれですか？

@media (max-width: 768px)

@media (orientation: landscape)

@media (min-width: 768px)

@media (resolution: 2dppx)

スマホで横スクロールが出る原因として起こりやすいものはどれですか？

カードに width: 100% を指定した

カードに固定幅 width: 280px を指定し、横並びを初期値にした

メディアクエリで列数を増やした

paddingを16pxにした

モバイルファーストで保守しやすくするコツとして適切なのはどれですか？

先に複雑なPCレイアウトを作り、後で打ち消しを増やす

画面幅ごとにCSSファイルを完全に分離する

幅だけでなくgapやpaddingも段階的に調整する

すべての要素に!importantを付ける

次のうち、モバイルファーストの利点として適切でないものはどれですか？

CSSの上書き競合を減らしやすい

狭い画面での可読性を先に確保しやすい

通信環境が厳しい状況でも基本体験を作りやすい

すべての端末でブレークポイントが不要になる

まとめ

モバイルを先に作ると、設計の順番がはっきりして作業しやすいですね。

失敗例の修正を見て、固定幅より段階的な拡張のほうが安全だと分かりました。

その理解ができていれば十分です。モバイルで成立する基本形を先に作り、実測で幅を決め、崩れを切り分けながら丁寧に追加する。この手順を習慣にしよう。

モバイルファースト実装の要点

基本は狭い画面で完成させる
- 1カラムで読みやすさと操作しやすさを確保してから拡張します
min-widthで上に積み上げる
- 画面が広いほど、列数・余白・情報量を段階的に増やします
固定幅を初期値にしない
- はみ出しを避けるため、まず width: 100% と縦積みを基準にします
崩れの確認を早めに行う
- 360px前後を最初に確認すると、大きな手戻りを防げます
境界値は実測で決める
- 候補幅を前後比較し、根拠コメントとセットで運用します
崩れは症状別に切り分ける
- 横はみ出し、可読性低下、操作性低下を分けて対処すると修正が速くなります