SendGrid Dynamic TemplateでHTMLメールをノーコードで高速作成し、配信してみた
本ブログはClassmethod SaaSで加速するゲーム開発 Advent Calendar 2025の8日目のブログとなります。
はじめに
SendGrid Dynamic Templateを使う理由、それはシンプルに「HTMLメールの実装工数を大幅に削減できる」からです。
HTMLを一からコーディングする手間から解放され、洗練されたレイアウトで迅速に配信を開始できるのが最大のメリットです。
今回は実際にDynamic Templateを使って、どれだけ簡単にメール配信ができるか試してみようと思います。
なお、本記事では手順を詳しく解説していますが、見出しに**（任意）**とついている箇所はスキップ可能です。
まずは最小限の手順でメール送信まで試してみたいという方は、必須のステップだけ進めてみてください。
前提条件
以下の2点は事前に準備が必要です。
- メール送信権限を持つSendGrid API Keyの用意（参考ブログ：https://dev.classmethod.jp/articles/firebase-authentication-sendgrid-smtp/）
- Domain認証の完了（参考ブログ：https://dev.classmethod.jp/articles/sendgrid-domain-authentication-and-singer-sender-verification/）
手順
ダッシュボードでのDynamic Templateの作成
まずはSendGridのコンソールでテンプレートを作成していきます。
- Dynamic Templates ページにアクセスして、Create a Dynamic Template をクリックします。
- 作成したテンプレートの Add version をクリックして編集画面へ進みます。
- テンプレートを選択する画面になるので、好みのものを選びましょう。
- エディタのモード選択では Design Editor を選択します。
ここからは直感的に操作できるはずです。
基本的に画面上のコンポーネントをクリックすれば、対応する編集パネルが表示されるので、テキストやスタイルを調整すればOKです。
画像を追加してみる（任意）
画像の追加手順はこんな感じです。
- 画像コンポーネントを選択して、左側のパネルにある Edit ボタンを押して画像をアップロード。
- insert image を忘れずにクリック。
- 画像が正しく参照されるように、Image URLをLink URLにもコピーしておくと安心です。
編集が終わったらテスト送信してみる
すべての編集パネルを閉じると、テストパネルに戻ってきます。
- From Address に認証済みドメインのメールアドレスを入力します。
- Email Addresses にテスト受信用の自分のアドレスを入力します。
- Send Test Message をクリックします。
数秒待てば、テンプレートが適用されたメールが届くはずです。
さらに詳細なテストを行いたい場合（任意）
create test から以下のテストも実行できます（選択したオプションによってCreditを消費するので注意）。
- Inbox test : レンダリングの確認
- Spam test : スパム判定されないかの初期チェック
- Links test: リンク切れなどのバリデーション
テストで問題なければ、編集パネルの最初に戻ってバージョン名を付けます（今回は v0.0.1 としました）。
最後に save して完了です。
メインダッシュボードの Dynamic Templates ページに戻れば、保存した Dynamic Template がバージョン付きで表示されているはずです。
Email APIでDynamic Templateでメール送信してみる（任意）
もちろん、SendGrid SDKを使えばコードから Dynamic Template を使ってメール送信も可能です。
Node.js SDKを使った実装例は以下の通りです。
// send-dynamic-template.js
require('dotenv').config();
const sgMail = require('@sendgrid/mail');
sgMail.setApiKey(process.env.SENDGRID_API_KEY); // store securely
async function send() {
await sgMail.send({
to: process.env.TO_EMAIL, // e.g., recipient@example.com
from: process.env.FROM_EMAIL, // e.g., no-reply@example.com
templateId: process.env.TEMPLATE_ID, // your dynamic template ID
dynamicTemplateData: {
first_name: 'Ada',
preview_text: 'Hello from a dynamic template!',
sent_at: new Date().toISOString(),
},
});
}
send().catch(console.error);
実行時は環境変数をセットして実行しましょう（IDやKeyはハードコードしないこと）。
SENDGRID_API_KEY=xxx \
TO_EMAIL=recipient@example.com \
FROM_EMAIL=sender@example.com \
TEMPLATE_ID=d-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx \
node send-dynamic-template.js
dynamicTemplateData に渡したオブジェクトが、テンプレート内の変数（Handlebars syntax）に展開される仕組みになっています。
実行結果：
Summary
SendGrid Dynamic Templateを使えば、デザインとロジックをきれいに分離しつつ、高品質なメールを素早く配信できます。
Dashboardでの操作感もGUIでわかりやすいし、SDK連携もシンプルです。
開発リソースを節約しつつユーザー体験を上げたいなら、間違いなく有力な選択肢になるはずです。
