メールのコンバージョンを後押しする非常に魅力的なコール トゥ アクション ボタン

公開: 2022-08-05

メールの行動喚起に関しては、デザインについてあまり考えません。 ただし、色、サイズ、またはコピーを少し調整するだけでも、購読者のエンゲージメントに大きな影響を与える可能性があることをほとんど知りませんでした. そこで、よくある質問のいくつかに回答し、参照用にいくつかのクールな例を提供することで、非常に魅力的な行動喚起ボタンの構造を分析します。

行動を促すフレーズのボタンのサイズはどれくらいですか?

私は大きなボタンが好きで、嘘をつくことはできません…そしてあなたのチャンネル登録者もそうです! 特にモバイルデバイスでメールを開いて読むことを好む人. CTA ボタンのサイズは、高さ 44 ピクセル以上にする必要があります。 これよりも小さいと、サブスクライバーがボタンをクリックするためにズームインする必要があり、ユーザー フレンドリーなエクスペリエンスが提供されません。 CTA の幅はコピーの文字数によって異なりますが、テキストが密集しないように、両側にパディングを追加してください。

コールトゥアクションボタンの適切なサイズ

デスクトップとモバイルの両方でメールを簡単にプレビューする方法が必要ですか? Vision6 エディタの画面下部にあるトグル ボタンを使用します。

行動を促すフレーズをどのように設計すればよいですか?

行動を促すフレーズのボタンがクリック可能なリンクのように見えない場合は、角を丸くしたり、境界線のボリュームを増やしたり、ボタンに影付きの効果を与えたりすることを検討してください。

以下の電子メールの例を見てみましょう。どちらも行動喚起ボタンに透明なデザインを使用しています。 Supergoop は、CTA の境界にシャドウ効果とパディングを追加して、視認性を高めています。 一方、2 番目のメールの CTA は、クリック可能なボタンがどのように見えるべきかという従来のデザインから離れているため、見つけるのがはるかに困難です。

透明なコールトゥアクションボタンのデザイン
ソース: 本当に良いメール

これらのゴースト ボタンは電子メールにクリーンでミニマルな美学をもたらしますが、控えめで目立たないデザインは二次的な CTA に最適です。 結局のところ、それらはゴースト ボタンと呼ばれているのには理由があります。 これが、塗りつぶされたボタンがより良い結果をもたらすことが証明されている理由です.

LinkedIn のウェルカム メールのような健全な組み合わせを使用してみてください。 サブスクライバーを複数のボタンで混乱させるのではなく、メインの CTA に入力済みのボタンを使用し、セカンダリ CTA に透明なデザインを使用して、自然な階層を確立します。

透明なコールトゥアクションボタン
ソース: 本当に良いメール

どのくらいの空白が必要ですか?

ホワイトスペースは、CTA ボタンに息を吹き込む余地を与えます。 メールに他のデザイン要素を詰め込むと、行動を促すフレーズが後回しになり、必要なほど目立たなくなる可能性があります. スペーサーと仕切りを使用し、メール要素の周りに余分なパディングを追加して、メールの読みやすさを向上させます。

何色を使えばいいですか?

さまざまな色がさまざまな感情を呼び起こします。 したがって、コピーがデザインのトーンと一致することが重要です。 ただし、メールの配色を一新して完全に再ブランド化する必要があるという意味ではありません。

そのため、以下に一連の色と、それらが買い物客の決定にどのように影響するかをリストしました. これらの色の解釈は普遍的ではないことに注意してください。 視聴者にとって何が最適かをテストする必要があります。

  • 赤 –心拍数を上げ、切迫感を生み出します。 これが、この色が期間限定のオファーやフラッシュ セールで最も一般的に使用される理由です。
  • 青 –落ち着き、信頼、安全の感覚を投影するため、この色は金融および銀行業界でよく使用されます。
  • 緑 –緑は、リラクゼーション、快適さ、富を連想させます。 また、多くのお客様の動機である「Go」に関連付けられているため、処理が最も簡単な色の 1 つでもあります。
  • オレンジ –赤と同様に、この色は攻撃的で、衝動買いをする人を対象とする緊急性を重視した CTA に使用されます。
  • 黄色 –楽観主義と若々しさを呼び起こし、ウィンドウ ショッパーを誘惑するためによく使用されます。
  • パープル -美容やアンチエイジング製品でよく見られる理由は、落ち着いて落ち着かせるために使用されます.
  • ピンク –伝統的にロマンチックでフェミニンな色で、若い女性や少女への売り込みに使用されます。
  • 黒 –高級品の宣伝に使用される、力強く洗練された色。

グレーや落ち着いた色は、人を惹きつけないデッド リンクやクリックできないリンクに関連付けられることが多いため、これらを避けることをお勧めします。

また、CTA の視認性を高める色を組み合わせることも重要です。 以下の例を見てみましょう。白いテキストは青色の背景色とのコントラストが高く、色のコントラストが低いボタンよりも目立つようになり、より多くのコンバージョンを生み出す可能性があります。

カラー コントラスト スケール
出典:オプティモンスター

メールのエンゲージメントとコンバージョンを増やす方法に関するその他のヒントを掲載したブログをご覧ください: メールの開封数とエンゲージメントを増やす 5 つの方法

どのフォントを使用すればよいですか?

あなたは派手なフォントのファンかもしれませんが、誰もが筆記体を簡単に読めるわけではありません。 Web ベースのフォントを使用することをお勧めします。 ほとんどの電子メール クライアントは、次のフォントをサポートしています。

  • アリアル
  • コミックサンズ MS
  • クーリエ 新規
  • グルジア
  • Lucida Sans Unicode
  • タホマ
  • タイムズ ニュー ローマン
  • トレビュシェットMS
  • ヴェルダナ

さまざまなフォントを試してみたい場合は、Vision6 でリトマス テストを実施して、さまざまなメール クライアントでフォントがどのようにレンダリングされるかを確認してください。 選択したフォントをサポートしていない電子メール ブラウザは、完全に異なる、ブランドに合わないデフォルトに置き換えられます。

行動喚起のコピーに含める言葉は?

理想的には、ボタンのコピーは 2 ~ 4 語、または約 14 文字の長さにする必要があります。 「注文」や「探索」などの動詞を使用すると、特に「今」などの緊急の言葉と組み合わせると、行動を促すのに効果的であることが証明されています。 Unbounce の調査では、CTA コピーで一人称を使用すると、クリックスルーが 90% 増加することも示されています。

誤解を招くな! サブスクライバーは、CTA のコピーだけで、どのようなアクションが行われるかを正確に知る必要があります。 たとえば、Find Out More は購読者をランディング ページに誘導する必要があります。購読者は何かにコミットする前に、あなたの原因について詳しく読むことができます。 まだ検討段階にあるサブスクライバーを直接サインアップ フォームにリンクすると、多くのバウンスが発生します。

行動を促すフレーズのボタンをどこに配置すればよいですか?

多くの場合、1 通のメールに複数の行動を促すフレーズが含まれています。 ただし、サブの CTA がメインの CTA から注意をそらさないようにすることが重要です。 行動を促すフレーズのボタンは、常に最上部に配置する必要はありませんが、顧客がコンバージョンを望んでいるまさにその瞬間に表示される必要があります。

メインの CTA は「スクロールせずに見える位置」に配置することをお勧めしますが、一番下にも配置する必要があります。 これは、モバイル ユーザーはデスクトップ ユーザーよりもメールの一番下までスクロールする可能性が高いためです。 これらのユーザーはエンゲージメントが高い可能性も高いため、CTA を探すのに苦労しないでください。

おまけの事実:

メールにお客様の声、レビュー、または評価を含める場合は、近くに CTA があることを確認してください。 このような顧客証明は、潜在的なリードを目標到達プロセスに押し込む際に強力なツールになる可能性があります。

一貫性を保つ!

多くの異なる色を使用して読者を混乱させたくありません。 青色のテキストが強調表示されたときにハイパーリンクを識別するように私たちの心が訓練されているのと同じように、購読者は、プライマリおよびセカンダリの行動喚起ボタンを認識するように条件付けられます.

本当に優れたメール デザインを作成するためのヒントをさらにお探しですか? メールデザインについて知っておくべきすべてのガイドをご覧ください(例付き)