問い合わせや購入のボタンを改善するとき、最初に色を検討することが多くなります。しかし実際に成果を動かすのは、文言と配置と個数です。
押すかどうかを決めるのは、押した後に何が起きるかが分かるかどうかです。「送信」とだけ書かれたボタンは、その先で何を求められるか分かりません。営業電話が来るのではないかという懸念があれば、押されません。
この記事では、文言の作り方、置くべき位置、個数の考え方、周辺に必要な情報、そして検証の順序を整理します。
この記事でわかること
・押した後に何が起きるか分かる文言にする
・配置は読み進めた先の判断が固まる位置に置く
・増やしすぎると、どれを押すか判断できなくなる
・ボタンの周辺情報が押しやすさを左右する
・色の検証は、文言と配置の後
・評価は押された数ではなく、その先の成果で行う
押した後に何が起きるか分かる文言にする
最も効果が大きいのは文言です。抽象的な言葉ほど、押した後が想像できません。
| 文言 | 伝わること | 評価 |
|---|---|---|
| 送信 | 何かが送られる | その先が分からない |
| お問い合わせ | 問い合わせる | 何を聞けるか不明 |
| 料金の見積もりを依頼する | 見積もりが得られる | 得られるものが明確 |
| 資料をダウンロード（無料） | 資料が手に入る | 費用の懸念も解消 |
| まずは相談する（費用はかかりません） | 相談できる、無料 | 心理的な障壁が下がる |
得られるものを書き、懸念になりそうな点を先に打ち消してください。特に費用が発生するかどうかは、押す前に最も気になる点です。
文言の設計はマイクロコピーとは？CVRを動かす短い文章の書き方も参照してください。
得られるものを書き、懸念を先に打ち消す。
費用が発生するかは、押す前に最も気になる点。
配置は判断が固まる位置に置く
ボタンは読み手の判断が固まった位置にある必要があります。早すぎても遅すぎても押されません。
| 位置 | 有効な条件 | 注意 |
|---|---|---|
| 最初の画面 | 商材が既知、単価が低い | 説明前だと押されない |
| 説明の直後 | その説明で判断できる | 最も自然に働く |
| 料金の直後 | 費用が判断の中心 | 検討層に効く |
| よくある質問の後 | 懸念が解消された直後 | 効果が出やすい |
| 最下部のみ | 読み切る人だけ | 途中で決めた人を取りこぼす |
最下部にしか置かないと、途中で判断が固まった人が探すことになります。長いページでは、判断が固まりうる箇所ごとに置いてください。
判断が固まる位置ごとに置く。
最下部だけだと、途中で決めた人を取りこぼす。
増やしすぎると判断できなくなる
選択肢が多いほど押されるとは限りません。
| 並んでいるもの | 起きること | 対応 |
|---|---|---|
| 問い合わせと資料請求 | どちらか選べる | 主要な1つを目立たせる |
| 3つ以上の行動 | 判断に迷う | 優先度で絞る |
| 同じ役割のボタンが複数 | 違いが分からない | 統合する |
| 主要な行動が複数 | どれも中途半端になる | 1画面1つに絞る |
複数置く場合は、主要な1つを明確に目立たせてください。同じ見た目で並べると、どちらも選ばれにくくなります。検討段階が違う人向けに複数置くのは有効ですが、見た目の強弱で優先度を示す必要があります。
複数置くなら、主要な1つを明確に目立たせる。
同じ見た目で並べると、どちらも選ばれにくい。
周辺情報が押しやすさを左右する
ボタン自体より、その周辺にある情報が判断を変えることがあります。
- 所要時間（入力にかかる時間の目安）
- 費用が発生しないこと
- その後の流れ（いつ返信が来るか）
- しつこい営業がないこと
- 個人情報の扱い
押した後の不確実性が、押さない理由になっています。この不確実性を、ボタンの直前で解消してください。フォームの手前で離脱する人には、この情報が効きます。
フォーム全体の設計は入力フォームの離脱率を改善するデザインの工夫｜商談化まで見た設計を参照してください。
押した後の不確実性が、押さない理由になっている。
所要時間、費用、その後の流れをボタンの直前に置く。
見た目で確認すべき点
色の前に、ボタンとして認識できるかを確認してください。
| 確認項目 | 問題がある状態 | 対応 |
|---|---|---|
| ボタンに見えるか | 文字だけで押せると分からない | 背景や枠をつける |
| 周囲との差 | 背景に埋もれている | 明度差を確保する |
| 大きさ | 指で押しにくい | 領域を広げる |
| 隣接要素との距離 | 誤タップが起きる | 間隔を空ける |
| 文字の読みやすさ | 背景色と近い | 明度差を確保する |
押せることが分からないボタンは、色を変えても押されません。スマートフォンでの操作性はスマホで押しやすいボタンの設計｜大きさより間隔が誤タップを決めるを参照してください。
押せることが分からなければ、色を変えても押されない。
周囲との明度差と、隣接要素との間隔を確認する。
色の検証は文言と配置の後
色は改善の余地としては小さい部類です。
- 文言を、得られるものが分かる表現に変える
- 配置を、判断が固まる位置に追加する
- 周辺に、懸念を解消する情報を置く
- ボタンとして認識できるかを確認する
- ここまで行った後、色を検証する
順序を逆にすると、効果の小さい改善に時間を使うことになります。色の考え方はCVボタンの色で成果は変わるのか｜アクセントカラーの決め方を参照してください。
色は改善余地としては小さい。順序は最後。
文言と配置を先に検証する。
評価は押された数ではなく成果で行う
クリック率だけを追うと、誤解を招く文言に流れます。
| 見る指標 | 分かること | 注意 |
|---|---|---|
| ボタンのクリック率 | 押されているか | 誤認でも上がる |
| フォームの完了率 | 押した後の離脱 | 併せて見る |
| 問い合わせ数 | 最終的な成果 | 最も重要 |
| 商談化率 | 問い合わせの質 | 誤認が多いと下がる |
実態より魅力的に見せると、クリック率は上がりますが商談化率は下がります。押した後に想定と違う内容が出ると、そこで離脱するためです。両方を見て判断してください。
クリック率は誤認でも上がる。商談化率まで見る。
実態より良く見せると、押した後で離脱する。
よくある失敗
色から改善を始める
効果の小さい箇所から着手することになります。文言と配置が先です。
送信、お問い合わせという文言にする
押した後に何が起きるか分かりません。得られるものを書いてください。
最下部にしかボタンを置かない
途中で判断が固まった人が探すことになります。判断が固まる位置ごとに置いてください。
複数のボタンを同じ見た目で並べる
どちらも選ばれにくくなります。主要な1つを目立たせてください。
クリック率だけで評価する
誤認を招く文言でも上がります。商談化率まで見てください。
よくある質問
ボタンは何個まで置いてよいですか
個数より、主要な行動が1つに絞られているかが重要です。同じ行動を促すボタンを複数箇所に置くのは問題ありません。異なる行動を並べる場合は、見た目の強弱で優先度を示してください。
最初の画面にボタンを置くべきですか
商材が既に知られている場合や、単価が低くすぐ判断できる場合は有効です。説明が必要な商材では、判断材料を示す前に置いても押されません。ただし置くこと自体に害はないため、下部にも配置したうえで様子を見る方法があります。
電話番号もボタンにすべきですか
電話での問い合わせが多い業種では有効です。スマートフォンではタップで発信できるようにしてください。ただし電話とフォームを同じ強さで並べると、どちらを使うか迷わせます。主要な手段を決めてください。
ボタンの文言は長くてよいですか
分かりやすさを優先してください。ただし長すぎると読まれません。得られるものを1行で書き、補足はボタンの周辺に置く構成が現実的です。
検証はどのくらいの期間が必要ですか
判断できる件数が集まるまでです。件数が少ない状態で差が出ても、偶然の可能性があります。検証の設計はABテストの始め方｜やるべき条件と、できない場合の代替手段を参照してください。
まとめ
問い合わせや購入のボタンを改善する際、色から検討を始めると効果の小さい箇所に時間を使うことになります。実際に成果を動かすのは、文言と配置と個数です。押すかどうかを決めるのは、押した後に何が起きるかが分かるかどうかであり、「送信」とだけ書かれたボタンではその先が想像できません。
文言では、得られるものを書き、懸念になりそうな点を先に打ち消してください。特に費用が発生するかどうかは、押す前に最も気になる点です。配置については、判断が固まる位置ごとに置く必要があります。最下部にしかないと、途中で決めた人が探すことになり、そこで離脱します。
またボタン自体より、周辺にある情報が判断を変えることがあります。入力にかかる時間の目安、費用が発生しないこと、いつ返信が来るか。押した後の不確実性が押さない理由になっているため、この不確実性をボタンの直前で解消してください。そして評価はクリック率だけでなく商談化率まで見てください。実態より魅力的に見せるとクリック率は上がりますが、押した後で離脱します。
