スマホ最適化（レスポンシブ）の仕組み｜TERASU 制作部署マニュアル

体感デモ ①メディアクエリ ②機種差の吸収 ③viewport ④PC無影響の証明 ⑤落とし穴

スマホ最適化（レスポンシブ）の仕組み

HP制作を事業にするうえで超重要な領域。「スマホのときだけ変えたらPCが崩れないか」「機種ごとに画面サイズが違うのにどう対応するか」——この2つを、仕組みから完全に理解する。

このページの結論（先に2行）

①「スマホだけ変えてPCに影響しないか」は、メディアクエリ（@media）の中に書けば構造的に影響しない＋変更後にPCをピクセル比較すれば100%証明できる。

②「機種ごとにサイズが違う問題」は、ブレークポイント＋ clamp / vw（相対単位）で自動吸収する。1機種ずつ対応はしない。

TERASU HPはすでにこの設計になっている。土台はできているので、あとは原則どおり触るだけ。

まず体感から。下のスライダーを左右に動かすと、同じTERASU風HPのコードが画面幅によってどう振る舞うかを再現する。880px の瞬間に注目。

画面幅幅 1100 px

TERASU

会社概要制作実績料金お問い合わせ

無料相談

選ばれるHPを、
その価格で。

成果につながるWebサイトを、スピードと品質で。

無料で相談する

※ デモは「画面幅でCSSが切り替わる」挙動を再現したもの。実際のサイトは下で説明する @media と clamp / vw でこれを実現している。

1「スマホのときだけ」の正体＝メディアクエリ

CSSには「画面幅がこの範囲のときだけ適用する」という書き方がある。これが @media（メディアクエリ）。レスポンシブの根幹。

土台は共通、スマホ分だけ「上書き」する

style.css

.見出し { font-size: 32px; }          /* PC・スマホ共通の土台 */
@media (max-width: 880px) {        /* 幅880px以下のときだけ読まれる */
  .見出し { font-size: 20px; }       /* スマホだけ上書き */
}

@media (max-width: 880px) { … } の中括弧の中身は、幅880px以下のときしか存在しないのと同じ。PC（880px超）では完全に無視される。

「スマホだけ直したつもりがPCも変わった」事故の正体 @media の外（共通の土台）を変えると、PC・スマホ両方に効く。スマホ調整は必ず @media の中に書く ——これが鉄則。中に書く限り、PC版には絶対に影響しない。

覚え方：「@media の中＝スマホ専用の部屋」。部屋の中をどう模様替えしても、部屋の外（PC）には何も起きない。

2機種でサイズが違う問題 → 2段構えで吸収する

スマホは機種ごとに画面幅がバラバラ。でも1機種ずつ対応はしない（非効率＆新機種が出るたび破綻する）。代わりに「ざっくり分岐」＋「自動で埋める」の2段構えで吸収する。

機種	横幅の目安
iPhone SE	375px
iPhone 15	393px
Android（各種）	360〜412px
iPhone Pro Max	430px

① ブレークポイントで「ざっくり分岐」

「880px以下はスマホ用、超えたらPC用」と境目を1本だけ引いて、その上下で大きくレイアウトを切り替える。

カード3列 ⇄ 1列
横ナビ ⇄ ハンバーガーメニュー

（＝デモで880pxの瞬間に切り替わったあれ。）375も393も430も「みんなスマホ用」で一括カバーできる。

② 相対単位で「機種差を自動で埋める」

固定px（width:300px）だと、小さい機種でははみ出す。代わりに割合で伸縮させる。

単位	意味
vw	画面幅の1%（100vw＝画面いっぱい）
clamp(下限, 理想, 上限)	下限と上限を決めて、間は画面幅に比例して自動で伸縮

機種差をコード無改造で吸収

.見出し { font-size: clamp(20px, 4vw, 32px); }

これなら 375pxでも430pxでも、コードを一切変えずに自動でちょうどいいサイズになる（デモで見出しが滑らかに変わったのがこれ）。

TERASU HPの実態 TERASU HPは実際に clamp を 141 箇所、vw を 231 箇所使っている。だから機種が変わっても勝手に馴染む。土台はすでにできている。

3大前提＝ viewport タグ

そもそも全ページの先頭にこの1行が無いと、スマホ最適化は成立しない。

<head> の中（全ページ必須）

<meta name="viewport" content="width=device-width, initial-scale=1">

これは「スマホに実寸で表示して」という宣言。

有り → スマホは自分の幅（375px等）で表示 → @media が正しく効く
無し → スマホがPC幅(980px)で表示し、全体を縮小 → 文字が極小になって読めない

TERASUは全ページ完備済み。新規ページを作ったときだけ「入っているか」を確認する。

4「PC版に影響ないか不安」への確実な答え＝機械で証明する

不安なときは推測しない。「たぶん大丈夫」は危ない。機械で証明する。

変更の前後で、PCのスクショをピクセル照合する

変更前に、PC表示のスクリーンショットを撮る
スマホ向けの修正を入れる（必ず @media の中に）
変更後に、もう一度PC表示のスクショを撮る
2枚を機械照合 → 1ピクセルも変わっていない＝PCへの影響ゼロが証明できる

これは実際に毎回やっている方法先日フォームを直したときも、このbefore/after比較でPC側の崩れを「公開前に」先に検知して防いだ。スマホだけ見て進めず、最後は必ずPCを突き合わせる。

5落とし穴（これだけ避ければ事故らない）

逆に言えば、この3つさえ守れば崩さない。

スマホ調整は必ず @media の中に書く（外はPCに波及する）
既存のブレークポイントに合わせる。TERASUは 880px。勝手に768pxなど新しい境目を足すと、768〜880pxの間で挙動が食い違って崩れる
PCを触らない変更でも、最後は必ずPCのbefore/afterで確認する

一番やりがちなミス新しいブレークポイント（768px等）を勝手に追加すること。境目が2本になると、その2本の間の幅でレイアウトが矛盾して崩れる。境目はTERASU基準の880pxに統一。

まとめ＆チェックリスト

「スマホだけ変えてPCに影響しないか」という不安は、次の2枚で完全に守れる。

影響しない理由（構造）

メディアクエリの中に書けば、PCには構造的に影響しない。

影響しない証明（検証）

変更後にPCをピクセル比較すれば、影響ゼロを100%証明できる。

機種差はブレークポイント＋clamp/vwで自動吸収。TERASU HPはすでにこの設計なので、土台はできている。

スマホ修正のときに確認する5項目

その変更は @media (max-width:880px) の中に書いたか
共通の土台（@mediaの外）をうっかり変えていないか
新しいブレークポイントを足していないか（880pxに統一）
サイズは固定pxでなく clamp / vw で機種差を吸収しているか
変更後、PCのbefore/afterをピクセル比較して影響ゼロを確認したか

← Prevアクセシビリティ Next →SEOとは

制作部署マニュアル