PC・スマホ共通のHTMLを使い、CSSでレイアウトを切り替える方法です。 新規構築では主流で、デザインや導線を根本から見直したいときに向いています。
- 表現の自由度が高く、体験を一から組み立てられる
- その分、設計・実装・テストの工数は大きくなりやすい
- カートや決済、在庫連携まで作り直しになるケースもある
「今後数年の基盤として作り直したい」「ブランドサイトとECを統合したい」といったタイミングで検討されることが多い方法です。
「スマホで見ると文字が小さくて読みにくい」「ボタンが押しづらくて、カートに進む前に離脱されていそう」――こうしたご相談は、実際によくあります。
本当はレスポンシブで作り直したい。けれど、リニューアルには時間も予算もかかります。さらに、社内体制や基幹システムとの兼ね合いで、PC前提の設計をそう簡単には変えられないECも少なくありません。
このページでは、ECサイトをスマホ対応させる代表的な4つの方法を整理し、それぞれの良い点と注意点をまとめています。
後半では、当社のスマホ自動変換サービス「movo(ムーボ)」を使って、今あるECを活かしながら進める方法もご紹介します。
BtoC・BtoBを問わず、ECのアクセスはスマートフォン中心になっています。
それでもPC前提のレイアウトのままだと、次のような困りごとが起こりやすくなります。
スマホ対応というと「全面リニューアル」を思い浮かべがちですが、実際にはそこまで単純ではありません。
予算や社内体制の問題に加えて、在庫・受注・会員・決済などが既存システムと結びついていると、作り直しの難しさは一気に増します。
だからこそ大切なのは、今のECを活かしながら、スマホでの見やすさや操作のしやすさをどう高めるかという視点です。
代表的な選択肢は、次の4つです。
どれが正解という話ではなく、自社の制約(止められない・触れない・連携が複雑など)と、目指すゴールに合わせて選ぶのが現実的です。
PC・スマホ共通のHTMLを使い、CSSでレイアウトを切り替える方法です。 新規構築では主流で、デザインや導線を根本から見直したいときに向いています。
「今後数年の基盤として作り直したい」「ブランドサイトとECを統合したい」といったタイミングで検討されることが多い方法です。
既存のPC版とは別に、スマホ専用サイトを用意する方法です。 スマホ向けUIを作り込みやすい一方で、2つのサイトを並行して保つ運用が負担になりやすいのが難点です。
一時的なキャンペーン用のスマホLPには使いやすい反面、長く運用する本格ECでは、以前ほど選ばれなくなっています。
Shopifyや各種ASPカート、モールなど、スマホ対応が前提のプラットフォームへ移行する方法です。 ここで焦点になるのは、基幹業務や既存運用とどうつなげるかという点です。
「カート自体が古くて限界がある」「運用負荷を下げたい」という事情が強いときに候補になります。
PC向けに作られた既存ECの手前に、スマホ向けの中継(フィルタ)を挟む方法です。 スマホからのアクセスだけを一度クラウド側で受け、画面サイズに合うように変換して表示します。
「止められない」「基幹と密結合で触れない」ECで、まずはスマホ体験だけ先に整えたいときに相性が良い方法です。
4つの方法を、よくいただくご質問の観点で並べると次の通りです。
あくまで傾向ですが、自社の状況に近いものを考えるための目安としてご覧ください。
| 比較観点 | 1. レスポンシブ リニューアル |
2. スマホ専用 別サイト |
3. ECカート等へ プラットフォーム変更 |
4. スマホ自動変換 (movo) |
|---|---|---|---|---|
| 初期コスト | ×制作ページ分の費用 | △スマホ側分を追加制作 | △移行・連携の設計次第 | ○変換サーバー初期構築費のみ |
| 導入スピード | △要件次第で中〜長期 | △ページ数による | △データ移行がボトルネック | ○テスト変換後、短期間で公開 |
| デザイン・UXの自由度 | ○ゼロベース設計で自由度が高い | ○スマホ専用UIを作り込める | △テンプレートの範囲内 | ○元ページと連動させつつカスタマイズ可能 |
| 運用・更新のしやすさ | ○PC・SP共通で一元管理 | ×PCとSPの二重管理 | ○プラットフォーム側で機能拡張 | ○更新は従来どおりPC版だけでOK |
| EC本体への影響 | ×プログラム含め全面見直し | △URL/導線の整理が必要 | ×カートそのものを変更 | ○EC側はそのまま、スマホ表示だけ最適化 |
| 「とりあえず早く改善したい」場合 | ×時間・予算ともに重め | △規模による | △移行計画次第 | ○現環境のまま短期間でスマホ対応 |
当社のスマホ自動変換サービス「movo(ムーボ)」は、スマホ利用者と既存ECサーバーの間に中継を置く方式です。
スマホからのアクセスは一度クラウド側で受け、PC版ECのHTMLを読み込み、スマホ向けに最適化した形で表示します。
実際のご相談では、次のようなECが多くあります。
よく挙がる声としては、たとえば次のようなものがあります。
将来的にフルリニューアルを行う場合でも、次のような進め方が取りやすくなります。
検討の初期段階では、難しい資料は必要ありません。
実際の進め方の一例は次のとおりです。
スマホ対応したいECサイトのURLと、気になっている点(例:カートまでの離脱、マイページの見づらさ など)をお知らせください。
サーバー情報やソースコードのご提供は不要です。
当社側でテスト用の変換設定を行い、実際のECをスマホ向けに変換したテスト環境をご用意します。
社内のPC・スマホから一定期間アクセスいただき、見やすさや操作感をBefore/Afterで確認できます。
テスト結果を踏まえ、「このボタンはもう少し大きくしたい」「このブロックはスマホでは不要」といった要望を整理しながら、 レイアウトや導線を詰めていきます。
サブドメイン(例:m.example.com)の設定と、スマホアクセスをmovo経由に切り替える設定を行います。
EC本体のプログラムはそのままで、短期間でスマホ向けの見え方に切り替えできます。
テスト変換に向けた事前準備は不要です。
スマホ対応したいECサイトのURLをお送りいただければ、当社担当者がオンラインで仕組みをご説明しながら、
社内の皆さまでスマホ版の見え方を確認いただけます。
※合わないと感じた場合は、その場でお断りいただいて構いません。
※会議や稟議の場でも、PC版とスマホ版を並べて比較できる検証デモとして活用できます。