人々にクリックさせるボタンのための9つの重要なCTAデザインのヒント

行動を促すフレーズ (CTA) は、マーケティング戦略のクライマックスです。 購入、サインアップ、またはダウンロードを求めているかどうか。 ここまでのすべては、見込み客をランディング ページに誘導することでした。 また、場合によっては、取引を成立させるためにいくつかの言葉しかありません.

そのため、CTA ボタンはサイトの最も重要なデザイン要素です。 受動的な訪問者を能動的なユーザーに変えることができるからです。

Call-to-Action ボタンはシンプルに見えます。 しかし、それらは台無しになりやすいです。 または完全に見逃されます。 これらの9つのCTAデザインのヒントは、そのコンバージョンを確実に得るでしょう. さらに、役立つ例がたくさんあります。

1. ボタンをクリックできるように見せる
2. あなたのコピーで説明してください
3. 適切なサイズとスペース
4. 一人称視点でつながる
5. 緊急性を生み出し、強い動詞を使用する
6. 小見出しをつけてみる
7. A/B テストのバリエーション
8. モバイル版に注意

CTAボタンをクリックできるように見せる

ボタンを「クリック可能」に見せるのはばかげているように聞こえます。 しかし、信じられないほど頻繁にサイトが間違っています。 そして、それは主にボタンの輪郭と色に関係しています.

コンバージョン率の傾向は行き来します。 透明な「ゴースト ボタン」のように、細い境界線とテキストが背景色にフェードします。 クールに見えるかもしれませんが、あまり注目されない傾向があります。 効果的な CTA がすべきこととは逆です。

このデザインが通常機能するのは、セカンダリ ボタンとしてのみです。

出典：UXムーブメント

CTA ボタンが明らかにクリックできない別の例を次に示します。 確かに、このデザイン エージェンシーのランディング ページはクールに見えます。 ただし、このケース スタディをスクロールして読み飛ばしても問題ありません。

では、どうすれば人々にクリックしてもらうことができるでしょうか? コンバージョン率を上げるには、 ボタンは大きく、太字で、選択した配色で機能する必要があります。

Netflix は、特徴的な赤を使用して注意を引きます。 ほとんど一時停止の標識のようです。

対照的な色にすることもできるので、目立ちます。 eコマースプラットフォーム BigCommerce がここで行ったことのように:

これは、ボックス内のテキストにも当てはまります。 正しく読めるように、コントラストをつけてください。

グラデーションは、同じブランドの配色内でも機能します。 それらは物事に現代的でより若々しい感じを与えます：

出典: 月曜日

ここでの私のアドバイスは、CTA のデザインを明確に保つようにすることです。 箱から出して何かをするのは良い考えのように聞こえるかもしれませんが、人間は習慣の生き物です。 そして、どれだけ多くの人が要点を見逃すかに驚かれることでしょう。

あなたのコピーで説明してください

最も単純なコンバージョン率最適化 (CRO) 戦術の 1 つは、優れたコピーライティングです。 しかし、大きなテキストの塊だけではありません。 マイクロコピーも同様に重要であり、細部をカバーします。

通常、連絡フォームやソーシャル メディアのステータス更新バーに表示されます。 Facebook の有名な「What's on your mind?」のように。 またはLinkedInの「投稿を開始」。

マイクロコピーは次のことに役立ちます。

• ユーザーに何をすべきかを伝える
• 提案をします
• 懸念事項に対処する
• コンテキストを提供する

CTA ボタンのコピーも別の例です。 そして、クリックすると何が得られるか、何が起こるかを人々に正確に伝える必要があります。

以前はIMPACTのCTAボタンでした。 "無料ダウンロード"。 想像力豊かじゃない？

出典：インパクト

しかし、よりわかりやすいものにすることで、コンバージョンが 78.5% 増加しました。 「より多くの顧客を引き付ける方法を教えてください」は明らかにより魅力的でした:

「ここをクリック」とだけ書きたくなります。 しかし、ユーザーを惹きつけ、望み通りの行動を促す代替手段はたくさんあります。

では、何を書けばよいのでしょうか。 まず、コンバージョンの意図を特定する必要があります。 ユーザーが目標到達プロセスのどこにいて、どこから来たか (トラフィック ソース) に合わせたいと考えています。

ソース: クライアントブースト

次に、提供するものの価値を強調する必要があります。 そして異議があれば処理します。

出典: マーケティングの例

とてもユニークなプロセスです。 そして、それはあなたのニッチとブランドの声に依存します. ただし、どのような言葉遣いを選択する場合でも、ボタンのテキストは短く、要点を明確にすることを忘れないでください。

適切なサイズと余白を使用する

CTA ボタンのデザインは色だけではありません。 ボタンのサイズは、クリック率に大きく影響するもう 1 つの細かい要素です。 また、余白はテキスト自体と同じくらい重要です。

これの多くは、Web デザインに依存します。 ネガティブ (空白) スペースは、ページ上の特定の要素に注意を引きます。 雑然としたホームページは必要ありません。 訪問者がたどる明確な道が必要です。

Airbnb は、適切に行われたネガティブ スペースの最良の例の 1 つです。 そして、それをより明確にするための対照的な色：

Buffer のホームページにはもう少しありますが、CTA ボタンはメイン コピーの近くに置いています。 さらに、効果的なゴースト ボタンの使用例。 これにより、次に何をすべきかが非常に明確になります。

ボタンが大きいほど、目立ちます。 そして注目を集めるためには目立たせる必要があります。 しかし、ページを乗っ取って UX を台無しにするほどではありません。

片頭痛を起こしやすい場合は、今すぐ目をそらしてください。 これを行わない方法の例を次に示します。

ソース: ジャスティンマインド

ボタンのように見える要素がたくさんあります。 このサイトが訪問者に何をクリックしてもらいたいかを知っているかどうかさえわかりません.

対照的に、Spotify のランディング ページで最初に目にするものは何ですか?

巨大な「Go Premium」ボタンですよね？ これが、明確なユーザー パスを設計する方法です。

最後に、良い例の CTA デザインについて他に気づいたことはありますか? もう一度見てみると、それらすべてに共通点があることがわかります。

科学者たちは、人間が「鋭い点ではなく、緩やかな曲線を持つ形」を好むことを発見しました。 彼らは目を楽しませ、私たちをより平和に感じさせます. このため、最も効果的な行動喚起ボタンは、角の丸い長方形です。

出典：クレバータップ

理由から最も人気のある形式です。 ただし、さまざまなオプションを試してください。 あなたの聴衆は何か他のものを好むかもしれません。

一人称視点でつながる

CTA のデザインを改善するには、わずか 1 回の調整で済みます。 たまには一言。

コピーライティングでは、「あなた」という言葉を使うように教えられています。 読み手は直接話しかけられているような気分になれるからです。 ボタンのコピーにも当てはまると思いますよね？ 奇妙なことに、それほど多くはありません。

Unbounce は、ランディング ページのコピーを「30 日間の無料トライアルを開始」から「30 日間の無料トライアルを開始」に変更すると、クリック率が 90% 増加したことを発見しました。

それで、これはなぜですか？ 誰かが製品とのつながりを感じると、コンバージョンする可能性が高くなります。 それらについて何も知らなくても、その個人的なタッチを提供します。

マーケティング心理学によると、購入の決定は主に感情に基づいています。 そのため、Web サイトの訪問者に、それが自分の選択であると感じてもらいたいと考えています。

「私の」と書くことで、ユーザーはこれから行うアクションを視覚化できます。 それは彼らにコントロールを与え、（うまくいけば）意思決定に向けて彼らを動かします.

さらに、すぐに価値が得られることを示すこともできます。 Crazy Egg のホームページのように:

ソース: クレイジーエッグ

1-800 Contacts は、世界最大のコンタクトレンズ専門店です。 しかし、彼らは同じことをします。 彼らは、CTA ボタンが 1 人だけに向けられていることを確認します。

ソース: 1-800 連絡先

多くの企業がこの手法を使用しているわけではありません。 つまり、見たときに目立つということです。 それでは、試してみませんか？

切迫感を生み出し、強い動詞を使用する

コピーは切迫感を生み出し、ユーザーの注意を引く必要があります。 これは、特に e コマース ビジネスに適しています。 「今」や「今日」などの言葉を使うと、行動を促すことができます。 彼らは、オファーが永遠に続くわけではないことを示唆しているからです.

「今すぐ購入」は古典的です。 しかし、CTA のデザインを使えば、それ以上のことができます。

出典：ゴースクエアード

次のような文言を試すことができます。

• 「今日は自分へのご褒美」
• 「今すぐ割引を解除してください」
• 「ワンオフ無料ダウンロード」

また、オファーを魅力的なものにして、好奇心を刺激したいと考えています。 だから、強い動詞から始めましょう。 努力するようなものではありません。 それは人々を先延ばしにする簡単な方法です。

ここに私が意味することのいくつかの例があります:

左側は、ユーザーがクリックして何かを得るように聞こえます。 右側は、時間やお金をあきらめる必要があるように聞こえます。

あなたも本当にクリエイティブになることができます。 このバージョンの Huemor のホームページのように:

出典: FastCapital360

または、神秘的なひねりを加えたフンボルト郡の古いランディング ページ:

出典: ConEmprendimiento

チームでアイデアをブレインストーミングします。 どんなにばかげていても。 あなたが思いついたものと、最終的に使用するものに驚かれることでしょう。 しかし、どんな言葉遣いを選んだとしても、反対側で約束を果たすことを忘れないでください.

行動喚起ボタンの横に小見出しを付けてみてください

時々、人々は少しのナッジが必要です。 そして、CTA ボタンの下にちょっとしたテキストを入れるとうまくいきます。 通常の「小見出し」ではありません。 しかし、それはそれを説明する最も簡単な方法です。

ボタンのテキストを見出しと考えると、最も人気のある小見出しは「クレジット カードの詳細は必要ありません」です。 しかし、あなたは何でも言うことができます。 そして、それを使って少しクリエイティブになるのは楽しいです。

多くの場合、潜在的な顧客に信頼を与えるために使用されます。 また、人々が抱える可能性のある主な問題点に対処できます。

出典：CoSchedule

CoSchedule は、ユーザーが無料の試用版だと思うかもしれないことを理解しています。 だから、「どうして？ それは永久に無料です」と明確にします。

それらを使用して、社会的証明を追加することもできます。

出典：ベースキャンプ

これにより、ユーザーは他のユーザーがすでにあなたを信頼していることを明確に確認できるため、すぐに信頼を得ることができます。 また、非常に多くの加入者には理由があるに違いないと人々が考えているため、FOMO を引き起こす可能性もあります。

サービスに付随する特別オファーまたは付加価値がある場合は、小見出しを使用してそれを強調します。

出典：モズ

マイクロコピーは、ブランドの声を輝かせるチャンスです。 たった一文でも構いません。 だから、それが合うなら、少し生意気であることを恐れないでください：

ソース: クライアントブースト

ユーザーがクリックした後に何が起こるかを具体的に指定することもできます。 それらを教えてください：

• 彼らが得るもの（新しいマーケティングのアイデア）
• 何人（17歳以上）
• なぜ彼らが気にする必要があるのか​​ (彼らはあなたが持っているものより優れている)

これらの例をインスピレーションのテンプレートとして使用してください。 あるいは全く違うことをする。 それがあなたのブランドアイデンティティに合っていることを確認して、楽しんでください.

A/Bテストもお忘れなく

ほとんどの CRO ツールは、ユーザー エクスペリエンス (UX) の向上を目的としています。 そして、あなたはすでにウェブページの主要部分でこれを行っているかもしれません. ただし、小さな要素でも行う必要があります。

Amazon は、CTA ボタンのデザインにうるさいことで有名です。 特にサードパーティの使用では。 したがって、自分のルールに違反していないことを確認してください。

その後、ボタンのデザインを少し変更するだけで、大きな影響を与えることができます。 では、さまざまなタイプの CTA ボタンを比較してみましょう。 次に、次のバリエーションの A/B テストを行います。

• ボタンの色
• CTAコピー
• フォント
• ページデザインへの配置
• ポップアップ
• お問い合わせフォーム

出典：スノーブ

前述したように、単語を 1 つ変更するだけで、コンバージョン率やクリック率が向上する場合があります。 ただし、実際に始める前に、訪問者がサイトをどのようにナビゲートするかを理解する必要があります。

次のようなことを知りたい：

1. 彼らが相互作用しようとしている要素は何か
2. 彼らの出身地
3. サイトのユーザー ジャーニー/購入ファネル
4. そこにいる人々の動機

出典：GIPHY

この情報を入手したら、当て推量ではなく、事実に基づいて実験を行うことができます。

通常、A バージョンと B バージョンを CTA デザインと比較する方が簡単です。 しかし、これを増やして多変量テストを試すことができます。 通常、最初は単純な方が良いでしょう。 そうすれば、明確な勝者が得られます。

しかし、その後、その勝者を別のバージョンと比較して試すことを止めるものは何もありません. 常にテストと比較を行う必要があります。 うまくいくものを見つけたとしても。 それが成功したブランドのすることです。

モバイル版に注意

仕上げの簡単なヒント。 デザイン要素は、モバイル画面では大きく異なります。 はるかに小さいディスプレイと少ないピクセルで作業しています。 そのため、散らかりがずっと簡単になります。

これまでに説明したことはすべて、モバイル バージョンでより一般的になります。 対照的な色はもっと目立たせる必要があります。

負のスペースを優先する必要があります。

また、小見出しも別の場所にある場合があります。 モバイル ユーザーは、下に表示されるまで下にスクロールできない場合があります。

これらのグラフィックスについてCleverTapに声をかけてください

モバイルでの一般的な UX については、さらに検討する必要があります。 モバイルは全世界の検索トラフィックの半分以上を占めているためです。 デスクトップ バージョンが翻訳されることは期待できません。 少しの努力で、クリックスルー率が大幅に向上する可能性があります。

結論

効果的な CTA のデザインは、これらの小さな詳細の多くで構成されています。 何度も言いましたが、ほんの少しの調整で十分です。 アウトラインの色や形など、取るに足らないものでも。

A/B テストは、それを知る唯一の方法です。 高価な CRO ツールも必要ありません。 コンバージョンを追跡するだけです。 変える。 そして、通常の数から増減があるかどうかを確認します。

Call-to-Action ボタンにふさわしい注目を集めるだけです。 それは、新規顧客か機会損失かの違いかもしれません。

最近、オリジナルの CTA デザインを見たことがありますか? コンバージョンを増やす小さな変更を加えましたか? 以下のコメントでお知らせください。