記事を最後まで読んでもらえても、「申し込む」「問い合わせる」の行動につながらなければもったいないですよね。そこで大切になるのが、読者の次の行動をうながすCTA（行動喚起）エリアです。
この記事では、コピペするだけで使えるCTAデザインを20個まとめました。
シンプルな中央寄せから、チェックリスト付き、期間限定キャンペーン型、電話番号を大きく見せるタイプ、LINE登録の案内まで、目的に合わせて選べる種類を用意しています。
これまでの記事と同じく、HTMLとCSSを分けて掲載しています。
CTAって、なんの略なの？
「Call To Action」の略で、「行動を呼びかける」という意味なんだ。記事の最後に置く「申し込みはこちら」みたいな部分のことだよ。
使い方｜HTMLとCSSをそれぞれ貼り付ける
CSSのコードを、サイトのスタイルシートに追加します。続いて、HTMLのコードを、CTAを表示したい場所（記事の最後など）に貼り付けます。
見出しや説明の文章は書き換えて、ボタンのリンク先はaタグのhref=”#”の部分を、申し込みページなどのURLに変えてください。
10番の電話番号は、href=”tel:”の後ろにハイフンなしの番号を入れると、スマホでタップした時に電話がかけられます。
01. シンプルな中央寄せ
見出し・説明・ボタンを中央にそろえた、もっとも定番のCTAです。
実際の見た目
HTMLコード
<div class="kts-cta01">
<div class="kts-cta01-title">まずは無料で試してみませんか？</div>
<div class="kts-cta01-text">登録は1分で完了。いつでも解約できます。</div>
<a href="#" class="kts-cta01-btn">無料で始める</a>
</div>CSSコード
.kts-cta01 { box-sizing: border-box; font-family: sans-serif; }
.kts-cta01 a { text-decoration: none; }
.kts-cta01 { padding: 32px 24px; background: #F9FAFB; border-radius: 12px; text-align: center; }
.kts-cta01-title { margin-bottom: 6px; font-size: 20px; font-weight: 800; color: #111827; }
.kts-cta01-text { margin-bottom: 18px; font-size: 14px; color: #4B5563; }
.kts-cta01 .kts-cta01-btn { display: inline-block; padding: 14px 36px; background: #2563EB; color: #fff; font-weight: 700; border-radius: 8px; }
02. 枠線で囲んだタイプ
太めの枠線で囲んだ、記事の中でも目立ちやすいCTAです。
実際の見た目
HTMLコード
<div class="kts-cta02">
<div class="kts-cta02-title">まずは無料で試してみませんか？</div>
<div class="kts-cta02-text">登録は1分で完了。いつでも解約できます。</div>
<a href="#" class="kts-cta02-btn">無料で始める</a>
</div>CSSコード
.kts-cta02 { box-sizing: border-box; font-family: sans-serif; }
.kts-cta02 a { text-decoration: none; }
.kts-cta02 { padding: 28px 24px; border: 3px solid #F97316; border-radius: 12px; text-align: center; }
.kts-cta02-title { margin-bottom: 6px; font-size: 20px; font-weight: 800; color: #9A3412; }
.kts-cta02-text { margin-bottom: 18px; font-size: 14px; color: #4B5563; }
.kts-cta02 .kts-cta02-btn { display: inline-block; padding: 14px 36px; background: #F97316; color: #fff; font-weight: 700; border-radius: 8px; }
03. 背景色で目立たせるタイプ
背景全体に色を敷いた、強く目を引くCTAです。
実際の見た目
HTMLコード
<div class="kts-cta03">
<div class="kts-cta03-title">まずは無料で試してみませんか？</div>
<div class="kts-cta03-text">登録は1分で完了。いつでも解約できます。</div>
<a href="#" class="kts-cta03-btn">無料で始める</a>
</div>CSSコード
.kts-cta03 { box-sizing: border-box; font-family: sans-serif; }
.kts-cta03 a { text-decoration: none; }
.kts-cta03 { padding: 36px 24px; background: #1D4ED8; border-radius: 12px; text-align: center; }
.kts-cta03-title { margin-bottom: 6px; font-size: 20px; font-weight: 800; color: #fff; }
.kts-cta03-text { margin-bottom: 18px; font-size: 14px; color: #DBEAFE; }
.kts-cta03 .kts-cta03-btn { display: inline-block; padding: 14px 36px; background: #FACC15; color: #1E3A8A; font-weight: 700; border-radius: 999px; }
04. グラデーション背景
背景にグラデーションをかけた、華やかなCTAです。
実際の見た目
HTMLコード
<div class="kts-cta04">
<div class="kts-cta04-title">まずは無料で試してみませんか？</div>
<div class="kts-cta04-text">登録は1分で完了。いつでも解約できます。</div>
<a href="#" class="kts-cta04-btn">無料で始める</a>
</div>CSSコード
.kts-cta04 { box-sizing: border-box; font-family: sans-serif; }
.kts-cta04 a { text-decoration: none; }
.kts-cta04 { padding: 36px 24px; background: linear-gradient(135deg, #6366F1, #EC4899); border-radius: 16px; text-align: center; }
.kts-cta04-title { margin-bottom: 6px; font-size: 20px; font-weight: 800; color: #fff; }
.kts-cta04-text { margin-bottom: 18px; font-size: 14px; color: #FCE7F3; }
.kts-cta04 .kts-cta04-btn { display: inline-block; padding: 14px 36px; background: #fff; color: #BE185D; font-weight: 700; border-radius: 999px; }
05. 左右に分かれた横長タイプ
左に文章、右にボタンを置いた、記事の区切りに使いやすいCTAです。
実際の見た目
HTMLコード
<div class="kts-cta05">
<div class="kts-cta05-title">まずは無料で試してみませんか？</div>
<div class="kts-cta05-text">登録は1分で完了。いつでも解約できます。</div>
<a href="#" class="kts-cta05-btn">無料で始める</a>
</div>CSSコード
.kts-cta05 { box-sizing: border-box; font-family: sans-serif; }
.kts-cta05 a { text-decoration: none; }
.kts-cta05 { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 28px; background: #ECFDF5; border-radius: 12px; }
.kts-cta05-title { flex: 1 1 100%; font-size: 18px; font-weight: 800; color: #065F46; }
.kts-cta05-text { flex: 1; font-size: 14px; color: #047857; }
.kts-cta05 .kts-cta05-btn { display: inline-block; padding: 14px 36px; background: #10B981; color: #fff; font-weight: 700; border-radius: 8px; }
06. 画像エリア付き
左側に画像を置ける、商品やサービスの紹介向けCTAです。
実際の見た目
画像
HTMLコード
<div class="kts-cta06">
<div class="kts-cta06-img">画像</div>
<div class="kts-cta06-body">
<div class="kts-cta06-title">オンライン講座 受付中</div>
<div class="kts-cta06-text">自宅で好きな時間に学べます。</div>
<a href="#" class="kts-cta06-btn">詳しく見る</a>
</div>
</div>CSSコード
.kts-cta06 { box-sizing: border-box; font-family: sans-serif; }
.kts-cta06 a { text-decoration: none; }
.kts-cta06 { display: flex; flex-wrap: wrap; border: 1px solid #E5E7EB; border-radius: 12px; overflow: hidden; }
.kts-cta06-img { flex: 1 1 180px; min-height: 160px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #DBEAFE, #E0E7FF); color: #4338CA; font-size: 14px; }
.kts-cta06-body { flex: 2 1 240px; padding: 24px; }
.kts-cta06-title { margin-bottom: 6px; font-size: 20px; font-weight: 800; color: #111827; }
.kts-cta06-text { margin-bottom: 18px; font-size: 14px; color: #4B5563; }
.kts-cta06 .kts-cta06-btn { display: inline-block; padding: 14px 36px; background: #4338CA; color: #fff; font-weight: 700; border-radius: 8px; }
07. チェックリスト付き
おすすめポイントを箇条書きで添えた、説得力を高めるCTAです。
実際の見た目
HTMLコード
<div class="kts-cta07">
<div class="kts-cta07-title">こんな方におすすめです</div>
<ul>
<li>パソコンが苦手でも始めたい</li>
<li>月額費用をおさえたい</li>
<li>困った時に相談できる人がほしい</li>
</ul>
<a href="#" class="kts-cta07-btn">無料相談を予約する</a>
</div>CSSコード
.kts-cta07 { box-sizing: border-box; font-family: sans-serif; }
.kts-cta07 a { text-decoration: none; }
.kts-cta07 { padding: 28px 24px; background: #FFFBEB; border: 1px solid #FDE68A; border-radius: 12px; text-align: center; }
.kts-cta07-title { margin-bottom: 14px; font-size: 19px; font-weight: 800; color: #92400E; }
.kts-cta07 ul { display: table; margin: 0 auto 20px !important; padding: 0 !important; list-style: none; text-align: left; }
.kts-cta07 li { list-style: none; margin: 0 0 8px; padding-left: 26px; position: relative; color: #78350F; font-size: 15px; }
.kts-cta07 li::marker { content: none; }
.kts-cta07 li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 18px; height: 18px; line-height: 18px; border-radius: 50%; background: #F59E0B; color: #fff; text-align: center; font-size: 11px; font-weight: 700; }
.kts-cta07 .kts-cta07-btn { display: inline-block; padding: 14px 36px; background: #D97706; color: #fff; font-weight: 700; border-radius: 8px; }
08. 期間限定のキャンペーン型
「期間限定」のラベルを付けた、今すぐの行動をうながすCTAです。
実際の見た目
HTMLコード
<div class="kts-cta08">
<span class="kts-cta08-label">10月31日まで</span>
<div class="kts-cta08-title">初月 50%OFF キャンペーン</div>
<div class="kts-cta08-text">今なら月額1,000円 → <strong>500円</strong></div>
<a href="#" class="kts-cta08-btn">キャンペーンに申し込む</a>
</div>CSSコード
.kts-cta08 { box-sizing: border-box; font-family: sans-serif; }
.kts-cta08 a { text-decoration: none; }
.kts-cta08 { padding: 32px 24px; background: #FEF2F2; border: 2px solid #DC2626; border-radius: 12px; text-align: center; }
.kts-cta08-label { display: inline-block; margin-bottom: 10px; padding: 4px 14px; background: #DC2626; color: #fff; border-radius: 999px; font-size: 12px; font-weight: 700; }
.kts-cta08-title { margin-bottom: 6px; font-size: 20px; font-weight: 800; color: #991B1B; }
.kts-cta08-text { margin-bottom: 18px; font-size: 14px; color: #4B5563; }
.kts-cta08-text strong { color: #DC2626; font-size: 20px; }
.kts-cta08 .kts-cta08-btn { display: inline-block; padding: 14px 36px; background: #DC2626; color: #fff; font-weight: 700; border-radius: 8px; }
09. ボタン2つのタイプ
「申し込む」と「資料を見る」のように、2つの選択肢を並べたCTAです。
実際の見た目
HTMLコード
<div class="kts-cta09">
<div class="kts-cta09-title">ご相談・お見積りは無料です</div>
<div class="kts-cta09-btns">
<a href="#" class="kts-cta09-main">お問い合わせ</a>
<a href="#" class="kts-cta09-sub">資料をダウンロード</a>
</div>
</div>CSSコード
.kts-cta09 { box-sizing: border-box; font-family: sans-serif; }
.kts-cta09 a { text-decoration: none; }
.kts-cta09 { padding: 30px 24px; background: #F0F9FF; border-radius: 12px; text-align: center; }
.kts-cta09-title { margin-bottom: 18px; font-size: 19px; font-weight: 800; color: #0C4A6E; }
.kts-cta09-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.kts-cta09 .kts-cta09-main, .kts-cta09 .kts-cta09-sub { padding: 13px 28px; border-radius: 8px; font-weight: 700; }
.kts-cta09 .kts-cta09-main { background: #0284C7; color: #fff; }
.kts-cta09 .kts-cta09-sub { border: 2px solid #0284C7; color: #0284C7; background: #fff; }10. 電話番号を大きく見せるタイプ
電話番号を大きく表示した、お店や教室のお問い合わせ向けCTAです。
実際の見た目
HTMLコード
<div class="kts-cta10">
<div class="kts-cta10-title">お電話でのご予約はこちら</div>
<a href="tel:0000000000" class="kts-cta10-tel">📞 00-0000-0000</a>
<div class="kts-cta10-text">受付時間 10:00〜18:00（水曜定休）</div>
</div>CSSコード
.kts-cta10 { box-sizing: border-box; font-family: sans-serif; }
.kts-cta10 a { text-decoration: none; }
.kts-cta10 { padding: 28px 24px; border: 2px solid #16A34A; border-radius: 12px; text-align: center; }
.kts-cta10-title { margin-bottom: 8px; font-size: 16px; font-weight: 700; color: #166534; }
.kts-cta10 .kts-cta10-tel { display: block; margin-bottom: 6px; font-size: 30px; font-weight: 800; color: #15803D; letter-spacing: .03em; }
.kts-cta10-text { font-size: 13px; color: #4B5563; }11. LINE登録の案内
LINEの友だち追加をうながす、緑色が目印のCTAです。
実際の見た目
HTMLコード
<div class="kts-cta11">
<div class="kts-cta11-title">LINEでお得な情報をお届け</div>
<div class="kts-cta11-text">友だち追加で、次回使える10%OFFクーポンをプレゼント</div>
<a href="#" class="kts-cta11-btn">友だち追加する</a>
</div>CSSコード
.kts-cta11 { box-sizing: border-box; font-family: sans-serif; }
.kts-cta11 a { text-decoration: none; }
.kts-cta11 { padding: 28px 24px; background: #F0FDF4; border-radius: 12px; text-align: center; }
.kts-cta11-title { margin-bottom: 6px; font-size: 20px; font-weight: 800; color: #14532D; }
.kts-cta11-text { margin-bottom: 18px; font-size: 14px; color: #4B5563; }
.kts-cta11 .kts-cta11-btn { display: inline-block; padding: 14px 36px; background: #06C755; color: #fff; font-weight: 700; border-radius: 999px; }
12. ダークカラーのタイプ
黒系の背景で、引き締まった印象にしたい時のCTAです。
実際の見た目
HTMLコード
<div class="kts-cta12">
<div class="kts-cta12-title">まずは無料で試してみませんか？</div>
<div class="kts-cta12-text">登録は1分で完了。いつでも解約できます。</div>
<a href="#" class="kts-cta12-btn">無料で始める</a>
</div>CSSコード
.kts-cta12 { box-sizing: border-box; font-family: sans-serif; }
.kts-cta12 a { text-decoration: none; }
.kts-cta12 { padding: 36px 24px; background: #111827; border-radius: 12px; text-align: center; }
.kts-cta12-title { margin-bottom: 6px; font-size: 20px; font-weight: 800; color: #F9FAFB; }
.kts-cta12-text { margin-bottom: 18px; font-size: 14px; color: #9CA3AF; }
.kts-cta12 .kts-cta12-btn { display: inline-block; padding: 14px 36px; background: #FACC15; color: #111827; font-weight: 700; border-radius: 8px; }
13. 影付きのカード型
ふんわりとした影で浮かせた、上品な印象のCTAです。
実際の見た目
HTMLコード
<div class="kts-cta13">
<div class="kts-cta13-title">まずは無料で試してみませんか？</div>
<div class="kts-cta13-text">登録は1分で完了。いつでも解約できます。</div>
<a href="#" class="kts-cta13-btn">無料で始める</a>
</div>CSSコード
.kts-cta13 { box-sizing: border-box; font-family: sans-serif; }
.kts-cta13 a { text-decoration: none; }
.kts-cta13 { padding: 32px 24px; background: #fff; border-radius: 16px; box-shadow: 0 8px 30px rgba(0,0,0,.1); text-align: center; }
.kts-cta13-title { margin-bottom: 6px; font-size: 20px; font-weight: 800; color: #111827; }
.kts-cta13-text { margin-bottom: 18px; font-size: 14px; color: #4B5563; }
.kts-cta13 .kts-cta13-btn { display: inline-block; padding: 14px 36px; background: #7C3AED; color: #fff; font-weight: 700; border-radius: 999px; }
14. 上に色帯が付くタイプ
上部に色の帯を入れた、すっきりとしたCTAです。
実際の見た目
HTMLコード
<div class="kts-cta14">
<div class="kts-cta14-title">まずは無料で試してみませんか？</div>
<div class="kts-cta14-text">登録は1分で完了。いつでも解約できます。</div>
<a href="#" class="kts-cta14-btn">無料で始める</a>
</div>CSSコード
.kts-cta14 { box-sizing: border-box; font-family: sans-serif; }
.kts-cta14 a { text-decoration: none; }
.kts-cta14 { padding: 28px 24px; background: #fff; border: 1px solid #E5E7EB; border-top: 6px solid #0EA5E9; border-radius: 8px; text-align: center; }
.kts-cta14-title { margin-bottom: 6px; font-size: 20px; font-weight: 800; color: #111827; }
.kts-cta14-text { margin-bottom: 18px; font-size: 14px; color: #4B5563; }
.kts-cta14 .kts-cta14-btn { display: inline-block; padding: 14px 36px; background: #0EA5E9; color: #fff; font-weight: 700; border-radius: 8px; }
15. 吹き出し付きのボタン
ボタンの上に「かんたん1分！」の吹き出しを添えた、押したくなるCTAです。
実際の見た目
HTMLコード
<div class="kts-cta15">
<div class="kts-cta15-title">まずは無料で試してみませんか？</div>
<span class="kts-cta15-balloon">かんたん1分で登録！</span>
<a href="#" class="kts-cta15-btn">無料で始める</a>
</div>CSSコード
.kts-cta15 { box-sizing: border-box; font-family: sans-serif; }
.kts-cta15 a { text-decoration: none; }
.kts-cta15 { padding: 30px 24px; background: #F9FAFB; border-radius: 12px; text-align: center; }
.kts-cta15-title { margin-bottom: 16px; font-size: 20px; font-weight: 800; color: #111827; }
.kts-cta15-balloon { position: relative; display: table; margin: 0 auto 12px; padding: 4px 14px; background: #fff; border: 2px solid #EA580C; border-radius: 999px; color: #EA580C; font-size: 13px; font-weight: 700; }
.kts-cta15-balloon::after { content: ""; position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #EA580C; border-bottom: 0; }
.kts-cta15 .kts-cta15-btn { display: inline-block; padding: 14px 36px; background: #EA580C; color: #fff; font-weight: 700; border-radius: 8px; }
16. 動くボタン付き
ボタンがゆっくり大きくなったり戻ったりして、目線を集めるCTAです。
実際の見た目
HTMLコード
<div class="kts-cta16">
<div class="kts-cta16-title">まずは無料で試してみませんか？</div>
<div class="kts-cta16-text">登録は1分で完了。いつでも解約できます。</div>
<a href="#" class="kts-cta16-btn">無料で始める</a>
</div>CSSコード
.kts-cta16 { box-sizing: border-box; font-family: sans-serif; }
.kts-cta16 a { text-decoration: none; }
.kts-cta16 { padding: 32px 24px; background: #FDF2F8; border-radius: 12px; text-align: center; }
.kts-cta16-title { margin-bottom: 6px; font-size: 20px; font-weight: 800; color: #831843; }
.kts-cta16-text { margin-bottom: 18px; font-size: 14px; color: #4B5563; }
.kts-cta16 .kts-cta16-btn { display: inline-block; padding: 14px 36px; background: #DB2777; color: #fff; font-weight: 700; border-radius: 999px; }
.kts-cta16 .kts-cta16-btn { animation: kts-cta16-pulse 1.6s ease-in-out infinite; }
@keyframes kts-cta16-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }17. 点線枠のやわらかいタイプ
点線で囲んだ、手作り感のあるやさしい印象のCTAです。
実際の見た目
HTMLコード
<div class="kts-cta17">
<div class="kts-cta17-title">まずは無料で試してみませんか？</div>
<div class="kts-cta17-text">登録は1分で完了。いつでも解約できます。</div>
<a href="#" class="kts-cta17-btn">無料で始める</a>
</div>CSSコード
.kts-cta17 { box-sizing: border-box; font-family: sans-serif; }
.kts-cta17 a { text-decoration: none; }
.kts-cta17 { padding: 28px 24px; background: #FFF7ED; border: 2px dashed #FB923C; border-radius: 18px; text-align: center; }
.kts-cta17-title { margin-bottom: 6px; font-size: 20px; font-weight: 800; color: #9A3412; }
.kts-cta17-text { margin-bottom: 18px; font-size: 14px; color: #4B5563; }
.kts-cta17 .kts-cta17-btn { display: inline-block; padding: 14px 36px; background: #FB923C; color: #fff; font-weight: 700; border-radius: 999px; }
18. お客様の声付き
お客様の一言を添えて、安心感を伝えるCTAです。
実際の見た目
HTMLコード
<div class="kts-cta18">
<div class="kts-cta18-voice">「思っていたより簡単で、その日のうちに使えました！」<span>— 40代・店舗経営</span></div>
<div class="kts-cta18-title">まずは無料で試してみませんか？</div>
<a href="#" class="kts-cta18-btn">無料で始める</a>
</div>CSSコード
.kts-cta18 { box-sizing: border-box; font-family: sans-serif; }
.kts-cta18 a { text-decoration: none; }
.kts-cta18 { padding: 28px 24px; background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 12px; text-align: center; }
.kts-cta18-voice { margin-bottom: 18px; padding: 14px 16px; background: #fff; border-left: 4px solid #64748B; border-radius: 6px; color: #334155; font-size: 14px; text-align: left; }
.kts-cta18-voice span { display: block; margin-top: 6px; font-size: 12px; color: #64748B; }
.kts-cta18-title { margin-bottom: 16px; font-size: 19px; font-weight: 800; color: #0F172A; }
.kts-cta18 .kts-cta18-btn { display: inline-block; padding: 14px 36px; background: #334155; color: #fff; font-weight: 700; border-radius: 8px; }
19. 小さめの控えめなタイプ
記事の途中にさりげなく置ける、コンパクトなCTAです。
実際の見た目
📩 記事の更新をメールで受け取る
登録する
HTMLコード
<div class="kts-cta19">
<span class="kts-cta19-text">📩 記事の更新をメールで受け取る</span>
<a href="#" class="kts-cta19-btn">登録する</a>
</div>CSSコード
.kts-cta19 { box-sizing: border-box; font-family: sans-serif; }
.kts-cta19 a { text-decoration: none; }
.kts-cta19 { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; background: #F3F4F6; border-radius: 8px; }
.kts-cta19-text { font-size: 14px; color: #374151; }
.kts-cta19 .kts-cta19-btn { padding: 8px 18px; background: #374151; color: #fff; border-radius: 6px; font-size: 13px; font-weight: 700; }20. 和風の落ち着いたタイプ
明朝体と落ち着いた色で、和の雰囲気に合わせたCTAです。
実際の見た目
HTMLコード
<div class="kts-cta20">
<div class="kts-cta20-title">ご予約・お問い合わせ</div>
<div class="kts-cta20-text">季節の会席料理をご用意してお待ちしております。</div>
<a href="#" class="kts-cta20-btn">ご予約はこちら</a>
</div>CSSコード
.kts-cta20 { box-sizing: border-box; font-family: sans-serif; }
.kts-cta20 a { text-decoration: none; }
.kts-cta20 { padding: 32px 24px; background: #FAF7F2; border-top: 3px double #7C2D12; border-bottom: 3px double #7C2D12; text-align: center; font-family: "Hiragino Mincho ProN", "Yu Mincho", serif; }
.kts-cta20-title { margin-bottom: 8px; font-size: 20px; font-weight: 700; letter-spacing: .2em; color: #7C2D12; }
.kts-cta20-text { margin-bottom: 18px; font-size: 14px; color: #57534E; }
.kts-cta20 .kts-cta20-btn { display: inline-block; padding: 12px 40px; background: #7C2D12; color: #FEF3C7; letter-spacing: .1em; }カスタマイズの小ワザ
- CTAは、記事の最後と、読者の気持ちが高まった途中の1か所に置くのが基本です。1つの記事に置きすぎないようにしましょう。
- ボタンの文字は「送信」より「無料で始める」「資料を受け取る」のように、押したあとに何が起きるかがわかる言葉にすると押されやすくなります。
- 10番の電話番号は、href=”tel:”の後ろにハイフンなしの番号を入れてください。
- 16番の動くボタンは、1ページに1か所までにすると効果的です。
- 色を変えたい時は、CSS内の色コード（#で始まる部分）を書き換えてください。ボタンはサイトの中で一番目立つ色にするのがおすすめです。
まとめ｜早見表
| 使いたい場面 | 該当するCTA |
|---|---|
| 定番の見た目 | 01, 13, 14 |
| 強く目立たせたい | 02, 03, 04, 12 |
| 記事の区切りに | 05, 19 |
| 商品・サービス紹介 | 06 |
| 説得力を高めたい | 07, 18 |
| キャンペーン告知 | 08 |
| 選択肢を2つ見せたい | 09 |
| 電話で問い合わせ | 10 |
| LINE登録 | 11 |
| 押したくなる工夫 | 15, 16 |
| やわらかい雰囲気 | 17 |
| 和風のお店 | 20 |
記事の最後に置くだけで、お問い合わせが増えるといいな！
そうだね。ポイントは、ボタンの文字を「押したあとに何が起きるか」がわかる言葉にすることなんだ。まずは01番から試してみてね。
20個のCTAデザインは、見出し・説明・ボタンの組み合わせで読者の行動をうながす。ボタンの文字は押したあとの結果がわかる言葉にし、記事の最後など効果的な位置に置く。
