無限ループ ロゴマーキー

このパーツの使いどころと実装ポイント

このパーツは、取引先ロゴが横に流れ続ける無限ループ型のマーキー（流れる帯）です。@keyframes で translateX(0) から -50% まで動かし、同じ並びを2セット用意して半分でループさせることで、継ぎ目なくつながって見せています。両端は mask-image のグラデーションでフェードさせ、ロゴが画面端で唐突に切れない工夫が入っています。

向いている場面

導入企業やメディア掲載が多く、数の多さそのものを訴求したい場面に向きます。BtoB SaaS の「導入企業」一覧、制作会社の取引先紹介、イベントの協賛企業などで、静的に並べるより動きで存在感を出せます。各ロゴは初期状態が opacity:.5 と grayscale(1) で、ホバーすると色とコントラストが戻る演出です。

カスタマイズと注意点

• 速度は animation の 25s を増減して調整します。ロゴ数を増やしたら、2セットとも同じ内容を保つのがループの前提です。
• 実ロゴに差し替える際は SVG か WebP を使い、グレースケール表示でも識別できる形を選びます。
• 動き続けるアニメは prefers-reduced-motion で停止させる配慮があると親切です。スクリーンリーダー向けには重複セットを aria-hidden にすると読み上げの二重化を防げます。