レスポンシブデザイン

レスポンシブデザイン — media query・ブレイクポイント・モバイルファースト・viewport meta

現在、Webサイトのアクセスの半数以上はスマートフォンからです。PC向けに作ったサイトがスマートフォンで崩れて表示されると、ユーザーは離脱し、Google もSEO評価を下げます。レスポンシブデザインとは、1つのHTMLで画面サイズに応じてレイアウトを変化させる手法です。このレッスンでは media query の書き方、標準ブレイクポイントの設定方法、モバイルファーストアプローチ、そして必須の viewport meta タグを学びます。

---

viewport meta タグ（最重要・必須）

レスポンシブデザイン：media query・ブレイクポイント・モバイルファースト

レスポンシブデザインを機能させるために、HTML の <head> 内に必ず次のタグを記述します。

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

このタグがないと、スマートフォンでは PC 向けのレイアウトを縮小表示してしまい、media query が正しく機能しません。

⚠️ viewport meta タグはすべてのHTMLに必須: CSSがどれほど完璧に書かれていても、この1行がなければスマートフォンでの表示は崩れます。HTMLを書くたびに忘れずに記述してください。

---

media query の書き方

@media ルールは、条件（画面幅・デバイスの種類など）を指定し、その条件が真のときだけスタイルを適用します。

基本構文

@media (条件) {
  セレクタ {
    プロパティ: 値;
  }
}

min-width（画面幅が指定値以上）

/* デフォルト: スマートフォン向け */
.title { font-size: 1.5rem; }

/* 768px以上（タブレット以上）になったら適用 */
@media (min-width: 768px) {
  .title { font-size: 2rem; }
}

/* 1024px以上（PC以上）になったら適用 */
@media (min-width: 1024px) {
  .title { font-size: 2.5rem; }
}

max-width（画面幅が指定値以下）

/* デフォルト: PC向け */
.container { width: 1200px; }

/* 767px以下（スマートフォン）になったら適用 */
@media (max-width: 767px) {
  .container { width: 100%; }
}

複数条件の組み合わせ

/* タブレットのみ（640px〜1023px）*/
@media (min-width: 640px) and (max-width: 1023px) {
  .sidebar { display: none; }
}

/* 横向きデバイスのみ */
@media (orientation: landscape) {
  .hero { height: 50vh; }
}

---

ブレイクポイントの設定

ブレイクポイントとは、レイアウトを切り替える画面幅の境界値です。業界標準として広く使われているのは Tailwind CSS のブレイクポイントです。

すべてのブレイクポイントを使う必要はありません。プロジェクトに合わせて必要な境界値のみ設定します。多くの場合 768px（タブレット）と 1024px（PC）の2点で十分です。

💡 ブレイクポイントはデバイスではなくデザインで決める: 「iPhoneだから375px」ではなく「このレイアウトが崩れ始めるのが650pxだから650px」というように、実際のデザインの崩れ目でブレイクポイントを決めるのがベストプラクティスです。

---

モバイルファーストアプローチ

CSS を書く順序には2つの考え方があります。

モバイルファースト（推奨）

スマートフォン向けのスタイルをデフォルトとして書き、min-width で大きな画面へのスタイルを上書きします。

/* ① まずスマートフォン向け */
.nav-menu {
  display: none;          /* ハンバーガーメニューに隠す */
  flex-direction: column;
}

/* ② 768px以上でナビを表示 */
@media (min-width: 768px) {
  .nav-menu {
    display: flex;
    flex-direction: row;
  }
}

デスクトップファースト

PC 向けのスタイルをデフォルトとして書き、max-width でスマートフォン向けを上書きします。

/* ① PC向けデフォルト */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); }

/* ② 767px以下でスマートフォン用に変更 */
@media (max-width: 767px) {
  .card-grid { grid-template-columns: 1fr; }
}

どちらを使うべきか

⚠️ 新規開発は必ずモバイルファーストで: Google はモバイルファーストインデックスを採用しており、スマートフォンで表示される内容を基準にSEO評価します（CSSの書き順そのものは評価に影響しません）。スマートフォンでの表示品質を確保しやすいよう、新規プロジェクトではモバイルファーストで設計しましょう。

---

よく使うレスポンシブパターン

1. フレキシブルコンテナ

.container {
  width: 90%;          /* 画面幅の90%を使う */
  max-width: 1200px;   /* 最大幅を制限 */
  margin: 0 auto;      /* 中央揃え */
  padding: 0 16px;     /* 左右の最小余白 */
}

2. レスポンシブな画像

img {
  max-width: 100%;  /* 親要素を超えて広がらない */
  height: auto;     /* アスペクト比を維持 */
}

3. レスポンシブなFlexboxグリッド

.grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.grid-item {
  flex: 1 1 100%;  /* スマホは1列 */
}

@media (min-width: 640px) {
  .grid-item { flex: 1 1 calc(50% - 8px); }  /* タブレットは2列 */
}

@media (min-width: 1024px) {
  .grid-item { flex: 1 1 calc(33.333% - 11px); }  /* PCは3列 */
}

4. レスポンシブタイポグラフィ

h1 { font-size: 1.75rem; }  /* スマートフォン */

@media (min-width: 768px) {
  h1 { font-size: 2.5rem; }  /* タブレット以上 */
}

@media (min-width: 1024px) {
  h1 { font-size: 3rem; }    /* PC以上 */
}

あるいは clamp() 関数で1行で記述することもできます。

h1 { font-size: clamp(1.75rem, 5vw, 3rem); }
/* 最小1.75rem、5vw基準、最大3rem */

---

DevTools でレスポンシブを確認する

Chrome / Edge の DevTools（F12）にはデバイスシミュレーターが搭載されています。

1. ◆F12 を開く
2. ◆上部ツールバーのデバイスアイコン（スマートフォンとタブレットのアイコン）をクリック
3. ◆上部ドロップダウンからデバイスを選択（iPhone SE、iPad など）
4. ◆画面幅を任意にドラッグして確認することもできる

💡 実機確認は必須: DevToolsのシミュレーターは便利ですが、タッチ操作の挙動やフォント描画は実機と異なる場合があります。リリース前には実際のスマートフォンでの確認を必ず行いましょう。

---

🏋️実践ワーク

以下のワークを実施してください。

1. ◆viewport meta の効果確認: viewport meta タグを外した状態と付けた状態でスマートフォンシミュレーターで表示し、違いを確認してください。
2. ◆3段階レスポンシブグリッド: スマートフォン1列 / タブレット2列 / PC 3列の Flexbox グリッドを実装してください。
3. ◆レスポンシブナビゲーション: スマートフォンでは display: none で隠れるナビと、768px 以上で表示される Flexbox ナビを実装してください。
4. ◆clamp() タイポグラフィ: h1 に clamp(1.75rem, 5vw, 3rem) を設定し、画面幅をリサイズして文字サイズが滑らかに変化することを確認してください。

📝まとめ

レスポンシブデザインの3本柱は「viewport meta タグ」「media query」「モバイルファースト設計」です。viewport meta タグはすべてのHTMLページに必須で、これがない限りスマートフォンでの正常表示は保証されません。media query は min-width を使ったモバイルファーストで記述するのが、スマートフォンでの表示品質・パフォーマンスの両面で有利です。ブレイクポイントはデバイス名ではなく実際のデザインの崩れ目に設定します。width: 90%; max-width: 1200px; margin: 0 auto のコンテナパターンと img { max-width: 100%; height: auto; } の画像対応は、あらゆるプロジェクトで使える定番コードです。これでHTML/CSSの基礎コースが完了です。

---

よくある質問

ブレイクポイントは何pxに設定すべきですか？

多くのプロジェクトは768px（タブレット）と1024px（PC）の2点で十分です。Tailwind CSSの標準値（640/768/1024/1280/1536px）を基準にしつつ、最終的には「実際にレイアウトが崩れ始める幅」で決めます。特定の機種の画面幅に合わせるのは避けてください。

モバイルファーストとデスクトップファーストはどちらで書くべきですか？

新規開発はモバイルファーストです。スマートフォン向けのCSSを既定として書き、min-widthのmedia queryで大きな画面のスタイルを追加します。なお、Googleはスマートフォンで表示される内容を基準に評価するため、どちらの書き方でもスマートフォンで正しく表示されることが重要です（CSSの書き順そのものはSEO評価に影響しません）。既存のPCサイトを改修する場合のみ、max-widthで上書きするデスクトップファーストが現実的です。

viewport metaタグを入れないとどうなりますか？

スマートフォンがPC向けの幅（約980px）でページを描画し、それを縮小表示するため文字が極端に小さくなります。media queryも意図どおりに効きません。<meta name="viewport" content="width=device-width, initial-scale=1.0"> はすべてのHTMLに必須です。

レスポンシブデザインはSEOに影響しますか？

影響します。Googleはモバイルファーストインデックスを採用しており、スマートフォンで崩れる・文字が小さい・タップ要素が近すぎるページは評価が下がります。PC用とスマホ用でURLを分ける方式よりも、1つのHTMLで対応するレスポンシブデザインがGoogleの推奨です。