図01のように、これまでほぼPCのみを対象に作成していればよかったWebサイトが2010年以降、スマートフォンの普及とiPadの登場によるタブレット端末の普及によって、一気に閲覧デバイスを増やすことになりました。さらに、スマートフォンでは小さな表示は読みづらく、よりシンプルなユーザーインターフェイス（閲覧性）が求められています。

スマートフォン出荷台数の推移・予測

図01　スマートフォン出荷台数の推移・予測（2013年3月予測）

調査・出典：（株）ＭＭ総研［東京・港］

2.そこで登場するレスポンシブwebデザイン

レスポンシブWebデザインを簡単に説明しますと、PCはもちろん、スマートフォンやタブレットなど、様々なデバイスのディスプレイ条件に応じて、デザインレイアウトを可変させることができる技術のことです。

レスポンシブWebデザインイメージ

そこで核となる考え方が、「原則として1つのHTMLソースであること」です。さらには、ある特定のディスプレイサイズに特化するのではなく、あらゆるディスプレイサイズにも対応していることなどが挙げられます。

基本的な技術は、フレキシブルに可変するグリッドにより、レイアウトをコントロールするものです。画像などのコンテンツも、フレキシブルに可変するイメージ素材とすることをベースに、メディアクエリによるCSSでデバイスへ最適化させます。閲覧者側の閲覧条件にレスポンス（呼応）し、より最適な表示をさせるという意味になります。

そして、レスポンシブWebデザインの最大の魅力は、たった1つのソースでコンテンツをコントロールすることが可能になることです。その結果、更新やメンテナンスなどのハンドリングも極めて容易になるという、いくつものメリットがあります。

3.運用上のメリット

レスポンシブWebデザインの特徴は、原則的に1つのソースコードによりコントロールされていることにあります。

その結果、これまでのようにPCサイトは更新して、スマホ用の更新を新たにして・・・といった二度手間を解消してくれて、更新ミスも同時に軽減してくれるという利点があります。

また、CMS（サイト構築を行えるソフトウェア）と併せて導入することによって、更新を完全にクライアントで実施できるようになります。そのため、更新サイクルの工程が短縮され、コンテンツをタイムリーにアップすることができ、フレキシブルな対応も可能にしてくれます。

4.制作コストのメリット

制作工程としては、PCサイトのみに比べるとモックの制作など増える項目がありますが、スマホサイトの構築コスト・制作日数と比べると、コストダウンできる要素が大きいのは確かです。

5.SEO対策へのメリット

また、やはり無視できないSEOについてですが、やはりGoogle検索への対応でしょう。

GoogleはレスポンシブWebデザインのサイトについては、重要視すると発表しています。

レスポンシブWebデザインを使うサイト、つまり同じ一連のURLですべてのデバイスに配信するサイトで、それぞれのURLがすべてのデバイスに同じHTMLを配信し、CSSを使ってデバイスでページをレンダリングする方法を決定します。Googleではこの設定をおすすめしています

（引用元：https://developers.google.com/webmasters/smartphone-sites/details?hl=ja）

簡単な要旨としては、下記の通りです。

1.コンテンツのURLが1つであることによってユーザー利便性が高まる

2.コンテンツのURLが1つであることによってGoogleがコンテンツのインデックスプロパティを割り当てやすい

3.ユーザーエージェント判別によるページ・リダイレクトには問題がある

4.サイト運営者は同一内容のページを複数制作する必要がない

5.Googleクローラも同一内容のページを複数クロースする必要がない

このように、Google自然検索での上位表示させる要素に十分なりえるのです。

6.デメリットはないのか？

各デバイスのユーザーごとに独自のデザインで訴求したい、もっとフォントにこだわるなどデザイン重視のサイトを作りたいという要望には、考慮すべき問題もあります。基本的に、画像によるテキスト文字ではなく、テキストになってしまうため、想定しているフォントで共通に表示できないという事などがあげられます。また複雑なレイアウトには不向きです。