CTAボタンの文言・色・配置｜マイクロコピーで押される導線を作る

ページはきれいに作れたのに、ボタンが全然押されない。そんな経験ありませんか？

押されるボタンと押されないボタンの差は、たいてい文言・色・配置の3つで説明がつきます。
このレッスンでは、CTAの役割から、マイクロコピーで不安を消す方法までを扱います。読み終わったら、実在のサイト3つのCTAを表で比べる練習をやりましょう。

CTAはページの出口

CTA（Call To Action）は、読んだ人に行動を促すボタンやリンクのことです。「申し込む」「資料をもらう」「友だち追加する」。ページが最終的に導きたい出口ですね。

前のレッスンで見たとおり、LPの構成は最後のCTAに向かって組まれています。つまりCTAの出来が悪いと、そこまでの全セクションが無駄になります。ボタン1個の見た目の話に見えて、成果への影響はページ内で最大級です。

CTAの設計は「見つけてもらう→押したくなる→不安を消す」の3段で考えます。配置と色が「見つけてもらう」、文言が「押したくなる」、マイクロコピーが「不安を消す」を受け持ちます。

文言：行動の結果を書く

一番効くのは文言です。ボタンのラベルには、操作の名前ではなく押した後に起きる良いことを書きます。

「送信」「登録」は操作の名前です。押す側から見ると、労力だけが書いてあるボタンなんですね。
「無料で資料を受け取る」に変えると、同じボタンでも得られるものが主語になります。

• 結果を書く：送信する→診断結果を見る／登録→毎週のデザイン便りを受け取る
• ハードルを下げる言葉を添える：無料・30秒・その場で分かる
• 具体的な動詞で終える：「こちら」「詳細」だけのボタンにしない

マイクロコピー：ボタンの周りで不安を消す

マイクロコピーは、ボタンの上下に添える小さな一言です。「入力は30秒で終わります」「いつでも解約できます」「しつこい営業はしません」のような文ですね。

人がボタンの前で止まる理由は、だいたい不安です。時間がかかりそう、お金を請求されそう、営業電話が来そう。
マイクロコピーの仕事は、その場で一番大きい不安を1つだけ先回りして消すことです。

何を書くか迷ったら、「押す直前の自分なら何が心配か」を書き出してください。心配の1位に答える一言が、そのボタンのマイクロコピーです。

ただし嘘は書けません。「いつでも解約できます」と書くなら、実際に簡単に解約できる仕組みが先です。言葉だけ整えると、信頼ごと失います。

色と配置：迷わず見つかる状態を作る

色は「何色か」より「浮いているか」

「CTAは緑がいい」「赤が押される」という話を見かけますが、正解の色は1つではありません。効くのは、ページの他の場所で使っていない色をCTAだけに使うこと。周りとの差で目立たせます。

ページ全体が青系なら、CTAはオレンジ系。全体が暖色なら、CTAは濃い青。組み合わせの選び方は補色と配色の型で学んだアクセントカラーの考え方そのままです。

配置は「気持ちが動いた直後」

CTAの置き場所は、気持ちが動いたタイミングの直後です。末尾に1個だけでは足りません。LPならファーストビュー・証拠セクションの後・ページ末尾の3箇所が基本です。

スマホでは、親指が届く位置と大きさも確認します。小さすぎるボタン、画面端すぎるボタンは、押したい人まで取りこぼします。ボタン部品そのものの作り（大きさ・余白・押せる見た目）はUIパーツのレッスンで扱ったとおりです。

ミニ実践：サイト3つのCTAを表で比べる

15分の観察課題です。よく使うサービスのサイトを3つ開いてください。無料で登録できるサービス（動画配信・学習アプリ・ネット通販（EC）など）が観察しやすいですよ◎

1. 各サイトで一番目立つCTAボタンを1つ見つけます
2. 次の表を紙かメモアプリに作り、3サイト分を埋めます
3. 埋め終わったら、「押したくなった順」に並べて、理由を一言書きます

大手サービスのCTAは、この3点が計算されて作られています。表にすると、その計算が見えるようになります。

やってしまいがちな失敗

ボタンに操作の名前を書く

「送信」「クリック」「こちら」は、押す理由がゼロのラベルです。
直し方は、押した後に得られるものをそのまま書くこと。「無料で受け取る」「診断結果を見る」に変えるだけで印象が変わります。

CTAを目立たせようとして色を増やす

ボタンごとに違う色、グラデーション、点滅。装飾が増えるほど、どれが本命か分からなくなります。
直し方は、本命のCTAを1種類の色に固定して、他のリンクを控えめにすること。目立たせる方法は引き算です。

不安に答えないまま押させようとする

「今すぐ！」「急いで！」と圧をかけても、不安が残っている人は押しません。
直し方は、圧の言葉をマイクロコピーに置き換えること。「30秒で終わります」「解約はいつでも」のほうが、結局早く押してもらえます。

よくある質問

CTAとはどういう意味ですか？

Call To Action（行動喚起）の略で、読んだ人に行動を促すボタンやリンクを指します。マーケティングの文脈では、申込み・購入・資料請求・登録などページの目的にあたる行動へ誘導する要素全般をCTAと呼びます。

InstagramのCTAとは何ですか？

プロフィールのリンクボタンや、広告に付く「詳しくはこちら」「購入する」などのアクションボタンのことです。SNSでは投稿文の最後の「保存してね」「プロフィールのリンクから」のような一文もCTAとして働きます。考え方はWebと同じで、行動の結果を具体的に書くほうが押されます。

CTAボタンは何色が正解ですか？

すべてのサイトに共通する正解の色はありません。効くのは色そのものより「ページの他の場所で使っていない色か」です。サイトの配色が変われば、目立つ色も変わります。迷ったら、ページの基調色の反対側にある色から選んでください。

CTAは1ページにいくつ置いていいですか？

回数に上限はありませんが、行き先は1種類にします。LPならファーストビュー・証拠の後・末尾の3箇所が基本形です。同じ行き先なら何回出てきても迷いは生まれません。逆に「購入」と「資料請求」のように行き先が2種類並ぶと、どちらも押されにくくなります。

次に学ぶこと

今回の要点です。

• CTAはページの出口。「見つけてもらう→押したくなる→不安を消す」で設計する
• 文言は操作の名前ではなく、行動の結果を書く
• マイクロコピーで一番大きい不安を1つ消す
• 色は「浮いているか」、配置は「気持ちが動いた直後」

次のレッスンは「WebデザイナーのためのSEO基礎」。作ったページを検索から見つけてもらうために、デザイナーの判断が影響する箇所だけを絞って学びます。

あわせて読みたい

WebデザイナーのためのSEO基礎｜検索の仕組みとデザインが影響する4つの箇所「SEOも分かるデザイナーだと助かる」と言われて、何から手をつければいいか分からなかったこと、ありませんか？ このレッス…

コース全体の流れはデザインの基本コース目次から確認してください。