CTAの型の選び方
CTAの型は、「どこで行動を案内するか」「行動をいくつ用意するか」「前の操作の結果を次の画面へ引き継ぐか」の3つで変わります。まず問い1で置き方を選び、読み手の段階や前後の画面に合わせて、問い2・問い3の型を組み合わせます。型を選んだら、各Patternのページでワイヤーフレームとプロンプト、動くデモを確認できます。
問い1：どこで行動を案内しますか？
CTAの置き方を決める型です。多くのページでは、セクション末尾型を基本にします。
| 案内するタイミング | 向く型 |
|---|---|
| ページや章を読み終えたところで、次の行動を1つ示したい（基本） | セクション末尾型 |
| 長いページで、読んでいる途中でもいつでも問い合わせられるようにしたい | 追従型 |
| 特定の話題を読んだ直後に、その話題に合った相談やサービスを案内したい | 本文中型 |
問い2：行動をいくつ用意しますか？
| 用意する行動 | 向く型 |
|---|---|
| 取ってほしい行動が1つに決まっている | 問い1の型のまま、主ボタンを1つにする |
| すぐに相談したい人のほかに、資料や電話など、検討の段階に合わせた行動も用意したい | 主副併記型 |
問い3：前の操作の結果を引き継ぎますか？
| 前後の画面のつなぎ方 | 向く型 |
|---|---|
| 料金のシミュレーションやプランの選択の結果を、そのまま問い合わせへ持ち込みたい | 条件引き継ぎ型 |
CTAの型の比較
| 型 | 役割 | 案内するタイミング | 向くページ |
|---|---|---|---|
| セクション末尾型 | 置き方 | ページや章を読み終えたとき | 実績、記事、サービス、料金のページの末尾 |
| 追従型 | 置き方 | 読んでいる途中のいつでも | 長いサービスページ、料金ページ、ランディングページ |
| 主副併記型 | 選ばせ方 | 検討の段階に合わせて選ぶとき | BtoBの商材、比較検討に時間がかかるサービス |
| 本文中型 | 置き方 | 特定の話題を読んだ直後 | ブログ記事、解説ページ、事例紹介 |
| 条件引き継ぎ型 | つなぎ方 | 条件を選んだり計算したりしたあと | 料金の目安、プラン診断、商品の選択のあとの相談 |
すべての型に共通する設計の原則
CTAの型を作る中で、型が違っても繰り返し出てきた原則です。どの型を選んでも、次の点は同じように確かめます。
- ボタンの文言は、押した先で起きることを読み手の行動として書き、移動先でできることと一致させる。できるだけ、移動したあとに同じ目的を選び直さなくてよい導線にする
- 置くページの内容に合わせて、見出しや文言を変える。すべてのページで同じ「お問い合わせはこちら」にしない
- 主となる行動を決め、配置・大きさ・文言・見た目で優先度が分かるようにする
- 行動を決めるために必要な情報がある場合は、CTAの近くに示す。たとえば、費用、返信の目安、資料を受け取るための入力の有無など。実際の運用で守れることだけを書き、根拠のない「今だけ」「残りわずか」は使わない
- 本文やほかの画面の要素の邪魔をしない。本文から区切り、内容や操作を隠さず、ほかの固定表示と重ねず、点滅や揺れで注意を引かない
- ページを移動するならリンク（a要素）、その場で動作するならbutton要素で作り、見た目・読み上げ・キーボード操作の順番をそろえる
- 表示・非表示を切り替えるCTAでは、非表示中のCTAをキーボード操作や読み上げの対象からも外す
- 条件を引き継ぐ場合は、個人情報や外部に残したくない条件をURLに載せず、受け取る側で値をあらためて確かめる
- 効果は、押された数だけでなく、そのあとに問い合わせや申し込みにつながったかで見直す
組み合わせの例
- サービスページ：ページの末尾にセクション末尾型を置き、ページが長い場合は追従型を加える。説明の途中で話題に合う相談があれば、本文中型で案内する
- ブログ記事：話題に合う必要な箇所だけに本文中型を置き（一般的な記事では1〜2か所程度を目安にする）、記事の末尾はセクション末尾型で記事全体を受けた案内にする
- 料金ページ：シミュレーション型の料金表で概算を出し、条件引き継ぎ型で条件を問い合わせへ引き継ぐ。ページの末尾には、相談と資料を並べる主副併記型を置く
- BtoBのサービスサイト：主副併記型で「相談する」を主、「資料を受け取る」を副にする。SPで追従型を使う場合は、追従させるボタンを主の行動1つに絞る
よくある質問
1ページに、CTAはいくつ置いてよいですか?
役割が違えば、複数置いてもかまいません。たとえば、ページの末尾にセクション末尾型を置き、長いページでは追従型を加え、話題に合う箇所にだけ本文中型を置く、といった形です。同じ文言のCTAを何度も並べると押しつけがましく見えるため、置く場所ごとに役割を分けます。
どの型から作ればよいですか?
まずは、ページの末尾に置くセクション末尾型から作るのが扱いやすいです。多くのページで基本になる型で、ここで決めた文言や行き先を、ほかの型でもそろえて使えます。そのうえで、ページの長さや読み手の段階に合わせて、ほかの型を加えます。
CTAの効果は、どう確かめればよいですか?
ボタンが押された数だけでなく、そのあとに問い合わせや申し込みにつながったかをあわせて見ます。型や文言を変える場合は、一度に多くを変えず、ページごとに変えた点と時期を記録しておくと、あとで比べやすくなります。
CTAとフォームは、どう関係しますか?
CTAはフォームへの入口で、フォームは受け取る側の画面です。CTAの文言と、押した先のフォームでできることを一致させることが大切です。受け取る側の画面は、フォームの型の選び方を参考に選べます。