ferret編集部：この記事は2015年11月2日の記事を再編集しています。

ここ数年で定着してきた「レスポンシブデザイン」。
Webデザインに関わる人であれば、この言葉を耳にしたことがあるのではないでしょうか。

iPadなどのタブレットや、スマートフォンの表示に最適化されたページと理解されている方も多いかもしれません。
では従来のモバイル対応ページとはなにが異なるのでしょうか？

スマートフォンが一般に普及し、タブレットも次々に上位機種が発売される今、ますます需要が高まってくると見られるレスポンシブデザインについてまとめました。

レスポンシブデザインの定義

レスポンシブは日本語だと「反応が良いさま」と訳され、レスポンシブデザインは「単一のURL（HTMLファイル）であらゆるデバイスに最適化されるデザイン」を指します。

従来は、パソコン、スマホ、タブレットなど、表示サイズの異なるデバイス毎にページを制作する必要がありましたが、レスポンシブデザインの場合は1つのHTMLファイルを作ればよく、工数が大幅に削減されるうえ、管理もしやすくなります。

Googleもレスポンシブデザインの使用を推奨

レスポンシブデザインの場合、どのデバイスに対しても同一のHTMLコードを配信するため、例えばパソコン表示は問題ないのにスマホのみ表示エラーが起きる、という事象を避けることができます。
表示エラーが少ないとユーザビリティが向上するという点やGoogle検索エンジンのクローラーの巡回の手間が少なくなるという利点もあるため、Googleはレスポンシブデザイの使用を推奨しています。

参考:
レスポンシブ ウェブ デザイン - ウェブマスター向けモバイルガイド

レスポンシブデザインの特徴

単一のHTMLの表示をmedia queriesで切り替える

レスポンシブデザインでは、スマホやiPadなどにもパソコンと同一のHTMLと画像を用意し、CSS3のmedia queriesを使用してユーザーの端末の横幅毎にCSSを切り替えることによって、スマートフォンやタブレットに最適化されたデザインを表示させます。

最小横幅・最小縦幅にあわせてCSSを複数記述する

IE9はCSS3非対応なので、そのままではレスポンシブサイトを表示できません。
Googleが公開している下記のコメントをヘッダーに追加すると、IEでもCSS3を使用できるようになります。

 <!--[if lt IE 9]>
 <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
 <![endif]-->

携帯向けページとレスポンシブページの違い

ほとんどのWeb制作会社は、スマートフォンが普及する前から、規格の異なるブラウザによる閲覧を想定してサイトを制作していました。
スマートフォン以前に一般的だったのは今で言うガラケーですが、携帯向けサイトでは半角文字が頻繁に使用され、ディスプレイの解像度も低かったため、パソコン用のサイトとは画像もテキストもほとんど共有することができませんでした。
必然的に、パソコン用のURLとは別にモバイル用のURLを準備し、ユーザーを使用中のデバイスの種類毎に振り分ける方法が使われていました。

例）パソコン用のURL

　 http://aaa.com/

例）携帯用のURL

　 http://aaa.com/m/

しかし、スマートフォンが開発され、携帯端末のブラウザもPCと同様の表示を再現することができるようになってくると、同じ内容のページを2つのHTMLに分けるのは非効率になってきました。
そこで、パソコン用のHTMLの表示をブラウザの横幅毎に切り替えて、別ページに移動することなく閲覧できるレスポンシブページが作られるようになりました。