CSSをわかりやすく：スマホでサイトが「崩れる」理由と売上への影響
CSS（Cascading Style Sheets）はサイトの見た目を決める言語です。色、フォント、余白、ブロック配置、スマホ画面への適応を担当します。HTMLがページの「骨組み」、JavaScriptがボタンやフォームの動きなら、CSSはモニターでも顧客のポケットでもどう見えるかを決めます。オーナーが「スマホでサイトが崩れる」と言うとき、ほぼいつもスタイルが原因です。固定幅、小さすぎる文字、画面外の「購入」ボタン、横スクロール、親指で入力できないフォーム。2026年、商用サイトのリードの半数以上はモバイルから - 悪いレイアウトはコンバージョンに直撃し、「あとで直す」では済みません。
- CSS - デザイン：色、フォント、グリッド、画面サイズ対応
- 「崩れる」 - 横スクロール、ブロックの重なり、文字の切れ、タップ領域外のボタン
- オーナーに必要な理由 - モバイル客は「PC版」を待たず競合へ行く
- 三層 - HTML（構造）+ CSS（見た目）+ JS（操作）；CSSなしは素のテキスト
- 最大リスク - PCのFigmaは完璧、iPhoneのカートは壊れている
CSSをわかりやすく
CSSはブラウザ向けのルール集です。「見出しは24px・青」「ボタンはスマホで全幅」「768px未満ではサイドメニューを非表示」。通常意味でのプログラミングではなく、見た目を書くもので、ビジネスロジックではありません。
| 層 | 役割 | たとえ |
|---|---|---|
| HTML | 見出し、本文、フォーム、リンク | 建物の骨組み |
| CSS | 色、フォント、余白、グリッド、レスポンシブ | 内装と間取り |
| JavaScript | カート、スライダー、入力チェック | エレベーター、警報、照明 |
| PHP / バックエンド | 注文、決済、DB | 壁の向こうの設備 |
重要： 業者のノートPCでは完璧に見えても、モバイル用CSSが未調整なら訪問者の70%はスマホで別物を見ています。
スマホでサイトが「崩れる」理由
「崩れる」はレスポンシブの問題を口語で言ったものです。典型症状とCSSの原因：
横スクロール
左右のスクロールバー - サイトが「切れて」見える。多い原因：
- 固定幅（例1200px）で
max-width: 100%なし； - 大きな価格表やカタログが狭い画面で組み替わらない；
- バナーや動画が画面より幅広い。
ブロックの重なり
文字がボタンに被る、価格が写真の下、メニューが見出しを隠す：
- 絶対配置で「1920pxモックのまま」配置；
- 小画面で余白不足；
- フォントが縮まずコンテナも伸びない - はみ出し。
文字とボタンが小さい
配送条件が読めない、「レジに進む」に当たらない：
- 本文14-16px未満；
- ボタン高さ44px未満（タップ領域の目安）；
- フッターリンクが詰まっている。
スマホで「PC版」のまま
開けるが全部小さい - ピンチズーム必須：
- HTMLにviewportなし；
- m.サブドメインでリダイレクト未設定；
- media queriesのない古いテンプレート。
コードなし5分チェック
- 自分のスマホで開く。
- トップ - 一覧 - 商品 - カート - 決済を通す。
- 縦横回転 - 崩れないこと。
- お問い合わせフォームを片手で入力。
- 同業の競合と比較。
モバイル崩れが売上を落とす仕組み
見た目の問題ではなくお金とリードの問題です。
| モバイル症状 | ユーザー行動 | ビジネス影響 |
|---|---|---|
| 横スクロール | イライラ、3-5秒で離脱 | リード損失 |
| 「購入」が見えない | 「近くでXを買う」検索 | 競合に売上 |
| フォームが収まらない | 途中離脱 | 広告・SEOのリード減 |
| 重いCSS/フォントで遅い | 4Gで4秒以上 | 最大40%が表示前に離脱 |
| 価格が読めない | 不信感 | トラフィックあってもCV低下 |
オーナー向け目安：
- 一部ECでセッションの53%+がモバイル。
- Googleはモバイルファーストインデックス - モバイルが弱いと順位と自然リードに影響。
- チェックアウトの致命的CSS修正で+10-30%注文完了は珍しくない（広告増なし）。
実務： 訪問数ではなくモバイルリードを見る。PC 4%、モバイル0.8%なら、ほぼレイアウト・速度・UXの問題です。
レスポンシブ、別モバイル、アプリ
レスポンシブデザイン
1サイト、CSSが幅に応じて組み替え。SEOに1 URL。欠点は最初からCSS品質が必要なこと。
別モバイル版
第2のページ群。二重管理、価格ズレ、インデックス混乱のリスク。
PWA /「アプリ」
リピート購入向き。ランディングだけなら過剰なことが多い。
| 方式 | 向くケース | 初期予算 |
|---|---|---|
| レスポンシブCSS | 新規、WordPress系 | 適切な実装に含まれる |
| CSS部分修正 | トラフィックあり、モバイルCV低下 | $500 - $3,000 |
| 全面リデザイン | ブランド古い、モバイル直帰60%超 | $3,000 - $15,000+ |
| ネイティブアプリ | MAU数十万 | $15,000〜 |
原則： 2026年の多くの中小企業は、主要ページでテスト済みの1レスポンシブサイトで足ります。アプリは壊れたモバイルの代わりにはなりません。
納品時に業者へ聞くこと
- どのページをモバイル検証したか？
- モバイルのPageSpeed / Core Web Vitalsレポートは？
- 全デバイス同一URLか？
- 納品後誰がCSSを触るか？
- モバイル表示保証を検収書に明記。
mobile usability付きのSEO監査は、見た目「まあまあ」でもCVを削るCSS問題を拾いがちです。
オーナーの典型ミス
- 納品をPCだけで見る。
- スマホもピクセル完全一致を要求（簡略化の方がCV上がることも）。
- ウィジェット追加をモバイル未確認。
- レイアウトをケチって広告に投資。
- WordPressテーマ変更後モバイル決済未テスト。
まとめ
CSSはサイトの見た目とスマホで使えるかです。「崩れる」はほぼスタイルとレスポンシブの話で、ウイルスやホスティングではありません。モバイルファースト時代、悪いレイアウトは直接的な売上損失 - 客は来たのに「購入」や価格が使えない。
やる価値があること：
- 支払い前に実機で購入導線を確認；
- 分析でPC vs モバイルCVを比較；
- 1 URLのレスポンシブCSSを要求（「モバイルは後」不可）；
- 4G速度を犠牲にする派手効果は避ける。
良いCSSは気づかれない - 客は普通に注文する。悪いCSSは広告とSEOにお金をかけ、半数にはポケットの中で「壊れたショーウィンドウ」が見える。
よくある質問
CSSとHTMLは同じ？
いいえ。 HTMLは構造、CSSはスタイル。HTMLなしでは装飾対象がなく、CSSなしでは90年代の文書のようになります。
PCでは正常、スマホだけ崩れるのはなぜ？
大画面は固定幅を許容、390pxでは同じスタイルが適応しないから。media queries不足、幅広テーブル、古いviewportが典型。対策はモバイルテストとCSS修正で、「PCで見て」ではない。
サイト全体を作り直さずモバイルだけ直せる？
多くの場合は可能 - トップ、一覧、チェックアウトのCSSを部分的に。全ページ硬い古いサイトはパッチと新テンプレの見積比較を。
崩れたサイトはGoogle順位に影響する？
はい。 モバイルフレンドリー、Core Web Vitals、行動シグナル。Yandexもモバイルを評価。SEOはレイアウトの代わりにはならず、順位があっても壊れた「電話」ボタンで客を失います。
ちゃんとしたレスポンシブの費用は？
規模次第。プロのレスポンシブLP $800 - $2,500、企業10-15テンプレ $2,500 - $8,000、カスタムEC $5,000 - $20,000+、既存WordPressのモバイルカートのみ $500 - $2,000。納品後10-15%を実機テストに - 注文ボタンが画面外のサイトに1ヶ月広告するより安い。