Postcardsで作成したHTMLメールのテンプレートをTwilio SendGridに連携する方法

メール配信サービスTwilio SendGridを利用されている中で、
「SendGridにも標準テンプレートはあるけど、もっとデザインの種類が欲しい」
「HTMLは書けるけど、レスポンシブ対応のメールをイチから作るのは手間がかかる」
といったことはありませんか？

そのお悩み、もしかしたら「Postcards」というサービスを使うことで解決できるかもしれません。

Postcardsとは

メールデザインの作成ツールです。見た目の整ったメールを簡単に作成でき、デザインやコーディングにかかる時間を節約できます。

レスポンシブ対応
メールの閲覧環境の違いによる「レイアウト崩れ」のリスクを低減できます。
ノーコードでプロ級のデザイン
100種類以上のコンポーネントが用意されており、それらをドラッグ＆ドロップで組み合わせるだけで、デザイナー不在でもブランドイメージに合ったメールを作成できます。
制作時間の短縮
ゼロからのコーディングに比べ、平均7.2時間も制作時間を削減できます。

本記事では、Postcardsで作成したメールテンプレートを、SendGridにシームレスに連携して配信するまでの手順をご紹介します。

PostcardsからSendGridへの連携手順

Postcardsのアカウントを作成

Postcardsにアクセスし、「OPEN EDITOR」をクリックします。
Postcardsのアカウントを作成

「Signup to Save」をクリックし、画面に従ってPostcardsのアカウントを作成してください。

Postcardsでテンプレートを作成

PostcardsのTemplatesから、好みのテンプレートを探してクリックします。
テンプレートを探す

テキストの変更、色やサイズの調整、画像の差し替え、リンクの追加等を行います。各要素はドラッグ＆ドロップで並び替えることもできます。要素を追加するときは左上の「＋」をクリックします。
要素の変更や並び替え

右側のメニューでPC版とスマートフォン版を切り替えることができます。フォントサイズや余白はPC版とスマートフォン版でそれぞれ異なるものを設定できるので、どちらの環境でもきれいに表示されるように調整しておきましょう。
PCとスマートフォンでの表示確認

作成したテンプレートをSendGridへ連携

SendGridにログインし、「Settings > API Keys」でAPIキーを作成してください。「API Key Name」は何でも構いません。権限は「Custom Access」を選択し、「Design Library」に「Full Access」を与えてください。最後に「Create & View」をクリックします。

表示されたAPIキーをクリックして、値をクリップボードにコピーしておいてください。
APIキーをコピー

Postcardsの編集画面に戻り、「Export > Send to Email Platform」をクリックします。
連携方法

「SendGrid」を選択してください。
SendGridを選択

先ほどコピーしておいたSendGridのAPIキーを「Insert your API Key」に貼り付け、「Connect」をクリックします。「Integration Name」は空欄で構いません。
APIキーを貼り付けて接続

テンプレートがSendGridにインポートされました。「Done」をクリックしてポップアップを閉じてください。
SendGridにインポート完了

SendGridの「Design Library」にテンプレートが追加されていることを確認してください。このテンプレートはDynamic Templateやマーケティングキャンペーン機能に取り込んでから編集するので、ここでは確認や編集をする必要はありません。
SendGridのDesign Libraryにテンプレートが追加されている

Dynamic Templateでの使い方

Web APIやSMTPでメールを送信する場合は、Dynamic Templateを使います。
※Dynamic Templateの基本的な使い方についてはチュートリアルをご参照ください。

Dynamic Templateを作成し、「Add Version」して、先ほどPostcardsから連携したテンプレートを選択します。
PostcardsのテンプレートはDesign Editorには対応していないため、「Code Editor」を選択します。
置換タグを使う場合はタグに誤りがないかチェックしてください。Version Nameや件名なども設定します。
テキストパートを確認し、必要に応じて編集します。
最後にテストメールを送信して、実機での表示も確認しておきましょう。

マーケティングキャンペーン機能での使い方

Design Libraryのテンプレートはマーケティングキャンペーン機能からは直接参照できないので、
①Design Libraryのテンプレートをエクスポート
②マーケティングキャンペーン機能にインポート
の二段階が必要になります。
※マーケティングキャンペーン機能の基本的な使い方についてはチュートリアルをご参照ください。

Design Libraryのテンプレートを「Edit」で開きます。
左側のメニューの「Build」タブから「Export」をクリックし、htmlファイルをダウンロードします。
「Marketing > Campaigns」から新しくキャンペーンを作成し、「BLANK TEMPLATE」を選択します。
PostcardsのテンプレートはDesign Editorには対応していないため、コードエディタを選択します。
コード入力欄の内容を、2.でダウンロードしたhtmlファイルの内容で置き換えます。配信停止リンク用のタグや置換タグに誤りがないかチェックしてください。件名や差出人などの必須項目も設定します。
テキストパートを確認し、必要に応じて編集します。
最後にテストメールを送信して、実機での表示も確認しておきましょう。