
レスポンシブデザインとは
PC用サイトとスマートフォン(以下スマホ)用サイトを用意する場合、下図このように、ユーザが閲覧しているOSやブラウザ(ユーザーエージェント)を判別して、サーバーサイドプログラムで表示するHTMLを振り分けるという手法が一般的です。

それに対しレスポンシブWebデザインは、

ワンソース管理というメリット
上図の通り、1つのHTML(ワンソース)を管理します。
例えば、サイト完成後のメンテナンスで、テキスト修正や画像差し替えなどの更新作業なら作業時間も減りますし、更新ミスのリスクも減ります。
例えば、サイト完成後のメンテナンスで、テキスト修正や画像差し替えなどの更新作業なら作業時間も減りますし、更新ミスのリスクも減ります。
SEOに有効的
Googleは、サイトの構築手法の一つとしてレスポンシブWebデザインを推奨していて、「Google ウェブマスター向け公式ブログ: Google がお勧めするスマホに最適化されたウェブサイトの構築方法」では下記のように述べています。
Google がお勧めするスマートフォンに最適化されたウェブサイトの構築方法(抜粋)
- レスポンシブ・ウェブデザインを使用すると、次のような利点があります。
- PC 用のページとモバイル用のページを単一の(同一の) URL とすることができるため、ユーザーにとってはシェアやリンクが容易であり、Google のアルゴリズムにとってはコンテンツを適切にインデックスできるようになります。
- ユーザーエージェントの異なる Googlebot ごとにページをクロールする必要がないため Google がより効率的にコンテンツを発見することができます。
デバイスの多様化にも対応できるメリット
デバイスの多様化に伴い、様々なサイズの画面サイズへの対応が必要になってくることでしょう。
レスポンシブWEBデザインではブラウザの画面サイズに合わせて横幅を自動調整しますので、様々なサイズの画面サイズへの対応も可能です。
レスポンシブWEBデザインではブラウザの画面サイズに合わせて横幅を自動調整しますので、様々なサイズの画面サイズへの対応も可能です。
画像のサイズは変わらない
レスポンシブの場合、表示される画像もブラウザの画面サイズに合わせて横幅を自動調整しますが、縦横サイズを調整しているだけですので画像自体のデータサイズは変わりません。ですので、画像サイズなどを調整したスマホ専用サイトに比べて、ページの表示が遅くなる可能性があります。
構造が複雑。構築に時間が掛かる
切り替えるレイアウト毎にデザインを用意したり、HTMLコーディングの構築が複雑だったり、チェックが増えたり、など従来の制作方法と比較して設計段階でも構築段階でも複雑になるため、PCのみのサイトを製作するのと比べると費用が増えてしまいますが、PCサイトとスマホ専用サイトといったばらばらに製作するよは、低価格で製作が可能です。
その他のデメリット
・スマホやタブレットであえてPCサイトが見たい場合でも、見ることができない
・ちゃんと設計しないと、タブレットのたて向きと横向きとで全然違うレイアウトになって、操作に混乱を招いてしまう
・CSS3だけだとフィーチャーフォン(ガラケー)に対応できない
などが挙げられます。
・ちゃんと設計しないと、タブレットのたて向きと横向きとで全然違うレイアウトになって、操作に混乱を招いてしまう
・CSS3だけだとフィーチャーフォン(ガラケー)に対応できない
などが挙げられます。