レスポンシブデザインの基礎と制作時の注意点を解説

更新日: 2018年05月28日

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の表示をブラウザの横幅毎に切り替えて、別ページに移動することなく閲覧できるレスポンシブページが作られるようになりました。

レスポンシブデザイン制作時に注意したいこと

スマホページの文字は大きめ、画像は可変に

解像度が高くなったとはいえ、スマホのディスプレイはパソコンの画面よりは当然小さくなるので、パソコンと同じ文字サイズでは、文字が小さすぎて読めなくなってしまうこともあります。
パソコンサイトでは見た目12～14px程度が標準でしたが、スマホ用のページでは少し大きめに、14～16px程度にサイズを上げておきましょう。
HTML4.01までは画像にwidthとheightを指定してサイズを固定する必要がありましたが、HTML5では画像のサイズは可変にするため、基本的には％で幅を指定します。

また、ボタンは指で押しやすいように上下7pxほどの余白を入れるとよいでしょう。

Viewportを指定する

AppleのiPhoneやiPadでは、デフォルトでパソコン用のサイトもそのまま縮小して表示されます。
3カラムあるような幅広のページなども縮小されるので、端末の画面では小さくなりすぎてしまいます。

これを避けるために、以下に記載されているようなMETAタグで、Viewportをヘッダー内に指定し、デバイスのスクリーンサイズに合わせた幅で表示させるようにしましょう。

<meta name="viewport" content="width=device-width;" />

テキストの量や改行を見直し

パソコンでは最適だと思われる文章量でも、スマホ上では長文になって読みにくくなる場合があります。
内容を精査して、それでも量が多すぎるようでしたら思い切ってページを分けるなどの工夫も必要でしょう。

同様に改行の位置も、スマホの表示を考慮して入れる必要があります。

横並びのコンテンツを縦並びに変更

画像だけではなく、サイト全体的に可変を意識してサイズを％で指定します。
サイドナビをメインカラムの下に配置したり、アンケートなどの選択肢も、パソコンで横並びだった場合は押しやすいように文章の上下に余白をつけて広げ、縦並びに変更するとよいでしょう。

入力フォームの最適化

HTML5から導入されたinput typeの「email」や「tel」を使用すると、iPhoneやiPadでは入力時に自動的に半角英数字やテンキーに切り替わります。
キーボードと違って指一本で入力するのは手間がかかりますので、極力入力項目は少なくして、ユーザーが登録を諦めてしまうのを防ぎましょう。