レスポンシブデザイン
ひとことでいうと
1つのページが、見る画面の幅に合わせてPC・タブレット・スマホそれぞれに最適な形へ自動で切り替わる作り方です。
もう少し詳しく
PC用とスマホ用を別々に作るのではなく、同じページの中に「画面が狭いときはメニューを折りたたむ」「横並びを縦並びにする」といった指示を持たせます。ページが1つなので、更新も1回で全端末に反映されます。
たとえるなら
折りたたみ式のテーブルです。広い部屋では脚を伸ばして大きく、狭い部屋では畳んでコンパクトに。テーブル自体は1つのままです。
制作現場ではこんなふうに使います
「スマホ表示もあわせてご確認ください」「レスポンシブなので、スマホではこの3列が縦に並びます」— PCのデザイン案だけを見て承認したあとに「スマホだと思っていたのと違う」となりがちな箇所です。早めに両方そろえて確認します。
これだけ覚えておけばOK
- 1ページは1つで、見え方だけが画面幅で変わる
- 2更新は1回で全端末に反映される
- 3PCデザインだけで判断せず、スマホの見え方も必ず確認する