前述した通り、レスポンシブデザインとは、各デバイスの異なる画面サイズに合わせてWebページを最適化させることです。Webサイトを分けず、HTMLとCSSの操作で対応が可能になるため、運用のしやすいスマホ対応といえるでしょう。

簡単に仕組みを説明すると、WebサイトではHTMLで作られた「文章構造」に対して、CSSでサイトの見た目である「装飾やレイアウト」などの設定を行います。 レスポンシブデザインでは、パソコン用・スマホ用共通のHTMLを利用し、HTML内の「メディア・クエリ」（画面環境に応じてWebページのスタイルを切り替える機能）を付け加えることで複数デバイスへの対応が可能になります。さらに、それぞれのデバイスに合わせたCSSを用意しておくことで、Webサイトの見た目をそれぞれのデバイスに合わせたレイアウトやデザインにすることができるのです。

たとえば一つ文字を書き換えるにしても、セパレートURLのタイプやダイナミックサービングのWebサイトでは、PC用とスマホ用2つのHTMLを修正しなければいけませんが、レスポンシブデザインにしておけば、HTMLは共通なので修正が一度で済むということですね。 さらにCSSの設定によってはタブレット用などPCやスマホ以外のデバイスへの細かい調整が可能な点もメリットです。最近ではスマホといっても様々なサイズがあったり、タブレットも向きを変えて使うことがあったりとデバイスの大きさは多様。これらすべてに対応しようとする場合、レスポンシブ以外ではわざわざそのデバイスに合わせたサイトを新設しなくてはいけません。その点、レスポンシブデザインであればCSSに記入した画面幅に応じてデザインが変わるので、手間を最小限に抑えて最適化することができます。

ただしHTMLを分けない分、初回制作時の設計は、セパレートURLのタイプやダイナミックサービングよりも大変です。どのデバイスでも表示が崩れないよう、慎重に設計しましょう。

レスポンシブデザインはGoogleも奨励するスマホ対応方法です。その理由をGoogleでは以下のように紹介しています。 ただしレスポンシブデザインが検索順位をつける上で圧倒的に有利かと言われると、そうではありません。レスポンシブデザイン以外のスマホ対応の方法でも、Googleはきちんと評価します。 あくまでレスポンシブデザインが便利なのでおすすめですよ、といった程度に思っておきましょう。

Webサイトがスマホ対応されているかをチェックしたい場合は、Googleが提供している「モバイルフレンドリーチェックテスト」を実施することをおすすめします。

こちらのテストを利用することで、適切な文字の大きさになっているか、モバイルに対応していないFlashコンテンツがないか、誤タップの原因になるような画面になっていないか（ボタンの配置など）をチェックすることができます。

もし運用しているWebサイトでSEOを目的とした記事を作成しているのであれば、一度はやってみたほうが良いでしょう。自社のWebサイトURLを入力するだけで、モバイルフレンドリー対応がどのような状態か診断をしてくれます。

（外部リンク：Google チェックツール）