CTA ボタンとは | バイブコーダーのための名称辞典

CTA ボタンとは

会員登録や購入など、サイトの目標となる行動を促すために大きく目立たせるボタン。

概要

CTA は Call To Action（行動喚起）の略で、会員登録・資料請求・購入といった、サイトが最終的に達成したい行動へユーザーを導くためのボタンです。他のボタンより大きめのサイズにしたり、補助テキスト（「無料で始める」「クレジットカード不要」など）を添えたりして、押すことの安心感や価値を伝えます。

別名

表記ゆれ：CTA、コンバージョンボタン、行動喚起ボタン、CTA ボタン

「CTA」だけで「CTA ボタン」を指すことが多く、CVR（コンバージョン率）改善の文脈では「コンバージョンボタン」とも呼ばれます。

AI への伝え方

「無料登録を促す CTA ボタンを作って」のように、促したい行動を具体的に伝えると補助テキストの内容が定まります。単なる「大きいボタン」ではなく、ページの目的にひもづく行動喚起という役割を伝えるのがポイントです。

似たパーツとの違い

「ボタン」との違いは見た目ではなく役割で、CTA ボタンはサイトの目標行動に直結する場所だけに使う特別なボタンという位置づけです。「FAB（フローティングアクションボタン）」は画面に固定表示される点が異なり、CTA ボタンはページの流れの中に配置されるのが基本です。

デモ

クレジットカード不要・30 秒で登録完了

コード

HTML

<div class="cta-button-demo">
  <button class="cta-button-demo__btn" type="button">無料で始める</button>
  <p class="cta-button-demo__note">クレジットカード不要・30 秒で登録完了</p>
</div>

CSS

.cta-button-demo {
  font-family: sans-serif;
  text-align: center;
}

.cta-button-demo__btn {
  padding: 16px 40px;
  border: 0;
  border-radius: 999px;
  background: #0017c1;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0, 23, 193, 0.28);
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.cta-button-demo__btn:hover {
  background: #000f8c;
  transform: translateY(-2px);
}

.cta-button-demo__btn:focus-visible {
  outline: 2px solid #0017c1;
  outline-offset: 3px;
}

.cta-button-demo__note {
  margin: 10px 0 0;
  font-size: 12px;
  color: #666;
}