SEO対策に有効なレスポンシブWebデザインのメリットとデメリット

レスポンシブWebデザインについてご存知の方にとっては今さらと思う方もいらっしゃるでしょうが、レスポンシブWebデザインのデザインのメリットとデメリットについて簡単にまとめてみました。

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

ブラウザの横幅サイズを判断してページのレイアウトデザインを調整できる方法です。
PC、スマートフォン、タブレットなどのデバイスごとにHTMLを用意しなくても1つのHTMLファイルで、それぞれのデバイスに最適なサイズのページを表示
してくれます。

メリット

HTMLソース管理がしやすい

例えば、PC、スマートフォン、タブレットによってそれぞれのHTMLがあると修正する時に3つのHTMLを変更しなくてはなりません。
レスポンシブWebデザインだと1つのHTMLで管理しているため、テキスト修正や画像の差し替えなどの更新の場合、デバイスごとにHTMLの修正が無いので、HTML修正忘れのミスが減ります。

URLが統一される

デバイスごとにHTMLがあるとコンテンツの内容が同じでもそれぞれのURLが必要になります。
メールやツイートなどで送られてきたのがPCサイトのURLだったら、PCで見ている人は問題なく見ることができますが、スマートフォンで見る人にとっては見づらく操作がしにくいです。
レスポンシブWebデザインはPC、スマートフォン用とHTMLが分かれていないのでURLが一つで済み、アクセスされたデバイスによって表示が変わるので見る人の環境に左右されずに表示します。

デメリット

スマートフォンだと重くなる可能性がある

一つのファイルでデバイスごとの表示を切り分けています。例えばPCサイトでは表示しているがスマートフォン表示では表示させない画像やコンテンツなどがあるとします。
例
ブラウザ横幅が1200ピクセルの時は、画像を表示（PC）
ブラウザ横幅が480ピクセルの時は、画像を非表示（スマートフォン）

この場合、480ピクセルの時にCSSで「display:none;（非表示）」と記述します。
スマートフォン表示なると画像は消えていますが、HTMLソースには画像のソースは残っており、そのため、スマートフォンでページにアクセスすると画像データを読み込もうとします。そのため、スマートフォンサイトの表示速度が低下することがあります。

ページ構築が複雑になる

一つのファイルで全てを管理しているため従来の制作方法より複雑になり制作に時間がかかります。
また、デバイスごとの場合はデザインも凝ったものができますが、レスポンシブWebデザイン場合は一つのファイルで各デバイス表示制御しているので。そのことの考えながらしてデザインをしなければならず凝ったデザインがしにくいです。

まとめ

現在WEBサイトを閲覧する環境は複数あります。レスポンシブWebデザインは閲覧環境に左右されにくい素晴らしい制作方法です。
ですが万能ではありません。案件の内容によって、レスポンシブWebデザインやデバイスごとの切り替えするのかの選択が必要です。