コーディングメソドロジー

第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デザインを取り入れるか否かの検討材料にしてみてはいかがでしょうか。

  • 大規模サイト制作のご案内 大規模サイトプロジェクトのポイントやサービス内容をご紹介
  • レスポンシブWebデザインセミナーがDVDになりました。
  • コーディングメソドロジー
  • コーディングファクトリートピックス
  • 受注活動サポートサービス
  • コーディングファクトリーニュース
  • IllustratorでのWebデザイン
  • 求人案内
  • 株式会社モノサス
  • お問い合わせ

    コーディング相談ダイヤル

    お問い合わせ

  • ご相談、お問い合わせフォーム

    ご相談、お問い合わせフォーム