レスポンシブウェブデザインのメリット・デメリット

「レスポンシブWeb」デザインはもうご存知でしょうか?

サイトのデザインにおいて、パソコン、iPad、スマートフォン(スマホ)など、大きさが違うそれぞれの端末に適したサイトレイアウトや文字の大きさになるように、CSS(スタイルシート)で指示することで、サイトを見やすくする技術です。

レスポンシブWebを使わない場合は、それぞれの端末に合わせてサイトを作り、サーバーサイドのプログラムでユーザが閲覧しているOSやブラウザ(ユーザーエージェント)を判別して、表示するHTMLを振り分けます。

レスポンシブWebデザインは、OSやブラウザの判断ではなく、閲覧しているブラウザの横幅サイズを判断基準にしています。

レスポンシブWebのメリットは1つのHTMLで製作するため、管理するHTMLも1つです。
サイト完成後に更新するときも1つの更新で済み、ミスを減らせたり、テキスト修正や画像差し替え程度なら作業時間も短縮できます。

また、Googleはサイトの構築手法の一つとしてレスポンシブWebデザインを推奨していると言われています。
PC用とモバイル用のページを同一のURLとすることができるため、Google のアルゴリズムにとってはコンテンツを適切にインデックスできるようになります。

それによってURLが統一され、端末によってユーザーを案内するページが違うなど、管理する側にとってもユーザーにとっても負担が少なくなります。

ただし、レスポンシブWebにもデメリットがあります。

ブラウザの幅によってCSSを切り替えることから、ブラウザ幅が1000ピクセル(パソコン)の場合は大きい画像を、ブラウザ幅が640ピクセル(スマホ)の場合は小さい画像を表示させることになります。

ところが人の目には見えていなくても、実際は両方がHTMLに記載されているので、容量は大きくなってしまいます。
その結果、スマホのときはページがなかなか表示されない...という可能性も出て来ます。

他にも中規模以上のサイトメンテナンスを行う際は、それぞれの端末に合う表示を設計することになり、構築が複雑になるため時間がかかり、費用も増えてしまいます。

さらに「スマホでPCサイトのレイアウトで閲覧したい」と思っても出来ません。
タブレットの縦向き、横向きとでレイアウトが変わることもあります。

特別なプログラムを知らなくても制作出来ることから、これまでhtml+cssで制作してきたデザイナーにとっても便利な技術ですが、制作するサイトによっては、他の技術と使い分けて制作することになります。

おすすめの記事