お客様の声初級

証言カードグリッド（星評価付き）

アイコン・名前・肩書き・コメント・星評価をまとめた証言カードを並べたグリッド。複数の声を一望でき、サービスへの信頼を多面的に伝えます。LPの社会的証明セクションの定番です。

#testimonials#cards#reviews#social-proof

ライブデモ

使用例（お題: SaaS FlowDesk）

この技法を「SaaS FlowDesk」というテーマのダミーサイトで実際に使った例です。

HTML

<!-- FlowDesk：SaaSの証言カードグリッド -->
<section class="tc">
  <div class="tc-inner">
    <p class="tc-eyebrow">CUSTOMER VOICES</p>
    <h2 class="tc-title">導入企業の声</h2>
    <div class="tc-grid">
      <article class="tc-card">
        <div class="tc-stars" aria-label="5/5">★★★★★</div>
        <p class="tc-quote">「定例レポートの作成が自動化され、毎週3時間が浮きました。投資対効果はすぐ出ます。」</p>
        <div class="tc-who"><span class="tc-av tc-av--1"></span><div><b>田中 美咲</b><small>マーケ責任者・SaaS企業</small></div></div>
      </article>
      <article class="tc-card">
        <div class="tc-stars" aria-label="5/5">★★★★★</div>
        <p class="tc-quote">「移行サポートが丁寧で、200名規模でも1週間で全社展開できました。」</p>
        <div class="tc-who"><span class="tc-av tc-av--2"></span><div><b>佐藤 健</b><small>情シス・製造業</small></div></div>
      </article>
      <article class="tc-card">
        <div class="tc-stars" aria-label="4/5">★★★★<span class="tc-star-off">★</span></div>
        <p class="tc-quote">「料金も機能もちょうどいい。小さなチームの“ちょうど良い相棒”です。」</p>
        <div class="tc-who"><span class="tc-av tc-av--3"></span><div><b>鈴木 あや</b><small>代表・デザイン事務所</small></div></div>
      </article>
    </div>
  </div>
</section>

CSS

/* FlowDesk（SaaS）：証言カードグリッドの再スキン */
* { box-sizing: border-box; }
body { margin: 0; font-family: "Segoe UI", system-ui, -apple-system, sans-serif; }

.tc { width: 100%; min-height: 380px; display: grid; place-content: center; padding: 30px 26px; background: #eef1fa; }
.tc-inner { width: min(880px, 95vw); }
.tc-eyebrow { margin: 0 0 6px; font-size: 11px; letter-spacing: .24em; font-weight: 700; color: #3b5bff; text-align: center; }
.tc-title { margin: 0 0 22px; font-size: 26px; font-weight: 800; color: #1f2547; text-align: center; }
.tc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.tc-card { background: #fff; border: 1px solid #e3e7f3; border-radius: 16px; padding: 20px; display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .2s ease; }
.tc-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(20,30,80,.1); }
.tc-stars { color: #f59e0b; font-size: 15px; letter-spacing: 1px; margin-bottom: 12px; }
.tc-star-off { color: #d8dce8; }
.tc-quote { margin: 0 0 18px; font-size: 13.5px; line-height: 1.8; color: #3a4058; flex: 1; }
.tc-who { display: flex; align-items: center; gap: 11px; }
.tc-av { width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto; }
.tc-av--1 { background: linear-gradient(135deg, #4f6bff, #818cf8); }
.tc-av--2 { background: linear-gradient(135deg, #06b6d4, #3b82f6); }
.tc-av--3 { background: linear-gradient(135deg, #f59e0b, #f43f5e); }
.tc-who b { display: block; font-size: 13px; color: #1f2547; }
.tc-who small { font-size: 11.5px; color: #8b91ad; }

@media (max-width: 680px) { .tc-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .tc-card { transition: none; } }

実装ガイド

使いどころ

LPやサービスサイトの社会的証明セクションに。アイコン・名前・肩書き・コメント・星評価をまとめた証言カードを並べ、信頼を多面的に伝えます。

実装時の注意点

grid で3枚を均等配置。コメントを flex:1 で伸ばしてカード高さを揃え、フッターに人物情報を固定します。ホバーで浮かせて手触りを足しています。

対応ブラウザ

CSS grid・flexbox・transform は全モダンブラウザ対応。JS 不要です。

よくある失敗

実在性が命なので、可能なら実名・実写・所属を（許諾の上で）。星評価は誇張せず実態に合わせる。コメントの長さを揃えると一覧の見栄えが安定します。

応用例

件数を増やしてスライダー化、業種フィルタ、動画証言の埋め込み、平均評価の集計表示などに展開できます。

コード