【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

ECサイト構築クラウド型プラットフォーム

【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

モバイルファーストマーケティングラボ

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

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

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

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

 

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

 

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

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

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

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

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


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

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

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

メリットとしては、

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

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

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

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

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

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

に適しています。

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

 

2.動的な配信


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

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

メリットとしては

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

ということがあります。

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

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

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

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

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

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

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

 

3.モバイル専用サイト


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

mbsite
別々の 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(コンテンツデリバリーネットワーク)を用いるなど、サーバー側での速度改善の工夫も必要です)。

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

検討ポイント④複数デバイス間の利用

Googleも指摘するように、デバイスごとに大きくUXをカスタマイズしたい際に
適しているのが「動的な配信」「モバイル専用サイト」であり、
一貫したUXを提供するのに適しているのが「レスポンシブウェブデザイン」となります。

デバイスごとにユーザー体験を大きく変えるべきか、同等のUIを提供すべきかは、
ユーザーがWebサイトをどのように利用しているかによって変わってきます。

ユーザーの利用形態がどれだけデバイスによって変わってくるかを検討する必要があります。

現在言われているのは、ユーザーはスマホ→PCなど複数のデバイスを跨いでWebサイトを使用する(クロスデバイス利用、引き継ぎ利用等と呼ばれています)のが当たり前になっているということで、この点も重要です。

参考:マルチスクリーン時代 デバイスのいま – Yahoo! JAPAN マーケティングソリューション

検討ポイント⑤SEO・インデックスのされやすさ

GoogleはレスポンシブWebデザインを推奨しており、レスポンシブウェブデザインは検索エンジンにインデックスされやすいということも明言していますが、

レスポンシブWebデザインだからと言ってただちに検索結果で上位表示されるという訳ではありません。

しかし、レスポンシブWebデザインがGoogleBotにインデックスされやすいということは明記されていますし、リダイレクト設定が適切に行われなければ、ペナルティを受ける可能性があります。
運用上適切なリダイレクト設定を維持することが可能かどうかは、対応手法を決めるまでに検討する必要があるでしょう。

 

自社サイトのリソースとユーザーにあった構成を

上記Googleのページでは、

費用、かけられる期間、利用できる人的資源やインフラストラクチャ、ユーザーのニーズなど、さまざまな要素を考慮する必要があります。

とありますように、ECサイトにおいても

  • ユーザーのニーズ
  • 自社のリソース

を考慮して対応手法を決定する必要があります。

そのうえで、敢えて申し上げれば、レスポンシブウェブデザインはもっともシンプルでバランスの取れた手法であると考えています。

その理由は、

  • 運用効率の高さ(更新作業が効率的やリダイレクトが不要な点)
  • タブレットにも対応が可能であり、複数デバイスで一貫したUXを提供できる
  • 検索エンジンとの相性の良さ

です。

デバイスを跨いでの引き継ぎ利用が想定されるサイトでは、デバイス間で同等の情報量やユーザー体験を提供することが望ましいと言われています。

加えて、小規模~中規模EC事業者様では、限られたリソースの中で店舗運営の効率化に取り組まれていることも多く、リダイレクトの設定や複数デバイスの更新・確認作業よりも、広告運用やコンテンツ作成に重点を置かれたい場合が多いのではないでしょうか。

様々なデバイスからアクセスしてくるユーザーのニーズを満たす最も効率の良い手法として、ECサイトをモバイル対応・マルチスクリーン対応する際にはレスポンシブウェブデザインも必ず検討いただくべきであると考えます。

黒河

”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。
機能のご確認はお気軽にお問合せ、もしくは2週間無料お試し利用で。
aishipRの無料体験、お問合わせはお気軽に。説明会・資料請求も受付中。
0120-173-163
0120-173-163
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+