CTAセクション CTA Section

ユーザーにアクションを促す目立つセクション。コンバージョン向上の要となるコンポーネント。

使用場面: LP下部の申し込み誘導、無料トライアル案内、ニュースレター登録などの場面 採用例: Vercel, Linear

ライブデモ

プロジェクトを次のレベルへ

今すぐ無料でアカウントを作成。クレジットカード不要で14日間すべての機能をお試しいただけます。

✓ 14日間無料   ✓ クレカ不要   ✓ いつでも解約可能

ソースコード

<div class="demo-cta">
  <div class="demo-cta-bg"></div>
  <div class="demo-cta-content">
    <h2 class="demo-cta-title">プロジェクトを次のレベルへ</h2>
    <p class="demo-cta-desc">今すぐ無料でアカウントを作成。クレジットカード不要で14日間すべての機能をお試しいただけます。</p>
    <div class="demo-cta-actions">
      <button class="demo-cta-btn primary">無料で始める</button>
      <button class="demo-cta-btn secondary">デモを見る</button>
    </div>
    <div class="demo-cta-note">&#10003; 14日間無料 &nbsp; &#10003; クレカ不要 &nbsp; &#10003; いつでも解約可能</div>
  </div>
</div>
.demo-cta {
  position: relative; border-radius: 16px; overflow: hidden;
  padding: 40px 24px; text-align: center;
}
.demo-cta-bg {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(135deg, var(--ui-primary), color-mix(in srgb, var(--ui-primary) 70%, #6366f1));
  z-index: 0;
}
.demo-cta-content { position: relative; z-index: 1; }
.demo-cta-title {
  font-size: 24px; font-weight: 800; color: #fff;
  margin: 0 0 10px;
}
.demo-cta-desc {
  font-size: 14px; color: rgba(255,255,255,0.85);
  max-width: 460px; margin: 0 auto 24px;
  line-height: 1.5;
}
.demo-cta-actions {
  display: flex; justify-content: center; gap: 12px;
  flex-wrap: wrap; margin-bottom: 16px;
}
.demo-cta-btn {
  padding: 12px 28px; font-size: 15px; font-weight: 700;
  border: none; border-radius: 8px; cursor: pointer;
  transition: transform 0.15s, box-shadow 0.2s;
}
.demo-cta-btn.primary {
  background: #fff; color: var(--ui-primary);
}
.demo-cta-btn.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
.demo-cta-btn.secondary {
  background: rgba(255,255,255,0.15); color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
}
.demo-cta-btn.secondary:hover {
  background: rgba(255,255,255,0.25);
}
.demo-cta-note {
  font-size: 12px; color: rgba(255,255,255,0.7);
}

AIプロンプト

Basic 
CTAセクションをHTML/CSSで作ってください。背景色付きのセクションにタイトル、説明文、アクションボタンを中央配置します。
Custom 
以下の仕様でCTAセクションを実装してください。
- グラデーション背景（プライマリカラー基調）
- キャッチコピー＋説明文＋2つのボタン（プライマリ/セカンダリ）
- プライマリカラー: #2563eb
- 安心感バッジ（無料期間・クレカ不要等）
- ボタンのホバーアニメーション
- レスポンシブ対応
Advanced 
高コンバージョンCTAセクションを実装してください。
- A/Bテスト用バリアント切替機能
- カウントダウンタイマー付き（期間限定感の演出）
- 入力フォーム埋め込み（メールアドレス + 送信ボタン）
- IntersectionObserverでスクロール連動アニメーション
- パーティクルや微細な背景アニメーション
- Schema.org マークアップ
- パフォーマンス最適化（will-change, contain）
← カタログに戻る