セクション間CTAバナー帯

ページの途中に挟む、横長のCTAバナー帯。見出し＋一言＋ボタンで「次の行動」へ橋渡しします。長いLPの中だるみを防ぎ、要所で申込やお問い合わせへ誘導できる定番パーツです。

#title#cta#banner#section

ライブデモ

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

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

HTML

<!-- Sakura：ページ途中のCTAバナー帯（FC入会誘導） -->
<section class="tcb">
  <div class="tcb-page" aria-hidden="true"><span></span><span></span><span class="s"></span></div>

  <div class="tcb-banner">
    <div class="tcb-shine" aria-hidden="true"></div>
    <div class="tcb-text">
      <h2>もっと近くで、応援しませんか？</h2>
      <p>ファンクラブ限定の先行抽選・特典映像をお届けします。</p>
    </div>
    <div class="tcb-actions">
      <button class="tcb-btn tcb-btn--solid" type="button">FCに入会する →</button>
      <button class="tcb-btn tcb-btn--ghost" type="button">特典を見る</button>
    </div>
  </div>

  <div class="tcb-page" aria-hidden="true"><span></span><span class="s"></span><span></span></div>
</section>

CSS

/* Sakura（アイドル）：セクション間CTAバナー帯の再スキン */
* { box-sizing: border-box; }
body { margin: 0; font-family: "Hiragino Kaku Gothic ProN", "Segoe UI", system-ui, sans-serif; }

.tcb { width: 100%; min-height: 380px; display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 26px; background: #fff5f9; }
.tcb-page { display: flex; flex-direction: column; gap: 9px; max-width: 760px; width: 92%; margin: 0 auto; opacity: .55; }
.tcb-page span { height: 9px; border-radius: 5px; background: #f3d6e2; }
.tcb-page span.s { width: 58%; }

.tcb-banner { position: relative; overflow: hidden; max-width: 760px; width: 92%; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 26px 30px; border-radius: 18px;
  background: linear-gradient(110deg, #d6336c, #b5179e 50%, #7048e8); background-size: 180% 180%; animation: tcb-drift 10s ease infinite; color: #fff; box-shadow: 0 22px 50px -18px rgba(214,51,108,.6); }
@keyframes tcb-drift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.tcb-shine { position: absolute; top: 0; bottom: 0; width: 40%; left: -50%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent); transform: skewX(-18deg); animation: tcb-shine 5.5s ease-in-out infinite; }
@keyframes tcb-shine { 0% { left: -50%; } 60%,100% { left: 130%; } }

.tcb-text { position: relative; z-index: 2; }
.tcb-text h2 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.01em; }
.tcb-text p { margin: 7px 0 0; font-size: 13px; color: rgba(255,255,255,.88); }
.tcb-actions { position: relative; z-index: 2; display: flex; gap: 10px; flex-wrap: wrap; }
.tcb-btn { font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; padding: 11px 20px; border-radius: 999px; transition: transform .15s ease; }
.tcb-btn--solid { border: none; color: #a01050; background: #fff; }
.tcb-btn--solid:hover { transform: translateY(-2px); }
.tcb-btn--ghost { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.5); color: #fff; }
.tcb-btn--ghost:hover { background: rgba(255,255,255,.24); }

@media (prefers-reduced-motion: reduce) { .tcb-banner, .tcb-shine, .tcb-btn { animation: none; transition: none; } }

実装ガイド

使いどころ

長いLPの途中に挟む、横長のCTAバナー帯。見出し＋一言＋ボタンで「次の行動」へ橋渡しし、中だるみを防ぎます。

実装時の注意点

前後にダミーの本文行を置いて“ページ途中”を表現。バナーはグラデのドリフトに加え、斜めの光（shine）が横切るアニメで視線を引きます。テキストとボタンは z-index で光の上に。

対応ブラウザ

gradient アニメーション・transform は全モダンブラウザ対応。CSS のみで JS 不要です。

よくある失敗

主役の本文より目立ちすぎないバランスを。ボタンの文言は具体的な動詞で（「無料で試す」等）。狭い画面では見出しとボタンを縦積みにし、光のアニメは控えめにします。

応用例

残り時間カウントダウンの併設、背景を画像に、複数バナーのA/B、スクロール到達でフェードインなどに展開できます。

コード