レスポンシブデザインとは？対応方法やWebサイトでの重要性を解説

ユーザーが来訪しやすいサイトを作るなら、レスポンシブデザインを意識することが大切です。しかし、Web制作初心者など、デザイン知識や経験、スキルがまだ少ない方は、“レスポンシブ”についてよくわかっていない場合もあるでしょう。
そこで本記事では、レスポンシブデザインとは何かを伝えるところから、取り入れるメリット・デメリット、具体的な設計方法まで詳しく解説します。
Webサイトの基本も絡めて説明するので、ぜひ参考にしてみてください。

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

インターネットの発達により、企業・個人に関わらず、世界中の多くの人々がインターネットを利用するようになりました。膨大な数のWebサイトが存在する中で、より大勢のユーザーにサイトを訪れてもらうためには、ユーザーが利用しやすいサイト作りをしなければなりません。
サイトの利便性を高めるための工夫にはさまざまなものがありますが、その1つがレスポンシブデザインです。
レスポンシブデザインとは、Webを閲覧するデバイスに合わせて、表示が調整される仕様を指します。
仮に、ユーザー環境を考慮せず作ったとして、同じサイトでもPCからアクセスするのと、スマートフォンからアクセスするのでは、見え方がまったく変わってきます。画面のサイズや形はデバイスによって異なるからです。

PCの画面サイズなら綺麗に配置されていたサイトも、そのままスマートフォンで閲覧すると画面が圧縮されて文字を読むことすら困難になったり、サイトの一部しか表示されなかったり、そもそもレイアウトが大きく崩れたり、閲覧の妨げとなるさまざまな障害を引き起こす可能性があります。
しかし、レスポンシブを意識してサイト作りを行えば、各デバイスに合わせた表示仕様を実現できるため、利便性や満足度を損なわず、ユーザーにストレスを感じさせずにすむのです。

レスポンシブデザインを取り入れるメリットとデメリット

機能的なWebサイトを制作する上でレスポンシブデザインは有効だということはお伝えしてきた通り。そのほかメリットはいくつもあります。一方でデメリットも存在するということは注意しておいてください。それぞれ具体的に挙げながら説明しましょう。

メリット（1）：サイトにかかるコストや手間を削減できる

PCサイトとモバイルサイトを別々に制作する場合、増えてくるのがコストと手間です。
単純に2つのタイプのサイトを作成しなければならないため、まず工数が多くなります。外注委託はもちろん、自社で制作するとしてもその分の人件費はかかります。
しかし、レスポンシブデザインは、1つのWebデザインで異なるデバイスからの閲覧に対応できるため、それぞれサイトを制作するよりもコストや手間を抑えられます。
また、サイトの修正や更新においても同様。
制作後に運用していく労力も、複数サイトの対応に比べると当然変わります。
効率的に制作・運用できることは大きなメリットです。

メリット（2）：URLは1つでOK

PC用とモバイル用、2種類のサイトをそれぞれ作るとURLも別々になります。
サイトを利用するユーザーからしてみれば、統一されていないURLに対して戸惑いを覚える可能性があります。
その点、レスポンシブデザインのサイトなら、URLは1つのまま。上述した懸念状況に陥ることなどまずありません。

メリット（3）：検索エンジンから評価されやすい

レスポンシブデザインのサイトは、検索結果で上位にヒットしやすくなるということも特筆すべきポイントです。いわゆるSEOに対応しているといっていいでしょう。
検索エンジンは、モバイルフレンドリー、つまりスマートフォンでアクセスしやすいサイトをそうでないものより高く評価しています。当たり前ですよね。
また、（正規化の有無は置いといて）URLが1つに統一されていることも有利に働きます。それは、先述したユーザーを迷わせないこともそうですが、検索エンジンに対しても当てはまるのです。
サイトのアクセス数を考えたときにSEO対策は必須。となればレスポンシブデザインを取り入れることは定石なのです。

デメリット（1）：Webデザインがやや制約される

レスポンシブデザインはデバイスによってサイトのレイアウトが見やすく変化しますが、元となるHTMLは1つなので、PC用とモバイル用でサイトのデザインを大幅に変えることはできません。
デバイスによってガラッとレイアウトを変えたい場合には、レスポンシブデザインではなかなか難しい面があります。

デメリット（2）：ソースが複雑になる

デバイスによってサイトを分けるより、レスポンシブデザインで1つのサイトを異なるデバイスに対応させた方がシンプルというのは既出のユーザビリティへの考え方に沿うものでしょう。ただし、構築にあたってのタグやCSSが増えるため、ソースコードに着目した際、レスポンシブデザインだと複雑になりやすい傾向にあります。これは、修正や更新が難化することも意味します。

デメリット（3）：ページの読み込みが遅くなる

レスポンシブデザインは1つのソースで各種デバイスに対応できますが、デバイスによって必要なソースだけを読み込むわけではありません。
スマートフォンでページにアクセスしたとき、モバイルでの必要最低限な読み込みだけでなく、PCサイトのソースまでもが対象領域になります。そのため比較すると、（特に対策を施さなければ）表示速度に遅延が生じることは知っておいてください。

レスポンシブデザインに対応したWebサイトの作り方

それでは、実際にレスポンシブデザインを使用したサイトの作り方を見ていきましょう。Webサイトを制作する際は、専用の言語でソースを書いていく必要があります。代表的なものはHTMLやCSSなど。レスポンシブデザインを取り入れてサイト作りをする場合も、このHTMLとCSSがカギとなります。
前者は、ページのタイトルや作成者、文字コードといったそのページの基本的な情報を記載する「head」と、具体的なページの内容に該当する「body」で主に構成されます。
そして、後者。ページに対するルールをまとめて指示するCSSは、head部分に設置します。Webに関するこれらの基礎知識を押さえた上で、レスポンシブデザインにチャレンジしましょう。

HTMLにmeta viewportタグを加える

レスポンシブデザインで必要なこととして、まずHTMLにmetaタグを記載します。
metaタグとは、検索エンジンやブラウザに、Webページの内容や検索時の条件などを伝えるためのタグです。さまざまな種類がありますが、レスポンシブデザインで使用するのは「meta viewport」。これはページの表示サイズに関するmetaタグです。HTMLのhead部分に挿入します。
具体的なソース例としては「<meta name=”viewport” content=”width=device-width,initial-scale=1.0″>」などです。このタグを加えることにより、ユーザーが使用しているデバイスの画面サイズの情報を入手したり、そのデバイスに適したレイアウトを判断したりできます。

CSSでレイアウトを指示する

レスポンシブデザインにはもう1つ、CSSの設定が必要です。どのような画面サイズにどのようなレイアウトのページを表示させるかなど、デザインの指示を行うのが、このCSSの役割。
最初に、画面サイズ別のCSSの振り分けです。
PC用とモバイル用のデザインの切り替えるラインを決め、それぞれのデザインに適用するようにCSSを振り分けます。たとえば、画面の横幅がこのpx以上であればAパターンのCSS、そうでなければBパターンのCSS、といった具合です。
振り分けが済んだら、実際にタグに加えます。タグに加える際にポイントとなるのが「メディアクエリ」です。
メディアクエリとはCSSの仕様の1つ。画面環境に合わせてページのレイアウトを変更するために使うもので、「@media」と表記します。

例として、500pxを境にレイアウトの切り替えを行う場合、500px超のデザインは「@media screen and (min-width: 501px){ }」、500px以下のデザインは「@media screen and (max-width: 500px){ }」と表記します。
なお、末尾のカッコの中にはそれぞれに振り分けたCSSを記載します。
※CSS例については後述の（レスポンシブデザインでポピュラーなCSS例）をご参照ください。

レスポンシブデザインの制作に大切なのは主にmetaタグとCSSの設置の2点です。
デバイス別にレイアウトを切り替えるのは複雑だというイメージがあるかもしれませんが、方法としては非常に明快といえます。

実装されたデザインをチェックする

ソースの作り込みが完了したら、しっかり意図したレイアウトで表示されるかどうかのチェックも忘れないようにしましょう。
ページの確認の仕方は色々とありますが、確実なのは実際のスマートフォン端末などからページにアクセスしてみることです。なお、PCのブラウザからモバイルサイズでページを確認する方法（ページを開いて右クリックし、出てきたボックスの中の「検証」から画面上に表示されるスマートフォンをはじめとした機種の内、該当するものを選択）もあるとはいえ、なるべく実機で確かめることをおすすめします。

レスポンシブデザインでポピュラーなCSS例

レスポンシブデザインを行う際によく使われるCSSについても言及しておきます。
まずは「width」です。パーセンテージを組み合わせればページの横幅の比率を変えることができます。
たとえば、「img{width: 100% ;}」とCSSを設置すれば、モバイルデバイスからアクセスしたときも、ページの画像を横幅マックスまで表示することができます。

続いて、画像などを一方のデザインでは非表示にしたい場合。
「img {display:none ;}」と記載することで調整が図れます。

モバイルの横幅を考慮し画像の横並びを解除したいなら、「test {float: none;}」を使用してください。

このようなCSSを上手に使うことで、サイト制作をスムーズに進めていけるでしょう。

レスポンシブデザインに対応すべきWebサイトの種類

レスポンシブデザインに推奨したいWebサイトで典型的な例が、商品点数の多いショッピングサイト、いわゆるECサイトです。また、ページ数が多く更新頻度が高いサイトも管理の手間を考えると、断然レスポンシブ対応にすべきだと考えます。

極論、SNSとの連携のしやすさ、SEOでの優位性、とりわけモバイルファーストインデックスの観点からもすべてのサイトで適用するに越したことはないはずです。

レスポンシブデザインでユーザビリティを高めよう

「アクセスするデバイスに合わせてWebデザインを変える」
この一節だけ読むと、そう簡単には対応できるイメージを持てない方もいるかもしれません。しかし、今回ご紹介した通り、レスポンシブデザインを使ったサイト制作は、特別難易度が高いというわけではありません。基本を押さえながらチャレンジすれば、Web初心者であってもしっかり実装することができます。
新たなサイト制作、または既存サイトの見直しに、初めてレスポンシブデザインを検討する方へ。僭越ながら、ぜひ拙稿を参考に、失敗を恐れずのびのびと取り組んでもらいたい次第です。
ひいては、より多くのユーザーに愛されるサイトを目指していきたいですね。