responsive-design

レスポンシブデザイン

最小のビューポートと最も重要なコンテンツから始めます。段階的に機能を強化します。320pxで動作しないなら、1920pxで使う余地はありません。

対象範囲

次の場合にこのスキルを使用します。

• さまざまなビューポートやデバイス向けのレイアウトを設計する
• ブレークポイントを定義またはレビューする
• モバイルファーストの CSS 戦略を実装する
• レスポンシブ画像やメディアを実装する
• タッチ操作を最適化する必要がある
• レスポンシブなタイポグラフィを設定する

原則

1. モバイルファースト、コンテンツファースト

最小のビューポートと最も重要なコンテンツから始めます。大きな画面に向けて段階的に機能を強化します。

2. ブレークポイントはコンテンツで決める

デザインが崩れる箇所にブレークポイントを設定し、デバイスの幅に合わせて設定しないでください。「まず小さな画面から始めて、見た目が最悪になるまで広げます。そこでブレークポイントです！」（Stephen Hay）。

3. 完璧さより柔軟性

ウェブサイトをピクセル単位で完璧にする必要はありません。あらゆるデバイスで見やすく、使いやすいことが大切です。

4. 4つの構成要素

レスポンシブデザインは、柔軟なレイアウト、メディアクエリ、柔軟なメディア、柔軟なタイポグラフィで構成されます。

5. コンテンツの振り付け

コンテンツはサイズだけでなく、ビューポートに合わせて配置、優先順位、表示方法も変化します。

6. プログレッシブエンハンスメント

すべてのデバイスで使える確かな基盤を構築し、より高性能なシステムに向けて段階的に機能を強化します。

ルール

推奨：フルイドグリッドを使う

• 固定ピクセル値ではなく、パーセントベースの幅を使います。
• 2次元のレイアウトには CSS Grid、1次元のレイアウトには Flexbox を使います。
• 全体のコンテナーに最大幅を設定します（例：1200-1440px）。
• まずは12カラムのグリッドシステムを使うことを推奨します。

推奨：CSS でモバイルファーストを実装する

• 最小のビューポート向けにベース CSS を記述します。
• 大きな画面向けに min-width メディアクエリで拡張します。
• 主な戦略として max-width メディアクエリを使わないでください（これはデスクトップファーストです）。

推奨：レスポンシブ画像を実装する

• 画像サイズを少なくとも3種類（400px、800px、1200px）指定して srcset を使います。
• アートディレクションには picture 要素を使います。
• CLS を防ぐため、width 属性と height 属性を設定します。
• ファーストビューより下にある画像には loading="lazy" を設定します。
• WebP または AVIF 形式に圧縮します。

推奨：ブレークポイントを慎重に設定する

• 特定のデバイスではなく、コンテンツを基準にブレークポイントを定義します。
• 目安：320-480px（スマートフォン）、768px（タブレット）、1024px（デスクトップ）、1440px 以上（ワイドスクリーン）。
• ブレークポイント間でもレイアウトが安定することをテストします。
• 主なブレークポイントは最大4～5個にします。

推奨：タッチ操作を最適化する

• タッチターゲットのサイズは最低44x44pxにします。
• タップ可能な要素の間隔を最低8px確保します。
• タッチデバイスでは、ホバー操作をタップ／クリックで代替できるようにします。
• ドラッグアンドドロップだけを唯一の操作方法にしないでください。

推奨：レスポンシブなタイポグラフィを使う

• 相対単位（rem、em、clamp()）を使います。
• シームレスに拡大縮小する流動的なタイポグラフィを clamp() で実装します。
• ビューポートに合わせて行の長さを調整します（最適な長さ：1行あたり45～75文字）。

非推奨：モバイルでコンテンツを単純に隠す

• モバイル向けという理由だけで display:none を使ってコンテンツを隠さないでください。
• 表示方法を調整します。たとえば、文章を短くする、配置を変える、コンポーネントをコンパクトにするなどの方法があります。

非推奨：横スクロールを強制する

• ビューポートより幅の広い要素がないことを確認します。
• 最小幅の320pxでテストします。
• overflow-x: hidden の使用は最後の手段にします。

非推奨：デスクトップでハンバーガーメニューを使う

• 大きな画面ではメインナビゲーションを表示します。
• ナビゲーションが横幅に収まらないビューポートでのみ、ハンバーガーアイコンを使います。

パターン

レスポンシブレイアウト（フルイドグリッド）

パーセントベースの幅を使った12カラムグリッドです。ページ構成には CSS Grid、コンポーネントのレイアウトには Flexbox を使います。最小限のブレークポイントは768pxと1024pxです。詳細とコード例については、references/fluid-grid.md を参照してください。

コンテンツの振り付け

各ページについて、ビューポートごとのコンテンツの順序を定義します。モバイルでは最も重要なコンテンツを最初に表示します。デスクトップでは、主要なコンテンツの横に補足コンテンツをカラム形式で配置します。

カードレイアウト

ブログ記事、商品、チームメンバーなど、同等のコンテンツ単位に使用します。柔軟なグリッド内のカードが、3列以上から1列へ自動的に再配置されます。各カードは、画像、タイトル、抜粋、CTAという同一の構造を持ちます。

スクロール動作に応じて固定表示されるヘッダー

スクロール量が多いページで使用します。下にスクロールするとヘッダーを非表示にし、上にスクロールすると再表示します。モバイルでは、ロゴとハンバーガーメニューを備えたコンパクトなバージョンにします。デスクトップでは、フルナビゲーションを表示します。

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

デスクトップでは横並びのフルナビゲーションを表示します。モバイルでは、スライドインまたは全画面オーバーレイでハンバーガーアイコンを表示します。ナビゲーションが折り返すブレークポイントを設定します。

アンチパターン

コンテンツではなくデバイスを基準にしたターゲティング

ブレークポイントを特定のデバイス幅（iPhone の 375px、iPad の 768px など）に設定します。デバイスの種類は細分化されすぎています。解決策： レイアウトが崩れる箇所にブレークポイントを設定します。

デスクトップレイアウトへのレスポンシブデザインの後付け

デスクトップ向けデザインに、後からメディアクエリを追加します。コンテンツが非表示になり、妥協した解決策につながります。解決策： 最初からレスポンシブかつモバイルファーストで考えます。

固定ピクセルレイアウト

列幅や間隔を固定ピクセル値で設定します。想定外のビューポートでレイアウトが崩れます。解決策： パーセントベースの幅、rem/em、clamp()を使用します。

ビューポートメタタグの欠落

<meta name="viewport" content="width=device-width, initial-scale=1">がありません。モバイルブラウザーでデスクトップ幅として表示されます。解決策： すべての HTML ドキュメントにビューポートメタタグを含めます。

チェックリスト

レイアウト

• 柔軟なグリッドシステム（12 列または同等のもの）
• 列幅はパーセントベースで、固定ピクセルを使用しない
• コンテナーに max-width を設定
• どのビューポートでも横スクロールが発生しない

ブレークポイント

• モバイルファーストのアプローチ（min-width メディアクエリ）
• 3 つ以上のブレークポイント（モバイル、タブレット、デスクトップ）
• ブレークポイントはデバイスではなく、コンテンツを基準に決定
• ブレークポイント間でもレイアウトが安定

画像とメディア

• 少なくとも 3 種類のサイズを指定した srcset
• 主な形式として WebP または AVIF を使用
• ファーストビューより下では loading="lazy" を使用
• width 属性と height 属性を設定

タイポグラフィ

• フォントサイズに rem または clamp() を使用
• すべてのビューポートで行の長さを 45～75 文字にする

ナビゲーションとタッチ操作

• デスクトップでナビゲーションを表示
• タッチターゲットを少なくとも 44x44px にする
• タップ可能な要素の間に十分な間隔を設ける

パフォーマンスとテスト

• Lighthouse のモバイルスコアが 90 を超える
• ビューポートメタタグが存在する
• 320px、768px、1024px、1440px でテスト済み
• 実機でテスト済み

関連項目

• usability -- レスポンシブ対応でも満たす必要があるユーザビリティ要件
• navigation-design -- レスポンシブナビゲーションの詳細
• images-media -- 画像の最適化とレスポンシブ画像の手法
• web-typography -- レスポンシブタイポグラフィのルール
• accessibility -- タッチ操作の最適化とモバイルのアクセシビリティ