お客様の声 スライダー

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

このパーツは、星評価・お名前・感想の本文を載せたお客様の声カードを、自動で切り替えるスライダーです。複数のスライドを display:flex で横一列に並べ、transform:translateX でトラックごと左右にずらして表示を切り替えます。下部のドットで現在位置が分かり、星はインラインの svg で描かれているため絵文字に依存しません。

向いている場面

利用者の評価を信頼の根拠として見せたいサイトに向きます。たとえば導入実績を訴求したいBtoBサービス、口コミが効くサロンや飲食店、受講生の声を載せたいスクールなど、第三者の声で背中を押したい場面に適しています。

カスタマイズと注意点

声を追加するときはスライド1枚分のカードを複製し、星の数・名前・本文を差し替えます。自動再生の速度はJSで調整できます。

• 掲載する声は実在の利用者のものを使い、人物写真も含めて創作した証言は避けてください
• 自動で動くスライダーは、利用者が読み終わる前に切り替わらないよう、間隔を十分に取りましょう

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