CTA共通コンポーネント デモ

コンテンツページで使用する3種類のCTAコンポーネント

1. TopCTA（上部2択CTA）

ページ上部に配置する2つのアクションボタン。Primary（目立つ）とSecondary（控えめ）の組み合わせ。

例1: テンプレートページ用

例2: ガイドページ用

例3: Playbook用

2. MidCTA（中部リード獲得CTA）

コンテンツ途中に配置するリード獲得用CTA。目立つデザインで離脱を防ぐ。

例1: 無料キットダウンロード

30本以上のテンプレート、ROI KPIトラッカー、Workflow設計CSVが含まれています

メールアドレスのみで即ダウンロード

例2: テンプレートコピー

Hot-Lead Autopilot テンプレート（期待Lift: +35% conversion）

1クリックでコピーして即使用可能

例3: ガイドダウンロード

8,000字の完全ガイド（PDF）- SMB向けアウトバウンド戦略の全て

PDF形式で即ダウンロード

3. BottomCTA（下部3択リンク）

ページ下部に配置する関連リソースへのリンク。次のステップへ誘導する。

例1: テンプレートページの下部

関連リソース

Playbook: Hot-Lead Autopilot（5分応答）

Signal検知から5分以内の自動アウトリーチで、コンバージョン率が35%向上

Guide: Revenue Action Platform実装ガイド

SMB向けの完全実装ガイド（8,000字）

Kit: Revenue Action Starter Kit

20+テンプレート、ROI KPIトラッカー、Workflow設計CSVを無料ダウンロード

例2: ガイドページの下部

次のステップ

Templates: Hot-Lead Autopilot

/pricing再訪を5分で商談に変える自動実行テンプレート

Integrations: HubSpot連携

既存のHubSpotはそのまま。Optifaiが実行レイヤーを追加

無料で始める

100 actions無料。クレジットカード不要で今すぐ開始

例3: Playbookページの下部（5リンク）

関連するリソース

Template: Hot-Lead email

/pricing再訪者向けメールテンプレート

Template: 7-Day No-Response

提案無応答7日後の追客テンプレート

Academy: Signal Detection基礎

GA4とEmail trackingの設定方法（5レッスン）

Guide: Revenue Action × GTM戦略

GTM戦略における実行AIの活用法

無料トライアル

100 actions無料で今すぐ開始

使用方法

import { TopCTA, MidCTA, BottomCTA } from '@/components/content';

// Top CTA (2択)
<TopCTA
  primary={{
    label: '1クリックコピー',
    onClick: () => handleCopy(),
    icon: 'copy'
  }}
  secondary={{
    label: '無料トライアル',
    href: '/signup'
  }}
/>

// Mid CTA (リード獲得)
<MidCTA
  type="kit-download"
  label="無料キットをダウンロード"
  description="20+テンプレート、ROI KPIトラッカー付き"
  onClick={() => handleDownload()}
/>

// Bottom CTA (3択リンク)
<BottomCTA
  heading="関連リソース"
  links={[
    { label: 'Playbook', href: '/playbooks/xxx', description: '...' },
    { label: 'Guide', href: '/guides/yyy', description: '...' },
    { label: 'Kit', href: '/kits/zzz', description: '...' }
  ]}
/>

デザイン原則

  • TopCTA: ページ上部に配置。即座のアクションを促す。Primary（目立つ）+ Secondary（控えめ）の組み合わせ。
  • MidCTA: コンテンツ途中に配置。グラデーション背景で目立たせ、リード獲得を促す。
  • BottomCTA: ページ下部に配置。3-5個の関連リソースへのリンク。次のステップへ誘導。
  • 一貫性: すべてのコンテンツページで同じ構造を使用。ユーザーが迷わない。
  • 柔軟性: propsで内容をカスタマイズ可能。ページの種類に応じて使い分け。