流れるお客様の声マーキー

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

流れるお客様の声マーキーは、複数の感想カードを横方向に無限スクロールさせる社会的証明のセクションです。.ts-mq__row を display:flex で横一列に並べ、animation で左へ流し続けます。同じカード群を2回繰り返して並べることで、ループのつなぎ目が途切れず連続して見える仕組みです。左右の端は mask-image でフェードさせ、画面外へ自然に消えていくよう見せています。

向いている場面

• 導入社数や利用者の多さを印象づけたいサービス
• 短い感想をたくさん見せたいLPのファーストビュー下
• 暗い背景で高級感を出したいブランドサイト

固有の勘所は、1枚のコメントを短く言い切ること。流れて消えるため、長文だと読み切れません。カードは flex:0 0 280px で幅が固定されているので、文字数をそろえると見た目が整います。発言者名や会社名を添えると信頼度が上がります。

実装上の注意

常に動き続ける演出は、動きが苦手な利用者に負担となることがあります。prefers-reduced-motion でアニメーションを止める配慮を入れると親切です。読み上げ環境では同じ内容が重複して読まれないよう、繰り返し部分を補助情報から除く工夫も検討します。マウスを乗せたら一時停止すると、気になったコメントをじっくり読めます。