Testimonial

お客様の声

GitHub でソースを見る

プレビュー

Kazeのおかげで開発速度が2倍になりました。
堀内昌平フロントエンドエンジニア
ミニマルで美しいデザインシステムです。
志摩このみデザイナー

使いどころ

使う場面

  • 導入した人の声を、短い引用と名前・役職で見せる。TestimonialGrid の中に 2 から 3 枚並べる
  • quote は 1 から 3 文。具体的な成果（時間、件数、金額）を含むものを選ぶ
  • authorName と authorRole に誰の声かを書く。役職は偏らせず、利用場面が異なる人を混ぜる
  • showIcon で顔写真（authorImage）かイニシャルを出す

使わない場面

  • 実在の顧客の声を無断で使うこと。掲載の了承がない声は載せない
  • 「とても便利です」のような、何が良いか分からない一言
  • 1 件だけを大きく見せる場面。数字で語るなら Stats、疑問に答えるなら FAQ を使う
  • デモやダミーでの思いつきの架空名。人名と社名はリポジトリで決めたプールから割り当てる

使い方

<TestimonialGrid>
  <TestimonialCard quote="素晴らしいです。" authorName="堀内昌平" authorRole="エンジニア" />
</TestimonialGrid>

プロパティ

名前型デフォルト説明
quote必須stringなし引用テキスト
authorName必須stringなし著者名
authorRolestringなし役職
authorImagestringなし著者画像URL
showIconbooleanなしアバター画像かイニシャルを表示する

型と必須かどうかはソースの型定義から自動で生成しています。表にない HTML 標準の属性（className や aria-* など）も、ルート要素にそのまま渡せます。

アクセシビリティ

  • 引用は <blockquote> で出力される。出典の名前と役職は引用の外の別要素で、読み上げ順で引用の次に読まれる
  • authorImage があれば Avatar の alt に authorName が入る。写真が装飾の意味しか持たないなら showIcon を使わない
  • イニシャルは authorName を空白で分けた各語の先頭文字を使う。空白のない名前は 1 文字になる。日本語の名前は姓と名を空白で分けて渡す

文言

  • quote は話し言葉の調子を残してよいが、誇張や断定の強い言い回し（「No.1」「最高」）は避け、事実だけにする
  • authorRole は「会社名 役職」の順で短く（「ノルン株式会社 取締役 CTO」）

関連するコンポーネント