メールをインタラクティブに

この記事は How to Add Interactive Elements to Your Emails の抄訳です。

インタラクティブなメールとは？

受信箱に届くメールの多くは表面的だと言えるでしょう。メールの構成要素（文字、画像、あるいはGIF）はインタラクティブではないからです。マウスを移動させてもボタンの色が変わったり画像が別のものに変わったりはしません ー 少なくとも、みなさんがメールにインタラクティブな要素を取り入れない限りは。

インタラクティブな要素には受信者のアクションが必要となります。具体的には、CTAボタンの上にカーソルを合わせることや、アンケートの選択肢をクリックすることです。

インタラクティブな要素は必要不可欠ではないものの、確実に受信者の目を引くので、キャンペーンの印象を変えること請け合いです。受信者からよりよい反応を引き出したいなら、この記事に挙げる例を取り入れてみてください。

メールサービスプロバイダ（ESP）が対応しているか

初めに、全てのメールプロバイダがインタラクティブなメールに対応しているわけではないことは留意しましょう。Appleの受信箱ではほとんどの、Gmailの受信箱ではいくつかの機能が動きますが、Outlookやモバイル端末にはほぼ対応していません。

インタラクティブなメールをデザインするならこのことを念頭に置いてください。Outlookを使っていたりモバイル端末で見たりする受信者が多いなら、別の観点からメールを改善していく方がよいでしょう。あるいは、インタラクティブな要素を表示できないメールクライアント用に、代わりとなる画像やデザインを用意することが最低限必要です。

どんな要素を取り入れるにせよ、送信前に複数のメールクライアントで見え方をチェックすることを忘れないようにしましょう。表示の不具合やデザイン上の問題があっても事前に修正することができます。

インタラクティブな要素を追加するには

インタラクティブな要素にもいろいろなバリエーションがあるので、私たちのおすすめをいくつか紹介します。コードの例も載せますので、皆さんご自身のメールで試してみてください。

1. マウスオンで背景色を変える

最もよく見かけるのは、ボタンにマウスオンすると色が変わるエフェクトでしょう。些細ではありますが、CTAボタンに着目してもらえます。皆さんのウェブサイトで使っている色と同じ色を使って統一感を持たせるとよいでしょう。

下は、ボタンの色の変更を効果的に使っている例です。

やり方
この記事で紹介するインタラクティブな要素のほとんどは、CSSにクラスを追加することが必要です。インタラクティブにしたいセクションの<a>タグのなかにそのクラスを含めてください。以下はSendGridのコードエディタのテンプレートからとった例です。

かなりのボリュームのコードだと思うかもしれません。しかし、ほとんどの部分はマウスオン前後のデザインの調整に費やされています。マウスオンの機能を有効化するには、CSSプロパティに整合するクラスを指定する必要があります（12行目）。

CSS:

.background-color:hover {background-color: #000000; !important }

HTML:

<span><a href="https://sendgrid.com/blog/" 
    class="#" 
    style="color:#FFFFFF; background-color:#993300;border:1px solid #993300;
    border-radius:0px;border-width:1px;color:#ffffff;display:inline-block;
    font-family:verdana,geneva,sans-serif;font-size:16px;font-weight:normal;
    letter-spacing:1px;line-height:30px;padding:12px 20px 12px 20px;
    text-align:center;text-decoration:none">

   <span style="line-height: 21px;border-radius:0px;border-width:1px; color:#ffffff;
   display:inline-block; font-family:verdana,geneva,sans-serif;font-size:16px;
   font-weight:normal;letter-spacing:1px;line-height:30px;padding:12px 20px 12px 20px;
   text-align:center;text-decoration:none" class="background-color">
   Inspiration this way</span>
</a></span>

2. マウスオンでテキスト部分を変える

同様のエフェクトとして、マウスオン時にテキスト部分を変えることもできます。テキストの色を変えたり、ボールド体にしたり、下線を引いたりと、デザインの変更が可能です。

以下の例では、テキストの色を白から黒に変えています。

やり方
背景色変更との主な違いは、CSSと、HTMLの中で参照しているCSSプロパティです。

CSS:

.txt-color:hover { color: #000000; !important; }

HTML:

<span><a href="https://sendgrid.com/blog/" 
    class="#" 
    style="color:#FFFFFF; background-color:#993300;border:1px solid #993300;
    border-radius:0px;border-width:1px;color:#ffffff;display:inline-block;
    font-family:verdana,geneva,sans-serif;font-size:16px;font-weight:normal;
    letter-spacing:1px;line-height:30px;padding:12px 20px 12px 20px;
    text-align:center;text-decoration:none">

<span style="line-height: 21px;
    border-radius:1px;border-width:1px; letter-spacing:1px;line-height:30px; 
    padding:20px 20px 20px 20px; text-align:center;" class="txt-color">
Inspiration this way</span></a></span>

次の例では、ボールド体にしてさらに下線を引いています。

やり方
こちらも、違いはCSSとHTML中で参照しているCSSプロパティです。

CSS:

.txt:hover {
      text-decoration: underline;
      font-weight: bold;
      }

HTML:

<span><a href="https://sendgrid.com/blog/" 
    class="#" 
    style="color:#FFFFFF; background-color:#993300;border:1px solid #993300;
    border-radius:0px;border-width:1px;color:#ffffff;display:inline-block;
    font-family:verdana,geneva,sans-serif;font-size:16px;font-weight:normal;
    letter-spacing:1px;line-height:30px;padding:12px 20px 12px 20px;
    text-align:center;text-decoration:none">

<span style="line-height: 21px;
    border-radius:1px;border-width:1px; letter-spacing:1px;line-height:30px; 
    padding:20px 20px 20px 20px; text-align:center;" class="txt">
Inspiration this way</span></a></span>

３. マウスオン時に画像を変える

メールの中で、最も受信者の目に触れるのはファーストビュー（スクロールせずに見えるコンテンツ）です。

メール画面のスペースは限られているし、受信者がメールを見る時間もわずかであることを考えると、表示する画像を入れ替えてより多くの情報を提供できればスマートでしょう。

例えばセールを宣伝する場合、複数の画像を表示することでよりたくさんの商品を紹介することができます。あるいは、商品画像の後にその説明を表示させ、ウェブサイトに移動することなく詳細な情報を伝えることもできます。

下の例をご覧ください。

やり方
HTMLの中で画像を重ねることで、画像の入れ替えを実現します。最初はbackgroundの画像がテーブルセルに表示され、カーソルを移動するともう一つの画像が表示されるようにしています。

CSS:

.img-swap:hover img { max-height: 0px !important; height:0px !important;}

HTML:

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="600px" height="400px"
background="https://sendgrid.com/wp-content/uploads/2020/04/iStock-940915736.jpg"
bgcolor="#FFFFFF">
<a class="img-swap" style="display:block;width:600px;height:400px;">
  <img style="display:block;" src="https://s3.amazonaws.com/static.sendgrid.com/64820827-cc8e-409e-9aa3-caf079e87e1e.jpg" width="600" height="400" border="0"></a></td>
</tr>
</table>

４. 目次の表示

たくさんの項目があるニュースレターなどには、目次があると便利でしょう。リンクを押すとページ内の特定の項目にジャンプするウェブページは見覚えがあると思います。それと同様に、メール内にアンカータグを配置すれば、メールをスクロールすることなく興味のある箇所を見ることができます。

目次の表示はほとんどのデスクトップのメールプロバイダで対応していますが、一方でほとんどのモバイルアプリは非対応です。みなさんの受信者の多くがデスクトップでメールを見ることがわかっているなら、試してみてください！

こちらの例では、SendGridブログのダイジェストをお知らせするメールに目次を追加し、メール内の各記事の説明にリンクを張っています。受信者は興味を持った特定の記事をクリックすることができます。


やり方
今回はCSSの変更は必要ありません！一番目のコードはメールの文頭に載せる目次のリストで、二番目のコードはメール本文中の文章にリンクを張る例です。

HTML:

<h2><a name="TOC">This week's articles:</a></h2>
 <ol>	
    <li><a href="#Article1">Summer Email Inspiration</a></li>	
    <li><a href="#Article2">Creating Inclusive Emails</a></li>	
    <li><a href="#Article3">How to Create the Perfect Welcome Email</a></li>
</ol>

<h2><a name="Article1">Soak Up This Email Inspiration</a></h2>

5. アンケート

メール内にアンケートを配置することもできます。受信者は別のページに移動することなくその場でアンケートに答えることができます。受信者の負担をなるべく減らし、より多くの回答を獲得しましょう。

みなさんのサービスや商品についてフィードバックをもらったり、顧客の好き嫌いや住んでいる場所などの情報をもらってパーソナライズに活用したりしましょう。ウェルカムメールや確認メールは受信者をより深く知るアンケートが可能な格好の例です。

いくつか例を紹介します。

SendGridから送られる下のメールでは、アンケート評価のボタンにマウスオンすると色が変わるようになっています。これにより、受信者はボタンをクリックするとアンケートに回答できることがわかります。受信者が数字をクリックすると続きのアンケート用のページに飛び、評価の理由を聞く仕組みです。

やり方
上のSendGridの方法は長いコードが必要なので、ここではGoogleフォームを用いたシンプルな例を紹介します。

1. Googleフォームでアンケートを作成する
2. 「送信」をクリックする
3. 「送信先」に自分のメールアドレスを入力する
4. 「フォームをメールに含める」にチェックを入れる
5. 「送信」をクリックする
6. フォーム内で右クリックして「検証」でコードを表示する。
7. <table="center align"から始まるコードをコピーアンドペーストする。
8. アンケートがうまくいくかテストする

下の例では、Googleフォームをメール内に配置することができています。受信者にウェルカムメールを送ると同時に好みに関する簡単なアンケートをとっています。アンケートの背景色を変えることで元々のメールテンプレートに違和感なくフィットさせましょう。このメールはSendGridのメールテンプレートギャラリーから作成したものです。マーケティングメール・トランザクションメールのテンプレートを多く用意しているのでチェックしてみてください。

重要なのは、受信者を引き込むこと

マーケティングメールをデザインするときは、受信者にどのような価値を提供したいかを一番大事にしてください。

インタラクティブな要素を取り入れることによってウェブサイトやアプリと似たような体験をもたらすことができますが、使い道を間違ってはいけません。インタラクティブな要素のせいで本当に伝えたいメッセージが伝わらなくなるなら、無理に取り入れる必要はありません。

おわりに、インタラクティブなメールを効果的に使うためのチェックリストをまとめます。

1. どのメールクライアント（Gmail、Yahoo、AOL、Outlookなど）にメールを送っているのか把握しましょう。そもそもインタラクティブなメールを送る意味があるのか判断ができます。
2. 表示できないクライアント用のオプションを必ず用意しましょう。そうでないと、メールが貧弱なものになってしまいます。オプション（fallback）の準備方法については、Email on Acidのこちらの記事も参考にしてください。
3. メールを送信する前にテストして確認しましょう。LitmusやEmail on Acidなどのツールを使ってもいいでしょう。
4. 一度に複数のインタラクティブな要素を取り入れないようにしてください。盛り込みすぎると煩雑になりがちです。

インタラクティブな要素を取り入れることはメールマーケティングの戦略の一つに過ぎません。詳細なデータ、他のマーケティング戦略や受信者の興味を引くチャネルについては以下のページもご覧ください。

• メールマーケティングでエンゲージメントを高める重要なポイント
• メールのエンゲージメントを強化するための計測トレーニングプログラム(完全版)
• 2019 Email Benchmark and Engagement Report
• How Adding SMS to Your Email Program Can Keep Contacts Engaged