Frontend Responsive Design Standards

フロントエンドのレスポンシブデザイン標準

ルール： 一貫したブレークポイント、流動的なレイアウト、相対単位、タッチ操作に適したターゲットを使用し、モバイルファーストで開発します。

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

• モバイル、タブレット、デスクトップで動作するレイアウトを作成または変更するとき
• モバイルレイアウトから始めるモバイルファーストのデザインパターンを実装するとき
• メディアクエリやブレークポイント固有のスタイルを記述するとき
• 拡張性のために、固定ピクセルではなく柔軟な単位（rem、em、%）を使うとき
• パーセンテージベースの幅やフレックスボックス／グリッドを使って流動的なレイアウトを実装するとき
• モバイルのタッチターゲットが最小サイズ要件（44x44px）を満たすようにするとき
• さまざまな画面サイズやモバイルネットワークに合わせて画像やアセットを最適化するとき
• 複数のデバイスサイズやブレークポイントで UI をテストするとき
• すべての画面サイズで読みやすいタイポグラフィを維持するとき
• レイアウトの判断を通じて、小さい画面でのコンテンツ表示を優先するとき
• CSS フレームワーク（Tailwind、Bootstrap のレスポンシブクラス）のレスポンシブデザイン用ユーティリティを使うとき

このスキルは、フロントエンドのレスポンシブ対応に関するコーディング標準に準拠する方法について、Codex に具体的なガイダンスを提供します。

モバイルファースト開発 - 必須

必ずモバイルのレイアウトから始め、その後、大きな画面向けに拡張してください。

悪い例（デスクトップファースト）：

.container {
  width: 1200px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 768px) {
  .container {
    width: 100%;
    grid-template-columns: 1fr;
  }
}

良い例（モバイルファースト）：

.container {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: 1200px;
    grid-template-columns: repeat(4, 1fr);
  }
}

モバイルファーストにする理由：

• コンテンツの優先順位付けを促します
• モバイルでのパフォーマンスが向上します（上書きが不要です）
• グレースフルデグラデーションよりプログレッシブエンハンスメントを優先します

標準ブレークポイント

プロジェクトのブレークポイントを特定し、一貫して使用してください。

一般的なブレークポイント体系：

Tailwind：

sm: 640px   (small tablets)
md: 768px   (tablets)
lg: 1024px  (laptops)
xl: 1280px  (desktops)
2xl: 1536px (large desktops)

Bootstrap：

sm: 576px
md: 768px
lg: 992px
xl: 1200px
xxl: 1400px

新しいブレークポイントを作成する前に、既存のコードベースで定義を確認してください。

使用例（Tailwind）：

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4">

使用例（CSS）：

@media (min-width: 768px) { }
@media (min-width: 1024px) { }

明示的な要件がない限り、850px や 1150px のような任意のブレークポイントは使用しないでください。

流動的なレイアウト

画面サイズに合わせて調整される柔軟なコンテナーを使用してください。

悪い例（固定幅）：

.container { width: 1200px; }
.sidebar { width: 300px; }
.content { width: 900px; }

良い例（流動的）：

.container {
  width: 100%;
  max-width: 1200px;
  padding: 0 1rem;
}

.layout {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
  .layout {
    grid-template-columns: 300px 1fr;
  }
}

流動的なレイアウトのパターン：

• フレックスボックス：flex: 1、flex-grow、flex-shrink
• グリッド：1fr、minmax()、auto-fit、auto-fill
• パーセンテージ幅：width: 100%、max-width: 1200px
• コンテナクエリ（最新のブラウザー）：@container (min-width: 400px)

固定ピクセルではなく相対単位を使用

拡張性とアクセシビリティのために rem/em を使用してください。

悪い例：

font-size: 16px;
padding: 20px;
margin: 10px;
border-radius: 8px;

良い例：

font-size: 1rem;      /* 16px base */
padding: 1.25rem;     /* 20px */
margin: 0.625rem;     /* 10px */
border-radius: 0.5rem; /* 8px */

各単位の使い分け：

• rem：フォントサイズ、余白、レイアウト寸法（ルートのフォントサイズに応じて拡大縮小）
• em：コンポーネントに対する相対サイズ（親のフォントサイズに応じて拡大縮小）
• %：親要素に対する相対的な幅、高さ
• px：境界線（1px）、シャドウ、ごく小さな値
• vw/vh：ビューポート全体の寸法、ヒーローセクション
• ch：テキストに基づく幅（例：読みやすい行長にするための max-width: 65ch）

フレームワークのユーティリティを使えば、この処理を自動化できます。

<div className="text-base p-5 m-2.5 rounded-lg">

タッチ操作に適したデザイン

タッチターゲットの最小サイズ：44x44px（iOS）／48x48px（Android）

悪い例：

.icon-button {
  width: 24px;
  height: 24px;
}

良い例：

.icon-button {
  width: 24px;
  height: 24px;
  padding: 12px; /* Total: 48x48px */
  /* Or use min-width/min-height */
  min-width: 44px;
  min-height: 44px;
}

タッチターゲットのチェックリスト：

• ボタンは最小でも 44x44px
• テキスト内のリンクには十分な間隔を確保する
• フォーム入力欄には十分な高さを確保する（最小 44px）
• アイコンボタンには、タップ可能な領域を広げるためのパディングを設定する
• インタラクティブな要素間に間隔を設ける（最小 8px）

読みやすいタイポグラフィ

ズームせずに読みやすいフォントサイズを維持してください。

悪い例：

body { font-size: 12px; }
.small-text { font-size: 10px; }

良い例：

body { font-size: 1rem; } /* 16px minimum */
.small-text { font-size: 0.875rem; } /* 14px minimum */

タイポグラフィのガイドライン：

• 本文：最小 16px（1rem）
• 小さい文字：最小 14px（0.875rem）
• 行の高さ：本文は 1.5、見出しは 1.2
• 行の長さ：45～75 文字（max-width: 65ch を使用）
• コントラスト：WCAG AA 以上（通常のテキストで 4.5:1）

レスポンシブなタイポグラフィ：

h1 {
  font-size: 2rem;
}

@media (min-width: 768px) {
  h1 {
    font-size: 2.5rem;
  }
}

@media (min-width: 1024px) {
  h1 {
    font-size: 3rem;
  }
}

または clamp を使った流動的な指定：

h1 {
  font-size: clamp(2rem, 5vw, 3rem);
}

モバイルでのコンテンツの優先順位

最も重要なコンテンツを先に表示し、二次的なコンテンツは非表示にするか折りたたみます。

悪い例：

<div>
  <Sidebar /> {/* Full sidebar on mobile */}
  <MainContent />
</div>

良い例：

<div className="flex flex-col lg:flex-row">
  <MainContent className="order-1" />
  <Sidebar className="order-2 hidden lg:block" />
</div>

方法：

• モバイルでは必須でない要素を非表示にします
• ナビゲーションにはハンバーガーメニューを使用します
• 二次的なコンテンツにはアコーディオンやタブを使って折りたたみます
• モバイルではレイアウトを縦に並べます
• order プロパティを使ってコンテンツの順序を変更します

画像の最適化

デバイスのサイズに適した画像を配信します。

悪い例：

<img src="hero-4000x3000.jpg" alt="Hero">

良い例：

<img
  src="hero-800x600.jpg"
  srcset="
    hero-400x300.jpg 400w,
    hero-800x600.jpg 800w,
    hero-1600x1200.jpg 1600w
  "
  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 800px"
  alt="Hero"
>

または、最新のフォーマットを使います。

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Hero">
</picture>

フレームワーク別：

// Next.js
<Image
  src="/hero.jpg"
  width={800}
  height={600}
  sizes="(max-width: 768px) 100vw, 50vw"
  alt="Hero"
/>

デバイス間でのテスト

作業を完了する前に、主要なブレークポイントでレイアウトを確認します。

テストチェックリスト：

• モバイル（375px - iPhone SE）
• 大型モバイル（414px - iPhone Pro Max）
• タブレット（768px - iPad）
• ノートパソコン（1024px）
• デスクトップ（1440px）

テスト方法：

1. ブラウザーのDevToolsのレスポンシブモード
2. 実機でのテスト（iOS/Android）
3. ブラウザー拡張機能（Responsive Viewer）
4. 自動ビジュアルリグレッションテスト

確認する一般的な問題：

• モバイルで横スクロールが発生する
• テキストがはみ出す、または切り詰められる
• 要素が重なり合う
• フォントサイズが小さく読みづらい
• タッチターゲットが小さすぎる
• 画像が読み込まれない、または歪んで表示される

一般的なレスポンシブパターン

ナビゲーション：

// Mobile: Hamburger menu
// Desktop: Horizontal nav
<nav className="lg:flex lg:items-center">
  <button className="lg:hidden">Menu</button>
  <ul className="hidden lg:flex lg:gap-4">
    <li>Home</li>
    <li>About</li>
  </ul>
</nav>

グリッドレイアウト：

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

@media (min-width: 640px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .grid { grid-template-columns: repeat(4, 1fr); }
}

サイドバーレイアウト：

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

@media (min-width: 1024px) {
  .layout {
    flex-direction: row;
  }
  .sidebar { width: 300px; }
  .content { flex: 1; }
}

確認チェックリスト

レスポンシブ対応の作業を完了する前に：

• モバイルのレイアウトから着手した
• プロジェクト標準のブレークポイントを使用した
• 流動的なレイアウトを実装した（固定幅を使用していない）
• サイズ指定に相対単位（rem/em）を使用した
• タッチターゲットを最低44x44pxにした
• ズームしなくても読めるタイポグラフィにした（本文は16px以上）
• モバイルでコンテンツに優先順位をつけた
• さまざまなサイズに合わせて画像を最適化した
• 主要なブレークポイントすべてでテストした
• モバイルで横スクロールが発生しない
• コンテンツが重なったり、切り詰められたりしていない

クイックリファレンス

状況	対応
新しいレイアウトを開始する	モバイル（320-375px）から始めます
ブレークポイントが必要	プロジェクト標準を使用します（既存のコードを確認）
幅を設定する	width: 100% + max-width を使用します
フォントサイズを設定する	rem を使用します（16px = 1rem）
余白を設定する	rem またはフレームワークのユーティリティを使用します
ボタンが小さすぎる	パディングを含めて最小44x44pxを確保します
テキストが小さすぎる	本文は最小16px（1rem）にします
レイアウトをテストする	375px、768px、1024px、1440pxを確認します
画像の読み込みが遅い	srcsetと最新のフォーマットを使用します