PCの画面できれいに作ったのに、スマホで見たらレイアウトが崩れていた——。
Web制作を始めたばかりの頃に、多くの人がぶつかる悩みです。
この悩みを減らしてくれるのが、「モバイルファースト」でコーディングするという考え方です。
この記事では、モバイルファーストの意味と具体的な書き方を、コード例つきでやさしく解説します。
PCで作ってからスマホ直すと、いつも崩れてしんどいねん…
この記事の対象読者
- スマホでレイアウトが崩れて困っている方
- モバイルファーストの意味を知りたい方
- レスポンシブの書き方を整理したい方
- Web制作を学び始めた方
モバイルファーストとは？
モバイルファーストとは、スマホ向けの表示を基準に設計・コーディングし、そこから大きい画面へ広げていくという進め方です。
従来の「PCから作ってスマホに縮める」やり方とは、順番が逆になります。
小さい画面という制約から始めることで、本当に必要な情報から整理できるのが利点です。
なぜモバイルファーストなのか
- スマホからの閲覧が主流：多くのサイトでモバイルの割合が高い
- 検索評価との相性：Googleはモバイル版を基準に評価する仕組みを採用している
- 設計が整理される：限られた画面から作ると、情報の優先順位がはっきりする
「まずスマホで見やすいか」を軸にすると、結果的にどの画面でも破綻しにくい作りになります。
実装の基本
①viewportメタタグを入れる
まず、HTMLのheadにviewportの指定を入れます。これがないと、スマホで正しく表示されません。
<meta name="viewport" content="width=device-width, initial-scale=1">②min-widthで「広がったら上書き」する
モバイルファーストでは、スマホ向けを基本スタイルにして、画面が広がったらmin-widthで上書きしていきます。
/* まずスマホ向けの基本スタイル */
.container {
padding: 16px;
}
/* 画面が768px以上に広がったら上書き */
@media (min-width: 768px) {
.container {
padding: 32px;
}
}反対に、PC基準で作る場合は「max-width」で小さい画面向けに上書きしていきます。メディアクエリの基本は、こちらの記事で解説しています。
③サイズを「可変」にする
固定のピクセルばかりだと、画面幅に対応しにくくなります。
画像はmax-width: 100%で親要素に収め、余白や文字は相対的な単位を使うと柔軟になります。
/* 画像を親要素からはみ出させない */
img {
max-width: 100%;
height: auto;
}
/* 文字サイズを画面幅に応じて可変にする */
h1 {
font-size: clamp(1.5rem, 5vw, 2.5rem);
}スマホを基本にして、広がったら足していくんやな。考え方が逆やったんか！
実装の流れ
- まずスマホ表示で、基本のスタイルを作り込む
- 画面を広げていき、崩れる幅でブレークポイント（min-width）を設ける
- タブレット・PC向けに、レイアウトや余白を調整する
ブレークポイントは「何px」と決め打ちにせず、コンテンツが崩れる幅を目安に置くのがおすすめです。
よくある失敗
- viewportの指定を忘れる：スマホで拡大表示になり崩れる
- PC基準で作り始める：あとからスマホ対応が大変になりがち
- 固定pxを多用する：画面幅に追従できず、はみ出しの原因に
- タップ領域が小さすぎる：スマホで押しづらくなる
スマホで表示が崩れるときの対処は、こちらの記事も参考になります。
まとめ
モバイルファーストは、スマホ向けを基本に作り、min-widthで大きい画面へ広げていくコーディングの進め方です。
viewportの指定・min-widthでの上書き・可変な単位、この3つを押さえれば、崩れにくいサイトが作れます。
まずは小さな部品から、スマホ基準で組む練習を始めてみましょう。
次からはスマホ基準で組んでみるわ。崩れが減りそうや、ありがとう！
よくある質問
- モバイルファーストとレスポンシブは違うのですか？
-
レスポンシブは複数の画面サイズに対応させる手法で、モバイルファーストはその設計・実装の順番（スマホを基準にする考え方）を指します。両者は組み合わせて使います。
- min-widthとmax-width、どちらを使えばいいですか？
-
モバイルファーストで作るなら、基本はmin-widthです。スマホ向けを基本スタイルにして、画面が広がったらmin-widthで上書きしていきます。
- ブレークポイントは何pxにすればいいですか？
-
決まった正解はありません。768pxや1024pxなどがよく使われますが、数字を決め打ちにするより、実際にコンテンツが崩れる幅に合わせて置くのがおすすめです。
- PCのデザインカンプしかない場合はどうすれば？
-
スマホで表示したときの並び順や優先度をイメージし、必要なら依頼者に確認しましょう。そのうえで、スマホ表示を基本に組み立てていくと進めやすくなります。
- viewportを入れないとどうなりますか？
-
スマホでPC向けの幅のまま縮小表示され、文字が小さく読みづらくなります。モバイル対応の第一歩として、必ず入れておきましょう。
