WEB制作

【MFI】素人でもわかる! レスポンシブとダイナミックサーベイの違い

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

現場では上の偉い担当者がレスポンシブとダイナミックサーベイの違いをわかっていないケースがあるので解説してみる。

どちらも一つのWebサイト、WebページをPCとスマホの画面幅に対応させる手法だが、かなり使われている技術や方向性が違う。

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

まずはわかったつもりのレスポンシブから。よくわかっていない担当者が何となくわかったつもりになっているスマホ対応やモバイルファーストインデックス対応がレスポンシブだろう。

正しくはレスポンシブWebデザインという。Webデザインという言葉の通り、デザイナー的にアプローチ方法。

URLの例としては
https://bicyclist.info/
みたいにホントにPCもスマホも全く同じURLで、内部的にもPC用とSP用のHTMLが別々にあるわけではない。

Webページというのは、現実的な最低限的にはHTMLとCSSという2つのファイルで構成されている。補足すると、ブログやCMSなんかの場合はPHPなどのプログラムやデータベースの情報から表示されたりするけど、あくまでWebブラウザが表示するのはHTMLに書き出したもののみ。

一つのURLに対して、HTMLは単一のまま、CSSというデザインを記述したファイルの記述の仕方でPCやスマホ、さらにタブレットPCなどの中間を含めたあらゆるデバイスに対応させる手法。デバイスの種類ではなくて画面幅を認識させてデザインされているのが特徴。

まぁ、GoogleがSEO的に一押しにしているけど、実務的には複雑な作りになったり、メンテナンスに難があったり、サイトによっては向かない場合もある。個人のサイトなど小規模な場合や、ブログ、LPなんかはレスポンシブが向く場合が多い。

ダイナミックサーベイ(動的配信)とは

なんちゃってWeb担当者の中にはレスポンシブと混同して区別付かない困った人もいる。

個人で手打ちで作った静的なサイトだと、よくPCとSPそれぞれのページを作ってJSとかでユーザーエージェントを読み取って分岐させたするね。

https://test.info/pc/
https://test.info/SP/

これだと完全に別々のページとしてHTMLが存在するので、適切にそれをGoogleに伝えないとよろしくない場合がある。まぁ、個人のページだとそこまで致命的にならなかったりもするが。

それに対してダイナミックサーベイはサーバー側の処理(.htaccess)の、同じURLにアクセスした時にユーザーエージェントで判断して、PCとSPで返すHTMLを別々にしている。企業が運営する大規模、複雑なサイトなどに多い。HTMLが違うということはCSSも違うわけで、ページそのものが別物ということである。

Googleのクローラーから見た時も1つのURLにしか見えず、SP用だけ拾うことことになる。PC用とSP用で内容を大きく変えている場合は注意が必要だったりする。サーバーのシステム的な記述で処理してまで実現しているということなので、多くの場合はPCとSPそれぞれが極限まで最適化されている場合が多いだろう。

まとめ ダイナミックサーベイも実務ではよく使われている

単一URLだからと言っても、レスポンシブとダイナミックサーベイの存在し、その違いがよくわかったと思うが、まとめると下記のようになる。

・レスポンシブ
Google推奨方式。
デザイナー的手法でCSSの記述を使い、デバイスの画面幅でPC、SP、中間デバイスに対応。

・ダイナミックサーベイ
一応Googleが認めてはいる方式(昔?)
サーバー、エンジニア的手法で、単一URLでありながら、PCとSPで別々のHTML、CSSを返す。
ECサイトその他、大規模で複雑な企業運営のサイトはこっちの方式が実務では多い。