コーディングメソドロジー
第57回 レスポンシブWebデザインの長所・短所

第57回 レスポンシブWebデザインの長所・短所

様々なWebサイトで、レスポンシブWebデザインで作られたサイトが多く見受けられるようになってきました。「今、レスポンシブWebデザインが流行っているから。」という理由でレスポンシブWebデザインの導入するのではなく、制作するWebサイトは『本当にレスポンシブWebデザインに向いているサイトなのか』を考える必要があります。そこで、レスポンシブWebデザインの長所・短所、注意点をご紹介したいと思います。

レスポンシブWebデザインの長所

レスポンシブWebデザインの長所は、①ワンソースでPC・スマホの両ページを管理できます。それぞれ分けて制作している場合、コンテンツの更新はPCサイトとスマホサイトの両ページを更新する必要があり、手間とミスのリスクが発生します。
また、PCサイトとスマホサイトにそれぞれ同じコンテンツがあると検索エンジンでクロールされにくくなりますが、②レスポンシブWebデザインだとワンソースなので、コンテンツの重複がなくSEOにも有効なサイトになります。
③レスポンシブWebデザインの場合はデバイスにより閲覧するページのURLを振り分ける必要がなくURLを統一できます。FacebookのいいねボタンやTwitterのツイートボタンでサイトへのリンクを設置する場合、ボタンを押した人がPCから閲覧していた場合、ボタンを押して掲載されるリンクのURLはPCサイトのものになり、それをスマホからリンクを押した際に、デバイスはスマホにも関わらずPCサイトへ飛ばされることになります。URLが統一されていると、PCでもスマホでも振り分け無しでそれぞれの最適な形のページでサイトを閲覧できます。

レスポンシブWebデザインの短所

次にレスポンシブWebデザインの短所についてですが、まず①ページ制作に大幅な工数が掛かります。通常のコーディングと同様の工数と思われがちですが、様々なデバイス、ブラウザ、バージョン違いのOS等、全てで不具合無く見れるページを作るとなると、使えるCSSやJavaScriptが限られる場合もあり、それらに注意しつつコーディング、デバッグを繰り返す為、通常より時間が掛かります。コーディングの工数を軽減するには、上流工程のサイト設計の時点でしっかり計画しておく必要があります。例えば、Internet Explorerの8以下のバージョンではCSS3やMedia Queryが使えないのでレスポンシブ対応が難しかったり、AndroidやiOSでもバージョンが古いもので発生する不具合も多々あります。
②しっかりした設計も大切ですが、それらの不具合を把握しつつページ制作したり、PC・スマホ両方のレイアウトをワンソースにまとめる為、ソースコードは複雑になりやすく、それらを考慮しつつ制作するには豊富な専門知識やスキルが必要です。
長所で「 1つのHTML（ワンソース）でPC・スマホのページの管理ができる」というものをあげましたが、③新規コンテンツの場合は、そのデザインとCSSの調整が必要であり、既に制作されているページに追加となると、ソースが複雑なので更新・運用作業がとても大変になります。
また、④ページの表示速度もページの閲覧環境により遅くなってしまうこともあります。ワンソースにたくさんのソースを書くことになるという点も理由の一つですが、PCディスプレイ用のページのサイズを小さくし、ブラウザサイズに合わせてPC用の大きい画像をスマホ用に縮小させたりする場合、PCよりスペックの低いスマホや古いバージョンのOSだと画像の読み込み処理に時間が掛かることがあります。