SendGridのオープンソースメールテンプレート「Paste」について
- 2018年3月22日
- by SendGrid
- Category: ベストプラクティス 技術ネタ
この記事は Open Source Transactional Email Templates の抄訳です。
SendGridアカウントを取得した後、実際にメールを送信する前にはいくつか準備作業が必要ですが、その中でメールテンプレートの作成は特に重要です。アプリケーションやWebサービスから送信する場合は、パスワードリセットや登録メールアドレスの確認、支払いに関する通知など、複数のメールテンプレートが必要で、それらの表示テストも必要になるでしょう。
メールテンプレートの作成やテストには時間がかかるため、準備が長引くとメール送信の開始まで遅れてしまいます。
Web上には数多くのメールテンプレートが存在しますが、自分達のブランドに合わせてカスタマイズするのはとても大変な作業です。
こうした問題を解決するために、SendGridチームではよくあるユースケースをカバーしたオープンソースのメールテンプレート「Paste」を作成しました。このテンプレートはカスタマイズが簡単で、すぐにセットアップしてメールを送信できます。
Pasteテンプレートは次の5種類を用意しました。
- パスワードリセット
- メールアドレスの確認
- ウェルカムメール
- 見積書や請求書などの明細書
- ダイジェストメール（日、週、月ごと）
GitHubからテンプレートをダウンロードする
Pasteテンプレートは、GitHubでリポジトリをクローンするか、「paste-templates」フォルダの各HTMLファイルをダウンロードしてください。
Pasteテンプレートはオープンソースとしてリポジトリを公開しており、去年開催したHacktoberfestではSendGridを利用しているユーザの方々がソースコード改善に協力してくれました。
Pasteテンプレートをカスタマイズする
Pasteテンプレートをローカルの環境にコピーして、お好みのエディタでHTMLファイルを開いてください。（個人的にはVSCodeまたはAtomをお勧めします。どちらもフリーで使えます。）
テンプレートのカスタマイズは下図のbase.htmlから始めることをお勧めします。その理由は、base.htmlで定義しているパーツの多くを他のPasteテンプレートが再利用しているためです。各テンプレートのHTML構造は共通していて、基本となるいくつかのstyleが定義されています。その他、多くのstyleがインラインで定義されています。
HTML内では、startとendのコメントに挟まれたブロックがたくさん見つかります。テンプレートを編集する人は、このコメントによってテンプレート全体の構造を把握しやすくなり、すぐに変更作業へ取り掛かることができます。
HTMLの各要素には背景色やフォント、スペースなどに関するstyleが定義されています。これからテンプレートを構成する主なパーツごとに具体的なカスタマイズ方法を紹介しますので、実際に設定内容を変更しながら、見た目がどのように変わるのか確認してみてください。
ロゴ
はじめにロゴを置き換えましょう。ロゴを定義しているブロックはHTMLコメントの中から「<!–– start logo ––>」を検索すると見つかります。
ブロック内にあるアンカー(<a>タグ)を見つけたら、href属性の値を任意のURLへ変更してください。テンプレートではデフォルトでSendGridのWebサイトのリンクURL( https://sendgrid.com )が記述されています。
URLを変更したら、次にロゴ画像を変更します。画像ファイルはWebサーバやCDN(Content Delivery Network)上に置いて、簡単に参照できるようにするのがお勧めです。タグのsrc属性で指定された画像のURLを変更したら、次にインラインで記述された横幅と縦幅のstyleを画像に合わせて設定します。この設定はロゴ画像のアスペクト比によって異なります。デフォルトのPasteロゴは縦横48pxの正方形なので、styleではwidthで48pxを設定しています。
例:
<img src="./img/paste-logo-light@2x.png" alt="Logo" border="0" width="48" style="display: block; width: 48px; max-width: 48px; min-width: 48px;">
上記の例では、ロゴ画像の幅ができるだけ48pxとなるように、複数のstyle定義を並べています。皆さんが利用するロゴ画像に合わせて、数値をうまく調整してください。
背景色
背景色は様々なブロックで定義されていて、デフォルトの背景色は灰色と白色の2色で構成されています。色の値は簡単に変えられるので、皆さんのブランドカラーに合わせて変更してください。
変更箇所を探す上で一番簡単なのは、styleのインラインで記述されたbgcolorやbackground-colorをエディタで検索する方法です。色の値は16進数のカラーコード(たとえば #000000)またはカラーネーム(たとえば blackなど)で変更できます。変更する際は、テンプレートのHTMLファイルをブラウザで開き、色を変更した後にリロードするだけで表示を確認できます。
例:
<body style="background-color: #e9ecef;">
上記の例では背景色として薄い灰色を指定しています。
ボタン
ボタンはメールテンプレートの中で最も一般的なインタフェースの1つです。パスワードリセットのメールにある「パスワードを変更する」ボタンのように、ユーザに実行してほしい大事なアクションを強調する「Call To Action」ボタンとしてよく利用されます。
Pasteテンプレートのボタンは角に少し丸みのある青色のデザインとなっています。先ほどの背景色と同じように、ボタンもブランドに合わせてカスタマイズしましょう。ボタンの定義は「<!–– start button ––>」コメントを探すと見つかります。
ボタン周辺は背景色を白色(#ffffff)にするため、いくつかのテーブルセルが定義されていますが、その中で次のような定義が見つかるはずです。
例:
<td align="center" bgcolor="#1a82e2" style="border-radius: 6px;">
上記の例では<td>タグのbgcolor属性でボタンの色を設定し、styleのborder-radiusでボタンの丸みを定義しています。
もう1つの重要な要素がアンカー(<a>タグ)です。これは上述の<td>タグの中に入っています。
アンカーはボタンがクリックされたときに開くURLを指定する他、ボタンのラベルとして表示されるテキストの設定も行っています。
フォント
PasteテンプレートはGoogle FontsからSource Sans ProというWebフォントを読み込みます。Google Fontsにある他の種類のWebフォントを選ぶこともできますし、ArialやGeorgia、Timesなどのように最近のパソコンであれば標準的に入っているフォントを使うこともできます。
もし他のWebフォントを利用するのであれば、以前に書いたブログ「メールのテンプレートを開発する中で見つけた問題と解決方法」を是非チェックしてください。Webフォントを使う上でのポイントについて書いています。
Pasteテンプレートでは、フォントは次のようなstyleで定義されています。
例:
<td style="font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;">
この例ではWebフォントのSource Sans Proが読み込まれなかった場合、HelveticaやArialなどの標準的なフォントが使われるようにしています。
さいごに
今回ご紹介したテンプレートと各カスタマイズ方法が、皆さんのメール作成に少しでもお役に立てば幸いです。将来的にはPasteテンプレートの種類をもっと増やして、さらに早くカスタマイズできるようにしていきたいと思います。
テンプレートに何か不具合があった場合は、GitHubにissueを登録してください。また、もしコードの改善に貢献してくださる方がいれば、是非プルリクエストを送ってください。
