良いCTAとは、訪問者が得られるものを示す、動詞を軸にした短いボタンラベルと、一番の不安を取り除く一文のマイクロコピーの組み合わせです。ページの種類（ヒーロー、料金、フォーム、メールなど）ごとに分けた60個のオリジナル例を、ボタンのデザインと効果の理由付きで紹介します。
CTA（コール・トゥ・アクション）とは、訪問者に次の行動を促す要素です。ボタン、リンク、ときにはフォームがこれにあたります。効果的なCTAの多くには、3つの共通点があります。
以下の例はすべてこのページのために書いたもので、実在の企業からのコピーはありません。自分のオファーに置き換え、締め切り、返信までの時間、無料プランなどの主張は、自分にとって事実である場合だけ残してください。
単語（「無料」「トライアル」「予約」）やページの種類（「料金」「メール」）で検索できます。
移動先：ヒーローセクション · 料金ページ · フォーム · メール · 商品ページ · ブログとニュースレター · アプリのオンボーディング
訪問者が最初に目にするボタンです。道のり全体ではなく、最初の一歩を示しましょう。
カード不要。2クリックで解約できます。
効果の理由： 行動と、トライアル前に人が抱く2つの不安、つまり支払いと解約のしやすさをセットにしています。
地元の技術者が1営業日以内に折り返しご連絡します。
効果の理由： 「無料」で何が得られるのか、いつ何が起こるのかを伝えています。
スプレッドシートをつなぐだけで、数分でダッシュボードが完成します。
効果の理由： 汎用的なデモではなく、自分専用の結果を約束しています。
質問は3つだけ。価格は画面に表示され、営業電話はありません。
効果の理由： 一人称（「自分の」）と、必要な手間のはっきりした量。
5つの質問に答えると、印刷できる献立表が手に入ります。
効果の理由： 訪問者が思い描ける具体的な成果物を示しています。
郵便番号、曜日、レベルで検索できます。
効果の理由： 「詳しく見る」ではなく、訪問者の本当の疑問（どこで、いつ）に合わせています。
ブラウザーで開きます。インストールは不要です。
効果の理由： 気軽に試せる動詞と、インストールという壁の解消。
今後60日間のリアルタイムのカレンダー。
効果の理由： 予約では空き状況が最初の疑問なので、それを先頭に出しています。
手持ちの器具と使える時間を選んでください。
効果の理由： 訪問者が何かを作り、マイクロコピーがその人に合わせて変わることを示しています。
12ページのPDF。メールでお送りするのは1回だけです。
効果の理由： 何が届くのか、どのくらいの頻度かについて、期待を正確に設定しています。
無料プランはずっと無料。必要なときだけアップグレード。
効果の理由： 口には出さない「いつまで無料なの？」という疑問に答えています。
15分間、ご都合のよい時間に。
効果の理由： 通話を専門家によるサポートと位置づけ、時間に上限を設けています。
ここにいる訪問者は比較をしています。各プランのボタンでは、そのプランで次に何が起こるかを伝えましょう。
月払い。プランはいつでも変更できます。
効果の理由： プラン名を使うことで、クリックが意図した選択に感じられます。
14日目にプランを選ぶか、何もしなければそのまま終了します。
効果の理由： 人が恐れる瞬間であるトライアル終了時のことを説明しています。
Starterのすべてに加えて、チームの席が付きます。
効果の理由： 短い動詞とプラン名に、下で違いを具体的に示しています。
50席以上、個別契約、請求書払いをご希望の方へ。
効果の理由： このボタンが誰向けかを伝え、対象外の人が素通りできるようにしています。
10か月分の支払いで12か月使えます。
効果の理由： 割引を、確かめやすい単純な計算に変えています。
現在の作業内容と設定はそのまま引き継がれます。
効果の理由： 既存ユーザーの不安は作業が消えることです。マイクロコピーがそれを解消しています。
何も失わずに上位プランへ移れます。
効果の理由： 「〜から始める」が、安いプランを最終決定ではなく最初の一歩として見せています。
支払いは1回。このバージョンのアップデートを含みます。
効果の理由： 買い切りの料金体系であることを、ボタンの横ではっきり伝えています。
プランごとの完全な比較表。
効果の理由： まだ選ぶ準備ができていない訪問者向けのサブの行動です。
5〜20人のチームの多くはここから始めます。
効果の理由： 作られた人気ではなく、適合性に基づいた案内です。
送信ボタンは、決める前に最後に読まれる部分です。フォームが何をするかではなく、訪問者が何を得るかを伝えましょう。
1時間以内にメールでお届けします。
効果の理由： 「送信」を、結果と時間に置き換えています。
次はユーザー名を選びます。
効果の理由： あと1ステップあることを示し、罠のように感じさせません。
平日の午前8時〜午後6時。この時間外にお電話することはありません。
効果の理由： 訪問者の時間を尊重し、範囲を明示しています。
参加用リンクとカレンダーの招待をメールでお送りします。
効果の理由： 自分のもの（「自分の席」）という感覚と、次に届くもの。
次の画面にスコアが表示されます。
効果の理由： 診断クイズでは結果こそが見返りなので、それを名前で示します。
たいていは当日中に、担当者が直接お返事します。
効果の理由： 正確な時間は約束せずに、人が対応するという期待を伝えています。
リリース時にメールを1通お送りします。それまでは何も送りません。
効果の理由： メールの量についての小さな約束が、登録のハードルを下げます。
所要時間は約10分。保存して後で続きから入力できます。
効果の理由： 正直な所要時間と、長いフォームのための安心材料。
GoogleスプレッドシートとExcelで使えます。
効果の理由： クリックする瞬間に「自分の環境で使える？」に答えています。
24時間前まで無料でキャンセルできます。
効果の理由： 決断の場面に、キャンセルのルールを置いています。
メールでは、ボタンは受信トレイの他のすべてのメッセージと競い合います。文字どおりに書き、リンク先がどこかを読者が正確にわかるようにしましょう。
残り2ステップ。約3分です。
効果の理由： オンボーディングのリマインダーを進捗として見せています。
配送状況の確認や住所の変更ができます。
効果の理由： クリック後に読者ができることを並べています。
コードは購入手続き時に適用されます。日曜日の深夜0時まで。
効果の理由： 日付のはっきりした本当の締め切り（本当の場合に限る）。
Samさんがあなたの掲載について質問しています。
効果の理由： 相手の名前を出すことで、メッセージが自分宛てだと感じられます。
約6分で読めます。
効果の理由： ニュースレターでは、かかる時間がわかると今読むか後で読むかを選びやすくなります。
プランは上記の日付で終了します。
効果の理由： メール内にすでにある事実に行動を結びつけています。
ワンタップ、10秒で終わります。
効果の理由： フィードバックの依頼は、手間がごくわずかだとはっきりしているほど効果的です。
カートは7日間保存されています。
効果の理由： 何も失われていないと安心させます。
このリンクの有効期限は24時間です。
効果の理由： トランザクションメール：わかりやすい動詞と、わかりやすい結果。
ご予約の時間が変更されました。空いている枠からお選びください。
効果の理由： 読者が頼んでいない変更の後に、主導権を返しています。
訪問者は購入間近で、待つ理由を探しています。ボタンの横でその理由を取り除きましょう。
30日以内なら返品無料。
効果の理由： 人が探す定番のラベルに、一番のリスクの解消を添えています。
午後2時までのご注文で翌日発送。
効果の理由： 本当の発送締め切りが、今日行動する理由になります。
サイズ表を使うか、他ブランドでの普段のサイズを入力してください。
効果の理由： 衣料品で最もよくあるためらいを解消しています。
入荷したらメールを1通お送りします。
効果の理由： 在庫切れで訪れた人を逃さずにつなぎとめます。
お支払い前に刻印をプレビューできます。
効果の理由： 仕上がりを訪問者自身がコントロールできることを示しています。
アカウントに保存され、どの端末からでも見られます。
効果の理由： まだ買う準備ができていない人向けの、より穏やかな行動です。
読者はセールスではなくコンテンツを求めて来ています。すでに選んだものをもっと提供しましょう。
毎週木曜日にメールを1通。ワンクリックで配信停止できます。
効果の理由： 頻度とやめ方を最初に伝えています。
この記事の手順を、印刷できる1ページにまとめました。
効果の理由： 読んだばかりの内容に直結したコンテンツの特典です。
小さなお店のための実践的なヒントを月2回お届けします。
効果の理由： マイクロコピーが対象読者と頻度を示していれば、一言でも十分です。
自分のアカウントにコピーを作成できます。無料です。
効果の理由： 読むことを、すぐに行動へと変えます。
Part 2：価格の決め方。
効果の理由： 次の話題を示すので、クリックの見返りがはっきりします。
読者からの質問には次号でお答えします。
効果の理由： 参加を促し、その質問がどう扱われるかを伝えています。
新規ユーザーは最初の数分で、そのプロダクトを覚える価値があるかを判断します。各ボタンで、最初の役立つ成果へと導きましょう。
名前の変更や削除は後からできます。
効果の理由： 取り返しのつかない失敗への不安を取り除きます。
CSVファイルまたはメールアカウントから。
効果の理由： 早い段階で実際のデータを入れることで、アプリが早く役立つようになります。
招待した人にも、あなたと同じ画面が表示されます。
効果の理由： 送る前に、招待された人に何が見えるかを説明しています。
後から設定で行えます。
効果の理由： 見える逃げ道があると、任意のステップでの離脱が減ります。
時間は自分で選べます。初期設定はオフです。
効果の理由： ユーザーに主導権を残したまま許可を求めています。
短い5ステップ。いつでも閉じられます。
効果の理由： 長さを示すので、ツアーが任意で小さなものに感じられます。
| 型 | パターン | 例 |
|---|---|---|
| 動詞＋結果 | ［もらう／見る／始める］＋［相手が欲しいもの］ | 自分の見積もりを見る |
| 動詞＋「自分の」＋目的語 | 一人称にすると自分のものに感じられる | 最初の1週間の献立を作る |
| 動詞＋目的語＋時間 | かかる時間を加える | 2分で価格がわかる |
| 動詞＋目的語＋リスクの解消 | リスクの解消は通常マイクロコピーに置く | 無料トライアルを始める／カード不要 |
| 名前を付けた次のステップ | 複数ステップの流れ向け | 配送手続きへ進む |
| 答えになる疑問 | 相手が探しに来たものをそのまま映す | 空き状況を確認する |
ボタンの上に置く見出しのアイデアが必要なら、こちらをお試しください：見出しジェネレーター。
動詞、目的語、マイクロコピーを1つずつ選ぶと、ボタンが表示され、そのHTMLをコピーできます。
フォーカス、ホバー、押下、無効の各状態を備えたプライマリボタンとセカンダリボタンの素のCSSです。自分でデザインするならこちらを使いましょう：CSSボタンジェネレーター。既製のものはこちらで探せます：ボタンコンポーネント。
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 0.75rem 1.5rem;
border-radius: 0.5rem;
font: 600 1rem/1.2 system-ui, sans-serif;
text-decoration: none;
cursor: pointer;
transition: background-color 150ms, transform 100ms;
}
.btn-primary {
background: #1d4ed8;
color: #ffffff;
border: 0;
}
.btn-primary:hover { background: #1e40af; }
.btn-primary:active { transform: translateY(1px); }
.btn:focus-visible {
outline: 3px solid #93c5fd;
outline-offset: 2px;
}
.btn-secondary {
background: transparent;
color: #111827;
border: 2px solid #111827;
}
.btn-secondary:hover { background: #111827; color: #ffffff; }
.btn:disabled,
.btn[aria-disabled="true"] {
opacity: 0.5;
cursor: not-allowed;
transform: none;
}同じプライマリボタンをTailwindのクラスで書くと：
<a href="/signup" class="inline-flex min-h-[44px] items-center rounded-lg bg-blue-700 px-6 py-3 font-semibold text-white hover:bg-blue-800 active:translate-y-px focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-2 focus-visible:outline-blue-300">
Start your free trial
</a>ボタンを含む締めくくりのセクション全体については、こちらをご覧ください：CTAセクションのコンポーネント。
これはテストする価値のあるものであり、どれが勝つかの予測ではありません。結果は対象者とオファーによって変わるので、1回に1つの変更だけをテストし、十分な訪問者数が集まるまで待ってから判断しましょう（A/Bテスト計算ツールで、差が本物である可能性が高いかがわかります）。
CTAがページの他の部分とどう組み合わさるかについては、こちらをご覧ください：ランディングページとは。
CTAとは、トライアルの開始、通話の予約、購入など、訪問者に次のステップを促すボタン、リンク、フォームのことです。わかりやすいCTAは、得られる結果を示し、動詞を軸にしています。
通常は2〜5語程度です。価格、時間、次に起こることなどの詳細は、ラベルに入れるのではなく、ボタンの横か下に短いマイクロコピーとして置きましょう。
マイクロコピーとは、CTAの横に置いて不安を取り除く短い一文のことです。たとえば「カード不要」や「24時間前まで無料でキャンセル可能」などです。自分のオファーに当てはまる事実だけを書きましょう。
唯一の最適な色はありません。大切なのは、ボタンが背景やページの他の部分から目立つこと、そしてラベルとボタンの色のコントラスト比が最低4.5:1あることです。
同じメインの行動なら、ヒーローと最後など、ページ内で何度か繰り返してもかまいません。同じ画面に異なるメインの行動を同じ重みで2つ並べるのは避け、2つ目は枠線のボタンかテキストリンクにしましょう。
動詞
目的語
マイクロコピー
色
コピーしました
HTMLをコピー
無料で始める · クレジットカード不要