コンテンツ・LP部品
お客様の声
利用者の声を1枚のカードで見せる証言パーツ。頭文字入りのグラデーションアバター、名前・肩書き、星評価を添えて信頼感を伝えます。
プレビュー
静的
操作動きのない質感・レイアウトの見本です。
コード（コピーして使えます）
<div class="stage">
<figure class="tcard">
<div class="tstars" role="img" aria-label="5点満点中5点">
<svg width="15" height="15" viewBox="0 0 15 15" fill="currentColor"><path d="M7.5 1l1.9 3.9 4.3.6-3.1 3 .7 4.3-3.8-2-3.8 2 .7-4.3-3.1-3 4.3-.6z"/></svg>
<svg width="15" height="15" viewBox="0 0 15 15" fill="currentColor"><path d="M7.5 1l1.9 3.9 4.3.6-3.1 3 .7 4.3-3.8-2-3.8 2 .7-4.3-3.1-3 4.3-.6z"/></svg>
<svg width="15" height="15" viewBox="0 0 15 15" fill="currentColor"><path d="M7.5 1l1.9 3.9 4.3.6-3.1 3 .7 4.3-3.8-2-3.8 2 .7-4.3-3.1-3 4.3-.6z"/></svg>
<svg width="15" height="15" viewBox="0 0 15 15" fill="currentColor"><path d="M7.5 1l1.9 3.9 4.3.6-3.1 3 .7 4.3-3.8-2-3.8 2 .7-4.3-3.1-3 4.3-.6z"/></svg>
<svg width="15" height="15" viewBox="0 0 15 15" fill="currentColor"><path d="M7.5 1l1.9 3.9 4.3.6-3.1 3 .7 4.3-3.8-2-3.8 2 .7-4.3-3.1-3 4.3-.6z"/></svg>
</div>
<blockquote class="tquote">導入して2週間で、チームの見積り作業が半分の時間で終わるようになりました。もう手放せません。</blockquote>
<figcaption class="tperson">
<span class="tavatar" aria-hidden="true">佐</span>
<span class="tmeta">
<span class="tname">佐藤 美咲</span>
<span class="trole">株式会社ミライ / デザイン部長</span>
</span>
</figcaption>
</figure>
</div>