EC・商品
買い物の操作を、気持ちよく後押しする。
買い物の操作を後押しする部品のカテゴリ。商品カード、数量変更で再計算されるカート、カート投入アニメ、カラースウォッチ、サイズ選択、在庫の残数表示、価格シミュレーター、月／年の料金トグル、価格ヒストグラム、レビュー評価分布、切り取り線クーポン、商品比較テーブルがある。原則はフィードバックの即時性。数量を変えた瞬間に合計が変わり、色を選んだ瞬間にプレビューが変わることで、利用者は「いま何を買おうとしているか」を確かめながら進める。商品ページからカートまでの途中で離脱が起きている場面で引く。
使い分け一覧は product-card、選択は color-swatch と size-selector（未選択は shake で止める）、金額は price-quantity / cart-summary でその場再計算。判断材料は review-distribution と comparison-table。stock-urgency は実在庫に連動するときだけ使う。
まず見る3件
- クリック
商品カード解説あり
Product Card
画像・お気に入り♥・SALEタグ・ブランド・商品名・星評価・価格（元値は取り消し線）・カート追加ボタンを収めたEC定番の商品カード。ホバーでふわっと持ち上がる。
- 画像は aspect-ratio 5/4 で高さを固定する。一覧で並べたときカードの高さが揃わないと視線が迷う
- ホバーの浮き上がりは transform と box-shadow だけで作る。レイアウトを動かさないので一覧でもガクつかない
- 星は背景の灰 5 個の上に色付き 5 個を width で切って重ねる。4.5 のような小数を 1 つの仕組みで出せる
- JS
- クリック
カート
Shopping Cart
サムネ・商品名・数量ステッパー（−／＋）・削除×を持つ明細行と、小計・送料・合計のサマリーを備えた買い物カゴ。数量変更や削除で行の金額と合計がその場で再計算される。
- 数量を変えたら行の金額・点数・送料・合計を同時に再計算する。1 か所でも遅れると信用を失う
- 送料無料ラインは合計に反映して初めて意味を持つ。5,000 円を切ったら送料 500 円を即座に足す
- 削除は 200ms で右へ抜けさせてから DOM を消す。即消しだと何が消えたか分からない。reduced-motion は即時
- JS
- クリック
サイズ選択
Size Selector
S/M/L/XL のピルをタップしてサイズを選ぶ。品切れは取り消し線で無効化。未選択でカートを押すと選択を促すシェイクと案内が出る。
- 品切れは隠さず取り消し線＋薄色で残す。無いサイズが「存在しない」のか「売り切れ」なのかは購買判断を変える
- 未選択でカートを押したら、ボタンを 400ms 振って赤字の案内を出す。黙って何も起きないのが最悪の反応
- ピルは高さ 40px・最小幅 46px。指で押す前提なので文字より当たり判定を優先する
- JS
使い分け表
| パーツ | 操作 | 技術 | 向く場面 | 状態 |
|---|---|---|---|---|
| カート投入アニメ Fly-to-Cart Animation | クリック | JS | 商品一覧・詳細でカートに入れた実感を返したい画面・カートアイコンが画面内に常設されている構成 | default / active / disabled |
| カラースウォッチ Color Swatch Picker | クリック | JS | 色違い商品を切り替えて見せる商品詳細・選択肢が色そのものである場合 | default / active |
| サイズ選択 Size Selector | クリック | JS | S/M/L など段階的なサイズを選ぶ商品詳細・品切れサイズを残したまま示したい在庫表示 | default / active / disabled / error / success |
| 在庫・残数表示 Stock Urgency Indicator | クリック | JS | 実際に残数が少ない限定品・セール品の詳細・在庫連動で残数を正確に出せる EC | default / active / disabled / empty |
| 価格シミュレーター Price Calculator | クリック | JS | 数量とオプションで合計が変わる商品詳細・セット商品・定期便の見積もり | default / focus / active / disabled |
| 料金 月/年トグル Pricing Plan Toggle | クリック | JS | 月額と年額の 2 択がある料金ページ・年払いの割引を数字で見せたい場面 | default / hover / active |
| 価格ヒストグラム・スライダー Price Histogram Slider | ドラッグ | JS | 価格帯で絞り込む EC・宿泊・中古品の検索・分布を見せてゼロ件の絞り込みを避けたい一覧 | default |
| レビュー評価分布バー Review Rating Distribution | クリック | JS | レビュー件数が多い商品詳細・星の内訳でレビューを絞り込ませたい一覧 | default / hover / active |
| 切り取り線クーポン Perforated Coupon Ticket | クリック | JS | 初回購入・会員向けクーポンの配布面・コードをコピーして決済画面で使う流れ | default / success |
| 商品比較テーブル Product Comparison Table | ホバー | CSSのみ | 3〜4 商品・プランを仕様軸で比べる購入検討・おすすめを 1 列ハイライトして誘導したい場合 | default / hover |
| 商品カード Product Card | クリック | JS | 商品一覧・検索結果・レコメンド枠・3〜4 列のグリッドで比較させる EC | default / hover / active / success |
| カート Shopping Cart | クリック | JS | カートページ・カートドロワーの明細・数量変更で合計を即時に見せたい買い物かご | default / hover / active / disabled / empty |
すべての見本（12件）
- クリック
カート投入アニメ
Fly-to-Cart Animation
「カートに入れる」ボタンで商品サムネがカートアイコンへ放物線を描いて飛び込み、バッジ数が +1 される。タップでも動作。
- JS
- クリック
カラースウォッチ
Color Swatch Picker
色の丸をタップすると商品プレビューの色と選択中カラー名が変わる。選択中は白いリングでハイライト。
- JS
- クリック
サイズ選択
Size Selector
S/M/L/XL のピルをタップしてサイズを選ぶ。品切れは取り消し線で無効化。未選択でカートを押すと選択を促すシェイクと案内が出る。
- JS
- クリック
在庫・残数表示
Stock Urgency Indicator
「残りわずか 3点」の残量バーと控えめなパルスアニメーションで購買意欲を後押しするウィジェット。
- JS
- クリック
価格シミュレーター
Price Calculator
数量 ± とオプション選択で合計金額がカンマ区切りのアニメ付きカウントアップで更新されるウィジェット。
- JS
- クリック
料金 月/年トグル
Pricing Plan Toggle
月額⇄年額をトグルすると価格が数値カウントアニメで切替わり、「2ヶ月分お得」の割引バッジがふわっと出現するプランカード。
- JS
- ドラッグ
価格ヒストグラム・スライダー
Price Histogram Slider
在庫の価格分布を棒グラフで見せ、下の二重スライダーで範囲を絞る。範囲内の棒だけ色づき、該当件数が更新される。Airbnb風の定番ECフィルタ。
- JS
- クリック
レビュー評価分布バー
Review Rating Distribution
平均★と、★5〜★1ごとの件数バーを表示。バーをタップするとその評価に絞り込み、対象レビューだけを表示する。商品ページの定番。
- JS
- クリック
切り取り線クーポン
Perforated Coupon Ticket
ミシン目（半円の切り欠き＋破線）で仕切られたチケット型クーポン。「コードを表示」でクーポンコードがめくれて現れ、タップでコピー完了に変わる。
- JS
- ホバー
商品比較テーブル解説あり
Product Comparison Table
3商品を仕様ごとに ○/× で比較し、おすすめ列をハイライト。狭い画面では横スワイプでき、行ホバーで横一列が強調される。
- CSSのみ
- クリック
商品カード解説あり
Product Card
画像・お気に入り♥・SALEタグ・ブランド・商品名・星評価・価格（元値は取り消し線）・カート追加ボタンを収めたEC定番の商品カード。ホバーでふわっと持ち上がる。
- JS
- クリック
カート
Shopping Cart
サムネ・商品名・数量ステッパー（−／＋）・削除×を持つ明細行と、小計・送料・合計のサマリーを備えた買い物カゴ。数量変更や削除で行の金額と合計がその場で再計算される。
- JS