レスポンシブ

WEB制作

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

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

どちらも一つの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サイトその他、大規模で複雑な企業運営のサイトはこっちの方式が実務では多い。

PC & モバイル

【object-fit】画像の縦横比をCSSだけで固定する手軽な方法

レスポンシブ時代の昨今、ワンソースでPCやタブレット、スマホなど画面サイズが異なる様々なデバイスに対応させることに翻弄されている人も少なくないだろう。

WordPressなどのCMSを使っていると、一見、完璧そうに思えるテーマでもデバイスによっては画像が「びょ~~ん」と伸び縮みしてしまうことがある。この手の解決手法は根が深い場合は本当に苦労するし、当たり前のことが当たり前にできていないのを当たり前にするだけ、という心身が疲れ果てる作業なのである。

そんな場合に一発解決できるかも知れないCSSを紹介する。なお、サイトの構造によっては、もっと色々やらないと解決できない場合もあるからご承知おきを。

古典的(?)手法

該当の歪んでしまったCSSに下記のコードを当てる。大抵はこれでうまく行くか、入り組んでいる場合は無理なこともある。

width: 100%;
height: auto;

最近(?)の手法

古めのブラウザやIEなどでは対応しない場合もあるが、便利なコードなので知っておくと良い。

object-fit

詳しくはリンク先で確認して欲しいが(なげやり)、親要素にはめ込むために存在しているプロパティ。アスペクト比(縦横比)を維持したままフィットさせるとかができる。

古典的手法で駄目な場合でも、これで一発解決できる場合もあるから、心身疲れ果てる前にお試しあれ。