- Coding Methodology
- 第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だと画像の読み込み処理に時間が掛かることがあります。
長所
- ①1つのHTML(ワンソース)でPC・スマホのページの管理ができる
- ②SEOに有効
- ③URLを統一できる
短所
- ①ページ制作に工数が掛かる
- ②ページ制作には豊富な専門知識や高いスキルが必要
- ③新規コンテンツの追加更新・運用が難しい
- ④スマホや古いバージョンのOSだとページの表示速度が遅くなる
- レスポンシブWebデザインの向き・不向き
-
長所・短所の点から、サイトの種類によってもレスポンシブWebデザインに向き不向きがあります。例えば、記事を配信するWebサイトではSNSボタン等を配置して記事を拡散させる目的等を考慮するとURLを統一できるので向いていると言えます。また、商品のランディングページ等の利用シーンがデバイスにより左右されないもの、ページ数が多く、更新頻度も多くない小~中規模サイト・企業サイト等もレスポンシブWebデザインに向いていると言えるでしょう。
逆に、レスポンシブWebデザインはサイズが変わるだけで、PCサイトとコンテンツの内容や掲載順序が変わらないので、コンテンツの順序やサイズの規定が厳しいサイトや、1ページのコンテンツ量が多いサイトは、レスポンシブWebデザインに不向きかもしれません。これらのサイトを制作する場合は、費用・設計・制作工数を考えると、PCサイトとスマホサイトを分けて制作した方が有益な場合もあります。最近では、レスポンシブWebデザインのフレームワークも増えてきましたので、デザインの自由度は限られることになりますが、「1から制作するのは大変」という方はフレームワークを利用して制作するという手段もあります。
また、レスポンシブWebデザインは多くのデバイスに対応するように制作することになりますが、全てに対応しようとすると、制作工数が膨大になりますので、デバイスによる表示の違いはある程度許容しなければならないこともあります。設計の段階でOS・ブラウザのシェア率をリサーチし、対応範囲を絞ることが重要です。
これらのことを、レスポンシブWebデザインを取り入れるか否かの検討材料にしてみてはいかがでしょうか。