本文へ

LP・フォーム

CTA とは|押されるボタンの文言の例と、置き場所・数の決め方

CTA(行動を呼びかける所)は、押したあとに起きることを書くと押されやすくなります。問い合わせ・資料請求・見積もり・予約・採用の文言の例と、LP で置く場所、見た目の決め方を書きます。

CTA とは、ページを読んだ人に「次はこれをしてください」とお願いする所のことです。Call To Action の略で、日本語では「行動喚起」と訳されます。LP では、「無料で見積もりをとる」「資料を受け取る」のようなボタンが CTA の代表です。

CTA の解説では、「目立つ色にする」「ボタンを大きくする」がよく並びます。どちらも大事ですが、それだけでは押されません。押されない CTA の多くは、押したら何が起きるかが分からないか、押す前の不安が残っているか、そもそも読む人の目に入っていないかのどれかです。

この記事では、LP の CTA に絞って、行動を 1 つに絞る考え方、文言の書き方と場面別の例、ボタンの近くに置く一言、置く場所と数、見た目、押したあとのこと、押されているかの確かめ方の順に書きます。全部を読む時間が無いときは、次の表から自分に近い所を選んでください。

当てはまる状況先に読む所
CTA という言葉の意味をまず知りたいCTA とは、読んだ人に次の行動をお願いする所
ボタンの文言をどう書けばよいか迷っている文言は、押したあとに起きることを書く
自分の業種に近い文言の例がほしい場面別の文言の例
ボタンをいくつ、どこに置くか決めたい置く場所は、決める材料を読み終えた所
色や大きさに決まりがあるか知りたい見た目は、押せると分かること・目に入ること・押しやすいこと
ボタンは押されるのに、申し込みが増えない押したあとに困らせない
今の CTA が押されているか確かめたい押されているかを確かめる

CTA とは、読んだ人に次の行動をお願いする所

CTA は、ページの中で「申し込む」「問い合わせる」「資料を受け取る」のように、読んだ人にしてほしい行動を示す所です。多くはボタンですが、文中のリンク、電話番号、画像のバナーも CTA になります。

CTA があるのは LP だけではありません。ブログの記事の終わりの「資料を受け取る」、メールの中の「セミナーに申し込む」、SNS の投稿の「詳しくはプロフィールのリンクから」も CTA です。この記事では、そのうち LP の CTA を扱います。LP は 1 つの行動をしてもらうために作るページなので、CTA の出来が数字にいちばん表れやすい場所です。

CTA と CV の違い

似た言葉に CV(コンバージョン)があります。CTA は「お願いする所」、CV は「お願いした行動が実際に起きたこと」です。見積もりの LP なら、「無料で見積もりをとる」のボタンが CTA で、見積もりのフォームの送信が CV です。

この 2 つは、数えるときに分けておきます。ボタンを押した人がみんな送るわけではないからです。ボタンは押されているのに送信が少ないなら、問題はボタンではなくフォームの方にあります。数え方は、この記事の後半の「押されているかを確かめる」で書きます。

CTA はボタンの見た目だけの話ではない

CTA を直すというと、色や形を変えることを思い浮かべがちです。けれども、読む人がボタンを押すかどうかは、次の 4 つがそろうかで決まります。

  • 目に入る: ボタンが、読む人が見ている所にある
  • 何が起きるか分かる: 押したら何ができるか、文言から分かる
  • 不安が無い: 押したら営業の電話が来ないか、お金がかからないかが分かる
  • 押せると分かり、押しやすい: 飾りの文字ではなくボタンに見え、指で押せる大きさがある

色や大きさは 4 つ目の話です。1 つ目から 3 つ目は、置く場所と文言と、ボタンの近くに置く一言で決まります。この記事の順番も、この 4 つに合わせています。

LP の CTA は、1 つの行動に絞る

LP の CTA は、してほしい行動を 1 つに決めてから作ります。「見積もり」「資料請求」「電話」「LINE の友だち追加」を同じ強さで並べると、読む人はどれを選べばよいか迷い、選ばずに閉じることがあります。

デジタル庁のデザインシステムは、塗りつぶしのボタン(いちばん大事な操作のボタン)を「ひとつの画面につき、原則1つまで」としています。行政のサービスの画面向けの指針ですが、LP でも考え方は同じです。いちばんしてほしい行動を 1 つ決め、それだけを目立たせます。

主と、控えめな副の 2 段にする

行動を 1 つに絞るといっても、ほかの道を全部消す必要はありません。まだ決めきれない人や、電話の方が楽な人もいるからです。そこで、目立たせる「主」の CTA を 1 つにし、ほかは見た目を控えめにした「副」にします。

ボタンの見た目を 3 段に分けた図。主は塗りのボタンで、1 画面に 1 つだけ、いちばんしてほしい行動に使う。例は「無料で見積もりをとる」。副は枠のボタンで、主の隣か下に置き、まだ決めていない人向け。例は「料金表を見る」。控えは文字のリンクで目立たせず、電話を好む人の逃げ道にする。例は「電話で相談する」
目立たせるのは、いちばんしてほしい行動だけです。

上の図のように、主のボタンは塗り、副のボタンは枠だけ、控えは文字のリンクにすると、同じ画面に並んでも強さの差が一目で分かります。主と副が同じ色・同じ大きさだと、2 つの主が並んでいるのと変わりません。

LP の目的主の CTA副の CTA(控えめに)
見積もりを集める無料で見積もりをとる料金表を見る、電話で相談する
資料請求を集める資料を受け取る導入事例を読む
来店・体験の予約を集める空いている日を見て予約する電話で予約する
セミナーの申し込みを集めるセミナーに申し込む前回の内容を見る
採用の応募を集める応募する職場見学を申し込む

副の CTA が主を食わないようにする

副の CTA は、主に進めない人の受け皿です。副の方が押しやすく見えると、本当は見積もりまで進めた人まで、料金表を見て帰ってしまうことがあります。副は主の隣か下に置き、大きさと色で主より弱く見せます。

電話番号は、副として置くのがよい場面と、主にした方がよい場面があります。急ぎの修理や、年配の方が多い地域のサービスのように、電話で話したい人が多いなら主にしてもよいでしょう。そのときは、フォームの方を副にします。どちらも主にはしません。

文言は、押したあとに起きることを書く

ボタンの文言は、押したら何が起きるかが分かる言葉にします。「送信」「こちら」「詳しくはこちら」では、押した先で何ができるのか、お金がかかるのかが分かりません。

書き方は、次の 3 つを守ると決めやすくなります。

  • 動詞で終える: 「お問い合わせ」より「問い合わせる」、「資料」より「資料を受け取る」のように、何をするかを言葉にする
  • 手に入るものを書く: 「申し込む」より「無料で見積もりをとる」のように、押したら何が得られるかを入れる
  • スマホで 1 行に収める: 長い文言は 2 行に折れ、ボタンに見えにくくなる。補足は文言に詰めず、ボタンの近くの一言に回す
直す前直した後直した理由
送信見積もりを依頼する押したら見積もりを頼むことが分かる
こちら料金表を見る押した先に何があるかが分かる
詳しくはこちら導入事例を読む何が詳しく分かるのかが分かる
お問い合わせ無料で相談するお金がかからないことと、相談できることが分かる
今すぐ申し込むセミナーに申し込む(参加無料)何に申し込むかと、費用が分かる

「今すぐ」「たった」のような言葉を足すと押されやすくなる、と書かれた解説もあります。ただ、押したあとに入力が長く続くなら、「たった」は守れない約束になります。言葉を強くするより、何が起きるかを正確に書く方が、押したあとにやめる人を減らせます。

場面別の文言の例

場面ごとに、主のボタンの文言と、ボタンの近くに置く一言の例を並べます。そのまま使わず、自社で本当に守れる内容に直してください。

場面主のボタンの文言ボタンの近くに置く一言
問い合わせ無料で相談する2 営業日以内にメールでお返事します
資料請求資料を受け取る送信の直後の画面から受け取れます
見積もり無料で見積もりをとる見積もりだけで終えても大丈夫です
来店・体験の予約空いている日を見て予約する前日まで、予約の画面から取り消せます
セミナーセミナーに申し込む参加無料・オンライン・当日の録画あり
採用の応募この求人に応募する履歴書は面接の日にお持ちください
職場見学職場見学を申し込む見学だけでも歓迎です。服装は自由です
ソフトを試す無料で試してみるカードの登録は要りません
電話電話で相談する受付は平日 9〜18 時です

表の一言の欄にある「2 営業日以内」「前日まで」のような数字は例です。自社の決まりに合わせて書き替えます。守れない期限を書くと、問い合わせのあとに信用を失います。

同じ行き先には、同じ言葉を使う

ファーストビューのボタン、途中のボタン、フォームの送信ボタンで言葉が違うと、読む人は別のページへ飛ばされたように感じます。「無料で見積もりをとる」で始めたなら、フォームの送信ボタンも「見積もりを依頼する」のように、同じ行動を表す言葉にそろえます。

ボタンの言葉と、押した先のページの見出しもそろえます。「資料を受け取る」を押した先の見出しが「お問い合わせ」だと、間違えて押したかと思われます。LP の作り方の中でのボタンの文字の考え方は、LP の作り方の「文を書く」の章にも書きました。

読む人の段階で、お願いする行動を変える

LP に来る人のすべてが、すぐ申し込む気でいるわけではありません。広告で初めて知った人に「今すぐ契約する」を出しても、多くの人にはまだ早すぎます。

まだ比べている段階の人が多いなら、主の CTA を一段軽い行動にします。たとえば「契約する」の代わりに「無料で見積もりをとる」、「購入する」の代わりに「サンプルを申し込む」、「入会する」の代わりに「無料の体験を予約する」です。軽い行動で連絡先を受け取り、あとから次の案内を出す方が、結果として申し込みに届くことがあります。

どの段階の人が多いかは、来る元で見当がつきます。会社の名前で検索して来た人や、一度申し込んだことのある人は、強い行動でも押してくれます。広告や SNS で初めて知った人には、軽い行動を主にします。

ボタンの近くに置く一言で、押す前の不安を消す

ボタンの文言だけでは伝えきれない不安は、ボタンのすぐ上か下に短い一言で答えます。こうした短い補足の文を、マイクロコピーと呼ぶこともあります。

押す前に人が気にするのは、主に次の 4 つです。

  • お金がかかるか: 「無料」「見積もりのあとに断っても費用はかかりません」
  • どれくらい手間か: 「入力は 4 項目です」「1 分ほどで終わります」
  • 押したあと、何が来るか: 「メールで資料のリンクをお送りします」「担当者からお電話はしません」
  • やめられるか: 「いつでも解約できます」「前日まで取り消せます」

全部を書く必要はありません。自分の LP で、問い合わせの電話やメールでよく聞かれることを 1〜2 つ選んで書きます。よく聞かれることは、そのまま押す前の不安の答えになります。

一言は、本当のことだけを書く

一言は、短いぶん言い切りになりがちです。「1 分で終わります」と書いたなら、実際に自分で入力して 1 分で終わるかを計ります。「お電話はしません」と書いたなら、営業の担当者にも守ってもらいます。書いたことと違うことが起きると、その人は次から申し込んでくれません。

「今だけ」「残りわずか」は、本当のときだけ

「今だけ半額」「残りわずか」「先着 10 名」のような言葉は、急がせる効果があるとして使われることがあります。ただし、実際にはいつでも同じ値段だったり、枠が残っているのに「残りわずか」と書いたりすると、読む人をだますことになります。

消費者庁の景品表示法の案内では、価格や取引の条件を、実際や他社のものより著しく有利だと思わせる表示を「有利誤認表示」として禁じています。期限や値引き、残りの数の表示が事実と違うと、これに当たるおそれがあります。期限を書くなら、本当の期限と条件を書き、期限が過ぎたら表示を外します。迷うときは、消費者庁の案内で確かめるか、専門家に相談してください。

「業界 No.1」「満足度 98%」のような言葉をボタンの近くに置くときも同じです。何を、いつ、どう調べた数字かを書けないなら、置かない方が安全です。

置く場所は、決める材料を読み終えた所

ボタンは、読む人が「申し込もう」と決めた瞬間に、手の届く所にあるのが理想です。人によって決める瞬間は違います。最初の画面で決める人もいれば、料金を見て決める人、よくある質問まで読んでから決める人もいます。そこで、決める材料を読み終えた所ごとにボタンを置きます。

縦に長い LP で CTA を置く場所の図。ファーストビューに最初のボタン、事例・お客さまの声の終わりと料金の終わりに節の終わりのボタン、よくある質問のあとに最後のボタンを置き、どのボタンも申し込みのフォームへ飛ばす。スマホでは画面の下に固定するボタンを足し、フォームが見えている間は隠す
置き場所は、読む人が決める材料を読み終えた所です。

上の図は、よくある並びの LP にボタンを置いた例です。

  • ファーストビュー: 最初の画面。誰向けのページかが分かった時点で決められる人のために置く
  • 事例・お客さまの声の終わり: ほかの人の結果を読んで決めた人のために置く
  • 料金の終わり: 金額を見て納得した人のために置く
  • よくある質問のあと(最後): 全部読んでから決める人のために置く

どのボタンも行き先は同じ申し込みのフォームにし、言葉もそろえます。

ファーストビューには、必ず置く

ファーストビューは、ページを開いて最初に見える範囲のことです。ここにボタンが無いと、すでに申し込むつもりで来た人が、ボタンを探してスクロールすることになります。会社の名前で検索して来た人や、2 回目に来た人は、最初の画面で押せると助かります。

スマホでは、最初の画面は思ったより狭くなります。写真を大きく置くと、ボタンがスクロールの先に押し出されます。見出しとボタンが最初の画面に入っているかは、実際のスマホで開いて確かめます。

LP の長さで、ボタンの数を決める

ボタンの数に正解はありませんが、LP の長さで目安を決められます。

LP の長さボタンを置く所理由
スマホで 3〜4 画面くらいの短い LPファーストビューと最後途中に置くと、ボタンばかりに見える
スマホで 10 画面くらいの LPファーストビュー、料金か事例の終わり、最後決める材料のあとに 1 つ足す
スマホで 20 画面を超える長い LPファーストビュー、主な節の終わりごと、最後、スマホの下に固定どこで決めても、すぐ押せるようにする

数を増やすときも、目立つボタンの見た目と言葉はそろえ、主を増やすだけにします。節ごとに違う行動のボタンを置くと、1 つの行動に絞った意味がなくなります。

スマホの画面の下に固定するボタン

長い LP では、スマホの画面の下にボタンを固定しておく方法があります。どこまで読んでも指の届く所にボタンがあるので、決めた瞬間に押せます。

便利な反面、気をつけることもあります。

  • 本文を隠さない: 固定のボタンが本文やフォームの欄の上に重なると、読めない所や押せない欄ができる
  • フォームが見えている間は隠す: フォームの送信ボタンと固定のボタンが同時に見えると、どちらを押せばよいか迷う
  • 1 つだけにする: 固定のボタンを 2 つ並べると、画面の下が狭くなり、押し間違いが増える
  • 最初から出すかを決める: 開いた直後から出すと、本文を読む前に画面の一部がふさがる。少し読み進めてから出す方法もある

ボタンの行き先は、ページの中か、別のページか

ボタンを押した先は、大きく 2 つに分かれます。同じページの下にあるフォームへ移るか、別のページ(予約のサービスや資料のページなど)へ移るかです。

フォームが LP の中にあるなら、ボタンはそのフォームへ移るようにします。押した瞬間に入力を始められるので、手間が少なくて済みます。予約のサービスなど別のページへ移るなら、押す前に「外の予約のページへ移ります」と分かるようにします。急に見た目の違うページが開くと、間違えたと思われるからです。

電話のボタンは、スマホでは押すと電話をかけられるようにします。パソコンでは押しても電話がかけられないことが多いので、番号を文字でも見せておきます。

見た目は、押せると分かること・目に入ること・押しやすいこと

ボタンの見た目は、飾りより、次の 3 つで決めます。押せると分かること、目に入ること、指で押しやすいことです。

何色がよいかより、ほかの色との差

「赤いボタンがよく押される」「緑がよい」のような話を見かけますが、どのページでも当てはまる色はありません。大事なのは、ページのほかの所との差です。

ボタンの色は、ページの中でボタンにだけ使う色にします。見出しや飾りの線にも同じ色を使うと、どれが押せるのか分からなくなります。地の色、文字の色、ボタンの色の 3 つに絞ると決めやすくなります。

文字とボタンの色の差は、4.5:1 を目安にする

ボタンの中の文字は、塗りの色との差がはっきりしていないと読めません。W3C の WCAG 2.2 の 1.4.3(レベル AA)は、文字と背景のコントラスト比を 4.5:1 以上にするよう求めています。大きな文字(18 ポイント以上、太字なら 14 ポイント以上)は 3:1 以上です。

明るい色のボタンに白い文字を載せると、この差が足りなくなりがちです。明るい黄色や水色のボタンには、黒に近い文字が合います。コントラスト比は、無料の確認ツールに 2 つの色を入れると数で分かります。

ボタンの形そのものについては、WCAG 2.2 の 1.4.11(レベル AA)に、部品を見分けるのに要る線や形は、隣の色と 3:1 以上の差を付けるという基準があります。文字でボタンと分かるなら枠は必須ではありませんが、枠だけのボタンにするなら、その枠の色は背景とはっきり差を付けます。

押しやすい大きさは、高さ 44px を目安にする

スマホでは、ボタンが小さいと狙った所を押せず、隣のリンクを押してしまいます。

  • WCAG 2.2 の 2.5.8(レベル AA)は、押す対象を 24×24 CSS ピクセル以上にするよう求めています(周りに十分な間隔がある場合などの例外があります)
  • Apple の Human Interface Guidelines は、ボタンの押せる範囲を少なくとも 44×44 ポイントにするよう書いています
  • デジタル庁のデザインシステムも、ボタンの押せる範囲を 44 CSS ピクセル以上に保つよう書いています

24 ピクセルは最低限の線です。LP の主のボタンは、高さ 44 ピクセル以上を目安にし、横幅は文言が 1 行で収まるだけとります。スマホでは画面の幅いっぱいに近いボタンにしても構いません。

ボタンに見える形にする

角を丸めた四角、塗りつぶし、少しの影のように、ボタンらしい形にすると、押せることが伝わります。反対に、文字だけで枠も塗りも無い「ボタン」は、見出しや本文と見分けがつきません。

画像の中に文字を描いた「バナー」をボタンの代わりにするときは、2 つ注意します。1 つは、スマホで縮んだときに中の文字が読めるか。もう 1 つは、読み上げの機能を使う人のために、画像の代わりの文(代替テキスト)に押した先で何が起きるかを書くことです。

押したあとに困らせない

ボタンが押されても、押した先で困ると申し込みにはつながりません。押したあとに確かめることは、次の 3 つです。

押した先が、ボタンの言葉どおりか

「資料を受け取る」を押したのに、長い問い合わせのフォームが出てくると、話が違うと感じます。押した先の見出しとボタンの言葉をそろえ、押した先でまずすることが、ボタンの言葉どおりになっているかを確かめます。

フォームの送信ボタンも CTA

フォームの最後の送信ボタンも、CTA の 1 つです。ここが「送信」のままだと、最後の最後で何が起きるかが分からなくなります。「見積もりを依頼する」「資料を受け取る」のように、LP の上の方のボタンとそろえます。送信ボタンの文言と、その下の注記の書き方は、EFO とはの「不安を消す」の章に詳しく書きました。

送ったあとの画面で、次の行動を 1 つだけ示す

送ったあとの画面(サンクスページ)にも、小さな CTA を置けます。資料請求なら「資料を開く」、セミナーなら「カレンダーに予定を入れる」のように、送った人がすぐしたいことを 1 つだけにします。送ったあとの画面に何を書くかは、サンクスページの記事に文言の例をまとめました。

押されているかを確かめる

CTA を作ったら、公開したあとに押されているかを数で確かめます。見るのは、ボタンが見られているか、押されているか、押したあとに送られているかの 3 つです。

起きていること見る数直す所
ボタンが見られていないボタンのある節まで読まれた割合置く場所、ボタンの前の文
見られているのに押されないボタンのクリックの数と、クリックの率文言、ボタンの近くの一言、見た目
押されるのに送られないクリックの数と、フォームの送信の数の差フォームの項目と不安(EFO)

クリックの率は、ボタンが押された数を、そのページの訪問の数(またはボタンのある節まで読んだ人の数)で割ったものです。ほかの会社の率は、業種も来る人も違うので比べてもあてになりません。比べる相手は、直す前の自分の LP です。ボタン以外の所も含めて、LP のどこで減っているかを決めて直す順番は LPO とはに書きました。

ヒートマップで、押されている所を見る

ヒートマップは、ページのどこがよく押されたかを色の濃さで見せる表示です。ボタンより、ボタンではない画像や見出しの方が押されているなら、読む人はそこを押せると思っています。その画像をボタンにするか、近くにボタンを置くと、押したい気持ちを受け止められます。

押された数と、申し込みの数を分けて数える

ボタンを押した数を、そのまま申し込みの数として数えないようにします。押したあとに入力をやめた人や、エラーで送れなかった人まで入るからです。ボタンが押された数と、フォームの送信が済んだ数を別に数えると、ボタンの問題か、フォームの問題かが分かれます。

一度に変えるのは 1 つ、変えた日を残す

文言、色、置く場所を同時に変えると、どれが効いたか分かりません。1 回に変えるのは 1 つにして、変えた日を書き残します。前と後で、同じ長さの期間を比べます。広告を増やした日やセールの日のように、来る人が大きく変わった日はまたがないようにします。

訪問が少ないうちは、数が少し動いただけで率が大きく揺れます。クリックが数十件しかないなら、率の差より、ヒートマップで押されている場所や、問い合わせで聞かれたことの方が手がかりになります。

2 つの案を同時に出して、どちらがよく押されるかを比べる方法を A/B テストと呼びます。はっきりした差を見るには、それなりの訪問の数が要ります。訪問が少ないうちは、前と後を比べるやり方で十分です。

Nobori で CTA を作って確かめる

Nobori は、LP とフォームを同じ画面で作るツールです。この記事で書いた CTA の作り方のうち、Nobori でできることは次のとおりです。

したいことNobori でできること
ボタンの行き先を決めるページの中の要素(フォームなど)、ほかのページ、https で始まる外のページ、電話(tel:)、メール(mailto:)
スマホで画面の下に固定するボタンを 1 つ選んで「スマホで画面の下に固定」にできる(1 ページに 1 つ)。形は角の丸いボタンか下の帯。出し始める位置を選べ、フォームが見えている間は隠れる
文字の読みやすさを確かめるボタンの文字と塗りのコントラストが 4.5:1 より低いと、公開前チェックで知らせる(マウスを乗せたときの色も測る)
見えないのに押せるボタンを防ぐ不透明度が 30% より低いボタンを公開前チェックで知らせる
送信ボタンを押しやすくするフォームの送信ボタンを高さ 56px 以上にする設定
押された所を見る分析の「クリック」で、セクションごとのクリックの数とヒートマップを、PC とスマホに分けて見る(全プラン)
ボタンのある所まで読まれたかを見る分析の「読まれ方」で、セクションごとの到達率を見る(全プラン)
ボタンが押された数を GA4 で数えるボタンに「CTA として数える」を入れると、GA4 か Google タグ マネージャーをつないだサイトで、押したときに cta_click のイベントを送る。ボタンごとに名前を付けて分けて数えられる
押した人に、次から別の文を見せる「CTA として数える」ボタンを押した人やフォームを送った人に、別の版の文やボタンを見せる(Standard から)
前の版と比べる分析の「版で比べる」で、文言を変える前の版と今の版を率で比べる

ページの中へ飛ぶだけのボタンに「CTA として数える」を入れると、押しただけで申し込んだ人に数えられてしまいます。公開前チェックがこれを知らせるので、フォームへ移るボタンではなく、申し込みに近いボタンにだけ入れます。

一方で、次のことはできません。

  • ページそのものの A/B テスト: LP の 2 つの案を同時に出して比べる機能はありません。比べるのは、公開の前と後の版です。ポップアップ(接客)の案だけは、Business から A/B で比べられます
  • ボタンごとのクリックの数の一覧: Nobori の分析の画面で数えるのは、セクションごとのクリックです。ボタン 1 つずつの数を見るなら、GA4 の cta_click を使います

ページの案を同時に比べて勝ち負けを決めたいなら、A/B テストのあるほかのツールが合います。ツールの選び方は LP 作成ツール比較に書きました。

Nobori で CTA を直すときの順番

すでに Nobori で LP を公開しているなら、この記事の順番は次のように進められます。

  1. 分析の「読まれ方」で、ボタンのある節まで読まれているかを見る。読まれていなければ、ボタンの位置を上の節に動かす
  2. 分析の「クリック」で、ボタンのある節が押されているか、ボタン以外の所が押されていないかを見る
  3. エディタでボタンを選び、文言を「押したあとに起きること」に書き替え、ボタンの下に一言を足す
  4. 長い LP なら、主のボタンを 1 つ選んで「スマホで画面の下に固定」を入れる
  5. 申し込みのボタンに「CTA として数える」を入れ、GA4 をつないでいるなら、ボタンごとに名前を付ける
  6. 公開前チェックで、ボタンの文字の読みにくさの知らせが出ていないかを確かめてから公開する
  7. 変えた日を書き残し、数がたまったら「版で比べる」で前の版と率を比べる

直したあとに数が下がったときは、公開の履歴から前の版に戻せます(戻せる日数は Free で 7 日、Lite で 30 日など、プランで違います)。

よくある質問

CTA のボタンは、LP にいくつ置けばよいですか

決まった数はありません。LP の長さと、決める材料を読み終える所の数で決めます。短い LP ならファーストビューと最後の 2 つ、長い LP なら主な節の終わりごとに置きます。数を増やしても、目立たせる行動は 1 つにそろえます。

ボタンは何色がよいですか

どのページでも押されやすい色はありません。ページの中でボタンにだけ使う色にし、ほかの所との差をはっきりさせます。中の文字との差は、WCAG 2.2 の目安の 4.5:1 以上にします。

電話のボタンは要りますか

電話で話したい人が多い業種なら置きます。急ぎの修理や、年配の方が多いサービスが当てはまります。フォームを主にするなら電話は控えめな副にし、受付の時間をそばに書きます。

ボタンの文言に「無料」と入れてもよいですか

本当に費用がかからないなら、入れると押す前の不安が減ります。見積もりは無料でも工事は有料のように、どこまでが無料かが分かりにくいときは、ボタンの近くの一言で範囲を書きます。

ボタンと文中のリンクは、どちらがよいですか

LP の主の CTA はボタンにします。文中のリンクは本文と見分けにくく、スマホで押しにくいからです。まだ決めていない人向けの副の行き先は、文中のリンクでも構いません。

CTA と CV は、何が違いますか

CTA は「申し込む」などの行動をお願いする所、CV はその行動が実際に起きたことです。ボタンが押された数と送信の数は分けて数えます。押されるのに送られないなら、フォームを直します。

画像のバナーを CTA にしてもよいですか

使えますが、スマホで縮んでも中の文字が読めるかを確かめます。画像の代わりの文には、押した先で何ができるかを書きます。文字が小さくなりやすいなら、文字のボタンの方が確かです。

公開の前に、スマホで押して確かめる

CTA を作ったら、公開の前にスマホで LP を開き、次の 7 つを確かめます。

  1. 最初の画面に、見出しと主のボタンが見えている
  2. 目立つボタンは 1 種類の行動だけで、副の行き先は控えめな見た目になっている
  3. ボタンの文言から、押したら何が起きるかが分かる
  4. ボタンの近くの一言が、本当に守れる内容になっている
  5. ボタンの文字が、塗りの色の上で読める
  6. 指で押しやすい大きさがあり、隣のリンクと押し間違えない
  7. どのボタンを押しても正しい場所に移り、フォームの送信ボタンも同じ言葉になっている

業種と目的ごとに、Nobori で作って公開しているサイトの見本があります。ボタンの文言や置き場所の参考にしてください。Free はカードの登録が要らず、フォームつきの LP 1 枚を作って公開するところまで試せます(フォームの回答は月 100 件まで)。プランごとの違いは料金のページで確かめられます。

無料で LP を作ってボタンを試す

参考にした公式ページ(2026 年 11 月 7 日に確認)

目次

  1. CTA とは、読んだ人に次の行動をお願いする所
  2. CTA と CV の違い
  3. CTA はボタンの見た目だけの話ではない
  4. LP の CTA は、1 つの行動に絞る
  5. 主と、控えめな副の 2 段にする
  6. 副の CTA が主を食わないようにする
  7. 文言は、押したあとに起きることを書く
  8. 場面別の文言の例
  9. 同じ行き先には、同じ言葉を使う
  10. 読む人の段階で、お願いする行動を変える
  11. ボタンの近くに置く一言で、押す前の不安を消す
  12. 一言は、本当のことだけを書く
  13. 「今だけ」「残りわずか」は、本当のときだけ
  14. 置く場所は、決める材料を読み終えた所
  15. ファーストビューには、必ず置く
  16. LP の長さで、ボタンの数を決める
  17. スマホの画面の下に固定するボタン
  18. ボタンの行き先は、ページの中か、別のページか
  19. 見た目は、押せると分かること・目に入ること・押しやすいこと
  20. 何色がよいかより、ほかの色との差
  21. 文字とボタンの色の差は、4.5:1 を目安にする
  22. 押しやすい大きさは、高さ 44px を目安にする
  23. ボタンに見える形にする
  24. 押したあとに困らせない
  25. 押した先が、ボタンの言葉どおりか
  26. フォームの送信ボタンも CTA
  27. 送ったあとの画面で、次の行動を 1 つだけ示す
  28. 押されているかを確かめる
  29. ヒートマップで、押されている所を見る
  30. 押された数と、申し込みの数を分けて数える
  31. 一度に変えるのは 1 つ、変えた日を残す
  32. Nobori で CTA を作って確かめる
  33. Nobori で CTA を直すときの順番
  34. よくある質問
  35. CTA のボタンは、LP にいくつ置けばよいですか
  36. ボタンは何色がよいですか
  37. 電話のボタンは要りますか
  38. ボタンの文言に「無料」と入れてもよいですか
  39. ボタンと文中のリンクは、どちらがよいですか
  40. CTA と CV は、何が違いますか
  41. 画像のバナーを CTA にしてもよいですか
  42. 公開の前に、スマホで押して確かめる
  43. 参考にした公式ページ(2026 年 11 月 7 日に確認)

読んだことを、そのまま試せます。

LP もサイトも、Nobori なら無料で作って公開できます。

無料で始める