テスティモニアル Testimonial

顧客の声や推薦コメントを引用形式で表示する。信頼性向上やソーシャルプルーフに使用。

使用場面: LPの顧客の声セクション、製品レビュー、推薦文の表示 採用例: Stripe, Notion

ライブデモ

“

導入後3ヶ月で業務効率が40%改善しました。チーム全員が使いこなせるシンプルなUIが素晴らしいです。

TK
田中 啓介
株式会社テクノ CTO
★★★★★
“

カスタマーサポートの対応が迅速で丁寧。プロダクトだけでなく、チームの姿勢にも信頼を感じます。

YM
山本 由美
デザインラボ CEO
★★★★☆

ソースコード

<div class="demo-testimonials">
  <div class="demo-testimonial">
    <div class="demo-testimonial-quote">&ldquo;</div>
    <p class="demo-testimonial-text">導入後3ヶ月で業務効率が40%改善しました。チーム全員が使いこなせるシンプルなUIが素晴らしいです。</p>
    <div class="demo-testimonial-author">
      <div class="demo-testimonial-avatar">TK</div>
      <div class="demo-testimonial-info">
        <div class="demo-testimonial-name">田中 啓介</div>
        <div class="demo-testimonial-role">株式会社テクノ CTO</div>
      </div>
      <div class="demo-testimonial-stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
    </div>
  </div>
  <div class="demo-testimonial">
    <div class="demo-testimonial-quote">&ldquo;</div>
    <p class="demo-testimonial-text">カスタマーサポートの対応が迅速で丁寧。プロダクトだけでなく、チームの姿勢にも信頼を感じます。</p>
    <div class="demo-testimonial-author">
      <div class="demo-testimonial-avatar" style="background:#8b5cf6;">YM</div>
      <div class="demo-testimonial-info">
        <div class="demo-testimonial-name">山本 由美</div>
        <div class="demo-testimonial-role">デザインラボ CEO</div>
      </div>
      <div class="demo-testimonial-stars">&#9733;&#9733;&#9733;&#9733;&#9734;</div>
    </div>
  </div>
</div>
.demo-testimonials {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
}
.demo-testimonial {
  background: color-mix(in srgb, var(--ui-primary) 4%, #fff);
  border-radius: 12px; padding: 20px;
  border: 1px solid color-mix(in srgb, var(--ui-primary) 12%, transparent);
  transition: box-shadow 0.2s;
}
.demo-testimonial:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}
.demo-testimonial-quote {
  font-size: 36px; line-height: 1; color: var(--ui-primary);
  opacity: 0.5; margin-bottom: -8px;
}
.demo-testimonial-text {
  font-size: 14px; color: #444; line-height: 1.6;
  margin: 8px 0 16px;
}
.demo-testimonial-author {
  display: flex; align-items: center; gap: 10px;
}
.demo-testimonial-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--ui-primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; flex-shrink: 0;
}
.demo-testimonial-info { flex: 1; }
.demo-testimonial-name {
  font-size: 13px; font-weight: 700; color: #333;
}
.demo-testimonial-role {
  font-size: 11px; color: #999;
}
.demo-testimonial-stars {
  font-size: 14px; color: #f59e0b;
}
@media (max-width: 500px) {
  .demo-testimonials { grid-template-columns: 1fr; }
}

AIプロンプト

Basic 
テスティモニアルをHTML/CSSで作ってください。顧客の声を引用符付きで表示し、アバターと名前・役職を添えます。
Custom 
以下の仕様でテスティモニアルを実装してください。
- 2カラムグリッドレイアウト（レスポンシブ対応）
- 引用符（"）をアクセントカラーで大きく表示
- アバター・名前・役職・星評価を表示
- プライマリカラー: #2563eb
- ホバー時にカードが浮く
- ボーダーカラーにアクセントカラーを使用
Advanced 
高機能なテスティモニアルを実装してください。
- カルーセル形式（自動スライド＋手動ナビ）
- 動画テスティモニアル対応
- ランダム表示順（毎回表示順を変更）
- 読み込み時のスタッガーアニメーション
- Schema.org マークアップ（構造化データ）
- フィルタリング（評価別、カテゴリ別）
- レスポンシブ（1列〜3列自動調整）
← カタログに戻る