スマホで崩れるデザインが一番怖い——モバイルファーストの考え方

2026年5月1日 03:20

「PCで見るとちゃんと綺麗なのに、なぜか問い合わせが来ない」

この状態でスマートフォンでサイトを開いてみると

——文字が小さすぎて読めない、

画像がはみ出している、
ボタンが小さすぎてタップできない、
そもそもレイアウトが崩れている

——そんなケースが今でも珍しくありません。

Googleのデータによると、日本におけるスマートフォンからのWeb検索は全体の60%以上を占めています。BtoC向けのサービス（サロン・飲食・整体・個人事業主など）では、この比率がさらに高く、7〜8割がスマートフォンからの訪問というサイトも少なくありません。

つまり、PCで美しいデザインを作っても、スマートフォンで崩れていたら——大半の訪問者には「崩れたページ」しか届いていない。どれだけ丁寧にコンテンツを作っても、入口の段階で台無しになっています。

前回（第8回）は写真の話をしました。今回は「せっかく作ったページを、正しく届けるための土台」——モバイルファーストの考え方を話します。

なぜ「スマホで崩れる」が致命的なのか
モバイルファーストとは何か
スマートフォンで必ず確認すべき6つのポイント
よくある表示崩れのパターンと直し方
タップしやすい設計——スマホ特有の操作設計
スマホ表示を最適化するCSSの基本
モバイル対応でよくある失敗5選
今すぐできるモバイル確認の方法
まとめ

なぜ「スマホで崩れる」が致命的なのか

「デザインが崩れる」ということは、単に見た目が悪いという問題ではありません。

訪問者に与える影響を整理すると、こうなります。

1. 読めない・操作できない

文字が小さすぎれば読む気が失せます。ボタンが押せなければ行動できません。レイアウトが崩れて情報の順序が乱れれば、何を伝えたいのかが届かなくなります。

2. 「管理されていない」という印象

スマートフォン表示が崩れているページは「誰もスマホで確認していない」というサインです。「このサービスは細部に気を使っていない」という印象が、サービスへの信頼感を直接損ないます。

3. Googleの評価が下がる

2018年以降、Googleはモバイルファーストインデックスを採用しています。Googleがページを評価する際、スマートフォン表示を優先して評価します。スマートフォンでの表示品質が低いページは、検索順位が下がるリスクがあります。

つまり、モバイル対応は「見た目の問題」ではなく「集客に直結する問題」です。

モバイルファーストとは何か

モバイルファーストとは「スマートフォン向けのデザインを先に考え、それをPCに広げていく」という設計の順序・思想のことです。

従来は「PCのデザインを作ってから、スマートフォン向けに調整する」という順序が一般的でした（これを「グレイスフルデグラデーション」と呼びます）。

しかし現在は、スマートフォンでの閲覧が主流となったため、先にスマートフォン向けを設計し、後からPCの大きな画面に対応させる「モバイルファースト」が推奨されています。

なぜ順序が大事なのか

PCから始めてスマートフォンに落とし込む場合、どうしても「詰め込みすぎたデザイン」を小さな画面に押し込む作業になります。情報が多すぎる・デザインが複雑すぎる状態で、スマートフォン対応が後付けになる。

スマートフォンから始めると、最初から「小さな画面でも伝わる情報量・レイアウト」を考えることになります。結果として、スマートフォンでもPCでも機能するシンプルで良質なデザインが生まれやすくなります。

「レスポンシブデザイン」との関係

レスポンシブデザインとは、画面サイズに応じてレイアウトが自動的に変化するWebデザインの手法です。1つのHTMLで、PCでも・タブレットでも・スマートフォンでも適切に表示されるようにCSSで設計します。

モバイルファーストは「設計の思想」、レスポンシブデザインは「実装の技術」です。現在はこの2つをセットで実践することが標準になっています。

スマートフォンで必ず確認すべき6つのポイント

理論より先に、実際に「何を確認すべきか」をリスト化します。

自分のサイトをスマートフォンで開きながら、以下の6つを確認してください。

確認①：横スクロールが発生していないか

横にスクロールできる状態になっているページは、スマートフォン表示が崩れているサインです。

コンテンツが画面幅を超えてはみ出している、固定幅の要素がある、画像が親要素をはみ出している——これらが原因です。

スマートフォンでページを開き、横にスワイプして画面が動かないことを確認してください。動いた場合は表示崩れがあります。

確認②：テキストが16px以上で読みやすいか

スマートフォンの画面で、本文テキストを「読む」つもりで実際に読んでみてください。

「少し目を細めないといけない」「ズームしないと読みにくい」と感じたら、フォントサイズが小さすぎます。第4回（タイポグラフィ）でも触れた通り、本文は16px以上が基準です。

確認③：CTAボタンが親指でタップしやすいか

スマートフォンを片手で持ち、親指で自然にCTAボタンをタップできるかを確認します。

「小さくて押しにくい」「押したつもりが隣の要素に当たる」という状態は機会損失です。高さ48px以上・周囲に十分な余白（8px以上）があることが目安。

確認④：画像が画面内に収まっているか

画像が横にはみ出ていないか、縦に長すぎて画面の大部分を占領していないかを確認します。

CSSに `img { max-width: 100%; }` が設定されていれば、画像が画面幅を超えてはみ出ることは防げます。まだ設定していなければ今すぐ追加を検討してください。

確認⑤：フォームが使いやすいか

お問い合わせフォームや予約フォームがある場合、スマートフォンで実際に入力してみます。

入力欄が小さすぎる・入力時にページがズームされて見づらくなる・項目数が多すぎて途中で諦めたくなる——これらはフォームの離脱につながります。

入力欄（`<input>`）のフォントサイズを16px以上にするだけで、Safariの自動ズームが防げます。

確認⑥：ナビゲーションが使いやすいか

PCでは横並びのメニューが、スマートフォンでどう表示されているかを確認します。

ハンバーガーメニュー（≡）になっている場合、タップして開き・閉じが正常に動作するかを確認します。メニューが開かない・閉じない・タップ範囲が小さすぎるといった問題はよく起きます。

よくある表示崩れのパターンと直し方

実際によく起きる表示崩れのパターンと、その対処法を整理します。

パターン1：横スクロールが発生する

原因： 固定幅（`width: 800px` など）の要素がある、または `overflow: hidden` が設定されていない。

直し方：

/* 全体に適用するリセット */
* {
  box-sizing: border-box;
}

/* 横スクロールを防ぐ */
body {
  overflow-x: hidden;
}

/* 画像が画面幅を超えないようにする */
img {
  max-width: 100%;
  height: auto;
}

パターン2：PCのレイアウトがそのまま縮小されて文字が小さくなる

原因： viewport の meta タグが設定されていない。

HTMLの `<head>` 内に以下が含まれているか確認します。

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

これがないと、スマートフォンブラウザがPC表示を縮小して表示するため、全てが小さくなります。WordPressなど多くのCMSでは自動的に設定されていますが、古いテーマや手作りのHTMLでは抜けていることがあります。

パターン3：2カラムレイアウトがスマートフォンでも2カラムのまま

原因： メディアクエリで1カラムに切り替える設定がない。

PCでは2カラム（横並び）のレイアウトも、スマートフォンでは1カラム（縦並び）に変えることが基本です。

/* PCでは2カラム */
.container {
  display: flex;
  gap: 24px;
}

.column {
  width: 50%;
}

/* スマートフォンでは1カラムに切り替え */
@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }

  .column {
    width: 100%;
  }
}

パターン4：テーブル（表）が横にはみ出る

原因： `<table>` 要素は固定幅になりやすく、スマートフォン画面でははみ出しやすい。

直し方： テーブルを `overflow-x: auto` のコンテナで囲む。

.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

または、スマートフォンではテーブルを縦積みリストに変換するCSSを設定します。

パターン5：フォントサイズがスマートフォンでもPCと同じ大きいまま

PCでは見出しを48pxにしていても、スマートフォンでは大きすぎてレイアウトが崩れることがあります。

h1 {
  font-size: 48px;
}

@media (max-width: 768px) {
  h1 {
    font-size: 28px;
  }
}

スマートフォンでの見出しサイズは、PC比で60〜70%が目安です。

タップしやすい設計——スマホ特有の操作設計

スマートフォンの操作は「マウスのクリック」ではなく「指のタップ」です。この違いは、設計に大きな影響を与えます。

タップターゲットのサイズ

人間の指の接触面積は、平均で8〜10mm程度です。これより小さいボタンやリンクは「押したつもりが外れる」という体験を生みます。

目安：タップ可能な要素の最小サイズは 44×44px以上（AppleのHIG・GoogleのMaterial Design共通の推奨値）。

実際には、テキストリンク・アイコンボタン・ナビゲーション項目が小さくなりやすいポイントです。

タップ要素の間隔

ボタンやリンクが密集していると、意図しない要素をタップしやすくなります。

隣り合うタップ可能な要素の間には、最低8pxの余白を確保することが推奨されています。

「ホバー」に依存した設計をしない

PCデザインでは「ホバー時にメニューが展開する」「ホバー時に説明テキストが表示される」という設計をよく見ます。

しかし、スマートフォンには「ホバー」という概念がありません。タップするか・しないかの2択です。ホバーに依存した設計はスマートフォンでは機能しないため、スマートフォンでも確認できる形で情報を届ける設計が必要です。

入力フォームの操作性

スマートフォンでフォームに入力するとき、以下の設定が使いやすさに大きく影響します。

`input` の `type` 属性を適切に設定する

<!-- 電話番号入力欄は数字キーボードが開く -->
<input type="tel" name="phone">

<!-- メールアドレス入力欄は@が出やすいキーボードが開く -->
<input type="email" name="email">

<!-- 数値入力欄は数字キーボードが開く -->
<input type="number" name="quantity">

適切な `type` を設定するだけで、ユーザーが入力しやすいキーボードが自動的に表示されます。

フォームのフォントサイズを16px以上に

`<input>` や `<textarea>` のフォントサイズが16px未満だと、iOSのSafariが自動的にページをズームします。`font-size: 16px` 以上に設定することでこれを防げます。

スマホ表示を最適化するCSSの基本

より具体的なCSS設定をまとめます。これを全てのページに適用することで、多くの表示問題が解消されます。

最低限のリセットCSS

/* ボックスサイズの統一 */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 横スクロール防止 */
html, body {
  overflow-x: hidden;
}

/* 画像の最大幅制限 */
img, video, iframe {
  max-width: 100%;
  height: auto;
}

/* 本文の行間・フォントサイズ基準 */
body {
  font-size: 16px;
  line-height: 1.75;
}

/* タップ要素の最小サイズ */
a, button, input, select, textarea {
  min-height: 44px;
}

コンテンツ幅と余白の設定

/* コンテンツの最大幅を設定し中央揃えにする */
.container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px; /* スマートフォンで左右に余白を確保 */
}

/* スマートフォンでは余白を少し増やす */
@media (max-width: 768px) {
  .container {
    padding: 0 16px;
  }
}

メディアクエリのブレークポイント

/* スマートフォン向け（〜767px） */
@media (max-width: 767px) {
  /* スマートフォン専用スタイル */
}

/* タブレット向け（768px〜1023px） */
@media (min-width: 768px) and (max-width: 1023px) {
  /* タブレット専用スタイル */
}

/* PC向け（1024px〜） */
@media (min-width: 1024px) {
  /* PC専用スタイル */
}

モバイル対応でよくある失敗5選

失敗①：PCでしか確認しないまま公開する

「デザインが完成したからリリース」してスマートフォンで確認しない——最も多い失敗です。

制作プロセスに「スマートフォン実機確認」を必ずステップとして組み込むことが必要です。iOSとAndroidで表示が異なる場合もあるため、両方での確認が理想的です。

失敗②：ブラウザの開発者ツールの「スマートフォンシミュレーション」だけで確認する

Chrome・Safariの開発者ツールにはスマートフォン表示をシミュレートする機能があります。便利ですが、実機との表示は必ずしも一致しません。

特にフォント描画・タップ操作感・スクロール挙動・Safariのズーム動作などは実機でのみ確認できます。最終確認は必ず実機で行う習慣をつけてください。

失敗③：スマートフォン対応をあとで追加しようとする

「PCを作り終えてからスマートフォン対応する」という順序でも対応できますが、後付けになるほど修正が複雑になります。

最初からスマートフォンでの見え方を意識しながら設計することで、手戻りが減ります。「スマートフォンでも確認しながら作る」をルーティンにすると、最終的な工数が下がります。

失敗④：メニューのハンバーガーボタンが機能しない

スマートフォン表示でよく使われるハンバーガーメニュー（≡）ですが、JavaScriptの実装が不完全で「開かない」「閉じない」「閉じた後に背景がスクロールできない」などの問題が起きやすい部分です。

テーマやCSSフレームワークを使っている場合は正常に動作することが多いですが、カスタマイズした場合は動作確認が必須です。

失敗⑤：Googleが「モバイルフレンドリー」と判定しているか確認しない

Googleが無料で提供している「モバイルフレンドリーテスト（Google Search Console）」を使うと、Googleの評価基準でモバイル対応が確認できます。

問題があれば具体的な修正点も教えてくれます。対応後に再確認する習慣をつけることで、検索順位への影響を最小化できます。

今すぐできるモバイル確認の方法

チェック①：実機スマートフォンで今すぐ自分のサイトを開く

iPhoneまたはAndroidで自分のサイトのURLを開いてください。

横スクロールが起きないか・文字が読みやすいか・CTAボタンが押しやすいか——この3点だけ確認します。1つでも問題があれば、優先度の高い改善点です。

チェック②：Googleモバイルフレンドリーテストを使う

「モバイルフレンドリーテスト Google」で検索してアクセスし、自分のサイトのURLを入力します。

「モバイルフレンドリー」と判定されているかを確認し、問題点があればリストに書き出します。

チェック③：Chrome開発者ツールのスマートフォン表示で確認する

PCのChromeで自分のサイトを開き、F12キーを押して開発者ツールを開きます。「デバイスの切り替え」ボタン（スマートフォンとタブレットのアイコン）をクリックすると、各種スマートフォンの画面サイズでの表示を確認できます。

実機確認の補完として使います。

チェック④：viewportのmetaタグが設定されているか確認する

ページのHTMLソースを開き（ブラウザで右クリック → ページのソースを表示）、`<meta name="viewport"` が含まれているかを確認します。

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

この行がなければ今すぐ追加してください。スマートフォン表示の根本的な問題がこれで解消される場合があります。

チェック⑤：CSSに `img { max-width: 100%; }` が設定されているか確認する

サイトのCSSファイルを確認し、画像の最大幅制限が設定されているかを確認します。

設定がなければ追加します。これがないと画像が画面幅を超えてはみ出し、横スクロールの原因になります。

まとめ

スマートフォンで崩れるデザインは、見た目の問題ではありません。

訪問者の半数以上がスマートフォンで来ているのに「崩れたページ」しか見えていない状態は、集客の機会損失であり、信頼感の損失でもあります。

今日話したことを整理します。

日本のWebアクセスの60%以上がスマートフォンから。BtoCではさらに高い
スマートフォン表示の崩れは「読めない・押せない・信頼できない」という3つの問題を同時に起こす
Googleはスマートフォン表示を優先して評価する。モバイル対応は検索順位にも影響する
モバイルファーストとは「スマートフォン向けを先に設計する」という思想
必ず確認すべき6点：横スクロール・テキストサイズ・タップしやすさ・画像収まり・フォーム操作・ナビゲーション
最低限のCSS（box-sizing・overflow-x・img max-width・viewport meta）を整えるだけで多くの問題が解消する

今日からできること——3つだけ

今すぐスマートフォン実機で自分のサイトを開き、横スクロール・文字サイズ・CTAのタップしやすさの3点を確認する
HTMLソースに `<meta name="viewport" content="width=device-width, initial-scale=1.0">` が設定されているかを確認する
GoogleモバイルフレンドリーテストでサイトのURLを確認し、問題点をリストアップする

次回は「『サービスページ』が弱いと何も売れない——伝わる構成の作り方」。集客の仕組みが整ってきたところで、いよいよ「サービスを売る」ページの設計に入ります。サービスページは訪問者が「申し込もう」と決断する場所です。ここの構成が弱いと、どれだけ人が来ても購入・申し込みにつながりません。次回はその核心を話します。

スキやフォローしてもらえると、次の記事も届きやすくなります。よければ、ぜひ。