フッター初級

大型CTAフッター

グラデーション帯に特大の見出しとメール登録フォームを置き、その下にリンク列と著作権バーを重ねた「最後のひと押し」型フッター。SaaSやLPで離脱直前の行動喚起に効きます。

#footer#cta#newsletter#gradient

ライブデモ

使用例（お題: SaaS FlowDesk）

この技法を「SaaS FlowDesk」というテーマのダミーサイトで実際に使った例です。

HTML

<!-- FlowDesk：SaaSの最終CTAフッター -->
<footer class="fbc">
  <section class="fbc-cta">
    <p class="fbc-eyebrow">READY TO FLOW</p>
    <h2 class="fbc-title">チームの段取りを、今日から軽く。</h2>
    <p class="fbc-sub">14日間の無料トライアル。カードは不要、1分で開始できます。</p>
    <form class="fbc-form" onsubmit="return false">
      <input class="fbc-input" type="email" placeholder="仕事用メールアドレス" aria-label="メールアドレス">
      <button class="fbc-btn" type="submit">無料で始める</button>
    </form>
  </section>

  <div class="fbc-links">
    <a class="fbc-logo" href="#" onclick="return false">◇ FlowDesk</a>
    <nav class="fbc-cols">
      <a href="#" onclick="return false">機能</a>
      <a href="#" onclick="return false">料金</a>
      <a href="#" onclick="return false">導入事例</a>
      <a href="#" onclick="return false">ヘルプ</a>
      <a href="#" onclick="return false">採用</a>
    </nav>
  </div>

  <div class="fbc-bar">
    <span>© 2026 FlowDesk Inc.</span>
    <span class="fbc-social">
      <a href="#" onclick="return false" aria-label="X">𝕏</a>
      <a href="#" onclick="return false" aria-label="GitHub">⌂</a>
      <a href="#" onclick="return false" aria-label="YouTube">▷</a>
    </span>
  </div>
</footer>

CSS

/* FlowDesk（SaaS）：大型CTAフッターの再スキン */
* { box-sizing: border-box; }
body { margin: 0; font-family: "Segoe UI", system-ui, -apple-system, sans-serif; }

.fbc {
  width: 100%; min-height: 380px; display: flex; flex-direction: column;
  color: #eef1ff;
  background: linear-gradient(135deg, #1e2a6b 0%, #4f46e5 50%, #3b82f6 100%);
  background-size: 180% 180%; animation: fbc-flow 12s ease infinite;
}
@keyframes fbc-flow { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

.fbc-cta { text-align: center; padding: 44px 24px 30px; }
.fbc-eyebrow { margin: 0 0 10px; font-size: 11px; letter-spacing: .3em; color: rgba(255,255,255,.72); }
.fbc-title { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -.01em; }
.fbc-sub { margin: 12px 0 22px; font-size: 13.5px; color: rgba(255,255,255,.82); }
.fbc-form { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.fbc-input { font: inherit; font-size: 14px; width: min(320px, 70vw); padding: 12px 16px; border-radius: 10px; border: none; background: rgba(255,255,255,.96); color: #1f2433; }
.fbc-input::placeholder { color: #9aa1b1; }
.fbc-btn { font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; padding: 12px 24px; border-radius: 10px; border: none; background: #0b1020; color: #fff; transition: transform .15s ease, background .2s ease; }
.fbc-btn:hover { background: #000; transform: translateY(-2px); }

.fbc-links { margin-top: auto; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding: 22px 28px; border-top: 1px solid rgba(255,255,255,.16); }
.fbc-logo { font-size: 17px; font-weight: 800; color: #fff; text-decoration: none; }
.fbc-cols { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.fbc-cols a { color: rgba(255,255,255,.85); text-decoration: none; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 8px; transition: background .2s ease, color .2s ease; }
.fbc-cols a:hover { background: rgba(255,255,255,.16); color: #fff; }

.fbc-bar { display: flex; align-items: center; justify-content: space-between; padding: 14px 28px; font-size: 12px; color: rgba(255,255,255,.7); border-top: 1px solid rgba(255,255,255,.12); }
.fbc-social { display: flex; gap: 14px; }
.fbc-social a { color: rgba(255,255,255,.8); text-decoration: none; font-size: 15px; }
.fbc-social a:hover { color: #fff; }

@media (prefers-reduced-motion: reduce) { .fbc { animation: none; } .fbc-btn { transition: none; } }

実装ガイド

使いどころ

LP や SaaS、サービスサイトのページ末尾で「最後のひと押し」をしたいときに。グラデーション帯に大きな見出しとメール登録フォームを置き、離脱直前の行動を促します。

実装時の注意点

帯の背景は background-size を拡大した linear-gradient を background-position でゆっくり動かすだけの軽量アニメ。CTA・リンク列・著作権バーを縦に積み、flex の margin-top:auto で最下部のバーを底に貼り付けます。フォームはダミーで submit を抑止しています。

対応ブラウザ

gradient アニメーション・flexbox・border-radius いずれも全モダンブラウザで対応します。特別なプレフィックスやフォールバックは不要です。

よくある失敗

グラデ上の白文字は領域によってコントラストが変動するため、見出しは太め＋十分なサイズで AA を確保します。入力欄とボタンは折り返し（flex-wrap）対応にしないと、狭い画面で崩れます。色数を増やしすぎると濁るので 3 色程度に抑えるのが無難です。

応用例

メール登録をアプリストアバッジや電話CTAに差し替える、帯の配色をブランドカラーに、A/B で見出し文言を出し分ける、背景に薄いパターンを重ねるなどの展開ができます。

コード