たとえるなら
器に合わせて形を変える水のようなものです。同じ水（同じWebページ）でも、コップに注げば縦長に、お皿に注げば横に広がります。ページの中身は同じまま、入れ物（画面サイズ)に合わせて並び方が変わるのです。
もう少しくわしく
レスポンシブ（responsive）は「反応する」という意味で、閲覧する画面の大きさに反応して、レイアウトが自動で切り替わるWebデザインの手法です。正式にはレスポンシブデザイン（レスポンシブWebデザイン）と言います。パソコンでは3列に並んでいた記事が、スマホでは1列に縦に並ぶ——同じページなのに端末ごとに最適な見た目になるのは、この仕組みのおかげです。
スマホでのネット利用が当たり前になり、Webサイトはスマホで見やすいことが大前提になりました。かつてはパソコン用とスマホ用に別々のページを作る方法もありましたが、2つを作って更新し続けるのは大変です。レスポンシブなら1つのページで両方に対応でき、管理の手間も減るため、現在の標準的な作り方になっています。
実現には主にCSS（見た目の飾り付けを担当する言語）を使い、「画面の幅がこれより狭ければ、この並び方にする」という条件を書いていきます。この条件の書き方はメディアクエリと呼ばれ、レスポンシブの中心となる仕組みです。中身のHTMLは1つのまま、CSS側で見せ方だけを切り替えるのが基本の形になります。
切り替えが起きる幅のことをブレークポイントと呼びます。よく使われるのは「スマホ」「タブレット」「パソコン」のおおまかな3段階ですが、特定の機種の画面サイズに合わせて決めるのではなく、レイアウトが窮屈に見えはじめた幅で切り替えるという考え方が主流です。新しい端末が出るたびに直さなくて済むからです。
作る順番にも定石があります。モバイルファースト——狭い画面のデザインを先に決め、広い画面へ足していく考え方です。狭い画面では本当に必要なものしか置けないため、先にスマホから考えると情報の優先順位が自然と整理されます。逆にパソコンから作ると、スマホ版で「何を削るか」に悩むことになりがちです。
よく起きる崩れも決まっています。横に長い表がはみ出す、画像が画面幅からあふれる、区切りのない長い英数字が折り返されない、ボタンが小さすぎて指で押しにくい——このあたりが定番です。表は横スクロールできる箱に入れる、画像は幅の上限を決める、押す部分は指のサイズを想定して大きめにする、といった対処が取られます。
検索順位の面でも無視できません。Googleはスマホ版のページを基準にサイトを評価する方式を採っています。パソコンでは充実しているのにスマホでは情報が欠けている、といったサイトは評価で不利になりえます。レスポンシブは、見やすさの話であると同時に、集客の土台でもあるわけです。
現場での使われ方
「このページ、レスポンシブ対応できてますか？」
スマホやタブレットで見たときに、崩れずに見やすく表示されるか、という確認です。
「スマホで見ると表が切れちゃうので、レスポンシブの調整をお願いします」
狭い画面での表示に問題があるので、画面幅に応じた見せ方を直してほしい、という依頼です。
「ブレークポイントは768pxでそろえましょう」
レイアウトを切り替える画面幅をチームで統一しよう、という取り決め。ページごとにばらばらだと、あとで直すのが大変になります。
「今回はモバイルファーストで作ります」
スマホ向けのデザインから先に決めていく、という進め方の宣言です。利用者の多くがスマホなら、自然な判断になります。
よくある質問
レスポンシブ対応とスマホ対応は同じ意味ですか？
ほぼ同じ意味で使われます。厳密には、スマホ対応の実現方法のひとつがレスポンシブデザインです。スマホ専用ページを別に作る方法もありますが、いまはレスポンシブが主流のため、実質同じ意味で通じます。
ブレークポイントはどこに設定すればいいですか？
特定の機種に合わせるより、「レイアウトが窮屈に見えはじめた幅」で切り替えるのがおすすめです。ブラウザの幅を少しずつ縮めながら、崩れはじめる場所を探して決めます。目安として600px前後と900px前後がよく使われます。
レスポンシブにすると検索順位に有利ですか？
レスポンシブそのものが加点されるわけではありませんが、Googleはスマホ版のページを基準に評価するため、スマホで見づらいサイトは不利になります。1つのページで両方に対応できるレスポンシブは、その意味で有利に働きます。
アプリを作るのとレスポンシブサイトにするのは、どちらがいいですか？
目的しだいです。検索から広く見つけてもらいたいならWebサイト、通知を送りたい・カメラなど端末の機能を使いたい・毎日開いてもらいたいならアプリが向きます。まずレスポンシブなサイトを用意し、必要が出てからアプリを検討する順番が現実的です。
レスポンシブの確認はどうやってするのですか？
パソコンのブラウザで幅を縮めながら見るのが手軽です。より正確に確かめたいときは、ブラウザの開発者ツールにある端末表示の機能を使い、最後は実機のスマホでも確認します。指で押せるかどうかは、実機でないとわからない部分です。
