PC・スマホ共通のHTMLを使い、CSSでレイアウトを切り替える方法です。 新規構築では主流で、デザインや導線を根本から見直したいときに向いています。
- 表現の自由度が高く、体験を一から組み立てられる
- 一方で、設計・実装・テストの工数は大きくなりやすい
- カートや決済、在庫連携なども作り直しになるケースがある
「今後数年の基盤として作り直したい」「ブランドサイトとECを統合したい」といったタイミングで検討されることが多い方法です。
「スマホで見ると文字が小さくて読みにくい」「ボタンが押しづらく、カートに進む前に離脱されていそう」――そんな相談はよくあります。
本当はレスポンシブに作り直したいけれど、リニューアルには時間も予算も必要です。さらに、社内体制や基幹システムとの兼ね合いで、PC前提の設計を簡単に変えられないECも少なくありません。
このページでは、ECサイトをスマホ対応させる代表的な4つの方法を整理し、それぞれの良い点と注意点をまとめます。
後半では、当社のスマホ自動変換サービス「movo(ムーボ)」を使った、現実的な進め方もあわせて紹介します。
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の2重管理 | ○プラットフォーム側で機能拡張 | ○更新は従来どおり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版とスマホ版を並べて比較できる検証デモとして活用できます。