ダイナミックサービングとは？レスポンシブWebデザインとの違いを解説！

制作
2020-6-18
更新日: 2020-6-22
Toshiya Akagi

ダイナミックサービングとはどういうものかご存じですか？
この記事ではダイナミックサービングの特徴、メリット・デメリットを解説し、レスポンシブWebデザインとも比較した上で、スマホ対応にあたってのベストな実装方法を紹介していきます。

1 ダイナミックサービングとは？
- 1.1 スマホ対応が必須になった背景
- 1.2 ３つのスマホ対応の実装方法
2 ダイナミックサービングのメリットとデメリット
- 2.1 ダイナミックサービングのメリット
- 2.2 ダイナミックサービングのデメリット
3 レスポンシブWebデザイン
- 3.1 レスポンシブWebデザインのメリット
- 3.2 レスポンシブWebデザインのデメリット
4 別々のURLを使用した場合（セパレート型）
- 4.1 別のURL（セパレート型）のメリット
- 4.2 別のURL（セパレート型）のデメリット
5 現状ベストなスマホ対応の構築方法とは
6 弊社のWeb制作の強み
- 6.1 集客にも、ユーザビリティ設計にも強い
7 弊社のWeb制作実績『LaniLani』
8 さいごに

ダイナミックサービングとは？

ダイナミックサービングとは、1つのURLに対して、2つのHTMLを用意し、ユーザーがアクセスした端末によってサーバーサイドでPC向けのURLとスマートフォン（以下、SP）向けのURLを出し分けることを指します。

スマホ対応が必須になった背景

近年スマホの普及率は増え続けており、総務省の調査によると2017年現在、75％以上の世帯でスマホを保有し、パソコンの世帯保有率を上回ったとされています。

図表5-2-1-1　情報通信機器の世帯保有率の推移

出典　総務省「平成30年度版　情報通信白書」

また、2016年には、グーグルが「MobileFirstIndex(モバイルファーストインデックス)」の採用を発表し、PCサイトを元にインデックスをしていたものから、SPサイトを評価の軸としてインデックスされるようになりました。

インデックスとは、WebページがGoogleの検索エンジンデータベースに登録されることを指します。

このようにスマートフォンでの閲覧者が増えるにつれて、PCサイトだけではなく、SPサイト向けに対応している（モバイルフレンドリー化されている）ことがサイト制作において必須になってきました。

「モバイルフレンドリー」や「モバイルファーストインデックス」について詳しくはこちらの記事をご覧ください。

【全部わかる】モバイルフレンドリー・モバイルファーストインデックスなどややこしいモバイルSEO用語

３つのスマホ対応の実装方法

あらゆる種類とサイズの端末を表示できるWebサイトへの実装方法をGoogleは3つ推奨しています。以下の表にまとめました。

次の章から、それぞれの実装方法のメリットとデメリットを紹介していきます。

ダイナミックサービングのメリットとデメリット

改めてまして、ダイナミックサービングとは、1つのURLに対して、2つのHTMLを用意し、ユーザーがアクセスした端末によってサーバーサイドでPC向けのURLとSP向けのURLを出し分ける方法です。
それでは、ダイナミックサービングのメリット・デメリットについて紹介していきます。

ダイナミックサービングのメリット

端末に配信する内容（画像など）を変えられるため、表示速度を早くできる

例えばPCサイトで見たときは、PCサイトのデータだけを読み込むため、（スマホサイトのデータは読み込まない）ページを早く表示できます。
それぞれの端末に合わせて、コンテンツの最適化を行いやすい PC、SPサイトごとにコンテンツを作成するため、デバイスにあったデザインを作りやすいです。

URLが1つなので、SNSなどでシェアをされやすい

URLが1つであるため、ユーザーからSNSでシェアされやすいです。URLが複数ある場合、シュアの数も分散されてしまいます。

ダイナミックサービングのデメリット

PHPなどのサーバーサイド言語を使用する必要があるため作業が複雑になりやすい

サーバーサイドの言語を使用し、表示する内容を出し分けるため、導入のコストがかかったり、管理が大変になることがあります。

更新する度に2つのHTMLを修正する必要がある

HTMLが2つあるため、更新の際には2つのファイルを修正しなければなりません。

SPサイト用とPCサイト用で2つのテンプレートを用意する必要がある

デバイスごとに表示内容をかえるために、HTMLのテンプレートを2つ用意する必要があります。

レスポンシブWebデザイン

レスポンシブWebデザインとは、1つのHTMLで配信し、スマホ、タブレット、パソコンごとに、CSS（画像の大きさやレイアウトなど表示の指定）を用意して表示を変更させる方法です。
本章ではレスポンシブWebデザインのメリット・デメリットを紹介していきます。

レスポンシブWebデザインのメリット

HTMLが1つなので、管理がシンプル

Webサイトの修正があった場合に、HTMLの修正が1回で済みます。
ダイナミックサービングや別々のURLの場合にはHTMLの数だけ修正や更新の作業をしなくてはなりません。

URLが1つなので、SNSなどでURLが複数ある場合に比べてシェアされやすい

URLが1つであるため、ユーザーがSNSでシェアをしやすいです。PCサイトとSPサイトでURLが複数あると、シュアの数も分散されてしまいます。

1つのデザインで複数のデバイスに対応できる

デバイスごとにCSSを使い分けるため、同じデザインを複数のデバイスに対応させられます。

検索エンジンがクロールしやすい

1つのURL、HTMLで構成されており、検索エンジンのクローラーが精査しやすいです。

レスポンシブWebデザインのデメリット

表示に時間がかかる

例えばSPサイトを表示する際、HTMLが1つであるため、表示の必要のないPCサイトのデータも読み込まれます。そのため、表示速度が遅くなってしまう可能性があります。

デザインに制限がある

複数のデバイスに対応させることはできますが、HTMLは1つしかないため、スマホとパソコンで大幅にレイアウト変えるということは難しいです。

通常のデザインに比べて、工数やコストがかかる

デバイスごとに、デザインを作成し、それに合わせてコーディングをするため、PCだけのデザイン、スマホだけのデザインに比べて工数やコストがかかります。

レスポンシブWebデザインについてより詳しく知りたい方はこちらの記事をご覧ください。

レスポンシブWebデザインとは？メリットとデメリット、作り方まで紹介！

別々のURLを使用した場合（セパレート型）

別々のURLとは、以下のようにデバイスごとに異なるURL・HTMLを表示させる方法のことです。

PCサイトURL	https://◯◯◯.jp/
SPサイトURL	https://◯◯◯.jp/sp/

別々のURLを使用した場合にはどのようなメリット・デメリットがあるのでしょうか。

別のURL（セパレート型）のメリット

PC向けとSP向けにそれぞれにあったデザインを考えることができる

URLとHTMLがデバイスごとにあるため、最適なデザインを考えることができます。

変更の際に、他のデバイスへの影響を考えなくてよい

URLとHTMLがデバイスごとに分離されているため、修正時に他のデバイスへの影響を考える必要はありません。

別のURL（セパレート型）のデメリット

HTMLとCSSが完全に分かれているため、更新の際には両方とも更新する必要がある

デバイスごとにHTMLとCSSがあるため、更新があった場合にはその数だけ更新作業が発生します。

URLが複数あるため、SNSでシェアされにくい

PCサイトURLとSPサイトURLのようにURLが分かれているため、SNSでのシェアも分散されてしまいます。

コンテンツごとに作成するファイル数が増えるため、データの管理が難しくなる

1つコンテンツを増やすと、PCサイト用とSPサイト用でファイルを作成する必要があり、データの管理が複雑になっていきます。

現状ベストなスマホ対応の構築方法とは

Webサイトを制作後は、サイト運用をし続けなければなりません。
更新の際に複数のURL・HTMLを修正する必要があるダイナミックサービング、別々のURLでは管理が大変になってしまいます。
そのため弊社では、

HTMLが1つで管理・運用がしやすい
URLが1つのため、SEO、SNSでの集客に強い
1つのデザインで複数のデバイスに対応できる

などの理由からレスポンシブWebデザインを基本にしています。

弊社のWeb制作の強み

集客にも、ユーザビリティ設計にも強い

デジタルアイデンティティのCreative Div.ではこれまでにさまざまなサイト、LPを制作してきました。
中でも「レスポンシブWebデザインなどのユーザビリティを考慮したサイト制作」はデジタルアイデンティティが得意とすることの一つです。
他にもWeb制作において、このようなお悩みを解決してきました。