レスポンシブデザインは、画面の幅などに応じてレイアウトを調整する設計です。ECでは商品選択から注文完了までを、狭い画面・タッチ・キーボードでも使えるか確認します。見た目が縮むだけでは対応完了としません。
ビューポートと柔軟な幅を確認する
スマートフォンの幅に合わせる基本として、head内のviewport設定を確認します。例は <meta name="viewport" content="width=device-width, initial-scale=1.0"> です。既存テーマで設定済みなら重複を足しません。拡大を禁止せず、固定幅の要素が画面外へはみ出さないかを点検します。
グリッドとメディアクエリを内容から設計する
GridやFlexboxで列を調整し、読みづらくなる幅で構成を切り替えます。768pxなど一つの値を全サイトの正解とせず、商品名、価格、画像、ボタンが収まるかで判断します。余白を含めた幅と長い文字列も確認し、小さい画面で複数列を無理に詰め込みません。
画像は比率と必要な大きさを守る
画像を枠内に収める基本例は img { max-width: 100%; height: auto; } です。実際には画像の役割、表示サイズ、解像度、通信量も確認します。すべてを高解像度のまま送らず、圧縮後も商品詳細が判断できるかを見ます。動画や比較表のはみ出しも別に点検します。
メニューとフォームは開閉と入力を試す
三本線を表示するだけではメニューは動きません。開閉ボタンの名前、開閉状態、キーボード操作、閉じる方法を実装し、表示した項目へ進めるか確認します。必要なカテゴリを隠し過ぎず、商品選択や数量入力、エラー修正を実際に試します。フォームの項目名も入力欄と対応させます。
実機で購入完了まで確認する
端末の幅、縦横、文字拡大、通信が遅い状態を変え、画像・価格・送料・決済・完了通知まで確認します。テンプレートにレスポンシブ対応とあっても、追加アプリや独自CSSで崩れる場合があります。制作後の変更でも再点検します。Googleの検索要件と使いやすさを確認し、スマホ対応だけで順位や購入率が必ず上がるとは判断しません。
導入前の確認事項
- viewportを重複なく確認したか
- 画面幅を変えて文字と列が収まるか
- メニューを実際に開閉・操作できるか
- 商品選択から完了通知まで試したか
公式資料・関連記事
関連記事：ECサイトのUI・UX改善とデザインの選び方、ECリニューアルを利用者テストで進める手順。
運用設計や確認項目の整理は、現在の業務と対象URLを添えて株式会社AOへご相談ください。
公式資料の確認日：2026年11月2日。記入例や手順は編集上の提案で、導入成果を保証するものではありません。
コメント