ロゴマーキー
ダミーのロゴバッジが横へ無限スクロール。2セット並べてシームレスループ。ホバーか停止ボタンで一時停止。
プレビュー
自動再生
操作自動で再生されます。
仕様書
- 向く場面
- 導入企業・提携先ロゴの一覧
- 数が多く一画面に並べきれないロゴ
- 信頼感を流れで見せるヒーロー下
- 避ける場面
- ロゴが3〜4個（静止で並べる）
- 停止手段が無いまま5秒以上動かす
- 各ロゴがリンクで到達が必要なとき
- 構成要素
- 見出し
- トラック
- ロゴバッジ
- 端のフェード
- 操作ヒント
- 持っている状態
- 通常
- ホバー
- フォーカス
- キーボード
Tab で「一時停止」ボタン（aria-pressed）に到達・Enter/Space で停止／再生を切り替える。ホバーでも一時停止する
- 支援技術
2セット目のロゴは aria-hidden で重複読み上げを防ぐ。5秒以上動き続けるので停止ボタンを常設（WCAG 2.2.2）。reduce 設定では静止した一覧にする
- 動き
14s linear で左へ無限スクロール（-50% で継ぎ目なくループ）。ホバーと停止ボタンで一時停止。reduce では動かない
デザインの要点
- 同じ列を2セット並べて translateX(-50%) まで動かすと継ぎ目が消える。1セットだと端で空白が流れる
- 速度は距離ではなく時間（14s）で決め、ロゴを足しても秒数を保つ。速すぎる流れは社名が読めず信頼感が下がる
- 端は mask-image で溶かす。切り落とすと流れではなく「はみ出し」に見える
- 5秒以上動く要素には停止手段が要る。ホバーはタッチ端末で効かないので aria-pressed の停止ボタンを常設する
コード（コピーして使えます）
<div class="mq-wrap">
<p class="mq-heading">導入実績</p>
<div class="mq-track-wrap">
<div class="mq-track">
<span class="mq-logo mq-l1">
<svg width="18" height="18" viewBox="0 0 18 18" fill="none"><rect x="1" y="1" width="16" height="16" rx="4" fill="#2b50c7"/><text x="9" y="13.5" text-anchor="middle" fill="#fff" font-size="11" font-weight="700">A</text></svg>
アルファ社
</span>
<span class="mq-logo mq-l2">
<svg width="18" height="18" viewBox="0 0 18 18" fill="none"><circle cx="9" cy="9" r="8" fill="#e86c4d"/><text x="9" y="13.5" text-anchor="middle" fill="#fff" font-size="11" font-weight="700">B</text></svg>
ベータ社
</span>
<span class="mq-logo mq-l3">
<svg width="18" height="18" viewBox="0 0 18 18" fill="none"><polygon points="9,1 17,17 1,17" fill="#2dc793"/><text x="9" y="16" text-anchor="middle" fill="#fff" font-size="11" font-weight="700">G</text></svg>
ガンマ社
</span>
<span class="mq-logo mq-l4">
<svg width="18" height="18" viewBox="0 0 18 18" fill="none"><rect x="1" y="1" width="16" height="16" rx="8" fill="#f5a623"/><text x="9" y="13.5" text-anchor="middle" fill="#fff" font-size="11" font-weight="700">D</text></svg>
デルタ社
</span>
<span class="mq-logo mq-l5">
<svg width="18" height="18" viewBox="0 0 18 18" fill="none"><rect x="1" y="4" width="16" height="10" rx="3" fill="#8b5cf6"/><text x="9" y="13.5" text-anchor="middle" fill="#fff" font-size="11" font-weight="700">E</text></svg>
イプシロン
</span>
<span class="mq-logo mq-l6">
<svg width="18" height="18" viewBox="0 0 18 18" fill="none"><circle cx="9" cy="9" r="8" fill="#2c2823"/><text x="9" y="13.5" text-anchor="middle" fill="#fbf6ec" font-size="11" font-weight="700">Z</text></svg>
ゼータ社
</span>
<!-- 2セット目(シームレスループ用) -->
<span class="mq-logo mq-l1" aria-hidden="true">
<svg width="18" height="18" viewBox="0 0 18 18" fill="none"><rect x="1" y="1" width="16" height="16" rx="4" fill="#2b50c7"/><text x="9" y="13.5" text-anchor="middle" fill="#fff" font-size="11" font-weight="700">A</text></svg>
アルファ社
</span>
<span class="mq-logo mq-l2" aria-hidden="true">
<svg width="18" height="18" viewBox="0 0 18 18" fill="none"><circle cx="9" cy="9" r="8" fill="#e86c4d"/><text x="9" y="13.5" text-anchor="middle" fill="#fff" font-size="11" font-weight="700">B</text></svg>
ベータ社
</span>
<span class="mq-logo mq-l3" aria-hidden="true">
<svg width="18" height="18" viewBox="0 0 18 18" fill="none"><polygon points="9,1 17,17 1,17" fill="#2dc793"/><text x="9" y="16" text-anchor="middle" fill="#fff" font-size="11" font-weight="700">G</text></svg>
ガンマ社
</span>
<span class="mq-logo mq-l4" aria-hidden="true">
<svg width="18" height="18" viewBox="0 0 18 18" fill="none"><rect x="1" y="1" width="16" height="16" rx="8" fill="#f5a623"/><text x="9" y="13.5" text-anchor="middle" fill="#fff" font-size="11" font-weight="700">D</text></svg>
デルタ社
</span>
<span class="mq-logo mq-l5" aria-hidden="true">
<svg width="18" height="18" viewBox="0 0 18 18" fill="none"><rect x="1" y="4" width="16" height="10" rx="3" fill="#8b5cf6"/><text x="9" y="13.5" text-anchor="middle" fill="#fff" font-size="11" font-weight="700">E</text></svg>
イプシロン
</span>
<span class="mq-logo mq-l6" aria-hidden="true">
<svg width="18" height="18" viewBox="0 0 18 18" fill="none"><circle cx="9" cy="9" r="8" fill="#2c2823"/><text x="9" y="13.5" text-anchor="middle" fill="#fbf6ec" font-size="11" font-weight="700">Z</text></svg>
ゼータ社
</span>
</div>
</div>
<button class="mq-toggle" type="button" aria-pressed="false">一時停止</button>
</div>