レスポンシブデザインガイドライン

コア原則

• セマンティックHTMLを記述してアクセシビリティとSEOを向上させる
• インラインスタイルを避けCSSでスタイリングを行う
• メディアクエリとフレキシブルレイアウトを使用してレスポンシブデザインを実現する
• ARIAロールと属性を使用してアクセシビリティを優先する
• モバイルファーストで設計してから、より大きい画面向けに拡張する

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

戦略

• 最小のビューポート向けのスタイルから始める
• 段階的な拡張を通じて複雑さを追加する
• ベーススタイルはメディアクエリなしで機能する
• メディアクエリはより大きい画面向けに機能を追加する

メリット

• 必須コンテンツの優先順位付けを強制する
• モバイルデバイスのパフォーマンスを改善する
• コア機能がどこでも動作することを保証する
• CSSの複雑さと詳細度の問題を軽減する

/* Base styles for mobile */
.container {
  padding: 1rem;
}

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

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

フレキシブルレイアウト

Flexbox

• 1次元レイアウト（行または列）に使用する
• flex-wrapを活用してレスポンシブなラッピングを実現する
• gapを使用して一貫した間隔を保つ
• メディアクエリと組み合わせてレイアウト変更を行う

CSS Grid

• 2次元レイアウトに使用する
• auto-fitとauto-fillを活用してレスポンシブグリッドを実現する
• minmax()を使用してフレキシブルなトラックサイズ設定を行う
• frユニットと固定最小値を組み合わせる

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

コンテナクエリ

• ビューポートではなくコンテナサイズに基づいてコンポーネントをスタイリングする
• 本当に再利用可能なコンポーネント向けに使用する
• container-typeでコンテナを定義する

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

フルイドタイポグラフィ

• レスポンシブなフォントサイズにclamp()を使用する
• 最小値、推奨値、最大値を設定する
• モバイルで小さすぎたりデスクトップで大きすぎたりしないようにする

h1 {
  font-size: clamp(1.5rem, 4vw + 1rem, 3rem);
}

単位

• スケーラブルなタイポグラフィにremを使用する
• remをユーザーのブラウザ設定に基づいて設定する
• コンポーネント相対的なサイズ設定にemを使用する
• フォントサイズに固定のpx値を避ける

レスポンシブ画像

Srcsetとsizes

• 複数の画像解像度にsrcsetを使用する
• ブレークポイントでの表示サイズを示すためにsizesを使用する
• ブラウザに最適な画像の選択を任せる

<img
  src="image-800.jpg"
  srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, (max-width: 1000px) 50vw, 800px"
  alt="Description"
>

Picture要素

• アートディレクション（異なるサイズでの異なるトリミング）に使用する
• <img>要素でフォールバックを提供する
• ブレークポイント固有のソースにメディア属性を使用する

パフォーマンス

• レイアウトシフトを防ぐためにwidthとheight属性を含める
• 画面下部の画像にloading="lazy"を使用する
• aspect-ratio CSSプロパティを検討する

メディアクエリ

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

/* Small phones */
@media (min-width: 320px) { }

/* Large phones */
@media (min-width: 480px) { }

/* Tablets */
@media (min-width: 768px) { }

/* Laptops/Desktops */
@media (min-width: 1024px) { }

/* Large screens */
@media (min-width: 1280px) { }

/* Extra large screens */
@media (min-width: 1536px) { }

フィーチャークエリ

• フィーチャー検出に@supportsを使用する
• サポートされていないフィーチャーのフォールバックを提供する
• 特定のCSSプロパティをテストする

プリファレンスクエリ

• ダークモード/ライトモードにprefers-color-schemeを使用する
• アニメーションプリファレンスにprefers-reduced-motionを使用する
• コントラストプリファレンスにprefers-contrastを使用する

タッチターゲット

サイズ

• タッチターゲットの最小サイズは44×44ピクセル
• ターゲット間に十分な間隔を提供する
• モバイルでの親指の到達範囲を考慮する

インタラクション

• ホバー状態のみに依存しない
• ホバーインタラクションに対するタッチ代替を提供する
• ホバー対応デバイスに@media (hover: hover)を使用する

ビューポート設定

メタタグ

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

ベストプラクティス

• 常にビューポートメタタグを含める
• ユーザースケーリングを無効にしない（user-scalable=noを避ける）
• ピンチズーム有効な状態でテストする
• 200%ズーム時にコンテンツが使用可能であることを確認する

テスト

ツール

• ブラウザDevToolsのデバイスエミュレーション
• 可能な限り実機でのテスト
• パフォーマンス監査用のLighthouse
• コード品質チェック用のW3C バリデーター

チェックリスト

• 複数のビューポートサイズでテストする
• 横向きと縦向きの向きでテストする
• タッチ入力とマウス入力でテストする
• キーボードナビゲーションを検証する
• 画像が適切なサイズで読み込まれることを確認する
• タイポグラフィの読みやすさを確認する
• タッチターゲットが適切であることを確認する
• ブラウザズームでテストする

パフォーマンス上の考慮

クリティカルCSS

• クリティカルなファーストビュー用CSSをインラインに含める
• 重要でないスタイルシートは遅延読み込みにする
• レンダリングをブロックするリソースを最小化する

アセット最適化

• 画像を適切に圧縮する
• モダンなフォーマット（WebP、AVIF）を使用する
• 画面下部のコンテンツを遅延読み込みにする
• レスポンシブローディング戦略を検討する