「スマートフォンでは文字が小さく、商品情報を読みづらい」「ボタンが押しにくく、購入手続きの途中で離脱されているかもしれない」。このような課題を抱えるECサイトは少なくありません。
レスポンシブデザインへの全面リニューアルは有力な方法ですが、相応の期間と予算が必要です。在庫・受注・会員・決済などのシステムと密接に連携しているECサイトでは、表示部分だけを簡単に作り替えられない場合もあります。
このページでは、ECサイトをスマートフォンに対応させる代表的な4つの方法を取り上げ、費用、導入期間、運用方法、既存システムへの影響を比較します。
後半では、現在のECサイトを継続利用しながらスマートフォン向けの表示を追加できる、当社のスマホ自動変換サービス「movo（ムーボ）」についてもご紹介します。
ECサイトは、スマートフォンから閲覧・購入される機会を考慮して設計する必要があります。
PC向けのレイアウトをそのまま表示している場合、利用者には次のような負担が生じます。
スマートフォン対応の方法は、全面リニューアルだけではありません。
在庫、受注、会員、決済などが既存システムと連携している場合は、改修範囲が広がり、移行テストや社内調整にも時間がかかります。
現在のECサイトを継続して使う必要がある場合は、既存の仕組みに影響を与える範囲と、スマートフォン側で改善したい箇所を分けて検討することが重要です。
代表的な選択肢は、次の4つです。
適した方法は、予算や希望公開時期、既存ECの改修可否、外部システムとの連携、今後の運用計画によって変わります。
PCとスマートフォンで共通のHTMLを使用し、画面幅に応じてCSSでレイアウトを変更する方法です。 サイト構成、デザイン、購入までの導線を含めてECサイト全体を見直したい場合に適しています。
EC基盤の更新時期を迎えている場合や、ブランドサイトとECサイトを統合したい場合に検討しやすい方法です。
既存のPC版とは別に、スマートフォン専用サイトを用意する方法です。 スマートフォン向けの画面を個別に設計できますが、PC版とスマートフォン版を別々に管理する運用が必要になります。
期間限定のキャンペーンページなどでは採用しやすい方法ですが、継続的に運営するECサイトでは、二重管理にかかる負担を事前に確認する必要があります。
Shopify、各種ASPカート、ECモールなど、スマートフォン対応を前提としたプラットフォームへ移行する方法です。 選定時には、画面や機能だけでなく、基幹システムや現在の受注業務とどのように連携するかを確認する必要があります。
利用中のカートが保守期限を迎えている場合や、商品登録・受注処理を含む運営方法を変更したい場合に候補となります。
PC向けに作られた既存ECとスマートフォン利用者の間に、表示変換用の中継サーバーを設ける方法です。 スマートフォンからのアクセスを中継サーバーで受け、取得したPC版のHTMLをスマートフォン向けに変換して表示します。
EC本体の停止や大規模改修が難しく、現在の受注・在庫管理を維持したままスマートフォン表示を改善したい場合に検討できる方法です。
4つの方法について、費用、導入期間、運用方法、既存ECへの影響を比較します。
実際の費用や期間は、ページ数、機能、連携先、データ移行の有無によって変わるため、方式を絞り込むための目安としてご覧ください。
| 比較観点 | 1. レスポンシブ リニューアル |
2. スマホ専用 別サイト |
3. ECカート等へ プラットフォーム変更 |
4. スマホ自動変換 （movo） |
|---|---|---|---|---|
| 初期コスト | ×設計・制作・検証範囲に応じた費用 | △スマホ側分を追加制作 | △移行・連携の設計次第 | ○初期構築・変換設定の費用 |
| 導入スピード | △要件次第で中〜長期 | △ページ数による | △データ移行がボトルネック | ○適合確認と変換設定後に公開 |
| デザイン・UXの自由度 | ○ゼロベース設計で自由度が高い | ○スマホ専用UIを作り込める | △テンプレートの範囲内 | ○元ページの構造を利用して表示を調整 |
| 運用・更新のしやすさ | ○PC・SP共通で一元管理 | ×PCとSPの二重管理 | ○プラットフォーム側で機能拡張 | ○原則として従来の更新方法を継続 |
| EC本体への影響 | ×EC本体を含む改修範囲が広い | △URL／導線の整理が必要 | ×カートそのものを変更 | ○EC本体の大規模改修を避けやすい |
| 短期間で改善したい場合 | ×全体設計と制作期間が必要 | △規模による | △移行計画次第 | ○現行環境を利用して導入を検討可能 |
当社のスマホ自動変換サービス「movo（ムーボ）」は、スマートフォン利用者と既存ECサーバーの間に変換用の中継サーバーを設ける方式です。
スマートフォンからのアクセスをクラウド側で受け、PC版ECのHTMLを取得し、あらかじめ設定した変換ルールに基づいて表示します。
movoは、たとえば次のようなECサイトで検討されています。
導入を検討する企業からは、主に次のような要望が寄せられます。
将来のフルリニューアルを予定している場合は、次のような段階的な導入も検討できます。
初回の確認では、詳細な仕様書をご用意いただく必要はありません。
一般的には、次の手順で導入可否と表示内容を確認します。
対象となるECサイトのURLと、スマートフォンで改善したい箇所をお知らせください。たとえば、商品一覧の見づらさ、ボタンの押しにくさ、購入画面やマイページの操作性などです。
通常、この段階でサーバー情報やソースコードをご提供いただく必要はありません。
当社でテスト用の変換設定を行い、実際のECサイトをスマートフォン向けに変換した確認環境をご用意します。
社内のPCやスマートフォンからアクセスし、PC版との表示差、商品検索、購入手続きなどを確認できます。
テスト結果をもとに、ボタンの大きさ、文字サイズ、表示順、スマートフォンでは不要な要素などを確認します。 あわせて、カート、ログイン、決済、外部ページへの遷移も検証します。
サブドメイン（例：m.example.com）などの接続設定を行い、スマートフォンからのアクセスをmovo経由へ切り替えます。
対象端末、主要ページ、購入手続き、ログイン、外部連携を確認したうえで公開します。
詳細な仕様書やサーバー情報を事前にご用意いただく必要はありません。
対象となるECサイトのURLをお送りいただければ、当社担当者が仕組みと確認方法をご説明し、
テスト環境でスマートフォン版の表示と操作をご確認いただけます。
※テスト結果がご要望に合わない場合は、導入を見送っていただけます。
※PC版とスマートフォン版を比較できるため、社内検討や稟議資料の確認にもご利用いただけます。
