改めてECサイトのモバイル・マルチスクリーン対応手法をまとめてみた

1. Googleが紹介する3つのマルチスクリーン対応手法とECサイトでの対応手法
2. 3つの対応手法を比較する切り口

Googleの紹介する３つの手法をもとに
ECサイトのモバイル対応方法を整理

先日Googleから4/21以降「スマホ対応」を検索結果に反映することが発表されましたが、これからスマホ対応のテコ入れを検討されているEC事業者様もいらっしゃるのではないでしょうか。

そこで今回は、ECサイトをモバイル対応・マルチスクリーン対応する際にどんな手法があるか、そしてそれぞれどのような違いがあるかについて、
Googleが自社ページで紹介している「３つのモバイル・マルチスクリーン対応手法」を基に改めてまとめてみたいと思います。

Googleが紹介する3つのマルチスクリーン対応手法とECサイトでの対応手法

はじめに – マルチスクリーン対応 – Google

Googleは、”3つの基本的なマルチスクリーン対応手法”として下記の3つの手法を紹介しています。

レスポンシブウェブデザイン
動的な配信
モバイル専用サイト

1.レスポンシブウェブデザイン

レスポンシブウェブデザインは、どのデバイスからアクセスしても同じHTMLファイルを読み込み、
CSSのメディアクエリと流動グリッドによって、デバイスの画面サイズに合わせた表示を行う方法です。

レスポンシブウェブデザイン – ウェブマスター向けモバイルガイド一つのURL、一つのHTMLファイルをどのデバイスからも読み込む。デバイスの幅に合わせてレイアウトが変化。

Googleはマルチスクリーン対応手法としてはこのレスポンシブウェブデザインを推奨しています。

メリットとしては、

URLもHTMLファイルも一つのため、リンクの共有がしやすく、検索エンジンにもインデックスされやすい
スクリーン幅に応じて表示が調整されるので、さまざまな大きさのデバイスや、縦横の向きを変えても優れたUXを提供することが可能
リダイレクト設定が不要（メンテナンス労力が低い）

などが挙げられます。
一方で、下記のようなデメリットやリスクがあります。

構築時に綿密な設計が必要で、初期のサイト制作費用が「動的な配信」「モバイル専用サイト」に比べて高くなることがある
注意して構築しないとデータ量が過多となってしまうリスクがあり、その際特にモバイル端末でパフォーマンス（表示速度等）が低下してしまう

ECサイトでは

ECサイトでレスポンシブウェブデザインを採用する場合は、スクラッチ（自社開発）やオープンソースのシステムを利用する方法、レスポンシブWebデザインに対応したショッピングカートASPを利用する方法があります。

この方法は、Googleも指摘するように

あらゆるデバイスで一貫した利便性を提供することを重視したいECサイト
PC・スマホなどデバイス毎に担当者やチームに分かれていないECサイト

に適しています。

Googleの指摘するように初期サイト制作時には制作費用・手間が大きくなる可能性がありますが、
リダイレクト設定が不要で、スマホサイトとPCサイトなど別々のページを更新する必要もないので、運用コストは低くすることが可能です。

2.動的な配信

動的な配信は、ウェブサーバーが、ユーザーエージェントを検出し、デバイスに応じてそれぞれ異なるHTMLを配信する方法です。

動的な配信 – ウェブマスター向けモバイルガイドURLは1つで、HTMLは複数。何のデバイスからアクセスしたかをサーバー側で検出し、HTMLを調整して配信する

メリットとしては

URLが一つのため、リンクの共有がしやすい（1のレスポンシブウェブデザインと同じ）。
デバイス別にHTMLをカスタマイズすることが可能なので、スマホ用にコード量を減らして高速表示をすることが可能
「スマホ向けのみ」など特定のデバイスのコンテンツだけ修正したい場合などの変更が容易
デバイス専用のコンテンツとレイアウトを配信できるため、デバイス毎にUIをカスタマイズしやすい

ということがあります。

一方で、デメリットやリスクとしては、

デバイス別の別々のコンテンツを作成するため、コンテンツ管理や更新作業が煩雑となる
ユーザーエージェントを常に最新にしておかなければ、デバイス検出に不備が発生し誤ったHTMLを配信してしまう
デバイスごとに情報量やレイアウトがあまりにも異なる場合にユーザーが使いにくさを感じてしまう

ECサイトでは

ユーザーエージェントによってデバイス毎に異なるHTMLを配信する方法がとられています。

この手法はGoogleも指摘するようにデバイス毎にコンテンツをカスタマイズしたり、スマホ向けに違ったコンテンツを見せたいサイトや、そのような更新作業が煩雑なサイトを運用するリソースがあるサイトに適しています。

一方で、現状のECサイトでは「自動変換ツール」と呼ばれる手法もとられています。

例えば、もともとあるPC用に作られたサイトをモバイル向けのテンプレートに当てはめ自動的に変換し配信するという手法などです。この方法では、デバイス毎にコンテンツをカスタマイズする利点は薄れますが、工数や費用は少なく最低限のスマホ対応をすることも可能です。

しかし自動的にモバイル向けテンプレートに当てはめたHTMLを表示するだけでは、訴求性（転換率）は低くなりがちです。

3.モバイル専用サイト

モバイル向けのサイトを全く別のサイトとして作成し、モバイルからアクセスした場合にモバイル専用サイトにリダイレクトさせる手法です。

別々の URL – ウェブマスター向けモバイルガイドURLもHTMLファイルも別で作成し、アクセスしたデバイスによって誘導する

メリットとしては

デバイス毎にコンテンツやUIをカスタマイズしやすい
モバイルサイトのみの変更が容易

モバイルサイトを別で作るので、モバイルのみのコンテンツやレイアウトをカスタマイズする際にはこの構成が作りやすくなります。

一方、デメリットやリスクとしては

1コンテンツに対するURLが複数になるので、細かいリダイレクト設定が必要（リダイレクト設定にミスがあれば検索エンジンからペナルティを受ける）
複数のページコンテンツの更新やバージョン管理が煩雑
モバイル向けとPC向けUXがあまりにも異なってしまった場合、ユーザーは使いにくいと感じる

などがあります。

ECサイトでは

Googleが指摘するように、この対応手法では、簡単なスマホ専用サイトを作成し、少ない費用でスマホ対応をすることが可能です。

一方、多くのショッピングカートASPでは、もともとあるPC専用サイトに加えて、スマホ専用CMSを用いてサイト作りこむ方法もとられています。

モバイルに対応したページをしっかり作りこむことができるので、リッチなコンテンツや、モバイル専用にカスタマイズされたページも作ることができます。

一方でHTMLファイルやレイアウト、画像なども別々で用意するため、構築の費用や、運用上の手間もデバイスの数だけ大きくなります。

また、現状のECサイトでは、この手法と併せて、データベースを参照してページを自動生成する（例えば、商品画像と商品情報をデータベースから参照して、商品ページを自動生成する）方法を用いられることも多いです。

TOPページや特集ページは専用CMSで別々のHTML/CSSと画像を用いて作りこみ、
商品ページやカテゴリーページはデータベースを参照してテンプレートページにするような方法がよくとられています。

3つの対応手法を比較する切り口

上記の3つの手法を比較する切り口としては、以下のような5つのポイントがあるのではないでしょうか。

検討ポイント①構築運営の手間やコスト

<初期サイト制作・構築>
レスポンシブウェブデザインは構築の際に綿密な設計を行う必要があり、
構築費用は、「動的な配信」「モバイル専用サイト」に比べて比較的高額となる場合があります。

<運用・メンテナンスの手間>
一方サイトの更新に関しては、レスポンシブウェブデザインが最も効率が良いと言えます。まず、URLが一つであるため、スマホサイトとPCサイトをリダイレクトする必要がなく、広告のランディング先の設定も容易です。また、テキストを変更する際の作業工数やデバイスチェックも簡単にできます。

検討ポイント②タブレット対応や新たに登場するデバイスへの対応

2015年にはノートPCとタブレット端末の出荷台数が逆転するという予測もありますが、

上記の方法の中でタブレット端末に最適表示をできるのは、レスポンシブウェブデザインのみです。（もちろんタブレット端末専用のページを作れば対応が可能ですが、PC・タブレット・スマホ別々でサイトを運用する費用や手間を考えれば、現実的ではありません。）

また、iPhone6 Plusなど「ファブレット」端末に象徴されるように、「スマートフォン」と「タブレット」などデバイスの垣根はなくなってきています。さらにテレビなど新たなデバイスの登場も予想されます。こういった変化に柔軟に対応できるのは、デバイスの幅に合わせて表示を変化させるレスポンシブウェブデザインの強みといえるでしょう。

検討ポイント③表示速度

モバイルECでは特に表示速度が重要と言われています。

Googleも指摘するように、もっとも表示速度を高めやすい構成は、動的な配信でモバイル専用にカスタマイズしたHTMLを配信する方法です。

レスポンシブウェブデザインでは、基本的には同じHTMLファイルをどのデバイスでも読みこむため、画像の使い方などにデータ容量が大きくなるリスクがあります（そのため、サーバーサイドで画像やソースコードを圧縮したり、CDN（コンテンツデリバリーネットワーク）を用いるなど、サーバー側での速度改善の工夫も必要です）。

また、スマホ専用サイトを作成してリダイレクトさせる場合には、表示までにリダイレクトの時間も含まれてきます。