ネットショップのレイアウト
スマホで見たときに商品、価格、配送、購入ボタンが自然に読める配置にします。
本文
小さい画面で最初に何が見えるか
スマートフォンの商品ページでは、写真だけで一画面を埋めると、商品名や価格に気づきにくくなります。最初に商品が何かを理解でき、少しスクロールすれば価格、選択肢、配送目安へ進める配置を考えます。
画像が多い商品ほど、写真の下に仕様や注意点を短い見出しで区切ります。購入ボタンを常に画面に固定する場合も、返品条件や送料を隠さない位置にします。
画面上で優先する情報
- 識別商品名、主写真、価格、在庫状態を確認できる。
- 選択色、サイズ、数量の選択を誤りにくくする。
- 条件送料、発送目安、返品を購入前に確認できる。
- 操作ボタンを押しやすく、選択内容を見直せる。
架空のマグカップで配置を考える
上から写真、商品名、価格、容量・色、在庫、送料の入口、購入ボタンと並べます。容量の確認が重要なら寸法図を写真の近くに置き、食洗機の可否は仕様と注意点の中で見つけられるようにします。
「写真→ボタン→長い店の紹介→仕様」という順だと、必要な条件を探して画面を往復します。実際の商品特性に合わせて順番を調整してください。
公開前・改善時に確認すること
| 確認項目 | 実務で見るポイント |
|---|---|
| ファーストビュー | 商品、価値、購入先がスマホで見えるか確認する。 |
| 余白 | 詰め込みすぎず、見出しとボタンを押しやすくする。 |
| 回遊 | 商品から関連カテゴリ、FAQ、比較ページへ自然に進める。 |
操作しながら確認する
片手で画面を操作し、色を選択してからカートへ進みます。選択済みの色が分かるか、誤って隣のボタンを押さないか、入力エラーが画面内で見つかるかを試します。
PCでは横並びの情報がスマートフォンで縦に変わるため、送料説明や返品案内が購入ボタンから遠ざかっていないかも確かめます。
表示崩れだけでなく読める順番を見る
横スクロールや文字の重なりがなくても、説明が途中で途切れる配置では判断しにくくなります。画面幅を変え、文字を大きくした状態でも、商品から購入条件まで順に読めるか確認します。
| 見る場所 | 確認すること |
|---|---|
| 最初の画面 | 商品名と価格の位置が分かるか。 |
| 選択操作 | 色・サイズ・数量の現在値が見えるか。 |
| 購入条件 | 送料・納期・返品が探せるか。 |