メールテンプレート刷新の裏側
- 2021年9月24日
- by 佐々木肯太
- Category: お知らせ
SendGridサポートチームの佐々木です。
このたび、弊社がお客様にお送りしているトランザクションメールについて、デザインを一新するとともに、Dynamic Transactional Templateを使ったものにリニューアルしました。
今回の記事では、メールテンプレート刷新にあたっての変更ポイントや注意点などをご紹介します。
テンプレート刷新のきっかけ
弊社では、ニュースレターやイベント案内といった一斉配信メールにはマーケティングキャンペーン機能を、プランや支払い方法の変更通知などの自動送信メール（トランザクションメール）には、テンプレート機能を使っています。
これまで、マーケティングメールではCTAボタンや細かなデザインの修正を定期的に行ってきましたが、トランザクションメールについては同じテンプレートを使い続けていました。
そうした中、新しくDynamic Transactional Template（通称：Dynamic Template）がリリースされ、従来のテンプレートは「Legacy Transactional Template」になりました。Dynamic TemplateはHandlebars記法に対応しており、柔軟なコンテンツ制御が可能で、例えば、以下のようなことができます。
- 本文やタイトルにタグを埋め込んでおき、送信時に指定したパラメータを差し込む
- 渡したリスト要素に応じて、繰り返し文面を表示する（イテレーション）
- if文のように、条件分岐で表示する内容を切り替える
Legacy機能の利用をやめ、今後の機能改善に追随するために、トランザクションメールで使っているテンプレートをすべてDynamic Templateへ移行することにしました。
主な変更ポイント
Dynamic Templateへの移行にあたって、メールの内容ごとにテンプレートを用意しました。その際、主に以下のようなデザイン変更を行っています。
・CTAの強調
下の画像は、会員登録完了時に送信されるメールです。受信者のクリックを促すために、目に留まりやすいCTAボタンを設定しました。
・テンプレート間でのメールフッタの統一と、SNSへのリンクのアイコン化
フッタ内では、視覚的に分かりやすいようにFacebookとTwitterのリンクをアイコンに変更しました。
また、フォントサイズや余白などの細かいレイアウト調整や、ダークモードへの対応も行いました。
移行にあたって注意したこと
トランザクションメールは、お客様の行動がトリガーとなるため送信タイミングはコントロールできず、またその内容は非常に重要です。そのため、表示の不具合や送信できないといったことが起きないよう十分な事前準備を行う必要がありました。
・デザイン面
受信側の端末やメールクライアントによって、表示のされ方が異なることがあります。普段送っているメールがどんな環境で閲覧されているかチェックし、それぞれの環境で正しくメールが表示されることを確かめましょう。SendGridから送信したメールがどのような環境で閲覧されているかは、ダッシュボードのStats > Mailbox Provider Comparison で確認できます。もし、モバイル環境での閲覧が多い場合は、レスポンシブメールにしておくことが望ましいでしょう。
今回は、Gmail、Outlook、Apple Mail、Thunderbirdに加え、モバイル（iPhone、Android）でもテストを実施しました。テンプレート編集画面のTEST YOUR MAIL > Send a Test Emailでテストメールを送信し、各受信環境で意図したとおりにコンテンツが表示されているかチェックしました。
複数の受信環境を想定したテストを効率的に行うためには、Litmusなどのテストツールを使うのも有効です。Litmusを使ったテストについてはこちらの記事をご覧ください。
・システム面
メールのコンテンツやデザインの表示だけでなく、連携しているWebページ上の操作に応じて正しくメール送信されることも重要です。以下の流れで結合テストを行いました。
- メール種別ごとに業務シナリオを洗い出してテストケースを作成する（テストは開発環境で実施）
- 差し込まれる値が変わるものは、複数パターンで確認する
- トランザクションメールが送信される各種操作（会員登録やプラン変更など）を、利用者画面から実際の手順どおりに行い、その内容が正しいことを確認する
また、上述の通り、トランザクションメールは非常に重要なメールであるため、リリース後に問題が発覚した場合の対応策も用意しました。Dynamic Templateを呼び出すアプリケーションをすぐに切り戻せるよう手順を洗い出した上でテストシナリオに組み込み、事前にリハーサルを行いました。
リリース後には、速やかに本番環境でも上記2と3のテストを実施し、正常に移行できたことを確認しました。
まとめ
この記事では、Dynamic Templateへ移行した際の変更内容や、注意した点についてご紹介しました。
従来のLegacy Templateでは、要素を繰り返し表示したり、条件分岐で表示内容を切り替えたりするといった制御はアプリ側で実装するほかありませんでした。Dynamic Templateを使えば、テンプレート側で簡単な実装を行うだけでこれらの制御が実現できます。ぜひ皆さんも導入してみてください。
今後も配信メールをこまめに改善し、より良いユーザ体験を提供していければと思います。
