DesignLayer

【Next.js】ロゴマーキーの作り方を解説

公開日: 2026年9月12日 · 読了目安 9 分

Next.js の実績ロゴを、無限スクロールのマーキーにする方法を解説します。CSS だけ、一時停止付き、完成セクションの流用の3通り。途切れとアクセシビリティの失敗もまとめます。

先に結論：マーキーは「途切れない」ことが仕事

導入実績のロゴを横に流すマーキーは、SaaS LP でよく使われます。仕事は enticement ではなく、途切れずに読み続けられることです。隙間が空く、端で跳ねる、ロゴが潰れると、信頼ブロックが逆に弱くなります。

作り方は3つです。CSS の animation で列を2つ並べてループする。ホバーで止める。完成しているマーキーを載せる。

強いモーションはヒーローに残し、マーキーは一定速度の横移動だけにしてください。

地味でも失敗しやすい3つの理由

1つ目は、ロゴ列が1周で途切れることです。同じ列を2つ並べ、100% 分だけ平行移動すると継ぎ目が消えます。

2つ目は、ロゴの高さが揃っていないことです。高さは固定し、幅は object-contain で潰さない。

3つ目は、動きが速すぎることです。読む前に通り過ぎると実績に見えません。1周 20〜40 秒が扱いやすいです。

方法1：CSS だけで無限ループする

overflow-hidden の枠の中に、同じロゴ列を2つ置きます。translateX を 0 から -50% まで動かし、linear で繰り返します。

列を2つ置く

components/LogoMarquee.tsx
const logos = ["A社", "B社", "C社", "D社"];

export function LogoMarquee() {
  return (
    <div className="overflow-hidden">
      <div className="flex w-max animate-[marquee_30s_linear_infinite]">
        {[...logos, ...logos].map((name, i) => (
          <span key={i} className="mx-8 text-sm text-zinc-500">
            {name}
          </span>
        ))}
      </div>
    </div>
  );
}

方法2：ホバーで止める

ロゴを読みたい人のために、hover で animation-play-state: paused を付けます。キーボードフォーカス中も止めると親切です。

prefers-reduced-motion ではアニメーションを止め、静的なグリッドに切り替えてください。

方法3：完成しているマーキーを載せる

グラデーションで端を消す、2段で逆方向に流す、ホバーでロゴが少し浮かぶ。こうした塊は、CSS の調整だけで半日かかることがあります。

DesignLayer のカタログには、ライブで流れるロゴマーキーがあります。閲覧無料・カード不要です。https://design-layer.com/components

無料のソースコピーは日本時間で1日3回です。今日マーキー1本、で足ります。

公開前チェックリスト

1. 継ぎ目でロゴが欠けていないか。2. コントラストが低いロゴが背景に沈んでいないか。3. リンクがあるならフォーカスリングが見えるか。4. 動きを止められるか。5. スマホ幅でロゴが潰れないか。

よくある質問

実装で繰り返し出る質問です。

Swiper の方が簡単ではありませんか？

枚数を手動で送るならカルーセルです。実績ロゴの「流れている」見せ方ならマーキーの方が軽いです。

サーバーコンポーネントのまま作れますか？

CSS アニメーションなら可能です。ホバー以外の JS が要らなければ "use client" は不要です。

【Next.js】ロゴマーキーの作り方を解説 | DesignLayer