お客様の声中級

大型引用・証言スライド

大きな引用符とともに1件の声を主役級に見せ、複数の証言を自動で切り替えるスライド。インパクト重視で、導入事例の象徴的な一言を強く印象づけたいときに効果的です。

#testimonials#quote#slider#featured

ライブデモ

使用例（お題: アイドルグループ Sakura）

この技法を「アイドルグループ Sakura」というテーマのダミーサイトで実際に使った例です。

HTML

<!-- Sakura：ファンの声を大きく見せる証言スライド -->
<section class="tq">
  <div class="tq-inner">
    <span class="tq-mark" aria-hidden="true">”</span>
    <div class="tq-slides" id="tqSlides">
      <blockquote class="tq-slide is-active">
        <p class="tq-text">初めてのライブで人生が変わりました。あの夜の桜色のペンライト、一生忘れません。</p>
        <footer class="tq-by"><span class="tq-av tq-av--1"></span><span><b>みなみ</b> — 会員歴2年</span></footer>
      </blockquote>
      <blockquote class="tq-slide">
        <p class="tq-text">配信ライブも会場と同じ熱量。遠方でも応援を続けられるのが本当に嬉しいです。</p>
        <footer class="tq-by"><span class="tq-av tq-av--2"></span><span><b>けんと</b> — 会員歴1年</span></footer>
      </blockquote>
      <blockquote class="tq-slide">
        <p class="tq-text">メンバーの努力が伝わってくる。だから毎日がんばれる。私の元気の源です。</p>
        <footer class="tq-by"><span class="tq-av tq-av--3"></span><span><b>あおい</b> — 会員歴3年</span></footer>
      </blockquote>
    </div>
    <div class="tq-dots" id="tqDots"><button class="is-active" type="button" aria-label="1"></button><button type="button" aria-label="2"></button><button type="button" aria-label="3"></button></div>
  </div>
</section>

CSS

/* Sakura（アイドル）：大型引用・証言スライドの再スキン */
* { box-sizing: border-box; }
body { margin: 0; font-family: "Hiragino Kaku Gothic ProN", "Segoe UI", system-ui, sans-serif; }

.tq { width: 100%; min-height: 380px; display: grid; place-content: center; padding: 36px 26px; text-align: center;
  background: radial-gradient(120% 120% at 50% 0%, #4a1638, #160812 70%); color: #ffe9f2; }
.tq-inner { position: relative; width: min(620px, 94vw); }
.tq-mark { position: absolute; top: -38px; left: 50%; transform: translateX(-50%); font-size: 120px; line-height: 1; color: rgba(240,101,149,.3); font-family: Georgia, serif; }
.tq-slides { position: relative; min-height: 170px; }
.tq-slide { margin: 0; position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease; pointer-events: none; }
.tq-slide.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; }
.tq-text { margin: 0 0 22px; font-size: 19px; line-height: 1.7; font-weight: 600; color: #fff; }
.tq-by { display: flex; align-items: center; gap: 11px; font-size: 13px; color: #e0a9c4; }
.tq-by b { color: #fff; }
.tq-av { width: 36px; height: 36px; border-radius: 50%; flex: 0 0 auto; }
.tq-av--1 { background: linear-gradient(135deg, #f8a5cf, #f06595); }
.tq-av--2 { background: linear-gradient(135deg, #c4b5fd, #f06595); }
.tq-av--3 { background: linear-gradient(135deg, #fbbf24, #f43f5e); }
.tq-dots { display: flex; justify-content: center; gap: 8px; margin-top: 26px; }
.tq-dots button { width: 9px; height: 9px; border-radius: 50%; border: none; cursor: pointer; background: rgba(255,255,255,.25); padding: 0; transition: background .2s ease, transform .2s ease; }
.tq-dots button.is-active { background: #f8a5cf; transform: scale(1.3); }

@media (prefers-reduced-motion: reduce) { .tq-slide { transition: none; } }

JavaScript

// （デモと同じフックを流用）証言スライドを自動切替（ドットでも移動）
(() => {
  const slidesWrap = document.getElementById('tqSlides');
  const dotsWrap = document.getElementById('tqDots');
  if (!slidesWrap) return;
  const slides = [...slidesWrap.querySelectorAll('.tq-slide')];
  const dots = dotsWrap ? [...dotsWrap.querySelectorAll('button')] : [];
  let i = 0;
  function go(n) { i = (n + slides.length) % slides.length; slides.forEach((s, k) => s.classList.toggle('is-active', k === i)); dots.forEach((d, k) => d.classList.toggle('is-active', k === i)); }
  dots.forEach((d, k) => d.addEventListener('click', () => { auto = false; go(k); }));
  let auto = !matchMedia('(prefers-reduced-motion: reduce)').matches;
  if (auto) { const tick = () => { if (!auto) return; go(i + 1); setTimeout(tick, 3200); }; setTimeout(tick, 3000); }
})();

実装ガイド

使いどころ

導入事例やファンの声の象徴的な一言を強く印象づけたいときに。大きな引用符とともに1件を主役級に見せ、複数を自動で切り替えます。

実装時の注意点

スライドを絶対配置で重ね、opacity＋translateY のフェードで切替。ドットで現在地を示し、クリックでも移動できます。自動再生は一定間隔で次へ送ります。

対応ブラウザ

opacity/transform トランジションは全モダンブラウザ対応。

よくある失敗

自動送りが速いと読み切れないため3秒前後を確保。スライド高さがバラつくとガタつくので min-height を固定。手動操作後は自動を止めるか再開タイミングを調整します。アクセシビリティのため aria-live や一時停止導線も検討を。

応用例

顔写真や企業ロゴの併記、左右矢印の追加、スワイプ対応、引用元リンク、業種別の出し分けなどに展開できます。

コード