3 名のお客様の声（写真+引用）
顔（アバター）・氏名・社名・引用コメントをワンセットにし、3列で並べたお客様の声セクションです。各カードは ts-3__row で円形アバターと名前を横並びにし、その下にコメントを置く構成。アバターは ts-3__av の円で、 style で背景色を1枚ずつ変えて単調さを避けています。
このパーツの使いどころと実装ポイント
顔（アバター）・氏名・社名・引用コメントをワンセットにし、3列で並べたお客様の声セクションです。各カードは ts-3__row で円形アバターと名前を横並びにし、その下にコメントを置く構成。アバターは ts-3__av の円で、style で背景色を1枚ずつ変えて単調さを避けています。淡いクリーム背景（#FDF8EF）と白カードの組み合わせで、柔らかく信頼感のある印象です。
向いている場面
導入実績を見せたいBtoBサービスのLP、スクールやサロンの受講者・利用者の声、制作会社の取引先コメントなど、第三者の評価で安心感を与えたい場面に向きます。購入や問い合わせの直前に置くと、迷っているユーザーの背中を押せます。
カスタマイズと注意点
差し替えどころは氏名・社名・コメント本文です。アバターは頭文字の代わりに実在の人物写真へ置き換えると一気に本物らしくなります（架空の顔やAI生成顔は避けてください）。コメントは具体的な数字や変化を含めると説得力が増します。注意点として、3列のままだとスマホでコメントが読みにくいので、狭い画面では1列に積む指定を足し、写真には必ず alt を入れてください。
よくある質問
頭文字アバターを写真に変えられますか？
できます。ts-3__av の中身を img タグに差し替え、円形に切り抜く border-radius:50% を維持してください。掲載は本人の許諾を得た実在写真にし、架空の顔やAI生成顔は信頼を損なうため使わないでください。
声は3件以上載せられますか？
可能です。ts-3__c カードを増やせば行が折り返して並びます。多すぎると読まれにくいので、まずは説得力の高い3件に絞り、必要なら別ページに一覧を用意する方法もあります。