お客様の声カードスライダー

このパーツの使いどころと実装ポイント

このパーツは、星評価・コメント・氏名・会社名をひとつのカードにまとめ、それを横方向のトラック（display:flexのレールをtransform:translateXでずらす方式）で送って見せるお客様の声スライダーです。1カードがflex:0 0 100%で画面幅いっぱいに並ぶため、1件ずつ集中して読ませやすく、口コミの密度を保ったまま件数を増やせます。星はインラインSVGで描いているので、絵文字に頼らずどの環境でも同じ形で表示されます。

向いている場面

• 導入実績を訴求したいBtoBサービスや士業の信頼セクション
• レビュー件数の多い飲食店・サロン・スクールのトップページ
• 採用サイトで社員の声を一件ずつ読ませたいとき

カスタマイズと注意点

カードを増やすときはtesti-track内に同じ構造のカードを追加するだけで、JS側がカード数を数えて送り幅を計算します。星の数を変える場合は満点表示用のaria-label（例「5点満点中5点」）も必ず合わせて直してください。スクリーンリーダーに正しい評価が伝わらなくなるためです。コメントは長短がばらつくため、カードの高さは内容に追従します。レイアウトのガタつきが気になる場合はmin-heightで下限をそろえると安定します。横スクロール領域はキーボードでも送れるよう、前後ボタンに到達できる順序を保つことを意識すると安心です。

このパーツは JavaScript が含まれます。HTML の最後に <script> タグで読み込むか、外部 JS ファイルに切り出してください。