responsive-design

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

基本原則

• アクセシビリティとSEOを向上させるため、セマンティックなHTMLを記述します
• スタイル設定には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"を使用します
• CSSのaspect-ratioプロパティの使用を検討します

メディアクエリ

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

/* 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を使用します

タッチターゲット

サイズ

• タッチターゲットは最小44x44ピクセルにします
• ターゲット間に十分な間隔を設けます
• モバイルで親指が届く範囲を考慮します

インタラクション

• ホバー状態だけに依存しないようにします
• ホバー操作にはタッチで使える代替手段を用意します
• ホバーに対応したデバイスには@media (hover: hover)を使用します

ビューポートの設定

Metaタグ

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

ベストプラクティス

• ビューポートのmetaタグを必ず含めます
• ユーザーによる拡大縮小を無効にしないでください（user-scalable=noは避けます）
• ピンチズームを有効にしてテストします
• 200%のズームでもコンテンツを利用できるようにします

テスト

ツール

• ブラウザーのDevToolsによるデバイスエミュレーション
• 可能であれば実機でのテスト
• パフォーマンス監査用のLighthouse
• コード品質確認用のW3Cバリデーター

チェックリスト

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

パフォーマンスに関する考慮事項

クリティカルCSS

• ファーストビューのクリティカルCSSをインライン化します
• 重要度の低いスタイルシートの読み込みを遅らせます
• レンダリングを妨げるリソースを最小限に抑えます

アセットの最適化

• 画像を適切に圧縮します
• モダンな形式（WebP、AVIF）を使用します
• ファーストビュー外のコンテンツを遅延読み込みします
• レスポンシブな読み込み方法を検討します