#328
視覚デザイン
#328れすぽんしぶでざいん
レスポンシブデザイン (Responsive Design)
別名・表記:Responsive Web DesignRWDマルチデバイス対応
UIXHERO Definition
「1つのHTMLで、あらゆる画面サイズに対応する」仕組み。スマホ用とPC用で別々のページを作らない。
概要
レスポンシブデザインは、CSSのメディアクエリ（Media Queries）を使用して、画面幅（ブレークポイント）に応じてスタイルを切り替えることで実現します。 Googleも推奨しており、SEO（検索順位）の観点からも重要です。
UXでの活用
- 一貫した体験: デバイスが変わっても同じ情報・機能にアクセスできるため、ユーザーは混乱しない。
- 共有のしやすさ: URLが1つであるため、PCで見ているページをSNSでシェアし、友人がスマホで見ても正しく表示される。
関連するUIコンポーネント
- Scroll Area（スクロールエリア）
- Resizable（リサイザブル）
- Responsive Patterns（レスポンシブパターン）
- Sidebar（サイドバー）
- Sheet / Drawer（ドロワー / シート）
- Density Patterns（密度パターン）
- Right Rail（ライトレール）
💡 使いどころ
複数のデバイス（スマホ、PC）からのアクセスが想定されるWebサイトを構築する時。現代ではほぼ必須。
⚠️ 注意点・誤用
PC向けのデザインを要素を縦に並べ替えただけでは、スマホで使いやすいとは限らない。「モバイルファースト」で設計し、指での操作性（タップ領域）や通信速度（画像の軽量化）も考慮する必要がある。
具体例
- PCでは3カラム（3列）で表示される商品一覧が、スマホでは1カラム（1列）で表示される。
- PCではクリックで開くメニューが、スマホではハンバーガーメニューになる。
関連用語
出典・参考文献:
- Ethan Marcotte: Responsive Web Design
- Google Developers: Responsive Web Design Basics