ECサイトのスマートフォン対応は、画面幅に合わせて縮めるだけでは不十分です。商品情報を見つけ、選択肢を理解し、入力を訂正して注文できるかを、実際の端末で確認します。Googleはスマートフォン版をクロール・インデックスに用いる方針を案内しており、PC版と主な内容・メタデータをそろえることも推奨しています。詳細はGoogle Search Centralのモバイル対応ガイドを確認してください。
先に直す箇所を購入手順で見つける
| 画面 | スマートフォンで確認すること | 修正の例 |
|---|---|---|
| 一覧・検索 | 商品名、価格、絞り込みが見切れず操作できる | 不要な列を減らし、条件と解除方法を表示 |
| 商品詳細 | 写真、サイズ・色、在庫、送料や返品条件を確認できる | 選択肢名と選択後の価格・在庫を明確にする |
| カート | 数量変更、送料、合計、削除が分かる | 操作後に金額と画面表示を更新する |
| 入力フォーム | ラベル、必須項目、入力例、エラーが分かる | 問題のある入力欄の近くに訂正方法を表示 |
| 注文確認 | 商品・数量・合計・支払・配送・返品を見直せる | 注文内容へ戻って変更できる操作を設ける |
| 注文完了 | 注文番号、通知先、問い合わせ先が確認できる | 完了後に行うことと連絡方法を表示 |
レスポンシブ画面で内容と操作性を保つ
レスポンシブ設計は同じURL・内容を画面幅に合わせて表示する方法の一つです。PCとは見せ方を変えても、商品仕様、主要な説明、見出し、title・description、構造化データをスマートフォンから確認できるようにします。Googleはレスポンシブデザインを実装・保守しやすい構成として推奨していますが、別URLや動的配信を使う場合は、モバイル版のURL・robots・canonical・構造化データも点検してください。
- 画面を拡大・縮小しても、価格・ボタン・入力欄が重ならない。
- キーボード操作で商品選択、入力、カート、注文確定まで進める。
- タップ対象が隣のリンクと近すぎず、誤操作しにくい。W3CのWCAG 2.2基準2.5.8は24×24 CSS pxまたは間隔等の条件を示します。
- 画像の遅延読み込みで購入に必要な情報が操作後にしか出ない状態になっていない。
- 注文確定前に数量、価格、送料、支払い、引渡し、返品等を確認・訂正できる。
操作対象の考え方はW3CのWCAG 2.2解説、注文画面の表示は消費者庁の通信販売ガイドラインで確認できます。個別のサイトに対する適合判定や法的判断は、必要に応じ専門家に相談してください。
公開前と公開後の測定を分ける
公開前には、代表的な商品を使った購入テストと表示確認を記録し、公開後には同じ手順を再確認します。Google Search Consoleを使う場合、Core Web Vitalsは読み込み・応答・視覚安定性の実利用データ指標として案内されています。測定値はユーザー体験の点検に使い、単一の指標で検索順位や売上の変化を保証しないでください。指標と報告はGoogle公式ガイドを参照してください。
スマートフォン購入テストやECサイトの改修については、ECサイト制作のサービス内容をご覧ください。お困りの画面URL、端末、操作手順をお問い合わせで共有してください。
コメント