responsive-design

レスポンシブデザイン

あらゆるデバイスや画面サイズにシームレスに適応するレイアウトを構築するための、包括的なレスポンシブウェブデザインのパターンです。これはサブスキルです。クロスデバイス対応が必要なデザインや構築のワークフローに取り入れてください。

このスキルを使用する場面

• モバイルとデスクトップの両方で動作する新しいページやコンポーネントを構築するとき
• レスポンシブレイアウトの問題を確認または修正するとき
• 固定幅のデザインをレスポンシブに変換するとき
• 新しいプロジェクトでブレークポイントシステムを設定するとき
• 複数のビューポート向けに画像やタイポグラフィを最適化するとき

標準ブレークポイントシステム

プロジェクトで別の指定がない限り、以下をデフォルトのブレークポイントとして使用してください。

:root {
  --breakpoint-sm: 640px;   /* Large phones */
  --breakpoint-md: 768px;   /* Tablets */
  --breakpoint-lg: 1024px;  /* Small desktops */
  --breakpoint-xl: 1280px;  /* Desktops */
  --breakpoint-2xl: 1536px; /* Large screens */
}

Tailwind の相当値： sm:, md:, lg:, xl:, 2xl:

ステップ 1：モバイルファーストのアプローチ

必ず最小の画面（320px 以上）から設計を始め、ビューポートが大きくなるにつれて段階的に拡張してください。

/* Base styles = mobile (no media query needed) */
.container {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Tablet and up */
@media (min-width: 768px) {
  .container {
    padding: 2rem;
    flex-direction: row;
    gap: 2rem;
  }
}

/* Desktop and up */
@media (min-width: 1024px) {
  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 3rem;
  }
}

ルール：

• 必ず min-width メディアクエリ（モバイルファースト）を使用し、max-width は使用しないでください
• HTML に必ず <meta name="viewport" content="width=device-width, initial-scale=1"> を含めてください
• 必ず相対単位（rem、em、%、vw、vh）を使用し、レイアウト幅に固定の px は使用しないでください
• width: 1200px のような固定幅は設定せず、代わりに max-width を使用してください

ステップ 2：レイアウトパターン

Flexbox — 1 次元レイアウトに使用

レスポンシブナビゲーション：

.nav {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

@media (min-width: 768px) {
  .nav {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

折り返すカード列：

.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.card {
  flex: 1 1 100%;           /* Full width on mobile */
}

@media (min-width: 768px) {
  .card { flex: 1 1 45%; }  /* 2 columns on tablet */
}

@media (min-width: 1024px) {
  .card { flex: 1 1 30%; }  /* 3 columns on desktop */
}

CSS Grid — 2 次元レイアウトに使用

自動レスポンシブグリッド（メディアクエリ不要）：

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

サイドバー付きダッシュボードレイアウト：

.dashboard {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 768px) {
  .dashboard {
    grid-template-columns: 250px 1fr;
    grid-template-rows: auto 1fr;
  }
}

@media (min-width: 1280px) {
  .dashboard {
    grid-template-columns: 280px 1fr 300px;
  }
}

選択ガイド

使用例	使用するもの
ナビゲーションバー、ボタングループ、ツールバー	Flexbox
カードグリッド、ギャラリー、商品リスト	Grid（auto-fit）
サイドバー付きのページ全体のレイアウト	Grid（明示的な列）
単一要素の中央揃え	Flexbox
複雑な 2 次元ダッシュボード	Grid

ステップ 3：レスポンシブ画像

解像度の切り替えに使用する srcset：

<img
  src="image-800.jpg"
  srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w"
  sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
  alt="Descriptive alt text"
  loading="lazy"
  decoding="async"
/>

<picture> によるアートディレクション：

<picture>
  <source media="(min-width: 1024px)" srcset="hero-wide.webp" type="image/webp" />
  <source media="(min-width: 768px)" srcset="hero-medium.webp" type="image/webp" />
  <img src="hero-mobile.jpg" alt="Hero image" loading="lazy" />
</picture>

ルール：

• 必ずファーストビューより下にある画像に loading="lazy" を指定してください
• 必ず意味のある alt テキストを指定してください
• 可能な場合は WebP/AVIF 形式を用意してください
• 画像のサイズを適切にしてください。モバイルに 2000px の画像を配信しないでください
• Astro のプロジェクトでは Astro の <Image> コンポーネントを使用してください（最適化が自動的に処理されます）

ステップ 4：流動的なタイポグラフィ

ブレークポイントなしで滑らかに拡大縮小するタイポグラフィには、clamp() を使用してください。

:root {
  /* clamp(min, preferred, max) */
  --text-sm: clamp(0.8rem, 0.75rem + 0.25vw, 0.875rem);
  --text-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  --text-lg: clamp(1.25rem, 1rem + 1vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.1rem + 1.5vw, 2rem);
  --text-2xl: clamp(1.875rem, 1.2rem + 2.5vw, 3rem);
  --text-3xl: clamp(2.25rem, 1.5rem + 3vw, 4rem);
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
p  { font-size: var(--text-base); }

ルール：

• 必ずフォントサイズに clamp() または相対単位を使用し、固定の px は使用しないでください
• 本文テキストの最小可読サイズ：16px（1rem）
• 行の高さは逆比例して調整してください。文字が大きいほど行の高さを小さくします
• タッチターゲット：インタラクティブ要素の高さは最低 44px

ステップ 5：コンテナクエリ（モダン CSS）

ビューポートとは独立してコンポーネント単位のレスポンシブ対応を行う場合に使用します。

.card-container {
  container-type: inline-size;
  container-name: card;
}

.card {
  display: flex;
  flex-direction: column;
}

@container card (min-width: 400px) {
  .card {
    flex-direction: row;
    align-items: center;
  }
}

@container card (min-width: 600px) {
  .card {
    gap: 2rem;
  }
  .card-image {
    flex: 0 0 40%;
  }
}

使用する場面：

• 異なるレイアウトコンテキスト（サイドバーとメインコンテンツなど）で使われる再利用可能なコンポーネント
• 本質的なレスポンシブ対応が必要なデザインシステムのコンポーネント
• ビューポートではなくコンテナに合わせて適応するウィジェットやカードのパターン

ブラウザーサポート： すべてのモダンブラウザーに対応しています。2025 年以降のプロジェクトで安心して使用できます。

ステップ 6：よく使われるレスポンシブパターン

要素の表示／非表示

.mobile-menu { display: block; }
.desktop-nav { display: none; }

@media (min-width: 768px) {
  .mobile-menu { display: none; }
  .desktop-nav { display: flex; }
}

レスポンシブな余白

.section {
  padding: clamp(2rem, 5vw, 6rem) clamp(1rem, 3vw, 4rem);
}

レスポンシブなテーブル → カードパターン

/* On mobile, transform table rows into stacked cards */
@media (max-width: 767px) {
  table, thead, tbody, th, td, tr {
    display: block;
  }
  thead { display: none; }
  td::before {
    content: attr(data-label);
    font-weight: bold;
    display: block;
  }
}

制約 — 厳守ルール

ルール	詳細
必須	すべての HTML ドキュメントに viewport メタタグを含める
必須	モバイルファースト（min-width）のメディアクエリを使用する
必須	レイアウトに相対単位（rem、%、vw）を使用する
必須	正確なブレークポイント（320、768、1024、1280、1536）でテストする
必須	タッチターゲットが 44px 以上であることを確認する
禁止	固定幅（width: 1200px）を使用する。代わりに max-width を使用する
禁止	すべてのブレークポイントで基本スタイルを重複させる（DRY）
禁止	デバイス固有のブレークポイント（例：「iPhone 14」）を使用する
禁止	モバイルで不可欠なコンテンツを非表示にする。代わりに再構成する

テストチェックリスト

レスポンシブ対応の実装を完了とする前に、以下を確認してください。

• 幅 320px（一般的なモバイルの最小サイズ）で正しく表示される
• 768px（タブレットの縦向き）で正しく表示される
• 1024px（タブレットの横向き／小型デスクトップ）で正しく表示される
• 1280px（標準的なデスクトップ）で正しく表示される
• 1536px 以上（大画面）で正しく表示される
• どのビューポートでも横スクロールバーが表示されない
• モバイルではタッチターゲットが 44px 以上ある
• 画像が適切に拡大縮小され、はみ出さない
• すべてのサイズでテキストが読みやすい（本文は最小 16px）
• すべてのビューポートでナビゲーションを利用できる
• モバイルでフォームを使いやすい（適切な入力タイプとサイズ）

Tailwind CSS クイックリファレンス

Tailwind（v3 または v4）を使用する場合は、レスポンシブ用プレフィックスを適用してください。

<div class="flex flex-col md:flex-row lg:grid lg:grid-cols-3 gap-4 md:gap-6 lg:gap-8">
  <div class="w-full md:w-1/2 lg:w-auto">...</div>
</div>


<h1 class="text-2xl md:text-4xl lg:text-5xl">Heading</h1>


<section class="px-4 py-8 md:px-8 md:py-12 lg:px-16 lg:py-20">...</section>


<nav class="hidden md:flex">Desktop Nav</nav>
<button class="md:hidden">Menu</button>

他のスキルとの連携

このスキルは、以下のスキルのサブスキルとして機能します。

• frontend-design — UI コンポーネントを構築する際に取り入れます
• local-business-rebuild — 見込み顧客のサイトはすべて完全にレスポンシブである必要があります
• website-rebuild — レスポンシブ対応は中核的な要件です
• prospect-qa — QA レビューでテストチェックリストを使用します