Blog

ダイナミックサービングで作るか、レスポンシブウェブデザインで作るか、始めたばかりWEBディレクターやWEBデザイナーの方は判断が難しいと思います。
今回はWebサイトを新たに作る時の筆者なりの判断基準について書いてみます。

もちろんモバイル対応していないサイトは対象外です。
MFI（Mobile First Index：スマホ優先インデックス）を知らない方はまずこちらをチェックです。

モバイルサイトとモバイルファースト インデックスに関するおすすめの方法

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

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

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

一方、レスポンシブウェブデザインはPCとスマホで同じページ・HTMLを見せて、CSSでデバイスごとの見せ方を切り替える方法です。
ダイナミックサービングの方が2種類のテンプレートを作るので多少面倒なんですけど、テンプレートが分かれてますのでデザインの自由度が高いかなと思います。
レスポンシブウェブデザインもPCの見た目を少し変えようと思ったらスマホが崩れたみたいな事象は多々あり、面倒臭さはありますけどね。

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

セパレートURL方式は採用しない

• 1. PCのページは/a.html、スマホのページは/sp/a.htmlを表示する。
• 2. ページはそれぞれで作成する。
• 3. PCのページに対してスマホでアクセスした場合は/a.htmlへリダイレクトする。逆も同様。（ユーザにとっては通信が増えるのでストレスです。）
• 4. SEOのためにはPCページにはスマホのURLのアノテーション、スマホのページにはPCのURLのアノテーションが必要です。Googleのサイトで書き方をチェックです。

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

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

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

確かにレスポンシブウェブデザインの方が工数が少し浮くきますが、ほとんど場合、ダイナミックサービングを選びます。
理由としては、こんなケースがあるからです。

• 例えば広告収益を柱とするメディアサイトでPCサイトとスマホサイトで広告メニューを分けたい場合がある。
• SEOとかが重要じゃない会員登録ページなどで、入力のしやすさを重視し、画面遷移をPCとスマホで分けたい場合がある。（登録フォームを検索エンジンがクロールするのは負荷が大きいと言われており、フォーム系のページはnoindexにするSEOの手法があります。SEO効果の真偽について責任はとれませんが、検索エンジンにクロールさせる必要がないのなら、URLの一意性にこだわる必要が無いので入力のしやすさにこだわった方が良いというのが筆者の見解です。）
• PCの方がスマホより画面が大きいので、PCは多くの情報を表示したい場合がある。
• スマホはすき間時間で見ることが多く、PCはじっくり見るのに向いているので情報を表示する順番を変えたい時がある。
• CVRを上げるために調整をしようとした時に、PCとスマホで同じページだと調整が難しい。

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

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

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

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

どこかで見聞きしたんでしょうけど、良く理解していない情報を鵜呑みにし、レスポンシブウェブデザインじゃなきゃダメだ！みたいなことを言う人、結構いますよね。
恐らくその原因のひとつにGoogleの検索エンジンがあると思います。

モバイルサイトとモバイルファースト インデックスに関するおすすめの方法

このページにはっきりと「Google では、実装と維持が最も簡単なデザイン パターンとしてレスポンシブ ウェブ デザインをおすすめしています。」と書いています。

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

• レスポンシブウェブデザインにしてくれると、クローラのユーザーエージェントをPCとスマホで切り替えて、同じページを複数回クロールする手間が省ける
• レスポンシブウェブデザインにしてくれると、PCとスマホでHTMLが一緒なのでインデックスのデータ量が節約できる

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

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

最後に

ここまでダイナミックサービングかレスポンシブかの判断基準を説明しましたが、筆者の主観が多分に入っており、皆様が判断するときはサイトごとにしっかり判断してください。

筆者はダイナミックサービングをかなり推しましたが、実際にレスポンシブで出来ているメディアでも、良いメディアはたくさんあります。

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