お客様の声中級

流れる証言＆ロゴマーキー

短い推薦コメントや導入企業ロゴが横に流れ続けるマーキー型の社会的証明。省スペースで多数の声を見せられ、止まらない動きが活気を演出します。BtoBサイトの実績帯に向きます。

#testimonials#marquee#logos#animated

ライブデモ

使用例（お題: SaaS FlowDesk）

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

HTML

<!-- FlowDesk：SaaSの流れる証言＆ロゴマーキー -->
<section class="tm">
  <div class="tm-inner">
    <p class="tm-eyebrow">TRUSTED BY 1,200+ TEAMS</p>

    <div class="tm-row tm-row--a">
      <div class="tm-track">
        <span class="tm-chip"><b>★★★★★</b>「週3時間が浮いた」<i>— SaaS企業</i></span>
        <span class="tm-chip"><b>★★★★★</b>「全社展開が1週間」<i>— 製造業</i></span>
        <span class="tm-chip"><b>★★★★★</b>「小さなチームに最適」<i>— デザイン事務所</i></span>
        <span class="tm-chip"><b>★★★★★</b>「サポートが神」<i>— EC運営</i></span>
        <span class="tm-chip" aria-hidden="true"><b>★★★★★</b>「週3時間が浮いた」<i>— SaaS企業</i></span>
        <span class="tm-chip" aria-hidden="true"><b>★★★★★</b>「全社展開が1週間」<i>— 製造業</i></span>
        <span class="tm-chip" aria-hidden="true"><b>★★★★★</b>「小さなチームに最適」<i>— デザイン事務所</i></span>
        <span class="tm-chip" aria-hidden="true"><b>★★★★★</b>「サポートが神」<i>— EC運営</i></span>
      </div>
    </div>

    <div class="tm-row tm-row--b">
      <div class="tm-track">
        <span class="tm-logo">◆ Northwind</span><span class="tm-logo">▲ Atlas</span><span class="tm-logo">● Lumen</span><span class="tm-logo">✦ Mercato</span><span class="tm-logo">◈ Nimbus</span>
        <span class="tm-logo" aria-hidden="true">◆ Northwind</span><span class="tm-logo" aria-hidden="true">▲ Atlas</span><span class="tm-logo" aria-hidden="true">● Lumen</span><span class="tm-logo" aria-hidden="true">✦ Mercato</span><span class="tm-logo" aria-hidden="true">◈ Nimbus</span>
      </div>
    </div>
  </div>
</section>

CSS

/* FlowDesk（SaaS）：流れる証言＆ロゴマーキーの再スキン */
* { box-sizing: border-box; }
body { margin: 0; font-family: "Segoe UI", system-ui, -apple-system, sans-serif; }

.tm { width: 100%; min-height: 380px; display: grid; place-content: center; padding: 30px 0; background: #0b1020; color: #e7eaf5; overflow: hidden; }
.tm-inner { width: 100%; }
.tm-eyebrow { margin: 0 0 22px; font-size: 11px; letter-spacing: .26em; font-weight: 700; color: #7b86b0; text-align: center; }
.tm-row { overflow: hidden; padding: 7px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.tm-track { display: flex; gap: 12px; width: max-content; }
.tm-row--a .tm-track { animation: tm-scroll 26s linear infinite; }
.tm-row--b .tm-track { animation: tm-scroll 32s linear infinite reverse; }
@keyframes tm-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.tm-row:hover .tm-track { animation-play-state: paused; }
.tm-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; background: #151b30; border: 1px solid #242c48; border-radius: 999px; padding: 10px 18px; font-size: 13px; color: #d4d9ec; white-space: nowrap; }
.tm-chip b { color: #f59e0b; font-size: 11px; letter-spacing: 1px; }
.tm-chip i { font-style: normal; color: #8b95b8; font-size: 11.5px; }
.tm-logo { flex: 0 0 auto; font-size: 16px; font-weight: 800; color: #5e6790; letter-spacing: .02em; padding: 6px 22px; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) { .tm-track { animation: none !important; } }

実装ガイド

使いどころ

BtoBサイトの実績帯に。短い推薦コメントや導入企業ロゴが横に流れ続け、省スペースで多数の声を見せます。

実装時の注意点

同一内容を2セット並べ、translateX -50% で継ぎ目のない無限スクロール。2行を逆方向・別速度にして動きに奥行きを出し、両端はマスクでフェードします。ホバーで一時停止。

対応ブラウザ

transform アニメーション・mask-image（-webkit- 併記）は全モダンブラウザ対応。GPU 合成に乗り軽量です。

よくある失敗

重複セットが画面幅より短いと隙間が出るため十分な数を並べること。reduced-motion で停止を。流れる文字は読み切れない速さにしない。ロゴは各社の利用許諾を確認します。

応用例

速度・向きの調整、ロゴのモノクロ→ホバーで原色、クリックで事例ページへ、上下2方向で交差などに展開できます。

コード