【コピペでOK】モバイルライクなHTML/CSSを作る時に絶対押さえるべき3つのポイント+デザイン基本原則

2025年10月29日

正直、最初はめんどくさいと思ってた

「スマホ対応、お願い」

顧客からこう言われた時、正直「めんどくせぇ…」と思いました。PCサイトは動いてるのに、なんでスマホ用にまた作り直さなきゃいけないの？って。

で、とりあえずメディアクエリだけ書いて「できました」って出したら、顧客にスマホで見せられて「これ、全然ダメじゃん」と。

崩れてるし、ボタン小さすぎて押せないし、文字も読みづらい。

あの時は本気で「Web制作、向いてないかも…」って思いました。

でも今振り返ると、実は3つのポイントと基本的なデザイン原則を押さえるだけで、ちゃんとしたモバイル対応ができるって分かったんです。

この記事では、私が失敗しまくって学んだ「モバイルライクなHTML/CSSを作る時に絶対に押さえるべきポイント」を共有します。

とりあえずコピペして動かしてみてください。30分あればできます。

1. 【超重要】viewportを設定しないと全てが無駄になる

viewportって何？（1分で理解）

スマホでサイトを見た時に、「このサイトはスマホ用に最適化されてますよ」とブラウザに教えるためのタグです。

これがないと、どうなるか？

PC用のサイトがそのまま縮小表示されます。文字が小さすぎて読めないし、ボタンも押せない。ピンチ操作で拡大しないと使えない、あの最悪な状態になります。

私は最初、これを知らずに1時間CSSをいじり続けて、全く改善しなくて絶望しました。

コピペするだけ：viewportの設定方法

HTMLの<head>タグ内に、これを貼るだけです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>あなたのサイト</title>
</head>

これだけ。本当にこれだけ。

width=device-widthは「画面幅をデバイスの幅に合わせる」という意味。initial-scale=1.0は「最初の表示倍率を100%にする」という意味です。

参考：レスポンシブデザインの作り方（VIVIDSOUL）

2. モバイルファーストCSSの書き方（実はこれが一番楽）

モバイルファーストって何？（難しく考えなくてOK）

「スマホ用のCSSを先に書いて、PC用は後から追加する」

これだけです。

なんでこっちが楽なのか？スマホの方がシンプルだから。PCは画面が広いので、余計な装飾やレイアウトを追加できますが、スマホは基本的にシンプルな1カラムで十分です。

メディアクエリの基本（コピペでOK）

/* スマホ用（基本スタイル） */
.container {
  padding: 16px;
  font-size: 14px;
}

/* タブレット以上 */
@media (min-width: 768px) {
  .container {
    padding: 32px;
    font-size: 16px;
  }
}

/* PC */
@media (min-width: 1024px) {
  .container {
    padding: 48px;
    max-width: 1200px;
    margin: 0 auto;
  }
}

ポイントはmin-widthを使うこと。

max-widthでPC用を先に書く方法もありますが、モバイルファーストならmin-widthです。これは「〇〇px以上の画面幅なら、このスタイルを適用する」という意味。

ブレイクポイントの目安

覚えなくていいですが、一応書いておきます。

スマホ: 〜767px
タブレット: 768px〜1023px
PC: 1024px〜

実務では、デザインに応じて微調整することもありますが、最初はこの数値でOKです。

参考：モバイルファーストでデザインするCSSの書き方（All About）

3. タッチ領域を意識する（これ忘れるとユーザーがイライラする）

ボタンが小さすぎて押せない問題

「リンク押そうとしたら、隣のリンク押しちゃった」

スマホで何度も経験したことないですか？これ、開発者側の責任です。

PCはマウスで正確にクリックできますが、スマホは指で操作します。指先は約10mm（40〜50px）なので、ボタンが小さすぎると絶対に押せません。

最低限押さえるべきサイズ

ボタンの最小サイズ: 48px × 48px
ボタンの推奨サイズ: 42〜72px
ボタン間の余白: 最低8px以上

/* ボタンの推奨スタイル */
.button {
  min-height: 48px;
  min-width: 48px;
  padding: 12px 24px;
  margin: 8px;
  font-size: 16px;
  border: none;
  border-radius: 4px;
  background: #007bff;
  color: #fff;
  cursor: pointer;
}

なぜ48pxなのか？

これは適当な数字じゃなくて、Android Material DesignとiOS Human Interface Guidelinesの両方で推奨されているサイズです。

さらに、GoogleのLighthouse（サイトのパフォーマンスを測定するツール）でも、タップ領域が48px未満だと警告が出ます。

つまり、48px以上にしておけば、ほぼ間違いないってことです。

参考：

モバイルサイトに最適なボタンサイズは？（アーティス）

Android: 最小のタップ領域サイズは48dp（Qiita）

モバイルデザインの基本原則（デザイン4原則的なやつ）

ここからは、もう少し踏み込んで「モバイルデザインの基本原則」を紹介します。

デザイン4原則（近接・整列・反復・対比）は有名ですが、モバイルデザインにはさらにモバイル特有の原則があります。

原則1: 余白（パディング・マージン）の基本

余白が適切じゃないと、詰まって見えたり、逆にスカスカに見えたりします。

推奨値（8の倍数ルール）

多くのデザインシステム（Material Design、iOS HIG）では、8pxを基準にした余白が推奨されています。

用途	推奨値
要素内の余白（padding）	8px、16px、24px、32px
要素間の余白（margin）	8px、16px、24px、32px
セクション間の余白	32px、48px、64px
画面の外側余白	16px〜24px

/* 基本的な余白の例 */
.card {
  padding: 16px; /* カード内の余白 */
  margin-bottom: 16px; /* カード間の余白 */
}

section {
  margin-bottom: 48px; /* セクション間の余白 */
}

body {
  padding: 16px; /* 画面の外側余白 */
}

なぜ8の倍数？

多くのデバイスの解像度が8の倍数で割り切れるため、ピクセルのズレが起きにくいからです。あと、単純に計算しやすい。

実務では厳密に守らなくてもいいですが、迷ったら8の倍数にしておけば無難です。

原則2: フォントサイズの基本

スマホで読みやすいフォントサイズは、PCとは全然違います。

推奨値

要素	推奨サイズ（スマホ）	推奨サイズ（PC）
本文（body）	14px〜16px	16px〜18px
小さい文字（注釈など）	12px〜13px	13px〜14px
見出し（h1）	24px〜32px	32px〜48px
見出し（h2）	20px〜24px	24px〜32px
見出し（h3）	18px〜20px	20px〜24px
ボタン・リンク	16px以上	16px以上

/* スマホ用フォントサイズ */
body {
  font-size: 14px;
  line-height: 1.6;
}

h1 {
  font-size: 24px;
  margin-bottom: 16px;
}

h2 {
  font-size: 20px;
  margin-bottom: 12px;
}

h3 {
  font-size: 18px;
  margin-bottom: 8px;
}

.small-text {
  font-size: 12px;
  color: #666;
}

/* タブレット・PC */
@media (min-width: 768px) {
  body {
    font-size: 16px;
  }
  
  h1 {
    font-size: 32px;
  }
  
  h2 {
    font-size: 24px;
  }
  
  h3 {
    font-size: 20px;
  }
}

重要なポイント：

本文は最低14px以上（13px以下は小さすぎて読みづらい）
行間（line-height）は1.5〜1.8が読みやすい
見出しは本文の1.5〜2倍のサイズが目安

原則3: コントラスト（色のコーディング規約）

スマホは外で使われることが多いので、画面が見づらい環境でも読めるように、コントラストをしっかり確保する必要があります。

WCAG 2.0の基準

通常の文字（18px未満）: 最低4.5:1のコントラスト比
大きい文字（18px以上）: 最低3:1のコントラスト比

/* 良い例：コントラストが高い */
.good-contrast {
  background: #ffffff; /* 白 */
  color: #333333; /* ダークグレー */
}

/* 悪い例：コントラストが低い */
.bad-contrast {
  background: #f0f0f0; /* 薄いグレー */
  color: #cccccc; /* さらに薄いグレー */
  /* これは読めない！ */
}

チェック方法：

Chrome DevToolsの「Lighthouse」を使う
WebAIM Contrast Checkerでチェック

原則4: シンプルな構造（1カラムレイアウト）

スマホは画面が狭いので、基本的に1カラムレイアウトが推奨されます。

PCでは2カラム・3カラムでも問題ないですが、スマホでそれをやると文字が小さくなりすぎて読めません。

/* スマホは1カラム */
.container {
  display: block;
}

.sidebar {
  display: none; /* サイドバーは非表示 */
}

/* PC以上は2カラム */
@media (min-width: 1024px) {
  .container {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 32px;
  }
  
  .sidebar {
    display: block;
  }
}

よくあるミス（これやらかすと顧客に怒られる）

ミス1: viewportを設定し忘れる

前述の通り、これがないと全部無駄です。必ずHTMLの<head>に書いてください。

ミス2: PC用のCSSが残ってる

メディアクエリの外側に書いたCSSは、スマホでも適用されます。

/* これはスマホでも適用される */
.box {
  width: 1200px; /* スマホでは画面からはみ出る！ */
}

/* これはPC以上でのみ適用される */
@media (min-width: 1024px) {
  .box {
    width: 1200px; /* OK */
  }
}

「なんか崩れてる」と思ったら、メディアクエリの外に書いたCSSが原因のことが多いです。

ミス3: 画像がはみ出る

画像のサイズを指定していないと、スマホで画面からはみ出ます。

/* 画像を画面幅に収める */
img {
  max-width: 100%;
  height: auto;
}

これはリセットCSSに入れておくと、全ての画像に適用されるので楽です。

ミス4: キャッシュで更新が反映されない

「CSS変えたのに反映されない！」

これは大体、ブラウザのキャッシュが原因です。

解決方法：

スーパーリロード：Ctrl + Shift + R（Windows）、Cmd + Shift + R（Mac）
ブラウザのキャッシュをクリア

私はこれで何度も時間を無駄にしました…

参考：CSSでレスポンシブ対応（侍エンジニアブログ）

【実践】今すぐ試せるサンプルコード

ここまでの内容をまとめた、実際に動くサンプルコードを用意しました。

HTMLの基本構造

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>モバイル対応サンプル</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>サンプルサイト</h1>
  </header>
  
  <main>
    <section class="hero">
      <h2>見出し2</h2>
      <p>これは本文です。スマホでも読みやすいように、フォントサイズは14px以上、行間は1.6に設定しています。</p>
      <button class="btn">ボタン（48px以上）</button>
    </section>
    
    <section class="content">
      <h3>見出し3</h3>
      <p>余白は8の倍数を基準にしています。このセクションの下には32pxの余白があります。</p>
    </section>
  </main>
  
  <footer>
    <p class="small-text">© 2025 Sample Site</p>
  </footer>
</body>
</html>

CSSの基本スタイル

/* ========== リセットCSS ========== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

img {
  max-width: 100%;
  height: auto;
}

/* ========== スマホ用（基本スタイル） ========== */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #333;
  padding: 16px;
}

header {
  background: #333;
  color: #fff;
  padding: 16px;
  margin: -16px -16px 24px;
}

h1 {
  font-size: 24px;
  font-weight: bold;
}

h2 {
  font-size: 20px;
  margin-bottom: 12px;
}

h3 {
  font-size: 18px;
  margin-bottom: 8px;
}

section {
  margin-bottom: 32px;
}

.btn {
  min-height: 48px;
  min-width: 120px;
  padding: 12px 24px;
  background: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
}

.btn:hover {
  background: #0056b3;
}

footer {
  margin-top: 48px;
  padding-top: 16px;
  border-top: 1px solid #ddd;
  text-align: center;
}

.small-text {
  font-size: 12px;
  color: #666;
}

/* ========== タブレット以上 ========== */
@media (min-width: 768px) {
  body {
    font-size: 16px;
    padding: 32px;
  }
  
  header {
    margin: -32px -32px 32px;
    padding: 24px 32px;
  }
  
  h1 {
    font-size: 32px;
  }
  
  h2 {
    font-size: 24px;
  }
  
  h3 {
    font-size: 20px;
  }
  
  section {
    margin-bottom: 48px;
  }
}

/* ========== PC ========== */
@media (min-width: 1024px) {
  body {
    max-width: 1200px;
    margin: 0 auto;
    padding: 48px;
  }
  
  header {
    margin: -48px -48px 48px;
  }
}

このコードをそのままコピペして、ブラウザで開いてみてください。スマホのシミュレーターで見ると、ちゃんとレスポンシブになっているはずです。