このワイヤーの特徴
読み終えたタイミングで、次の行動が分かる
ページを読み終えた人は、「では、どうすればいいか」を考えています。ページや章の結論の位置にCTAを置き、そのタイミングで次の行動を示しています。
ページの内容に合った言葉で、押す理由が伝わる
どのページにも同じ「お問い合わせはこちら」を置くと、そのページを読んだ人にとっての押す理由が伝わりません。見出しとボタンの文言を、実績・記事・料金など、置くページの内容に合わせて変えています。
行動を1つに絞り、迷わせない
選べる行動が多いと、読み手はどれを押せばよいか迷い、そのまま離れてしまうことがあります。この型では主となる行動を1つに絞り、主ボタンも1つにしています。
押す前に知りたい情報を、ボタンの近くに示す
押す前には「費用がかかるのか」「いつ返事が来るのか」といったことを知りたい人もいます。相談が無料であることや返信の目安など、押す前に知りたい情報を、ボタンのすぐ下に短く示しています。
SPでは、ボタンを横いっぱいにして、一言を縦に並べる
SPで一言を横に並べると、途中で折り返されて読みにくくなります。ボタンは横いっぱいにして押しやすくし、一言は1行ずつ縦に並べています。
制作時のよくある失敗
すべてのページに、同じ文言のCTAを置いている
「お問い合わせはこちら」のような同じ文言をどのページにも置くと、読み手にとって押す理由が見えにくくなります。
ページの内容を受けた見出しとボタンの文言に変えます。
ボタンの文言で、押した先で何が起きるか分からない
「詳しくはこちら」「送信」のような文言では、押すと何が始まるのかが分かりません。
「無料で相談する」「見積もりを依頼する」のように、読み手がすることを動詞で書きます。
押した先でも、文言どおりのことにそのまま進めるようにし、移動したあとに行き先を選び直させないようにします。
1つのCTAに、行動を詰め込みすぎている
問い合わせ、資料請求、電話、SNSなどを同じ大きさで並べると、どれを選べばよいか迷わせます。
この型では主となる行動を1つに絞り、複数の行動を同じ程度に案内したい場合は、主と副の優先度を付けた形にします。
ボタンの近くの一言が、実際の運用と合っていない
返信の目安を守れなかったり、根拠なく「今だけ」「残りわずか」と書いたりすると、読み手の信頼を損ないます。
一言は、実際に守れることだけを書きます。
本文との区切りがなく、CTAだと気づかれない
本文と同じ見た目で続けて書くと、読み飛ばされてしまいます。
背景の色や余白で本文と区切り、見出しを付けて、ここが次の行動の案内であることが分かるようにします。
よくある質問
1ページに、CTAはいくつまで置いてよいですか?
役割が違えば、複数置いてもかまいません。
たとえば、ページの末尾にこの型のCTAを置き、長いページでは画面に追従するボタンを加える、といった形です。
同じ文言のCTAを何度も並べると押しつけがましく見えるため、置く場所ごとに役割を分けます。
ボタンの文言は、どう決めればよいですか?
押した先で起きることを、読み手の行動として書きます。
「お問い合わせ」より「無料で相談する」、「送信」より「見積もりを依頼する」のほうが、押したあとに何が始まるのかが伝わります。
置くページの内容に合わせて、文言を変えることも検討します。
「相談は無料」のような一言は、入れたほうがよいですか?
押す前の不安に答える一言があると、ボタンを押すためらいを小さくできると考えられます。
ただし、書いた内容は実際の運用と一致させる必要があります。
返信の目安などは、守れる範囲で書きます。
CTAのボタンは、リンクとボタンのどちらで作ればよいですか?
押すと問い合わせのページへ移動するなら、リンク（a要素）で作ります。
その場で入力欄を開くなど、ページを移動せずに動作する場合は、button要素で作ります。
見た目はボタンでも、役割に合った要素を使うことで、読み上げやキーボードでの操作が正しく伝わります。
