商品カード
Product Card
ライブデモ
説明
一言で説明
ECサイトなどで、商品の画像、名前、価格、評価などを1つのユニットとしてまとめたUI。
いつ使う?
ショッピングサイトの商品一覧、おすすめ商品セクション。
💡 日常の言い方
「通販サイトとかで商品が並んでる四角い枠」
似ている用語との違い
商品カード vs メディアカード
メディアカードはビジュアル(画像・動画)が主役。商品カードは『価格』や『購入ボタン』など販売のための情報が不可欠。
AIへの指示例
アパレルEC向けの商品カードをデザインして。ホバーで別の角度の写真に切り替わるようにし、右下に小さな『お気に入り』ボタンを配置して。