このドキュメントに関するご質問は、Facebookグループ https://www.facebook.com/groups/Website.Improvement.Open.Source/ までお願いします。

1. PC向けサイト・スマートフォン向け
サイト 並行運用の種類
ver. 1
Ptmind
https://www.facebook.com/groups/Website.Improvement.Open.Source/

2. 1. レスポンシブウェブデザイン
1つのURL・１つのHTMLで、デバイス環境ごとに異なるデザインを表示する方法
• URLが一つ：ユーザーがクロスデバイスでシェアやリンクでき、使い勝手が良い。検索エンジンがインデック
スしやすい。
• 合理的なユーザビリティ：デバイスごとにカスタムされたコンテンツ配信が可能。
• 横長画面・縦長画面への対応が柔軟：ユーザー毎に縦長画面・横長画面の違いがあっても、自然に対応可
能。
• リダイレクトがない：サイト読み込みに時間が掛からない。
• Googlebotがクロールしやすい。ただし、レスポンシブウェブデザイン採用自体が直接SEO評価につながる
わけではない。
2

3. 2. 動的な配信
URLは１つだが、アクセスするデバイスごとに異なるHTMLを配信する。Webサーバがデバイスの種類を検知し
て別々のHTMLを配信する方法で、「動的コンテンツ配信」あるいは「ダイナミックサービング」とも呼ばれる。
• ユーザビリティを最適化できる：デバイス毎にカスタムされたコンテンツ・レイアウトを利用できる。
• 変更が簡単：他のデバイスを気にせずに、特定のデバイスの画面サイズ向けコンテンツやレイアウトを作る
ことができる。
• 読み込みが早い：合理的なコンテンツ作成でデバイスごとに最適な読み込み時間に調整できる。
• URLが１つ：レスポンシブルデザイン同様、ユーザは１つのURLで利用できる。
• コンテンツが分岐する：同じコンテンツなのに複数のカスタムセットが存在してしまう。CMSがそれに対応し
ていない限り、セット間のコンテンツ更新・同期が煩雑。
3

4. 3. 別々のURL
コンテンツは同じでも、デバイス環境ごとに異なるURL・別のHTMLを配信する。
• デバイスごとにユーザビリティを最適化できる：他のデバイスを気にすることなく、最も自由にスマホ対応サ
イトを制作できる。
• 変更が簡単：他のデバイスを気にすることなく、自由にスマホ向けサイトを制作できる。
• URLが複数できる：クロスデバイスのページ共有の際など、リダイレクト、canonical属性の記述など注意が
必要。また、リダイレクトの際に余計な読み込み時間が生じる。
• コンテンツが分岐する：１つのコンテンツに２つ以上の異なるセットが存在し続けるため、データ管理が煩雑。
4

5. 4. PC向けWebサイトをスマホ向けに変換してくれるサービス
PC向けのWebサイトを簡単にスマホ対応させる「スマホサイト変換サービス」が複数リリースされている。
■ スマホサイト変換サービスの種類
スマホサイト変換サービスは、4つの変換タイプに分かれる。
1. 端末変換タイプ： Webサイトにアクセスと同時に、変換エンジンがWebブラウザに変換処理のスクリプトを
返し、端末（スマホ）で変換処理を行う。 製品例： flamingo（フラミンゴ）、 Mobify（モビファイ）
2. プロキシ変換タイプ： サイトにアクセスしHTMLやCSSファイルのやりとりをするタイミングで変換エンジン
を通すことで、スマホ向けに変換される。
3. CSS変換タイプ： CSS変換タイプでは、サイトのアクセス時に変換用のCSSを読み込み、スマホに合わせ
たデザインに変換される。 製品例： shutto（シュット）
4. リダイレクト変換タイプ： リダイレクト変換タイプでは、PCサイトへのアクセス時にスマホ用に変換された
サイトへとリダイレクトする。 製品例： Mobilezed、 DudaMobile（デューダ・モバイル）
5

6. 参考文献
スマートフォン対応サイトを制作する5つの方法 - MEGLOG
http://meglog.net/technique/5-ways-to-create-smartphone-website.html
どれがベスト？スマホ対応サイトの構築方法３種 – SEO Packブログ
https://seopack.jp/seoblog/20150107-3ways-to-built-mobile-site/
簡単スマホ対応！おすすめスマホサイト変換サービス5選 | 構築ツール | 知る・学ぶ | Marketing Bank （マー
ケティングバンク）
https://www.marketingbank.jp/special/cat02/6.php
6

7. このドキュメントについてのご質問は、下記に書き込んでください。
Webサイト改善手法 Open Source化 Project
https://www.facebook.com/groups/Website.Improvement.Open.Source/