商品一覧ページの限られたスペースを如何に活かすかが重要
前回のブログで商品一覧ページで商品画像と着用画像を切替表示する機能をご紹介しました。
商品一覧ページは、１つの商品が使用できるスペースは限られています。
その限られたスペースの中で如何に魅力的に商品を見せるかが商品詳細ページへの誘導率に関わってきます。
商品一覧ページに在庫があるサイズを表示させる
今回は、商品一覧ページに在庫があるサイズを表示させる機能をご紹介します。
常に在庫サイズを表示させることも可能ですが、常時表示させる情報が増えるとデザインが煩雑になりますし、却ってユーザビリティを低下させる可能性があります。
そこで、気になった商品をマウスオーバーすれば在庫があるサイズを表示するようにします。
ユーザが気になった商品がある場合、最初に起こすアクションはマウスをその商品に持っていく行為です。
マウスオーバーで追加情報を表示させることで、ユーザは更にその商品に興味を抱きます。
通常時
通常時は以下のように商品画像、商品概要、価格のみが表示されています。
マウスオーバー時
マウスオーバーすると、在庫のあるサイズが表示されます。
これで、自分に合うサイズの在庫の有無を確認することができます。
在庫があれば商品詳細ページへ遷移し、更に詳しい情報を閲覧し購入を判断できます。
在庫がなければわざわざ商品詳細ページへ遷移する必要もなく、ユーザビリティは向上します。
何でもかんでも表示すればいいという訳ではなく、ユーザビリティを考慮してユーザが気になった商品のみ簡単に情報を表示できるような仕組みが必要です。
マウスオーバーで追加情報を表示するというのはうってつけの機能です。
投稿者プロフィール
- サンクユーのEC-CUBE担当。15年以上にわたりEC-CUBE開発に従事し、2系・3系・4系すべてに精通。難易度の高いカスタマイズや、他社構築サイトの改修・再設計も多数対応しています。
Javaでの業務システム開発を起点に、PHP・Perl・フロントエンド・CMSまで横断的に対応。基幹システム連携や業務フローを踏まえた設計を得意とし、複雑な要件にも柔軟に対応可能です。
ChatGPT CODEXを活用し、開発スピードと品質の両立を実現しています。
