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

ECサイトの商品詳細ページは、顧客の購買意思を決定させるために重要な要素です。
高品質な写真を多用して魅力的の伝わるページを作成し、顧客の関心を向上させることが大切です。

Contents

ECサイトの商品詳細デザイン参考8選

ECサイトの商品詳細デザイン参考8選

①STAYFUL LIFE STORE

出典:https://stayful.jp/

検索、カートはサイトのアクセントカラーとなる２色でデザインされ、商品写真をクリックすると写真が変化します。

②株式会社ナプラ

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

正方形のボックス型商品写真と右側に商品詳細がまとめ シンプルにすっきりまとめられ、余白を持たせたデザインになっています。

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

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

商品写真をクリックすると拡大され、画像がスライドされる構成が特徴的です。

④ZOZOTOWN

https://zozo.jp/

商品写真にカーソルを合わせるとズームアイコンに変化し、右側にズーム画像が表示されます。商品詳細はわかりやすくシンプルにまとめられ表現されています。

⑤ユナイテッドアローズ

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

商品写真にカーソルを合わせると右側にカーソル部分のズーム画像が表示され、カーソルを動かし細部まで商品を確認できます。

⑥GREEN SPOON（グリーンスプーン）

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

商品写真、商品説明を縦に整列構成されています。 商品画像以外に商品動画を組み合わせ、関連するおすすめ商品がスライド式で表現されています。

⑦Uniam（ユニアム）

出典:https://uniam.jp/

メニューをクリックすると、商品詳細がポップアップで表示されます。 背景が黒く表示されることで詳細ページがスムーズに読み取れるようまとめられています。

⑧Wild Souls

出典:https://www.wildsouls.gr/en/

スクロールしていくと中心の商品写真がブロックされ、 余白を生かしながら商品詳細を左右互い違いに表記されるユニークなデザイン構成になっています。

こちらの記事ではECサイトの写真で商品の魅力を伝えるために気を付けることなどを紹介しています。

ECサイトの素材で魅力的な商品写真を準備するためのチェックリスト

2022.09.15

ECサイトでは商品を手に取ることができないため、商材としての…

Web Trends Lab.編集部

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

【インタビュー】課題であった、UI改善やライターのモチベーションアップができました。―WingArc1st Inc.

2023.07.19 WEB

Category