お客様の声
利用者の声を1枚のカードで見せる証言パーツ。頭文字入りのグラデーションアバター、名前・肩書き、星評価を添えて信頼感を伝えます。
プレビュー
静的
操作動きのない質感・レイアウトの見本です。
仕様書
- 向く場面
- 利用者の声を 1 枚で見せる証言カード
- 星評価と肩書きで信頼を補強したい LP
- 事例ページの引用ブロック
- 避ける場面
- 名前や肩書きを出せない匿名の声
- 成果の数字が主役の事例（導入事例カードへ）
- 構成要素
- 星評価
- 引用文
- アバター
- 名前と肩書き
- 持っている状態
- 通常
- キーボード
操作要素なし。読み物として読むだけ
- 支援技術
星は role=img＋aria-label「5 点満点中 5 点」で数として読まれる。figure／blockquote／figcaption で引用と話者を構造化。アバターは aria-hidden
- 動き
なし
デザインの要点
- 星→引用→話者の順。評価を先に見せ、引用を読ませ、最後に誰の言葉かで信頼を締める
- 引用は 14px・行間 1.75 で 2〜3 行に収める。長い声は要点だけを引用し、全文は事例ページへ逃がす
- アバターは写真が無くても頭文字＋グラデーションで「人」を立てる。空の丸を置かない
- 名前と肩書きは太さと色で分ける（13px 太字／11px 灰）。同じ見た目だと肩書きが名前に見える
コード（コピーして使えます）
<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>