移行中の知識
レスポンシブWebデザイン
Responsive Web Design
定義
レスポンシブWebデザイン（Responsive Web Design）とは、同じWeb contentを単に拡大縮小するのではなく、利用可能なviewport、resolution、inputやmediaの条件に応じてlayout・typography・image・navigationなどの表現を適応させ、狭い画面でも広い画面でも読み取りと操作が成立するように設計する考え方です。mobile版とdesktop版を別々の完成形として考える場合でも、その間の幅を含めてcontentの意味・順序・機能が連続して保たれることが重要です。
実例
実際の場面で考える
同じ概念を異なる制作文脈へ持ち込み、何を観察して判断するかを見る。
local business website
smartphoneでは情報の優先順を崩さず一列へ再構成する
見るポイント
desktopのhero、店舗情報、CTA、写真、補足情報をそのまま縮小せず、狭幅では読み順、tapしやすさ、必要な同時可視情報を見直して再配置する。省略する場合も、単に「mobileだから削る」のではなく役割を確認する。
portfolio / service website
PCでは広さを使って比較と文脈を増やす
見るポイント
smartphoneの一列構成をwide screenへ引き伸ばすだけでなく、本文行長を制御しつつ、画像と説明の並置、補助navigation、比較可能な複数columnなど、広いviewportだから成立する関係を設計する。
注意
誤解しやすい点
- desktop layoutを縮小して画面内へ収めればresponsiveだと考える。
- mobile layoutをそのままwide screenへ拡大し、余白・行長・情報密度・比較可能性を検討しない。
- mobile・tablet・desktopの代表幅だけを完成させ、その間のviewportでlayoutが破綻しても問題ないと考える。
関連
関連する概念
出典