今だからこそきちんと理解しておく『レスポンシブデザイン』って？

■レスポンシブデザインは、スマホやタブレットに最適化することではない

PC・スマホ・タブレットなど、複数のデバイスに対応させる方法は、レスポンシブだけではないんです。
むしろ、レスポンシブデザインより前に、「User Agent（ユーザーエージェント）」で判別して切り替える方法が主流でした。
今でも、その方法の方が良い場合だってあるんです。
ここがポイントです。
ポイント【レスポンシブという言葉を、複数のデバイスに最適化させる意味で使ってはいけない】

■じゃあ、User Agentでの判別って何？

User Agentというのは、WEBサイトを閲覧しているソフト（つまりブラウザ）の情報です。
ブラウザと言えば、Internet Explorerや、Google Chrome、Safariなどですね。
ブラウザは、WEBサイトを閲覧するとき、
（ブラウザさんセリフ）「サイトを表示したいです。ちなみに私は、Google ChromeのバージョンXXXです」
みたいな自己紹介をします。

WEBサイト（WEBサーバ）は、その自己紹介の中身から、相手が、どのデバイスで閲覧しようとしているかわかるわけです。

われわれ開発者は、
PC用、スマホ用、タブレット用を、それぞれ準備し、待ち構えます。
ブラウザさんの自己紹介を判別し、どのデバイス用を見せるか、プログラムで振り分けるのです。

これがUser Agentでの判別によるマルチデバイス対応です。

■話を戻して、「レスポンシブデザイン」だとどうなる？

レスポンシブデザインの場合、ブラウザさんの自己紹介は無視します。
相手が、PCだろうと、スマホだろうと、タブレットだろうと、「同じ」「1つの」WEBサイトを送ります。
その1つのWEBサイト自身に、マルチデバイス対応の仕掛けがあります。

その仕掛けは、とってもシンプル。
見ているブラウザのサイズに合わせて、自動で収まるように作ってあるんです。

分かりやすい例でいうと、
PCでは6つの写真が横に並んでいるWEBサイトがあったとします。
スマホの縦画面では、3つの写真の2列に並べ替え、画面に収まるようにします。

ついでにもう一つ例を。
PCでは、グローバルナビゲーション（メインのメニューのこと）が横に並んでいるとします。
スマホでは、このグローバルナビゲーションを1つのボタンにまとめて、タップしたら出てくるように変化させます。

まとめると、
レスポンシブの場合は、PC・スマホ・タブレットで同じものを開いているけど、ブラウザの幅に合わせて、『見た目が変化している』状態なんです。

■User Agent判別とレスポンシブのメリットとデメリット

User Agent判別だと、対応するデバイスごとに別の見た目を準備しておく方法。
レスポンシブは、対応するデバイスごとに見た目が変化する1つを準備しておく方法。

この「複数準備しておく」と「1つのWEBサイトがブラウザ幅に合わせて変化する」の特徴が、それぞれの方法のメリットとデメリットに直結してきます。

◆レスポンシブのメリット・デメリット

【メリット】

1つを準備すればいいので、開発が若干楽。（そうでもないことも多い）

1つが変化するだけなので、更新するのはその1つで済む。（サイトの更新が楽）

【デメリット】

1つで対応しようとするので、対応するデバイス同士、デザインに制約が出る

◆User Agent判別のメリット・デメリット

【メリット】

デバイスごとに見た目を準備するため、それぞれの自由度が高い

【デメリット】

デバイスごとにそれぞれで開発しなければならないため若干手間（そうでもないことも多い）

デバイスそれぞれ用に更新しないといけないので、2度手間3度手間。

■『レスポンシブデザイン』まとめ

このように、レスポンシブという言葉は、マルチデバイスに対応することそのものを指すのではなく、マルチデバイスに対応する手法を指します。

そして、メリットやデメリットを見てお気づきの方も多いと思いますが、本来レスポンシブデザインは、PCのときの見え方とスマホのときの見え方、タブレットのときの見え方を、『全部想定してデザインすること』を意味します。

逆に言うと、すでにあるPCサイトをスマホ対応にするのに、「レスポンシブで」というご依頼は、細かいところで無理が出てしまうことが多々あります。
あるいは、PCサイトデザインとスマホサイトデザインを、お互いに全く関連性が無いデザインだった場合に、レスポンシブで対応するメリットはあまりありません。
更新についても、CMSを使ったサイトであれば、ニュース記事などは自動で更新されるように開発しますので、クライアント様が更新する際、「レスポンシブで良かった！」と思うことはほぼ無いかと思います。

「レスポンシブ」、あるいは、「レスポンシブデザイン」は、ある程度サイト制作の全体が見えている方がうまく使うことで最大限にその強みを発揮できる手法だということになります。

サイトの趣旨や内容などによって、「レスポンシブで対応するか、それとも別の方法なのか」をうまく見極め、最適なご提案をしたいですね。