Webプロデューサーのノート

デジタルマーケティング、Webサイト開発を生業としているWebプロデューサーのTipsとかポエムとか

ダイナミックサービングかレスポンシブウェブデザインか、どっちで作るか悩んだキミへ

前にデザイナーさん向けにこんな記事を書いたんですけど、

kinjo.hiroshi.world

この記事のなかのダイナミックサービングで作るか、レスポンシブウェブデザインで作るか、この問題もWebデザイナーを始めたばかりの方は判断が難しいと思います。 今回は私なりの判断基準について書いてみます。

あ、当然、今どきスマホ対応していないサイトはNGですよ。

MFI(Mobile First Index)を知らない方はまずこちらをチェックです。

www.suzukikenichi.com

モバイル対応しないとSEOにも影響が出てくるんですねー

そもそもダイナミックサービングとレスポンシブウェブデザインとは?

ダイナミックサービングとは、URLはPCとスマホで一緒なんですが、アクセスしているデバイスによって見せるページやテンプレートを切り替える方式です。

テンプレートを切り替えるというのは例えばこんな例です。

  • ECサイトの商品詳細ページで、商品情報は同一だが、PCとスマホで見せ方を変えれるようなテンプレートを用意し、デバイスによって切り替える。

  • メディアサイトの記事ページで、記事の内容自体は同一だが、PCとスマホで見せ方を変えれるようなテンプレートを用意し、デバイスによって切り替える。

一方、レスポンシブウェブデザインはPCとスマホで同じページ・HTMLを見せて、CSSでデバイスごとの見せ方を切り替える方法です。

レスポンシブウェブデザインの方が2種類のテンプレートを作るので多少面倒なんですけど、テンプレートが分かれてますのでデザインの自由度が高いかなと思います。

まーレスポンシブウェブデザインもPCの見た目を少し変えようと思ったらスマホが崩れたみたいな事象は多々あり、面倒臭さはありますけどね。

また、後述するセパレートURL方式と違ってレスポンシブウェブデザインもダイナミックサービングも、デバイスが変わってもURLが一緒というのが重要です。だってスマホでシェアしたURLをPCで開くことは良くありますからね。

Webの世界でURLが一緒というのは本当に大事です。

大前提、セパレートURL方式は採用しない

レスポンシブウェブデザインでもない、ダイナミックサービングでもない場合はセパレートURLと呼ぶようです。

こんな作りです。

  1. PCのページは/a.html、SPのページは/sp/a.htmlを表示する。
  2. ページはそれぞれで作成する。
  3. PCのページに対してSPでアクセスした場合はリダイレクトする。逆も同様。(クライアントにとっては通信が増えるのでストレスです。)
  4. SEOのためにはPCページにはSPのURLのアノテーション、SPページにはPCのURLのアノテーションが必要です。Googleのサイトで書き方をチェックです。 https://developers.google.com/webmasters/mobile-sites/mobile-seo/separate-urls?hl=ja

はっきりいって、3.と4.が面倒です!

もともとPCページがあって、あとでSPのページを作るならセパレートURL方式の採用もアリですが、一から作るなら採用しない方が良いです。

レスポンシブウェブデザインの方が楽だけど、ダイナミックサービングにした方がいい時

筆者は実はレスポンシブウェブデザインがあまり好きじゃないです。

確かにレスポンシブウェブデザインの方が多少工数が浮くんですけど、ほとんど場合、ダイナミックサービングを選びます。

理由としては、こんなケースがあるからです。

  • メディアサイトでPCとスマホで広告メニューを分けたい場合がある。

  • SEOとかが重要じゃない会員登録ページなどで、入力のしやすさを重視し、画面遷移をPCとスマホで分けたい場合がある。

  • PCの方がスマホより画面が大きいので、PCは多くの情報を表示したい場合がある。

  • スマホはすき間時間で見ることが多く、PCはじっくり見るのに向いているので情報を表示する順番を変えたい時がある。

  • CVRを上げるために調整をしようとした時に、PCとスマホで同じページだと調整が難しい。

サービスを伸ばそうとしたとき、少しの工数の差はあんまり重要じゃなくて、やっぱりチューニングしやすいダイナミックサービングを選ぶべきなのは、こういった理由があると思います。

ただ、コーポレートサイトなどはレスポンシブウェブデザインは全然アリです。

サービスサイトと比べると、そんなにチューニングの必要はないですからね。

やたらめったらレスポンシブウェブデザインを薦める人が多いのは?

どこかで見聞きしたんでしょうけど、良く理解していない情報を鵜呑みにし、レスポンシブウェブデザインじゃなきゃダメだ!みたいなことを言う人、結構いますよね。

主にクライアントだと思いますが(汗

恐らくその原因のひとつにGoogleがあると思います。

https://developers.google.com/webmasters/mobile-sites/mobile-seo/

このページにはっきりと「Googleでは、デザインパターンとしてレスポンシブデザインをおすすめします。」と書いています。

筆者は基本的に疑ってかかる方なので、この場合はGoogleの気持ちになり、なぜレスポンシブウェブデザインを薦めたのか推測してみます。

  • レスポンシブウェブデザインにしてくれると、USER AGENTをPCとスマホで切り替えて、同じページを複数クロールする手間が省けるんだよなー

  • レスポンシブウェブデザインにしてくれると、PCとスマホでHTMLが一緒なのでインデックスのデータ量が節約できるんだよなー

Googleは世界中の大量のWebサイトをクロールしているので、この2点が節約出来るだけで、大きなコストメリットがあるのは明白かと思います。

また、Amazonも楽天もNaverまとめもレスポンシブウェブデザインじゃありません。 レスポンシブウェブデザインじゃないとSEOが不利!ってわけじゃないのを付け加えておきます。

最後に

あくまでこれは筆者の考え方であり、ダイナミックサービングで作るか、レスポンシブウェブデザインで作るかは、サイトごとにしっかり判断してください。

実際にレスポンシブウェブデザインで出来ているメディアでも、良いメディアはたくさんあります。

サイトの特徴に応じて選択していただれば!