効果的なCTAを作成するための方法 – デザイン編

この記事は Email CTAs: 6 Design Tips To Make Sure Your CTAs Don’t Get Clipped の抄訳です。

これまでに、CTA（Call To Action）の大切な要素である『配置場所』『コピー』についてお話ししてきました。同様に、CTAの『デザイン』も大切です。
CTAを画像にするかテキストにするか、もしくはそれらを組み合わせるか、デザインの方法は何パターンかあります。どんなことに注意してデザインしたらいいのでしょうか？

CTAにテキストと画像を組み合わせたSendGridの例

CTAをデザインする際の注意点

ユーザの閲覧環境（使用しているデバイスやブラウザ）に注意しましょう。ブラウザでは特にGmailがやっかいです。Gmailは102KBを超えるサイズのメールは「クリップ」される（受信者に表示される内容が制限される）と言われています。この現象は、画像にリンクを貼った時、つまりCTAに画像を使用したときに起きやすくなります。従って、トランザクションメールよりもたくさんのCTAがあることが多いマーケティングメールは、クリップされる可能性が高くなってしまいます。

せっかく綺麗にデザインしたメールがクリップされてしまったら、残念ですよね。

注意点は他にもあります。
多くのマーケターは、画像が表示されない危険性を考慮してCTAを画像だけにすることを避け、テキストリンクもつけるようです。両方にリンクをつければ安心ですが、これは別の問題 ― メールサイズの増加 ― につながってしまいます。

メールを作成する際は、開封やクリックをトラッキングして結果をアナリティクス（分析）するところまで意識することが重要です。トラッキングのためにパラメータを追加するマーケターが多いのですが、全てのCTAにパラメータをつけるとリンクURLが長くなってしまい（特に、ご利用のESPがトラッキング用にリンクを追加している場合）、サイズが増加するので注意が必要です。

それでは、どうすればCTAを活用した効果的なメールマーケティングを行えるのでしょうか。
ユーザにCTAをクリックしてもらうにはどうしたらよいのでしょうか。

そこで、メールサイズを減らしつつCTAをデザインするためのTipsをまとめました。

重要なTips

全てのリンクを見直しましょう
本当に必要で、ユーザにしてほしい行動を簡潔に伝えることができるCTAのみにリンクをつけましょう。
Webサイトの全ての情報をメールに載せようとするのはやめましょう
限られたスペースを有効活用し、ユーザが興味のあるページに遷移できるようメールの最初にサイトナビゲーションをつけるなどの工夫をしましょう。
優秀なメールデザイナーとチームを組みましょう
本当はWebデザインをしたいのに、メールデザインをしている人はたくさんいます。そういった人はメールテンプレートなどの作成経験が少ないことがあります。デザイナーがいない場合、Movable InkやSendwithus、Stampliaなどのツールを使うことをおすすめします。
メールを送信する前には必ずテスト送信をしてデザインを確認しましょう
特にGmailではクリップされていないか注意が必要です。Email on AcidやLitmusなどは、様々なデバイスやメールクライアントでメールがどのように表示されるのかを確認できるので、おすすめです。
重要なポイントは先に示しましょう
クリックしてほしいCTAはメールの上部20%以内に配置しましょう。
トラッキングコードを追加するときは注意しましょう
追加すればするほど、メールサイズは増加してしまいます。