「レスポンシブ」
ホームページ制作に関わるのであれば何度も耳にすることになるであろう言葉です。
現代のホームページにおいてはこの対応が実質必須になるため、ホームページ制作においては非常に重要になってくるワードですが、日常生活でレスポンシブ（Responsive）なんて単語使わないから、無知の状態で踏み込んでしまえば「何それ？」ってなりますよね。

ここでは、レスポンシブデザインに関して全く知識を持たない方から、ある程度知っているけど詳しいことは分からない方まで知っていただけるよう、細かく説明していきます。

レスポンシブ対応って何？

簡単に言えば、「ホームページのスマホ対応」です。厳密にはスマホだけでなく、「小さな画面から大きな画面までの閲覧に対応させる」という意味合いになります。タブレットや解像度の低いPC、逆に現代では当たり前になりつつある4kなどの高精細な画面への対応もレスポンシブ対応と言えるでしょう。

何故そういった対応が別途必要になるのか。PCで見れれば別にスマートフォンでも見れるんじゃないの？と。
大抵の場合ホームページへのURLはスマホ・PCどちらで見ても変わらない場合が多いので、もちろんPCにしか対応していないWebサイトでもスマホで閲覧することは可能です。

では何が問題かというと、レスポンシブ対応のなされていないページは「文字・画像がPCで表示される比率のまま表示される」ということ。
数字で言うと、ホームページ制作に適していると言われている文字サイズが最低14px程度だとされています。
そしてPC画面の横幅は一般的なもので1920px、スマホは大体420px程度です。
PCに14pxの文字を配置したときにもしレスポンシブ対応がされていなかったら…
同じホームページを表示して、スマホで表示される文字は単純計算でおよそ3pxです。スマートフォンはピンチアウトでズームができるとはいえ、3pxの文字を並べられたらよほど目が良くない限りただの黒点です。

若干話がややこしくなってしまいましたが、要するにレスポンシブ対応が無ければ「PCのページをそのままスマホサイズに全部縮小した」デザインになるので、極めて見辛い状態になるわけですね。
そして、昨今のホームページへのアクセスはB to Cの事業者様で90%、B to Bの事業者様で60%がスマートフォンからのアクセスとされています。
「大体のアクセスがPCからだから、スマホ対応はいいや」の時代はもうとうに過ぎ去ってしまったのです。

対応って具体的に何をするもの？

一口に「レスポンシブ対応」と言っても、方法は様々です。
PCデザインから文字や画像を折り返させて可能な限り見やすいサイズを維持したり、合理的でないのであまり見ませんが完全に新しくデザインを作っちゃうみたいなことも理論上可能です。大抵はこの二つを組み合わせた形がよく見る形式ですかね。

文字を小さく。
PCの大きい画面に合わせた大きい文字サイズの見出しは、スマホで見たとき逆に見辛くなったり、バランスが悪く見えたりします。普通の本文はそこまで縮める必要はありませんが、PCが16pxならスマホは14pxくらいまで落とすとバランス的に良いかもですね。

折り返す。
画像が横に4枚並んでいるとしましょう。PCなら特別視認性に難はないかもしれませんが、スマホでそのまま見るとちょっと小さい気がしますよね。そんな時に1列4枚だったものを1列2枚で2列に分けることで、画像の大きさを確保したままスムーズに対応させることができるわけです。横並びは画像だけじゃないので結構多用されます。

スマホ専用のパーツを作る。
スマートフォンでWebを閲覧すると、たまに見かけませんか？画面右上にある三本線。
PC版に実装する場合もありますが、多くの場合はスマートフォン専用のナビゲーションメニューになります。ホームページ内のいろんなページに使いまわすパーツの場合、スマホ仕様に新しく作ってしまうことも割と多くあります。

現代のホームページ制作において、レスポンシブ対応はデフォルトとなる程必須です。
「面倒だから」「PCからの方が多そうだから」で何となく避けてしまうほど難しいものではないので、これから新規で作られる方は是非考えてみてください。