フッター初級

流れる文字のフッターバナー

「LET'S WORK TOGETHER」などの大文字が左へ流れ続けるマーキー型のお問い合わせ誘導。下にメール・SNSを添えた、制作会社やクリエイター系で人気の Animated フッターです。

#footer#marquee#animated#contact

ライブデモ

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

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

HTML

<!-- Sakura：ライブツアーを流れる文字で訴求するフッター -->
<footer class="fmq">
  <a class="fmq-track-link" href="#" onclick="return false" aria-label="ツアー詳細">
    <div class="fmq-track">
      <span class="fmq-row" aria-hidden="true">
        SAKURA LIVE TOUR 2026 <i class="fmq-star">✦</i> TICKETS ON SALE <i class="fmq-star">✦</i>
        SAKURA LIVE TOUR 2026 <i class="fmq-star">✦</i> TICKETS ON SALE <i class="fmq-star">✦</i>
      </span>
      <span class="fmq-row" aria-hidden="true">
        満開の その先へ <i class="fmq-star">✦</i> 星降る夜の桜物語 <i class="fmq-star">✦</i>
        満開の その先へ <i class="fmq-star">✦</i> 星降る夜の桜物語 <i class="fmq-star">✦</i>
      </span>
    </div>
  </a>

  <div class="fmq-bar">
    <a class="fmq-mail" href="#" onclick="return false">fanclub@sakura-project.jp</a>
    <nav class="fmq-social">
      <a href="#" onclick="return false">X</a>
      <a href="#" onclick="return false">Instagram</a>
      <a href="#" onclick="return false">YouTube</a>
    </nav>
    <span class="fmq-copy">© 2026 Sakura</span>
  </div>
</footer>

CSS

/* Sakura（アイドル）：流れる文字のフッターバナーの再スキン */
* { box-sizing: border-box; }
body { margin: 0; font-family: "Hiragino Kaku Gothic ProN", "Segoe UI", system-ui, sans-serif; }

.fmq { width: 100%; min-height: 380px; display: flex; flex-direction: column; justify-content: center; background: #1c0f18; color: #fff; overflow: hidden; }

.fmq-track-link { text-decoration: none; color: inherit; display: block; padding: 30px 0; }
.fmq-track { display: flex; flex-direction: column; gap: 4px; }

.fmq-row { display: inline-block; white-space: nowrap; font-size: 50px; font-weight: 900; letter-spacing: -.01em; line-height: 1.12; color: transparent; -webkit-text-stroke: 1.5px rgba(255,182,213,.6); will-change: transform; animation: fmq-scroll 18s linear infinite; }
.fmq-row:nth-child(2) { color: #ffd9e8; -webkit-text-stroke: 0; animation-duration: 22s; animation-direction: reverse; margin-left: -80px; font-size: 40px; }
.fmq-track-link:hover .fmq-row { animation-play-state: paused; }
.fmq-star { font-style: normal; color: #f06595; -webkit-text-stroke: 0; margin: 0 8px; }
@keyframes fmq-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.fmq-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 16px 30px; border-top: 1px solid rgba(255,182,213,.18); }
.fmq-mail { color: #fff; text-decoration: none; font-size: 14px; font-weight: 700; border-bottom: 1px solid transparent; transition: border-color .2s ease; }
.fmq-mail:hover { border-color: #f06595; }
.fmq-social { display: flex; gap: 16px; }
.fmq-social a { color: rgba(255,217,232,.8); text-decoration: none; font-size: 13px; }
.fmq-social a:hover { color: #fff; }
.fmq-copy { font-size: 12px; color: rgba(255,217,232,.5); }

@media (prefers-reduced-motion: reduce) { .fmq-row { animation: none; } }

実装ガイド

使いどころ

制作会社・クリエイター・イベント/ライブなど、勢いと誘導を両立したいフッターに。「お問い合わせ」や開催情報などの大文字が左へ流れ続け、視線を引きつけます。

実装時の注意点

2行のテキストを同じ内容で重複させ、translateX を -50% まで動かすことで継ぎ目のない無限スクロールを実現。2行目は逆方向・別速度にして動きに奥行きを出しています。ホバーで animation-play-state:paused により一時停止します。CSS のみで JS 不要です。

対応ブラウザ

transform アニメーションは全モダンブラウザで対応し、GPU 合成に乗って軽量です。-webkit-text-stroke はプレフィックス併記で広く動作します。

よくある失敗

重複テキストが画面幅より短いと -50% で隙間が出るため、十分な長さ（2セット以上）を並べること。reduced-motion で必ず停止指定を。流れる文字だけだとリンク先が不明になりがちなので、下に明確な連絡先や導線を添えます。

応用例

速度や向きを変える、絵文字や記号で区切る、ホバーで色を変える、上下2方向に流して交差させるなどの演出ができます。

コード