![見出し画像](https://assets.st-note.com/production/uploads/images/142541389/rectangle_large_type_2_6abfcd94bd25f7d9e5c94bcca77321b6.png?width=1200)
DailyUI #096 現在在庫あり
1.DailyUI#096のお題
96日目のお題は「現在在庫あり」。
ECアプリの在庫表示をデザインしました。
2.ざっくりワイヤー
![](https://assets.st-note.com/img/1717196561317-JjJQDisa2u.png?width=1200)
3.制作したデザイン
![](https://assets.st-note.com/img/1717196576058-2yVDT1NWvn.png?width=1200)
![](https://assets.st-note.com/img/1717196592711-sR8VAOQIPJ.png?width=1200)
4.デザインする上で考えたこと
商品一覧画面にて、複数のカラーバリエーションがある商品は各カラーごとの在庫状況にばらつきがあるので一つでも在庫が少ないカラーがあれば「残りわずか」表記にする。一方でカラバリが一つだけの商品は残り少なくなったら(在庫5個以下)個数を表示する。
5.反省点
カラーバリエーションがある商品の在庫の表示方法に悩みました。
よく使うECアプリの商品一覧画面では、複数のカラーバリエーションがある商品は色ごとに個別に表示するか全色まとめて表示するかをトグルスイッチで切り替えられる仕様になっていて、「まずは形を見て希望に合うものを探したい」という時にも「どんな色があるのかも含めて探したい」という時にも対応できるので便利だなと思ったのでそのような機能を取り入れてみても良かったかなと思いました。
6.おわりに
私はECサイトでいいなと思う商品が「残りわずか」や「残り2点」などと表記されていたら思わず買ってしまうことがあります。「今買わないと数時間後には売り切れてるかも…!」という焦る心理が働いて購買行動を後押しされるからです。警告を示す赤い文字で表示されているのも、思わず焦りを感じます。在庫わずかの表記が果たす役割は大きいなと思いました。
この記事が気に入ったらサポートをしてみませんか?