MENU
CLOSE
DESIGNTRENDSWEB Edit : 2024.01.15 Update : 2024.01.30

【ECサイト】商品一覧ページの優良デザイン集めてみた

ECサイトの商品一覧はデザインや構成にはどのような工夫があるのでしょうか。

調べてみると意外にも売っている商品によって見せ方の独自の工夫が見られたので、紹介していきたいと思います。


ECサイトの商品一覧デザイン参考7選

①STAYFUL LIFE STORE

出典:https://stayful.jp/

長方形のボックス型に商品が並べられ、ピックアップ商品はサイズを変え目立つデザインに構成されされています。カーソル を合わせると別写真が紹介されます。
 

②株式会社ナプラ

出典:https://www.napla.co.jp/

商品写真と商品詳細が横並びで紹介されたデザインになっています。1アイテムずつ縦に並び構成されています。
 

③バーミキュラ公式オンラインショップ

出典:https://shop.vermicular.jp/

ボックス型に商品一覧まとめられている構成で表現されています。カーソルを合わせると写真がアップになり、ボックス型が浮き出るデザインにされています。

④ZOZOTOWN

https://zozo.jp/

カテゴリーエリアの右に5アイテムずつ整列され、適度な余白もあり、すっきり整えられたデザインにまとめられています。
 

⑤ユナイテッドアローズ

出典:https://store.united-arrows.co.jp/

横に6アイテム15列で構成されたデザインで表現されています。統一感があり、明解でシンプルにまとめられています。

⑥GREEN SPOON(グリーンスプーン)

出典:https://green-spoon.jp/

写真とタイトルのみの商品一覧です。5メニューごと縦に並び、写真の情報をメインにまとめられた構成に表現されています。 5メニューごと縦に並び、写真の情報をメインにまとめられた構成に表現されています。

⑦Uniam(ユニアム)

出典:https://uniam.jp/

レシピページのカテゴリーごとに商品が紹介されています。 ポップなサイトにかわいいあしらい、商品カテゴリーを縦文字にデザインされユニークな構成になっています。

Web Trends Lab.編集部

KOHIMOTO Inc.所属。トレンドやノウハウ中心にWebサイトを作るための知見を現場から発信していきます👀また、制作したWebサイトでの活用法や、最前線での施策を伺う企業へのインタビューも実施予定。