![見出し画像](https://assets.st-note.com/production/uploads/images/71818100/rectangle_large_type_2_9d35f9d50c2fc6fd0494663b593c8533.png?width=1200)
ECサイトのショッピングカートを比べて気づいた事
こんにちは。つみきのデザイナーの若月です。
ショッピングカートのUIデザインを考えるにあたり、参考に既存のカートを調べてみました。調査対象は👇になります。
⚠購入完了まで進んでないので、確認フェイズまでの内容になってます。
⚠各プラットフォームは事例を参照しているので、機能が全て含まれてなかったり変更されている可能性があります。
01 | BASE
![](https://assets.st-note.com/img/1644232750248-y8CAfGQtwc.png?width=1200)
🛒 カート〜購入の流れ
・ショッピングカート、クーポン入力、氏名/住所入力、日時指定、支払い方法選択
・確認
・完了
![](https://assets.st-note.com/img/1644321608140-yux5HjcgMg.png?width=1200)
💡 気になった点
・〇〇円以上で送料無料がリンク動線になっている
・入力画面は1画面のみ
・入力項目にラベルはなし(氏名、住所など)
02 | STORES
![](https://assets.st-note.com/img/1644245147766-FneYHqVlXZ.png?width=1200)
🛒 カート〜購入の流れ
・ショッピングカート
・氏名/住所入力
・支払い方法選択
・確認
・完了
![](https://assets.st-note.com/img/1644372137950-736AJZksAG.png?width=1200)
💡 気になった点
・支払い方法を別画面に分割
・〇〇円で送料無料表記あり(※リンクはなし)
03 | Shopify
![](https://assets.st-note.com/img/1644232883654-CUkY4DIyDT.png?width=1200)
![](https://assets.st-note.com/img/1644245100696-SR0YObg2qk.png?width=1200)
🛒 カート〜購入の流れ
・ショッピングカート
・日時指定
・ギフトオプション指定(のし等)
・氏名/住所入力
・配送方法選択
・支払い方法選択
・確認
・完了
![](https://assets.st-note.com/img/1644372030561-mjSQlyBESW.png?width=1200)
💡 気になった点
・〇〇円で送料無料表記あり(※リンクはなし)
・商品レコメンドあり
・購入フローが細かく分割されている
04 | ZOZOTOWN
![](https://assets.st-note.com/img/1644296668801-6rg8OtdqkM.png?width=1200)
🛒 カート〜購入の流れ
・ショッピングカート、支払い方法選択、ギフトオプション指定
・氏名/住所入力、日時指定
・完了
![](https://assets.st-note.com/img/1644370891384-uy0PKqa1Vk.png?width=1200)
💡 気になった点
・支払い方法選択がはじめにある
・チャットサポートへの動線表示がある
05 | 楽天
![](https://assets.st-note.com/img/1644299389738-3PmZFBtIaF.png?width=1200)
🛒 カート〜購入の流れ
・ショッピングカート
・氏名/住所入力
・支払い方法選択
・確認、日時指定、クーポンコード入力、ギフトオプション指定
・完了
![](https://assets.st-note.com/img/1644371894075-2QxhtVElDV.png?width=1200)
💡 気になった点
・商品レコメンドあり
・ポイントのアピールすごい
06 | Amazon
![](https://assets.st-note.com/img/1644227683226-1a6OYLCDsC.png?width=1200)
🛒 カート〜購入の流れ
・ショッピングカート
・アカウント作成
・氏名/住所入力
・支払い方法選択、クーポンコード入力
・確認、日時指定、ギフトオプション指定
・完了
![](https://assets.st-note.com/img/1644371302055-E4evoI2xHw.png?width=1200)
💡 気になった点
・複数切り口の商品レコメンドあり
07 | まとめ
各社の違いはざっと👇です
・入力項目の分割の有無
→分割の場合は、支払い手段/日時指定を分割をするケースが多い
・現在位置表示の有無
・カート画面で商品レコメンドの有無
・ギフトオプション(のしなど)の設定の有無
→オプションがない場合は商品と同じようにカートに入れるケースが多い
・チャットへの動線の有無
普段あまり気にせず使っていましたが、入力画面を分割するか、分割した場合どの項目が先に来るのかが各社で一番違いがあるなという印象です。
以上を踏まえて、次回の記事ではECカート案を使ってみたいと思います。
Stay Tune!
株式会社つみき UIデザイン事業部ではブランドのEC事業を継続的に成長支援する『D2Cデザインパートナーサービス』を提供しています。 ぜひ一度お問い合わせください!
この記事が気に入ったらサポートをしてみませんか?