たとえるなら

器に合わせて形を変える水のようなものです。同じ水(同じWebページ)でも、コップに注げば縦長に、お皿に注げば横に広がります。ページの中身は同じまま、入れ物(画面サイズ)に合わせて並び方が変わるのです。

パソコンで見る 広い画面 記事が3列に並ぶ スマホで見る 狭い画面 同じ記事が1列に並ぶ 中身はそのまま
中身は同じ1つのページ。画面の大きさに反応して、並び方が自動で切り替わる。

もう少しくわしく

レスポンシブ(responsive)は「反応する」という意味で、閲覧する画面の大きさに反応して、レイアウトが自動で切り替わるWebデザインの手法です。正式にはレスポンシブデザイン(レスポンシブWebデザイン)と言います。パソコンでは3列に並んでいた記事が、スマホでは1列に縦に並ぶ——同じページなのに端末ごとに最適な見た目になるのは、この仕組みのおかげです。

スマホでのネット利用が当たり前になり、Webサイトはスマホで見やすいことが大前提になりました。かつてはパソコン用とスマホ用に別々のページを作る方法もありましたが、2つを作って更新し続けるのは大変です。レスポンシブなら1つのページで両方に対応でき、管理の手間も減るため、現在の標準的な作り方になっています。

実現には主にCSS(見た目の飾り付けを担当する言語)を使い、「画面の幅がこれより狭ければ、この並び方にする」という条件を書いていきます。デザイナーとエンジニアは、スマホ・タブレット・パソコンそれぞれの見え方を想定しながら画面を設計します。

現場での使われ方

「このページ、レスポンシブ対応できてますか?」

スマホやタブレットで見たときに、崩れずに見やすく表示されるか、という確認です。

「スマホで見ると表が切れちゃうので、レスポンシブの調整をお願いします」

狭い画面での表示に問題があるので、画面幅に応じた見せ方を直してほしい、という依頼です。

よくある質問

レスポンシブ対応とスマホ対応は同じ意味ですか?

ほぼ同じ意味で使われます。厳密には、スマホ対応の実現方法のひとつがレスポンシブデザインです。スマホ専用ページを別に作る方法もありますが、いまはレスポンシブが主流のため、実質同じ意味で通じます。

関連用語

GUIDE

職種図鑑

この用語を使って働く人たちは、どんな仕事をしているの?

見てみる →
GUIDE

ITの学び方

もっと知りたくなったら。初心者向けの教材の選び方を案内します。

見てみる →