商品カード
画像・お気に入り♥・SALEタグ・ブランド・商品名・星評価・価格（元値は取り消し線）・カート追加ボタンを収めたEC定番の商品カード。ホバーでふわっと持ち上がる。
プレビュー
操作クリック／タップで動きます。
使いどころ
EC一覧・検索結果・レコメンド枠のように、同型のカードを複数並べて商品を比較検討させる場面の定番。1枚に収める情報量（画像・タグ・お気に入り・ブランド・商品名・評価・価格・カートボタン）が多いため、幅260px程度を基準に3〜4列のグリッドで並べる使い方に最適化されており、1枚だけを大きく見せる商品詳細ページの主役表示には向かない。SALEタグやカート追加後の「✓ 追加しました」という即時フィードバックがあるため、購入までの導線を一覧画面で完結させたいカジュアルなECに向く一方、色・サイズなどのバリエーション選択が必須の商品では、この場でカートに追加すると選択漏れのまま注文が進む恐れがあるため、バリエーション選択が要る商品は詳細ページへの遷移ボタンに差し替えるべきだ。
仕組み
お気に入りボタン(pc-fav)はaria-pressedの真偽値をトグルし、あわせてaria-labelを「お気に入りに追加」⇄「お気に入りから削除」で書き換えることで、押した後の状態と次に何が起きるかの両方を1つの属性ペアで表現している。星評価は背景の塗りつぶし無し★5個(pc-stars-bg)の上に、色付きの★5個(pc-stars-fg)をwidth: 90%でoverflow: hiddenにして重ね、パーセンテージ分だけ着色部分を見せることで4.5のような小数点の評価を表現している。カート追加ボタンはクリックのたびにclassList.add("is-added")で背景色を緑に変え、textContentを「✓ 追加しました」に差し替えて1.4秒後に元に戻すが、この処理はsetTimeoutを毎回clearTimeoutしてから積み直すことで、連打してもタイマーが多重に走らないようにしている。カード全体のホバー演出(pc-card:hover)はtransform: translateY(-6px)とbox-shadowの強化だけで構成され、layoutプロパティを触らないためスクロールが多い一覧画面でもガクつきにくい。
実装の注意
星評価は<span role="img" aria-label="5点満点中4.5点">で全体をまとめて画像として扱っているため読み上げ上は問題ないが、実装がCSSのwidth: 90%による塗りつぶしなので、評価値が変わるたびにこのパーセンテージをJS側で計算してインラインstyleに反映する仕組みが呼び出し側に必要になる。テンプレートをそのまま複製すると星の割合が固定値のまま流用されるミスが起きやすい。カート追加時の「✓ 追加しました」というフィードバックはtextContentの書き換えだけで行われており、aria-live領域の指定が無いため、その変化が自動的に読み上げられるとは限らない。またpc-price-old(取り消し線価格)は視覚的なtext-decoration: line-throughのみで表現されており、読み上げでは通常の価格と区別なく金額として読まれるため、初見のユーザーには元値なのか現在価格なのか誤解される恐れがある。
アクセシビリティ
pc-fav(お気に入りボタン)はaria-pressedとaria-labelの両方を状態で書き換えているが、これはそのまま真似しないほうがよい。ARIAのトグルボタンパターンではラベルは固定し、状態はaria-pressedだけで伝えるのが原則で、ラベルを「お気に入りから削除」に変えつつpressed=trueにすると『「削除」ボタンが押された状態』という矛盾した読み上げになる。直すなら、ラベルを「お気に入り」に固定してaria-pressedをトグルするか、動作ラベルを使うならaria-pressedを外すかのどちらかに寄せる。星評価もrole="img"とaria-labelで数値をまとめて伝えているため追加対応は不要。手当てが必要なのは主に2点で、ひとつはカート追加時のフィードバック（pitfallsの通りaria-live="polite"をボタン付近かステータス領域に追加するとよい）、もうひとつは価格表示で、pc-price-oldに視覚的に隠したテキスト（例えば「割引前の価格」）を添えるか、pc-priceとpc-price-oldをまとめてaria-label="6,980円、元の価格9,800円から割引"のように上書きすると誤解を防げる。カートボタンの最小高さは44pxを確保しており(min-height: 44px)、モバイルのタップ領域としては妥当なサイズになっている。
調整して使う
調整しやすいのは3点。SALEタグ(pc-tag)は固定文言だが、色と文言を変えれば「新着」「残りわずか」といった別のバッジ用途に転用できる。評価表示は★の代わりに数値バーやハートに差し替えても、同じoverflow: hiddenの塗り分けテクニックがそのまま使える。カートボタンの確認演出は、色変化＋テキスト差し替えの代わりにチェックマークのアイコンだけをフェードインさせる軽量な演出にすると、テキストの長さがボタン幅を圧迫する問題を避けられる。画像部分(pc-media)は現在SVGのプレースホルダーだが、実運用では<img loading="lazy">に差し替えつつaspect-ratio: 5/4を保つことで、複数枚並んだグリッドの高さがガタつかない。
コード（コピーして使えます）
<div class="pc-card" id="pcCard">
<div class="pc-media">
<span class="pc-tag">SALE</span>
<button class="pc-fav" id="pcFav" aria-pressed="false" aria-label="お気に入りに追加">
<svg class="pc-heart" width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true">
<path d="M10 17s-6.2-3.9-8-8.1C.9 6.1 2.4 3.5 5.2 3.5c1.8 0 3 1 4.8 3 1.8-2 3-3 4.8-3 2.8 0 4.3 2.6 3.2 5.4C16.2 13.1 10 17 10 17z" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/>
</svg>
</button>
<svg class="pc-img" viewBox="0 0 200 160" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<rect width="200" height="160" fill="url(#pcg)"/>
<rect x="66" y="40" width="68" height="86" rx="8" fill="#fff" opacity=".55"/>
<circle cx="100" cy="70" r="18" fill="#fff" opacity=".7"/>
<rect x="78" y="98" width="44" height="6" rx="3" fill="#fff" opacity=".5"/>
<defs>
<linearGradient id="pcg" x1="0" y1="0" x2="200" y2="160" gradientUnits="userSpaceOnUse">
<stop stop-color="#dce5f7"/>
<stop offset="1" stop-color="#c3d2f0"/>
</linearGradient>
</defs>
</svg>
</div>
<div class="pc-body">
<p class="pc-brand">CHIITSURU</p>
<p class="pc-title">リネンブレンド オーバーシャツ</p>
<div class="pc-rate">
<span class="pc-stars" role="img" aria-label="5点満点中4.5点">
<span class="pc-stars-bg">★★★★★</span>
<span class="pc-stars-fg" style="width:90%">★★★★★</span>
</span>
<span class="pc-rate-num">4.5</span>
<span class="pc-reviews">(128)</span>
</div>
<div class="pc-price-row">
<span class="pc-price">¥6,980</span>
<span class="pc-price-old">¥9,800</span>
</div>
<button class="pc-cart" id="pcCart">カートに入れる</button>
</div>
</div>