レスポンシブデザインシステム

レスポンシブデザインシステム

はじめに

現代のWebプロダクトは、スマートフォン、タブレット、デスクトップ、大画面モニターなど、多様なデバイスで利用されます。デザインシステムにレスポンシブの仕組みを組み込むことで、個別の画面サイズごとにデザインを作る手間を大幅に削減し、あらゆるデバイスで一貫した体験を提供できます。

ブレークポイントの設計

画面幅の区切りを適切に設計することが出発点です。

• ◆モバイル: 0〜639px。片手操作を前提とした縦長レイアウト
• ◆タブレット: 640〜1023px。2カラムレイアウトが適する中間サイズ
• ◆デスクトップ: 1024〜1279px。標準的なPC画面
• ◆ワイド: 1280px〜。大画面モニター。コンテンツ幅の上限設定が重要
• ◆ブレークポイントはpxではなくremで定義するとフォントサイズ変更に追従する

モバイルファーストの原則

小さい画面から設計を始め、大きい画面に拡張していく考え方です。

• ◆CSSはmin-widthメディアクエリで上書きしていく。baseがモバイル向けスタイル
• ◆情報の優先順位: モバイルで表示する情報が最も重要な情報。デスクトップで追加情報を表示
• ◆タッチ操作: タップターゲットは最低44x44px。指の太さを考慮する
• ◆パフォーマンス: モバイルは通信速度が遅いため、画像の最適化とレイジーロードが重要

レスポンシブコンポーネント設計

デバイスに応じて変化するコンポーネントを設計します。

• ◆ナビゲーション: デスクトップは横並びメニュー、モバイルはハンバーガーメニューに変化
• ◆カードグリッド: デスクトップは3〜4列、タブレットは2列、モバイルは1列に変化
• ◆テーブル: デスクトップは表形式、モバイルはカード形式またはスクロール可能テーブル
• ◆フォーム: デスクトップは横並びフィールド、モバイルは縦積みに変化

フルイドタイポグラフィ

画面幅に応じてフォントサイズが滑らかに変化する仕組みです。

• ◆clamp()関数: font-size: clamp(1rem, 2.5vw, 2rem) のように最小値、推奨値、最大値を指定
• ◆見出し: モバイルで24px→デスクトップで40pxのように、大きな文字ほど変化幅を大きくする
• ◆本文: 16pxを基本とし、大画面でも18px程度に留める。大きすぎると可読性が下がる
• ◆行間: フォントサイズに連動して調整。小さい画面では少し広めの行間が読みやすい

レスポンシブスペーシング

余白もデバイスに応じて調整します。

• ◆セクション間余白: モバイルで48px、デスクトップで96pxなど、画面サイズに応じて拡大
• ◆コンポーネント内余白: コンパクト（モバイル）→ゆったり（デスクトップ）に変化
• ◆グリッドガター: 列間の余白。モバイルで16px、デスクトップで24〜32px
• ◆CSS clamp()やcalc()を活用してブレークポイントに依存しないフルイドスペーシングも可能

🏋️実践ワーク

以下の課題に取り組みましょう。

• ◆プロジェクトのブレークポイントを4段階で定義し、各段階のレイアウト方針を決めましょう
• ◆clamp()を使ったフルイドタイポグラフィのスケールを設計してみましょう
• ◆ナビゲーションコンポーネントのレスポンシブ対応をFigmaで設計してみましょう

📝まとめ

レスポンシブデザインシステムは、ブレークポイント設計、モバイルファースト原則、フルイドタイポグラフィ、レスポンシブスペーシングを組み合わせることで、あらゆるデバイスで最適な体験を提供します。次の章では、ダークモードとテーマ機能の実装を学びます。