Primary Solid
プライマリベタ塗り
ベタ塗りの主役ボタン。1ページ1個が原則。FV、フォーム末尾、お問い合わせの最重要場面に。
primary CTA buttonで、background は brand color、color は #fff、padding 14px 28px、border-radius 6px、font-weight 600。hover時に少し暗くなる + box-shadow 強調。
01 — BUTTONS
ボタンスタイル
単体ボタンのデザインバリエーション。15パターン。
Outline
アウトラインボタン
輪郭のみのセカンダリボタン。Primaryと併用すると階層が明確になる。
outline CTA buttonで、background transparent、border 2px solid currentColor、padding 12px 26px、border-radius 6px。hover時に background fill + 色反転。
Ghost
ゴースト
塗りも線も無いテキストCTA。第三選択肢、控えめ補助CTAに最適。
ghost CTA buttonで、background なし、border なし、ただtextのみ + 微妙な padding + 軽いhover背景 (rgba(0,0,0,0.04))。
Gradient
グラデーション
視覚的インパクトのあるグラデCTA。SaaS、テック、スタートアップで頻出。
gradient CTA buttonで、background は linear-gradient(135deg, #6366f1, #ec4899)、box-shadow 0 10px 30px -10px rgba(99,91,255,0.5)、hover時に少しscale拡大。
Glassmorphism
ガラスモーフィズム
半透明＋blurの近未来CTA。動画背景のヒーロー上に重ねる時に有効。
glassmorphism CTA buttonで、background rgba(255,255,255,0.15)、backdrop-filter: blur(20px)、border 1px solid rgba(255,255,255,0.3)、color #fff。
Pill Shape
ピル型
完全な丸角の柔らかい印象のCTA。BtoC、コスメ、ブランド系で多用。
pill-shaped CTA buttonで、border-radius: 999px、padding 14px 32px。背景は brand color、hover時に少しscale(1.05) + 影。
Sharp Rectangle
シャープ角張
完全に角張った直線的なCTA。建築、エディトリアル、男性的ブランドに。
sharp rectangular CTA buttonで、border-radius: 0(完全角張り)、ALL CAPS テキスト + letter-spacing 0.1em + monospace font。
Icon + Text
アイコン+テキスト
アイコンとテキストを並べたCTA。意味が一目で伝わるBtoB SaaSの定番。
icon+text CTA buttonで、SVGアイコン (24x24) + テキスト の組合せ。flex gap 8px、 hover時にアイコンが少しbounce。
Arrow Slide
矢印スライド
ホバーで矢印が右にスライドするインタラクションCTA。最近の定番。
arrow slide CTA buttonで、テキスト+矢印(→)、hover時に矢印が右に8px スライド。transition: transform 0.2s。
3D Push Button
3Dプッシュ
影で立体感を出した押せそうなCTA。ゲーム、子供向け、レトロ系。
3D push CTA buttonで、box-shadow 0 6px 0 darker-shade で下に影。active時に translateY(4px) + 影縮小で押し込み感。
Neumorphism
ニューモーフィズム
soft shadowで柔らかい立体感のCTA。トレンディだが控えめなブランドに。
neumorphism CTA buttonで、background は同色背景、box-shadow 5px 5px 10px #darker, -5px -5px 10px #lighter (内/外の影を使い分け)。
Gradient Glow
グラデーション+発光
光るアニメーションのCTA。プレミアム感、特別感を演出。
glowing CTA buttonで、background gradient + box-shadow がパルス animation (5s infinite) で光る。Premium product launchに。
Underline Only
下線のみ
極限ミニマルなテキストCTA。エディトリアル、ファッション、ハイブランドで多用。
underline-only CTA で、border-bottom 1px solid currentColor、hover時に下線がアニメで左→右にスイープ。
Loading State
ロード中状態
処理中のCTA表示。スピナー or プログレスを表示してUX低下を防ぐ。
loading state CTA で、スピナー (CSS keyframes spin) + テキスト。disabled状態を明示、ユーザーの再クリック防止。
Disabled
無効状態
クリックできない状態のCTA表示。未入力フォームの送信ボタン等。
disabled CTA で、opacity 0.4、cursor: not-allowed、grayscale。tooltipで「○○を入力してください」表示推奨。
02 — SECTIONS
CTAセクションレイアウト
CTAを配置するセクション全体の設計パターン。12パターン。
あなたのHP、3日で完成。
プロのデザイナーが設計から運用まで。
Hero CTA Banner
ヒーロー直下CTA
FV直下に大きく配置するメインCTAブロック。サブコピー+大型ボタンの定番構成。
hero CTA bannerで、見出し+サブテキスト+プライマリボタン+サブテキスト(リスク無し等)の縦構造。中央寄せ、padding 80px 24px、背景は brand color または gradient。
もっと詳しく？ 無料相談で個別にご提案。
Inline CTA Block
インライン記事中CTA
記事中に挟むコンパクトなCTA。ブログ、メディアサイトでCV取りこぼし防止。
inline CTA blockで、background は微妙な色付き(brand-50)、border 1px、padding 18px、左にテキスト+右にボタン、flex justify-between でレイアウト。
資料DL受付中
Sticky Bottom Bar
画面下スティッキーCTA
スクロールに追従して画面下に固定。モバイル向けCV最大化の鉄板。
sticky bottom CTA barで、position: fixed; bottom: 0; 幅100%、背景 white + box-shadow、padding 12px 24px。閉じる×ボタンも併設推奨。
+
Floating Action Button
フローティングFAB
画面右下に浮遊する円形CTA。スマホアプリ風、即お問い合わせに最適。
floating action button (FAB)で、position: fixed; right: 24px; bottom: 24px; 円形 56px、background brand-color、box-shadow 0 6px 16px、+アイコンや チャット💬 アイコン。
×
ちょっと待って！
資料DLで詳しく分かります。
Modal Exit-Intent
離脱検知モーダル
マウスがブラウザ外に出た瞬間に出すCTAモーダル。離脱率を下げる定番。
exit-intent modal CTAで、JavaScriptで onmouseleave (Y < 0) を検知してフェードイン表示。中央モーダル + 暗いオーバーレイ。一度閉じたら cookie で再表示しない。
無料相談
個別にご提案します。
Two Column Split
2カラム分割CTA
左にビジュアル、右にテキスト+CTAの2分割レイアウト。詳細な訴求が必要な時。
two-column CTA blockで、grid-template-columns: 1fr 1fr、左に画像 or イラスト、右にテキスト+CTA。レスポンシブで縦並びに切替。
非日常体験を、あなたに。
限定12室、予約はお早めに。
Background Image
背景画像入りCTA
背景に画像を敷いた重厚なCTAセクション。観光、不動産、高級系に最適。
background image CTAで、背景に大型画像 + overlay (rgba(0,0,0,0.4))。中央に白文字テキスト + CTA。高さ400px+、视覚的インパクト最大。
Newsletter Signup
メルマガ登録CTA
メアド入力+登録ボタンの横並びインラインフォーム。ブログ、メディアの定番。
newsletter signup CTAで、見出し+メアド入力+登録ボタンの構成。フォームを横並び (flex)、ボタンは brand color。確認チェックボックスも付ける。
¥9,800
¥29,800
¥98,000
Pricing CTA Trio
料金プラントリオ
3列の料金プランそれぞれにCTAボタン。中央プランを「Most Popular」で強調。
pricing CTA trioで、3列の料金プラン、中央プランに「Most Popular」バッジ+border強調。各プランの最下部に同じデザインの「選ぶ」ボタン。
準備はできましたか？
無料相談・お見積りは下記から。
※相談は無料、しつこい営業もしません。Final CTA Section
最下部ファイナルCTA
ページ最下部の「最後の押し」CTA。離脱前の最後の機会、フォーム手前の確認。
final CTA sectionで、ページ最下部に配置。見出し+説明+大型ボタン+「リスク無し」サブテキスト。背景は brand-50 か dark で他セクションと差別化。
無料相談
Side Sticky CTA
サイド固定CTA
ページ右側面に縦書きで固定するスリムCTA。長文ブログ、ニュース記事サイトに。
side sticky CTAで、position: fixed; right: 0; top: 50%; writing-mode: vertical-rl; padding 16px 12px、 brand color + white text。クリックで開閉式に拡張も。
Post-Submit Message
送信後メッセージ
フォーム送信後の確認メッセージ。次のアクション提案で離脱を防ぐ。
post-submit success messageで、チェックマーク+「送信完了」+次のアクション提案を表示。スパムでなく、ジャーニーを続けるためのCTAを置く。
03 — COPY
コピー文言テンプレート
CTAの文言パターン。10種の心理戦略。
Action Verb Start
動詞始まり
動詞で始めるCTA文言。「○○する」「○○を始める」など、行動が明確で迷わない。
action verb CTAコピーは、「○○する」「○○を始める」のような動詞で始める。「申込み」より「申し込む」、「ダウンロード」より「ダウンロードする」で行動を明示。
Benefit-First
ベネフィット訴求
結果を約束するCTA。何が得られるかを明示してユーザーの心を動かす。
benefit-first CTAコピーは、ユーザーが得るベネフィットを動詞+結果で表現。「無料で相談」より「3日でHPが完成」、「資料DL」より「売上UP のヒントを手に入れる」。
Urgency & Scarcity
緊急性・希少性
「今すぐ」「限定」で行動を急がせる。期限・在庫数を明示してFOMOを刺激。
urgency CTAコピーは、「今すぐ」「期間限定」「残り○件」など緊急性を明示。実際の在庫数や期限を表示するとさらに効果的。誇張は禁物。
Question CTA
問いかけ型
ユーザーに問いかけて関心を引くCTA。教育・コーチング系で有効。
question CTAコピーは、「○○ですか？」「○○してみる？」など問いかけ。読者の自問自答を促し、自然に行動につなげる。コンサル、コーチング、教育系に。
No-Risk / Free
リスク無し訴求
「無料」「お試し」「キャンセル無料」を強調。心理的ハードルを下げる。
no-risk CTAコピーは、「無料」「○日間試せる」「キャンセル無料」「クレジット不要」など金銭・心理リスクを下げる訴求。SaaSのCV最大要素。
Direct Command
直接命令
「ここをクリック」「今すぐ申込」と直接的に指示。シンプル+効果的だが古典的。
direct command CTAコピーは、「今すぐ申込」「クリック」など直接的命令。シンプルだが古い印象も、SaaS的サービスでは明快さが評価される。
Social Proof
社会的証明
「100社が選んだ」「9割が満足」などの実績を入れる訴求。信頼感UP。
social proof CTAコピーは、「○件の利用実績」「○%の満足度」を CTAの直前/中に組み込む。「○社が選んだ理由を見る」「100人が試しました」など。
Specific Value
具体的価値
「3日で○○」「最短1分」など具体的数字で価値を明示。抽象論より説得力。
specific value CTAコピーは、「3日で公開」「1分で診断」「100件以上の事例」など具体数字を入れる。抽象的な「すぐ」「多数」より大幅に説得力。
FOMO Trigger
FOMO刺激
「今だけ」「逃したら」など、機会損失を恐れさせる。期間/在庫限定キャンペーンに。
FOMO (Fear of Missing Out) CTAコピーは、「今だけ」「残り○名」「期間限定」など機会損失を強調。実際の根拠なしで連発するとブランド毀損。
Personalization
パーソナライズ
「あなた専用」「○○業界向け」など、ユーザー個別を強調するCTA。
personalization CTAコピーは、「あなた専用」「○○業界向け」「あなたの状況に合わせて」など。動的サイトなら実際にセグメント別CTA出し分け推奨。
04 — EFFECTS
インタラクションエフェクト
ホバー・クリック時の演出。8パターン。
Hover Lift
ホバー浮き上がり
ホバーで上に少し浮く+影が強くなる。最も基本的かつ効果的なホバーエフェクト。
hover lift effectで、transition: transform 0.2s, box-shadow 0.2s。hover時に translateY(-3px) + box-shadow強調。すべてのCTAに付けて損なし。
Hover Underline Sweep
ホバー下線スイープ
ホバーで下線が左から右に伸びる。エディトリアル、ブログのリンクCTAに。
hover underline sweepで、::after に幅0pxの下線、hover時に width: 100%; transition: width 0.3s。リンクCTAの定番。
Color Swap
カラースワップ
ホバーで背景と文字の色が反転。アウトラインボタンの定番ホバー。
color swap hover effectで、background transparent → fill、color brand → white に切替。transition: all 0.2s でなめらかに。
Arrow Slide
矢印スライド
ホバーで矢印が右にスライドする現代的演出。最近のSaaS定番。
arrow slide hover effectで、矢印 (→) に transition: transform 0.2s、hover時に translateX(8px)。読み続けたい衝動を喚起する効果。
Gradient Shift
グラデーション移動
ホバーで背景グラデーションの位置が動く視覚効果。PRエージェンシー、メディアで人気。
gradient shift hover effectで、background-size 200% 200%; background-position 0% 0% → 100% 100%。transition で滑らかに移動。
Pulse Attention
パルス強調
一定周期でCTAが脈打つように拡縮する。重要CTAへの視線誘導に。
pulse attention effectで、animation: pulse 2s ease-in-out infinite。0%, 100% scale(1); 50% scale(1.05) で控えめに目立たせる。
Magnetic Effect
磁石追従
マウスがCTAに近づくと、CTAがマウスに引き寄せられる演出。クリエイティブ系で人気。
magnetic CTA effectで、mousemove イベントでマウス位置を取得し、CTA要素の transform: translate(x, y) を更新。GSAP使うと滑らか。
Ripple Effect
波紋エフェクト
クリック時に波紋が広がるマテリアルデザイン風エフェクト。
ripple click effectで、クリック位置から円形要素を scale(0)→scale(2) + opacity 1→0 で広げる。Material Design 標準のフィードバック。