お客様の声カルーセル

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

このパーツは、前後ボタンとドットナビで操作する1枚ずつ送るカルーセル型のお客様の声です。スライドはdisplay:flexのトラックをtransform:translateXでスライドさせ、cubic-bezierのイージングで滑らかに動きます。各スライドはblockquoteでコメントを囲み、引用であることを意味づけしたうえで、アバター画像・氏名・肩書きを添える信頼性の高い構造です。アバターは実写をobject-fit:coverで円形に切り抜いて表示します。

向いている場面

• 導入事例やレビューを1件ずつ丁寧に読ませたいサービスサイト
• 件数は少ないが内容で勝負したい士業・コンサル
• 顔写真付きの声で安心感を出したい店舗・サロン

カスタマイズの勘所

声を追加するときはtesti__slideを増やすだけで、ドットの数も連動します（実装に応じて確認）。アバターはAI生成顔ではなく実在のストック写真や本人の許諾を得た写真を使うことが大切です。肩書きは「飲食店オーナー」のように具体的にすると説得力が増します。コメントは長すぎるとカード高がばらつくので、要点を絞ると整います。

実装上の注意

前後ボタンとドットはキーボードでも操作できることが望ましく、ドットには現在地が分かる状態表示を持たせると親切です。引用文には実際にいただいた声を使い、創作の証言で水増ししないようにしてください。

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