商品一覧ページは商品ページへ誘導する為の大切なページ
ECサイトにおいて、商品一覧ページは見たい属性（カテゴリー）の商品を一覧で見ることができるのでとても便利です。
ユーザは商品一覧ページで比較しながら興味のある商品を見つけることができます。
ECサイトにとっては、商品一覧ページはユーザを商品ページへ導く為のページなので大変重要な役割を担っています。
商品一覧ページに掲載する画像は最も重要な要素の一つ
上述のように、ECサイトにとって商品一覧ページは大変重要なページです。
その一覧ページで最も重要な要素の一つが画像です。
通常、一覧ページに表示する画像は1枚です。
その1枚の画像でユーザがクリックするか否かが掛かっていると言っても過言ではありません。
商品一覧ページの画像をマウスオーバーすれば別画像が表示されるようにする
一般的に、商品一覧ページに表示する画像は、1商品につき1枚です。
商品一覧ページで何枚も画像を表示しているサイトもありますが、正直操作性（ユーザビリティ）が良いとは言えません。
そこで、画像をマウスオーバーすれば別画像が表示されるようにします。
下の1枚目のキャプチャは通常時の商品一覧ページです。
商品のブツ撮り画像が並んでいます。
上部真ん中の商品（デニムジャケット）をマウスオーバーすると、モデル着用の画像が表示されます。
ユーザはマウスオーバーするだけで、別画像を見ることができるのでとても便利です。
ユーザは極めて簡単に商品画像と着用画像を見ることができる訳です。
商品一覧ページの表示方法を商品画像と着用画像の２パターン用意する
商品一覧ページに表示方法の切り替え機能を実装します。
「Product view」をクリックすれば商品画像の一覧、「Outfit view」をクリックすれば着用画像の一覧が表示されます。
商品画像の一覧
着用画像の一覧
衣服の場合、商品画像と同じくらい着用画像が重要です。
クリック1つで商品画像と着用画像が切り替わることで使いやすい商品一覧ページとなります。
投稿者プロフィール
- サンクユーのEC-CUBE担当。15年以上にわたりEC-CUBE開発に従事し、2系・3系・4系すべてに精通。難易度の高いカスタマイズや、他社構築サイトの改修・再設計も多数対応しています。
Javaでの業務システム開発を起点に、PHP・Perl・フロントエンド・CMSまで横断的に対応。基幹システム連携や業務フローを踏まえた設計を得意とし、複雑な要件にも柔軟に対応可能です。
ChatGPT CODEXを活用し、開発スピードと品質の両立を実現しています。
