オープンソースのトランザクションEメールテンプレート

公開: 2017-11-29

新しいSendGridアカウントを設定する場合、アカウントの一連のメールテンプレートを作成することは、完了する必要のある最も重要なタスクの1つです。アプリまたはサービス用のAPIを介してメールを送信することを計画している場合は、おそらくいくつかの異なるタイプのメールテンプレートが必要になります。最も一般的なもののいくつかは、パスワードのリセット、電子メールの確認、および領収書です。

ウェブ上には既成のメールテンプレートが豊富に用意されていますが、ブランドに合わせて簡単にカスタマイズできるセットを見つけるのは必ずしも簡単ではありません。

一般的な電子メールクライアントでテンプレートを徹底的にテストすることも重要です。このプロセスには時間がかかり、SendGridアカウントを設定してメールの送信を開始するプロセスが遅くなる可能性があります。

SendGridのチームは、ユーザーがこれらの一般的なユースケースをカバーするために活用できるメールテンプレートのオープンソースセットを作成することで、お客様に価値を提供できることに気付きました。テンプレートは簡単にカスタマイズできるだけでなく、すぐに送信できます。

「貼り付け」と呼ばれるテンプレートのセットは、5つのユースケースをカバーしています。

パスワードのリセット
確認メール
ウェルカムレター
領収書
ダイジェスト（毎日、毎週、または毎月）

GitHubでテンプレートをダウンロードします

貼り付けテンプレートの使用を開始するには、GitHubにアクセスしてリポジトリのクローンを作成するか、貼り付けテンプレートフォルダーをダウンロードします。これらのテンプレートは、他のSendGridユーザーが最新のHacktoberfest中に貢献した電子メールテンプレートのオープンソースリポジトリに存在することにも言及する価値があります。

貼り付けテンプレートのカスタマイズ

貼り付けテンプレートのローカルコピーを入手したら、好みのコードエディターでそれらを開きます（VSCodeまたはAtomをお勧めします。どちらも無料です）。

他の多くのテンプレートにある再利用可能なコンポーネントのほとんどが含まれているbase.htmlから始めることをお勧めします。これらのテンプレートはすべてHTMLの共通の構造を共有しており、ドキュメントにはいくつかの基本スタイルがありますが、スタイルの大部分はインラインで見つかります。

HTMLをくまなく調べると、ブロックの開始位置と終了位置を示すHTMLコメントがたくさんあることに気付くでしょう。これらは、テンプレートをスキャンして変更を開始するときに役立つ重要なメモです。

また、背景色、タイポグラフィ、間隔などのHTML要素のスタイルにも気付くでしょう。これらのテンプレートのルックアンドフィールをどのように変更するかを理解するために、それらを試してみることをお勧めします。

テンプレートにロゴを追加します

最初にやりたいことの1つは、[テンプレートの貼り付け]ロゴを独自のロゴに置き換えることです。開始場所を示すHTMLコメントを検索すると、ロゴブロックをすばやく見つけることができます。

このブロック内で、アンカータグ（<a> ）を見つけて、HREFを自分のURLに変更する必要があります。テンプレートは、デフォルトでSendGridのホームページにリンクされている必要があります。

URLを調整したら、Pasteロゴを独自のロゴに置き換えましょう。 WebサーバーやCDNなど、簡単にリンクできる場所にロゴを保存することをお勧めします。ロゴのsrcを置き換えたら、幅/高さが正しくなるようにインラインスタイルを調整します。これは、ロゴのアスペクト比によって異なります。デフォルトでは、貼り付けロゴは48ピクセルの正方形であるため、幅のスタイルを48ピクセルに設定しました。

例：

この例では、ロゴの貼り付けURLがいくつかの幅スタイルとともに参照され、希望のサイズである48pxに設定されています。独自のロゴのこれらの値を調整して、シャープに見えるようにします。

背景色のカスタマイズ

上記のように、さまざまなブロックに背景色を設定して、貼り付けテンプレートのデフォルトのスタイル（グレーと白）を確立します。ブランドの色に合わせて、これを簡単に変更できます（そうする必要があります）。

これらのスタイル間を移動する最も簡単な方法は、エディターを使用してインラインスタイル、bgcolor、および背景色を検索することです。これらのプロパティの値は、16進値（例：＃000000）または色名（例：黒）に置き換えることができます。これらの変更を処理するとき、好みのブラウザでテンプレートの1つを開き、変更を加えたときに更新すると、簡単に状況を把握できます。

例：

この例では、bodyタグは明るい灰色の背景色でスタイル設定されています。テンプレート内のこの色の値やその他の値は、ブランドに合わせてカスタマイズする必要があります。

カスタマイズボタン

ボタンは、電子メールテンプレートで最も一般的なインターフェイスコンポーネントの1つです。これらを行動の呼びかけとして使用し、メールアドレスの確認など、ユーザーに実行してほしい最も重要なアクションを強調します。

デフォルトでは、貼り付けのボタンは、角を丸めるための微妙な境界線半径を持つ青いブロックとしてスタイル設定されています。ブランドに合わせてこれらのボタンをカスタマイズすることは、テンプレートの背景色にすでに加えた変更と似ています。追加したHTMLコメントを使用してブロックを検索します。

ボタンの周りにブロックを作成するために白い背景（#ffffff）が適用されたテーブルセルがいくつかありますが、以下のスタイルを持つテーブルセルを見つける必要があります。

例：

この例では、<td>には、ボタンの色を設定するために使用されるbgcolorと、角を微妙に丸めるためのborder-radiusがあります。これらのスタイルを試して、ブランドに一致するボタンのユニークな外観を実現してください。

ボタンの2番目の部分は、上記のテーブルセル内のアンカー（<a>）です。

このアンカーは、クリックされたときにボタンが移動するURLだけでなく、ラベルのテキストスタイルも制御します。スタイルを調整して、好みやブランドに一致するものに基づいてラベルを調整できます。

タイポグラフィのカスタマイズ

デフォルトでは、貼り付けテンプレートは、GoogleFontsを介してWebフォントのSourceSansProに読み込まれます。 Googleのコレクションとは異なるWebフォントを使用することも、最近のほとんどのコンピューター（Arial、Georgia、Timesなど）にある標準のフォントセットを使用することもできます。

別のWebフォントを使用することを計画している場合は、電子メール開発のヒントとコツの投稿で役立つヒントを確認してください。フォントファミリーを参照するインラインスタイルのHTMLをくまなく調べ、好みに応じて調整してください。

例：

この例では、<td>にはSource Sans Proを使用するように設定されたフォントファミリスタイルがあり、Webフォントがロードされない場合は、より標準的なフォントにフォールバックします。

終わりの考え

これらのポインターが、これらのテンプレートをブランドに合わせてカスタマイズし、SendGridのプラットフォームで稼働させるのに役立つことを願っています。将来的には、メールテンプレートリポジトリをより多くのテンプレートで拡張するだけでなく、カスタマイズプロセスをはるかに高速化するビルドツールも拡張したいと考えています。

途中で問題が発生した場合は、GitHubリポジトリに対して問題を送信してください。貢献したい場合は、プルリクエストを送信してください。実験するテンプレートをもっと探していますか？ SendGridの無料のレスポンシブHTMLメールテンプレートをお試しください。