レスポンシブデザインという言葉を聞いた事があるでしょうか？
1～2年前まではWebデザイナーやWeb系の技術者の中でしか知られていない言葉でしたが、最近ではかなり一般的になってきたのではないかと思います。
しかし、クライアントさんや代理店さんの中には間違った解釈をしている人が多かったので記事にまとめてみました。

レスポンシブデザインというのはスマホに対応している事でしょ？

意外？なのかどうなのかはわかりませんが、技術者以外の人はこのように解釈している人が多いんです。
完全に間違っているという事ではないのですが、この解釈ではすごく誤解を生んでしまいます。

レスポンシブデザインを理解する為に、ホームページがどのように作られているのかを理解する必要があります。

ホームページというのはどのように作られているのか？

まずはホームページというのが一般的にどのように構築されているのかを知る必要があります。

携帯電話（ガラケー）すらない時代のホームページ

パソコンが世界中に普及され始め、インターネットの時代に突入してから徐々にホームページというものが出てきました。
この時代はパソコンしかないので、ホームページは一つ作ればOKだったんです。

携帯電話（ガラケー）が登場してからのホームページ

携帯電話が普及され、携帯電話でもインターネットを使用できるようになりました。
携帯電話が出てくるまではパソコン用にしか作られなかったホームページでしたが、携帯電話からもアクセスできるようにしたいという需要が高まったんです。その為、企業は一斉に携帯電話向けのホームページを作りました。

携帯電話用のホームページはパソコンに比べて非常に制限が多いんです。昔はdocomoは容量100KBを超えると表示できなかったり、auは大丈夫だったり…。各キャリア毎にHTMLの書き方が異なったり、非常に面倒臭かったのを覚えています。

この頃は、PC用のホームページを1つ、docomo,au,softbank(旧ボーダフォン)の3つ、合計4つ分作らなければならなかったんです。

スマートフォンが普及された時代のホームページ

ガラケーがどんどん減ってスマートフォン（スマホ）に移行されました。スマートフォンは従来の携帯電話とは違い、スペックはPC並みになったので、パソコン用のホームページに近い表現ができるようになりました。

現在で言えば、PCとスマホの違いは解像度やサイズの違いくらいなのではないでしょうか。もちろんAndroidではフラッシュが使えるが、iOS（iPhone）ではフラッシュが使えないなどの違いはありますが、フラッシュ自体があまり使われなくなったのでほとんど違いはなくなりました。

ガラケーからスマホに移行しはじめてから、ガラケーのホームページは必要ないという結論を出す企業が増えました。今はガラケー用のサイトを構築しろなんていうクライアントは皆無です。

こうなってくると、ホームページはPC用とスマホ用があればOKという事になりました。
PCからアクセスがあればPC用のホームページへ、スマホからアクセスがあればスマホ用のホームページへ飛ばすというのが主流になりました。

スマートフォン以外のデバイスがどんどん増えていった

PC、スマートフォンに加え、タブレットPCなど、色々なサイズのデバイスがどんどん増えました。そうなると、一つ一つに最適化したホームページを作成するのは非常に困難になってきます。
ここで、レスポンシブデザインという概念が出てきます。

レスポンシブデザインとは？

レスポンシブデザインというのは1つのソースで様々なデバイスに対応するWebサイトという事なんです。※デバイスとは、パソコン、スマートフォン、タブレットなどの端末機器のこと

今まで、PC用、スマートフォン用などに分けてホームページを作成したものを、レスポンシブデザインにする事によって1つ作ればすべてに対応される事ができるようになりました。

レスポンシブデザインのメリット

1つのソースなので、文字修正や更新が1回でできる事です。デバイス毎にページを分けていたら、そのデバイス毎の更新が必要だったのですが、1ソースであれば1つ修正するだけで全部に対応されます。
Googleもレスポンシブを推奨しているので、SEO的に有利と言われている一面もあります。

レスポンシブデザインのデメリット

レスポンシブデザインの方が制作コストが高いんです。やはり以前より技術的に難しい事があるので、制作コストは高くなります。
そして、デザインの幅が制限されるという事でしょうか。PCではこのように見せてスマホではどうしてもこのように見せたい！という部分に限界があります。
レスポンシブデザインは、PC版を元にスマホでも最適化されるものとして、ある程度デザインに限界があると考えるべきでしょう。

現状はレスポンシブが多い？それとも非レスポンシブが多い？

メリットもデメリットも多いので、正直半分程度といった印象です。
大きな企業ほど、今まで作ってきたものがあるので、レスポンシブ化に踏み切るのが困難だったりします。

新規でレスポンシブデザインを作成する事よりも、既存にあるものをレスポンシブ化する事の方が非常に困難なんです。

Web製作におけるレスポンシブデザインとは何なのか？

いかがだったでしょうか？
スマホに対応しているからレスポンシブデザインだと思っていた人も多かったのではないでしょうか？

正確にいうと、スマホに対応しているからレスポンシブデザインという事ではなく、1ソースでマルチデバイスに対応しているものをレスポンシブデザインと呼びます。Web系の技術者と話をする時はレスポンシブデザインというものをきちんと理解しておく必要があるんです。

ちなみにこのWEBデザイナーズNEXTはレスポンシブデザインで作成されています。パソコンでこのページを見ている方はブラウザの横幅をぐぐーっと狭めてみてください。最適化されたページにどんどん変化します。