「ECサイトをスマホで見ると、レイアウトが崩れていて購入までたどり着きにくい」「本当はレスポンシブに作り直したいが、すぐにはリニューアルできない」。。
一方で、社内体制やシステム事情から、PC 時代の設計のまま EC サイトを運用し続けているケースも多く見受けられます。
本ページでは、ECサイトをスマホ対応させる代表的な4つの方法と、それぞれのメリット・注意点を紹介します。自社のECサイトに合った進め方を検討する際の参考情報としてご覧ください。
後半では、当社のスマホ自動変換サービス「movo（ムーボ）」を活用した現実的な進め方もご紹介します。
BtoC・BtoBを問わず、ECのアクセスの多くは既にスマートフォン経由になっています。
にもかかわらず、PC前提で作られたレイアウトのままでは、次のような問題が起きがちです。
スマホ対応というと「全面リニューアル」を思い浮かべがちですが、実際には予算・社内体制・基幹システムとの連携などの理由から、 すぐに刷新できないケースが多くあります。そこで重要になるのが、今のECを活かしながら、どのように スマートフォンでの「見やすさ」と「操作のしやすさ」を改善するかという視点です。
代表的な選択肢は、次の4つです。 どれが正解かというよりも、自社の制約条件とゴールに合うかどうかで考えるのが現実的です。
PC・スマホ共通のHTMLを使い、CSSでレイアウトを切り替える方法です。 新規構築のECサイトでは主流のやり方で、ブランド表現や導線をゼロから設計し直したい場合に向いています。
「数年使える新しいECを作りたい」「ブランドサイトとECを統合したい」といったタイミングで検討されることが多い選択肢です。
既存のPC版とは別に、スマホ専用のECサイトを用意する方法です。 スマホに特化したUIを作り込めますが、2つのサイトを常に同期させる運用負荷がネックになります。
「キャンペーン用に一時的なスマホLPを増やしたい」といった用途では有効ですが、長期運用の本格ECにはあまり選ばれなくなりつつあります。
楽天市場・Shopify・ASPカートなど、スマホ対応が前提のプラットフォームに移行する方法です。 基幹業務とのつながりをどう確保するかが重要な検討ポイントになります。
「今のカートシステム自体が古くて限界」「とにかく運用コストを軽くしたい」といった場合に候補になります。
PC向けに作られた既存ECの手前に、「スマホ専用の中継フィルタ」をはさむ方法です。 ユーザーのスマホからのアクセスだけを一度当社クラウド側に通し、画面サイズに合うレイアウトへと自動変換します。
「1日も止められないEC」「基幹システムと密に連携していて、今すぐには触れないEC」で、 まずスマホ体験だけを先に底上げしたい場合に特に相性の良いアプローチです。
上記4つの方法を、よく質問をいただく観点で整理したものが次の表です。 あくまで傾向ですが、自社の状況に近い列をイメージする参考になります。
| 比較観点 | 1. レスポンシブ リニューアル |
2. スマホ専用 別サイト |
3. ECカート等へ プラットフォーム変更 |
4. スマホ自動変換 （movo） |
|---|---|---|---|---|
| 初期コスト | ×制作ページ分の費用 | △スマホ側分を追加制作 | △移行・連携の設計次第 | ○変換サーバー初期構築費のみ |
| 導入スピード | △要件次第で中〜長期 | △ページ数による | △データ移行がボトルネック | ○テスト変換後、短期間で公開 |
| デザイン・UXの自由度 | ○ゼロベース設計で自由度が高い | ○スマホ専用UIを作り込める | △テンプレートの範囲内 | ○元ページと連動させつつカスタマイズ可能 |
| 運用・更新のしやすさ | ○PC・SP共通で一元管理 | ×PCとSPの2重管理 | ○プラットフォーム側で機能拡張 | ○更新は従来どおりPC版だけでOK |
| EC本体への影響 | ×プログラム含め全面見直し | △URL／導線の整理が必要 | ×カートそのものを変更 | ○EC側はそのまま、スマホ表示だけ最適化 |
| 「とりあえず早く改善したい」場合 | ×時間・予算ともに重め | △規模による | △移行計画次第 | ○現環境のまま短期間でスマホ対応 |
当社のスマホ自動変換サービス「movo（ムーボ）」は、「エンドユーザーのスマホ」と「既存ECサーバー」のあいだに中継フィルタをかませる方式です。 スマホからのリクエストを一度当社クラウド側で受け取り、PC版ECのHTMLをリアルタイムで読み込んで、スマホに最適化した形で返します。
実際にご相談いただくのは、次のようなECです。
こうしたECでは、「リニューアルしたい気持ちはあるが、まずは売上を止めずにスマホからの離脱を抑えたい」という声が多く、 実際に導入いただいたお客様からは次のようなコメントがあります。
将来的にフルリニューアルを行う場合も、次のようなステップが取りやすくなります。
検討の初期段階では、難しい資料は必要ありません。
実際の進め方の一例は次のとおりです。
スマホ対応したいECサイトのURLと、ざっくりとした課題感（例：カートまでの離脱、マイページの見づらさ など）をお知らせください。 サーバー情報やソースコードのご提供は不要です。
当社側でテスト用の変換設定を行い、実際のECをそのままスマホ表示したテスト環境をご用意します。 社内のPC・スマホから一定期間アクセスいただき、見やすさや操作感をBefore／Afterで比較していただけます。
テスト結果を踏まえ、「ここはもっとボタンを大きく」「このブロックはスマホでは非表示」といった細かな要望を伺いながら、 レイアウトや導線のチューニングを行います。
サブドメインの設定（例：m.example.com）と、スマホからのアクセスをmovo経由に切り替える設定を行います。
EC本体のプログラムはそのまま、短期間でスマホ最適化されたECとして運用開始できます。
テスト変換に必要なご準備はありません。
スマホ対応したいECサイトのURLをお送りいただくだけで、当社担当者がオンラインで仕組みをご説明しながら、
社内の皆さまでスマホ版を確認いただけます。
※ご希望に沿わない場合は、その場でお断りいただいて問題ありません。
※会議や稟議の場でも、PC版とスマホ版の見やすさ・操作性をBefore／Afterで比較できる検証デモとしてご活用いただけます。
