サイト制作者が語るレスポンシブWebデザインのメリット
こんにちは、開発チームの田中です。普段はレスポンシブと同様のマルチデバイス対応を実現する「GeneCode（ジーンコード）」に携わっています。
今回は、レスポンシブWebデザインのメリット、デメリットについてお話していきます。
Webサイトをマルチデバイス対応するにあたってよく使われる手法としてレスポンシブがあります。
私もレスポンシブでWebサイトを制作することはよくありますが、制作する側の立場から言えるレスポンシブのメリット、デメリットをお伝えいたします。
レスポンシブとは
レスポンシブとは、パソコン・スマホ・タブレットなど異なる端末の画面サイズに応じてCSSを駆使してレイアウトを最適な形で表示する方法のことです。
特徴としては、URLやHTMLはページごとに1つ用意するだけでよく、PCサイトとモバイルサイトを別々に作る必要がありません。
Webサイト上の中身は同じですがCSSによってデバイスごとの見せ方を変化させるのです。
レスポンシブのメリット
【資材管理が楽になる】
PC版とスマートフォンの版で別々のページを持っている場合、更新が発生した際は両方更新する必要がありますが、レスポンシブの場合、ソースは１つなので更新の手間がかかりません。
【SEOに効果がある】
Googleはモバイル対応を行うにあたって、 1つのURLで PCもモバイルも対応できるレスポンシブウェブデザインを推奨しています。URLが2つ存在すると、Googleのクローラーが不正なミラーサイトだと誤解してしまう場合もあります。
レスポンシブのデメリット
【制作コストがかかる】
１ソースで管理が楽なのがレスポンシブのいいところですが、１ソースだからこそ混乱を招くことも多々あります。というのもレスポンシブは１ソースにPCとスマホのコンテンツが入り混じる複雑なソースコードになりがちです。
そのため、設計とコーディングに時間がかかり、レスポンシブの制作費用が上がる原因ともなります。
【コンテンツ修正時に他のデバイスに影響が出る】
コンテンツを改修する場合、レスポンシブはコードが繊細に絡み合っているので、片方のデバイスの場合では綺麗に表示されていても、他のデバイスにした際に画面の崩れが発生していることがあります。
そのため、修正箇所が軽微でも全ての画面サイズで崩れが発生していないかテストを行う必要があるので注意が必要です。
【デザインに制約がある】
例えばPC画面から先に作り、レスポンシブでスマートフォン画面を後に作った場合、PCのHTMLのタグ構造を使ってCSSで対応するためスマートフォン画面のデザインに制約が発生します。
もちろんある程度は、こだわって作ることも出来るのですがソースが複雑になり、その後の運用が大変になります。
【表示速度が遅くなる可能性がある】
HTMLが1つなのでスマホで閲覧した場合も、PCと同じリソースが読み込まれます。スマホでは非表示にしていたとしても、データは読み込まれるため表示に時間がかかることがあります。
PCでは気にならなかった表示速度も、モバイルの場合は回線速度が遅いため表示完了までの時間が延びることがあります。表示速度が原因でGoogleの検索順位が下がることがありますので気を付けておくべきポイントです。
まとめ
レスポンシブのメリット、デメリットについて制作する側の立場からお伝えしましたが、いかがでしたでしょうか。実際に自分でレスポンシブのサイトを構築していくという方の参考になれば幸いです。
シンメトリックでは、レスポンシブのデメリットを軽減しつつレスポンシブと同様のマルチデバイス対応を実現する「GeneCode（ジーンコード）」を提供しています。
スマホ中心のサイト制作、リニューアルをお考えでしたら、是非ご検討ください。