ランディングページ（LP）を制作するとき、コンバージョンに直接関わる重要な要素のひとつが「CTA」です。
CTAとは「Call To Action」の略で、ユーザーに次の行動を促すためのボタンやエリアを指します。
例えば、
「商品を購入する」
「無料で相談する」
「資料をダウンロードする」
「無料体験に申し込む」
といったボタンがCTAです。
どれだけ商品の魅力を伝えられていても、最後に「どこを押せばいいのか分からない」「ボタンが目立たない」という状態では、購入や問い合わせにつながりにくくなってしまいます。
逆に、CTAの色・大きさ・文言・配置などを少し見直すだけで、ユーザーが次の行動を理解しやすくなることがあります。
この記事では、LPを制作するときに押さえておきたいCTAデザインのポイントを7つ紹介します。
これからLPを制作する方はもちろん、現在公開しているLPのCTAを改善したい方も参考にしてみてください。
CTAとは？
CTAとは「Call To Action（コール・トゥ・アクション）」の略で、日本語では「行動喚起」などと訳されます。
WebサイトやLPを見ているユーザーに対して、次に取ってほしい行動を示すものです。
例えばECサイトの商品販売LPなら、
「購入する」
というボタンが代表的なCTAです。
サービスを紹介するLPなら、
「無料で相談する」
「資料請求する」
「お問い合わせ」
などがCTAになります。
LPは基本的に、商品やサービスについて説明したあと、最終的にユーザーを特定の行動へ導くことを目的としています。
そのためCTAは単なる「ボタン」ではなく、LPのゴールへユーザーを案内するための重要なパーツと考えた方がよいでしょう。
CTAのデザインが重要な理由
LPを訪れたユーザーは、ページのすべてをじっくり読んでくれるとは限りません。
ページをスクロールしながら、
「これは自分に必要な商品かな？」
「価格はいくらだろう？」
「どうやって申し込むんだろう？」
といったことを短時間で判断します。
そこでCTAが小さかったり、背景と同化していたりすると、ユーザーが申し込みたいと思ったタイミングでボタンを見つけられない可能性があります。
CTAでは、
「ここを押せば次に進める」
ということが一目で分かるデザインが重要です。
デザイン性を優先してボタンを目立たなくするよりも、ユーザーが迷わず行動できることを優先しましょう。
クリックされやすいCTAデザイン7つのポイント
① 背景とCTAのコントラストをつける
CTAで最初に確認したいのが「色」です。
CTAをページの背景や周囲のパーツと同じような色にすると、ボタンが埋もれてしまいます。
例えば、ページ全体がブルー系のデザインなら、CTAまで同じブルーにすると、ページには統一感が出るものの、ボタンが目立たなくなる場合があります。
そこでCTAには、周囲と区別しやすいアクセントカラーを使います。
例えば、
ブルー系のLP → オレンジ系CTA
ホワイト中心のLP → 濃いブルーやグリーンのCTA
淡いピンクのLP → 濃いピンクや赤系CTA
といった考え方です。
ただし、「CTAは必ずオレンジがいい」「赤ならクリックされる」というわけではありません。
重要なのは特定の色ではなく、LP全体の配色の中でCTAを認識しやすいかどうかです。
② CTAを十分な大きさにする
CTAは「見つけやすさ」と「押しやすさ」の両方を考える必要があります。
特にスマートフォンでは、PCのようにマウスでクリックするのではなく、指でタップします。
ボタンが小さすぎると、
「押しにくい」
「リンクなのか分からない」
「別の場所を誤ってタップしてしまう」
といった問題につながります。
スマートフォンでは横幅にある程度余裕を持たせ、ボタン内の文字も無理なく読めるサイズにしましょう。
また、ボタンの上下にも適度な余白を作ると、タップしやすくなります。
③ CTAの周囲に余白を作る
CTAを目立たせるために、色やサイズと同じくらい重要なのが「余白」です。
CTAのすぐ上下に文章、画像、アイコン、注意書きなどが密集していると、CTAが他の情報に埋もれてしまいます。
CTAの周囲に適度な余白を作ることで、ユーザーの視線を自然にボタンへ誘導できます。
デザインでは「目立たせたいから何かを追加する」と考えがちですが、反対に周囲の要素を減らすことで目立たせる方法もあります。
CTAが目立たないときは色を派手にする前に、周囲に十分な余白があるか確認してみましょう。
④ CTAの文言を具体的にする
CTAではデザインだけでなく、ボタンに入れる文章も重要です。
例えば、
「送信」
「こちら」
「詳しく見る」
だけでは、ボタンを押したあと何が起こるのか分かりにくい場合があります。
そこで、
「無料で相談する」
「無料体験に申し込む」
「資料をダウンロードする」
「商品を購入する」
など、ボタンを押した後の行動が想像できる文章にします。
また、ユーザーにとってメリットがある場合は、それをCTA周辺で伝えるのも効果的です。
例えば、
「無料で相談する」
の上に、
「相談無料・約1分で入力完了」
などの補足を入れれば、ユーザーが行動する際の心理的なハードルを下げられます。
⑤ CTAの直前でユーザーの不安を取り除く
商品に興味を持っていても、CTAを押す直前に迷うユーザーは少なくありません。
例えば、
「送料はいくら？」
「解約できる？」
「入力に時間がかかりそう」
「相談したら営業電話が来るのでは？」
などの不安です。
そのためCTAの近くに、
「送料無料」
「30日間返金保証」
「相談無料」
「入力約1分」
「いつでも解約可能」
など、ユーザーが行動するときの不安を軽減する情報を配置する方法があります。
もちろん、実際に提供している条件だけを記載する必要があります。
CTAはボタン単体で考えるのではなく、CTA周辺の情報まで含めて一つのエリアとして設計することが大切です。
⑥ スマートフォンで押しやすくする
LPをPCで制作していると、どうしてもPC画面を基準にデザインを考えてしまいがちです。
しかし、実際のユーザーがスマートフォンからLPを見るのであれば、スマートフォンでの使いやすさを優先する必要があります。
CTAでは、
文字が小さすぎないか
ボタンが小さすぎないか
左右に十分な余白があるか
他のリンクと近すぎないか
スクロール中にCTAを見つけられるか
などを確認しましょう。
PC上のプレビューだけではなく、公開前には実際のスマートフォンでも確認することをおすすめします。
また、LPによっては画面下部にCTAを固定する「追従CTA」を設置する方法もあります。
追従CTAなら、ユーザーが申し込みたいと思ったタイミングですぐ行動できます。
ただし、画面を覆うほど大きな追従CTAは本文を読む邪魔になるので注意が必要です。
⑦ LP内の適切な場所にCTAを配置する
CTAはページの一番下だけに配置すればよいとは限りません。
縦に長いLPの場合、商品に興味を持ったユーザーがCTAを探すためにページ最下部までスクロールしなければならない状態になることがあります。
そのためLPでは、
ファーストビュー
商品のメリットを説明した後
実績や口コミを紹介した後
料金・オファーを説明した後
ページ最下部
など、ユーザーが「申し込んでみよう」と感じる可能性がある場所にCTAを配置します。
ただし、スクロールするたびにCTAが出てくるような過剰な配置は避けた方がよいでしょう。
重要なのはCTAの数ではなく、ユーザーが行動したいタイミングでCTAを見つけられることです。
CTAを増やしすぎるのもNG
CTAを目立たせることは重要ですが、行動の選択肢を増やしすぎると逆効果になることがあります。
例えば同じLPの中に、
「商品を購入する」
「資料請求する」
「LINE登録する」
「お問い合わせ」
「メルマガ登録」
と複数のCTAが並んでいる状態です。
ユーザーからすると、
「結局どれを押せばいいの？」
となってしまいます。
LPを制作するときは、最終的にユーザーに取ってほしい行動を明確にします。
同じ「購入する」というCTAをページ内に何度か配置するのは問題ありません。
注意したいのは、異なる目的のCTAを増やしすぎることです。
CTAは派手にすればクリックされるわけではない
CTAを目立たせようとして、
激しく点滅させる
常に拡大縮小させる
原色を何色も使用する
大きな矢印を大量に配置する
といったデザインにするケースもあります。
もちろんLPのターゲットや商品によっては、ある程度強い表現が適している場合もあります。
しかし、単純に派手にすればクリック率が上がるわけではありません。
重要なのは、
「CTAが見つけやすく、押したら何が起きるのか分かり、安心して行動できること」
です。
デザインを完成させたら、
「CTAが目立つか？」
だけではなく、
「ユーザーが迷わず押せるか？」
という視点でも確認してみましょう。
CTAは公開後に改善する
CTAデザインに絶対的な正解はありません。
ターゲットや商品、流入元、LP全体のデザインによって適切なCTAは変わります。
そのためLPを公開した後は、アクセス解析やヒートマップなどを利用してユーザーの行動を確認します。
例えば、
「CTAまでスクロールされているのにクリックされていない」
という場合は、
CTAの色
サイズ
文言
周囲の余白
CTA直前の説明
オファー内容
などに改善の余地があるかもしれません。
逆にCTAまで到達するユーザー自体が少ないのであれば、CTAだけではなく、その前の商品説明やLP構成を見直す必要があります。
CTAだけを単独で考えるのではなく、LP全体の流れを確認しながら改善していきましょう。
LP公開前のCTAチェックリスト
最後に、LPを公開する前にCTAを確認してみましょう。
□ CTAが一目で見つかる
□ 背景とのコントラストがある
□ ボタンの文字が読みやすい
□ スマートフォンで押しやすい
□ CTA周辺に十分な余白がある
□ 押した後に何が起こるか分かる
□ CTA直前でユーザーの不安を解消できている
□ CTAの種類を増やしすぎていない
□ LP内の適切な場所に配置されている
□ 追従CTAが本文を邪魔していない
まとめ｜CTAは「目立つ」だけでなく「迷わず押せる」デザインに
LPにおけるCTAは、ユーザーを購入や問い合わせなどのゴールへ導く重要なパーツです。
CTAを制作するときは、
「何色にすればクリックされるのか？」
だけを考えるのではなく、
「見つけやすい」
「内容が分かりやすい」
「押しやすい」
「安心して行動できる」
という4つの視点で考えることが重要です。
背景とのコントラストをつけ、十分なサイズと余白を確保し、ボタンを押した後の行動が分かる文言にします。
さらに、スマートフォンでの操作性やCTAを配置するタイミングまで考えることで、ユーザーが迷いにくいLPになります。
CTAが目立たないからといって、色を派手にしたりアニメーションを追加したりすることだけが改善ではありません。
場合によっては周囲の情報を減らしたり、CTAの文言を変えたりするだけでも分かりやすくなります。
LPを公開した後は実際のユーザー行動を確認しながら改善を繰り返していきましょう。
関連記事
LPの商品画像の作り方｜売れるデザインに共通する7つのポイント
LPのファーストビューの作り方｜成果につながるデザイン7つのポイント
LPの構成の作り方｜成果につながるランディングページの基本構成を徹底解説
ペイントツールのスタンダード【CLIP STUDIO PAINT PRO】
最短1ヶ月で動画編集スキルが身につく！【クリエイターズジャパン】