ユーザ毎にブラウザの幅は異なるから１行に表示する商品数は変更できるようにすべき
ユーザ毎に使用デバイスが異なります。
大きなディスプレイのデスクトップパソコンを使用している人もいれば、小さいディスプレイのラップトップ・ノートパソコンを使用している人もいます。
その為、ユーザ毎にブラウザの横幅も当然異なります。
にも関わらず、１行あたりに表示する商品数が同じだとユーザビリティが悪いです。
ECサイトの商品一覧ページの１行あたりの商品表示数はユーザ環境に合わせて変動するのが効果的です。
ブラウザの横幅に合わせて１行あたりの商品表示数を変動させる機能を実装する
では、実際に画像で説明しましょう。
横幅が980px以下の場合
ブラウザの横幅が980px以下の場合、１行に１商品または２商品を表示可能です。
１行に表示する商品数をアイコンで端的に表現しています。
個人的にはシンプルな表示は大好きですが、リテラシーの低いユーザだと気づかないかもしれませんね。
横幅が981px以上、1440px以下の場合
ブラウザの横幅が981px以上、1440px以下の場合、１行に２商品または３商品を表示可能です。
さすがにこの横幅で１行に１商品を表示させることはユーザビリティ的にあり得ませんので、１商品アイコンは消えます。
横幅が1441px以上の場合
ブラウザの横幅が1441px以上の場合、１行に３商品または４商品または５商品を表示可能です。
下の画像は１行に４商品を表示させた場合です。
下の画像は１行に５商品を表示させた場合です。
１行に表示する商品数を変更することで、商品画像のサイズも変わります。
ユーザの好みに合わせて表示件数（＝画像サイズ）を提供することで、ユーザはサイトを自分好みにカスタマイズできます。
投稿者プロフィール
- サンクユーのEC-CUBE担当。15年以上にわたりEC-CUBE開発に従事し、2系・3系・4系すべてに精通。難易度の高いカスタマイズや、他社構築サイトの改修・再設計も多数対応しています。
Javaでの業務システム開発を起点に、PHP・Perl・フロントエンド・CMSまで横断的に対応。基幹システム連携や業務フローを踏まえた設計を得意とし、複雑な要件にも柔軟に対応可能です。
ChatGPT CODEXを活用し、開発スピードと品質の両立を実現しています。
