メールのテンプレート開発を効率化するワークフローの構築

この記事は Creating an Email Development Workflow の抄訳です。

みなさんご存知の通り、メールの開発はちょっとトリッキーで、Webサイトやアプリケーション開発のベストプラクティスに則っていないこともあります。特に、ビジネスで必要となる独自のテンプレートをまるごと作成する場合は、メールの開発は厄介な作業になりがちです。

そこでしっかりとしたワークフローを構築することが重要になります。開発プロセスを管理しやすい塊に分け、大きな問題が発生する前に気づくことで軌道修正できるようにしておきましょう。

始める前に考慮しておくこと

ワークフローの構築に入る前に、考慮して欲しいポイントがいくつかあります。これらを理解することで時間の節約になります。

ベストプラクティスを知る

メール開発のベストプラクティスを学んでおくことは非常に重要です。

すべてのメールクライアントは同じ挙動をするとは限りません。あるものはWebサイトやアプリケーションと同じようにHTMLやCSSを綺麗にレンダリングしますが、中にはコンテンツをレイアウトしたり、スタイルを追加するのが大変なクライアントもあります。

そのような状況は、新しいモバイル端末が出てきたり、メールの閲覧方法が変わったりすることで変化していきます。そこで、Litmusというメール開発者向けのサービスを利用するところから始めることを強くお勧めします。

それと同じくらい重要なのは、受信者を理解することです。メールを読むのに使われているモバイル端末がわかれば、既知の問題や注意点を事前にチェックしておくことができます。どのような端末が使われているかわからない場合は、メールクライアントマーケットのシェアを調査すると良いでしょう。
以上が開始前に考慮すべきことです。

ワークフローの構築方法

ここからは、いよいよ、どのようにワークフローを構築するかを解説します。以降で紹介する内容は、鉄則のようなルールではなく、ガイドラインとして参考にしつつ状況に応じて調整すると良いでしょう。

テンプレートを整理する

テンプレートを作成する前に、送信しようとしているメールの種類を整理しましょう。テンプレート間で共通する部分はないでしょうか？各テンプレート間で共通化できるヘッダやフッタのようなものが見つかると思います。もしかすると、ボタンやイメージのような再利用できる共通要素があるかもしれません。テンプレートを小さな部品に分解すると、構築とテストが1回で済むので効率的です。

一番基本的なテンプレートから始める

まずはシンプルに始めることが重要です。挑戦の意味で一番複雑なテンプレートから始めたくなるかもしれませんが、ちょっと待ってください。基本的なテンプレートから始めることで、土台となる部分のテストができます。その上により複雑な部分を構築しましょう。8時間もかけて作業をした後で、テンプレートが壊れていたのに気付くなんてまっぴらごめんですよね。

ヘッダ、フッタ、そしてシンプルなコンテンツと基本的なレイアウトをまとめてテストしましょう。このテンプレートがターゲットとなるすべてのメールクライアントで同じ表示になることを確認してください。この時点で何かが壊れていても、問題を解決するのは比較的簡単です。

既存のメールテンプレートを活用する

上のパラグラフでは、シンプルに始めることの重要性について話をしましたが、すべてをスクラッチから作る必要はありません。他の開発者が時間をかけて作成したテンプレートは有料、無料問わずたくさんあります。これらの中から目的に近いものを選択して用途に応じて修正すればいいのです。

SendGridでも、お客様向けにテンプレートを公開しており、無料でお試しいただけます。他にも、LitmusやHTML Emailなどが提供している素晴らしいテンプレートもあります。

繰り返し作業をツールでシンプルにする

同じことを何度も繰り返すのは非生産的で退屈です。次はこの課題に取り組みましょう。ヘッダやフッタをすべてのテンプレートにコピー＆ペーストするのは難しいことではありませんが、テンプレートの数が10を超えるような場合、すべてを更新するのはかなり大変な作業になります。また、DRY（Don’t Repeat Yourself＝同じことを繰り返さない）という開発者の間で有名なルールから外れます。

テンプレート言語を利用する

テンプレートをヘッダやフッタのように独立した部品に分解して更新するために、テンプレート言語を利用しましょう。テンプレート言語の種類はたくさんあるため、要件に合うものを見つけるには多少の調査が必要になりますが、HandlebarsやNunjucks、Pugなどは良い選択肢になるでしょう。各テンプレート言語には特徴があるので、採用する前によく調査するようにしてください。

ビルドツールで自動化する

ビルドツールは数多くの繰り返し作業を自動化するのに役立ちます。例えば、CSSを個別のファイルに分けて記述し、テンプレート内のスタイルに自動的にインラインで挿入する、といったことを助けてくれます。メールのテストをするのに、エディタとテストサービスの間を行ったり来たりするなんてことはやりたくないですよね？ビルドツールを設定して、シンプルなコマンドを実行するだけでこういった問題を回避できます。

さらに、単純にブラウザの表示を自動的に更新するだけであれば何もする必要はありません。GulpやGruntなどのビルドツールを使えば選択肢は無限に広がります。

テンプレートを探しているなら、Lee Munroe氏が開発しているGruntメールワークフローが参考になるでしょう。ビルドツールの使い方が知りたいのであれば、Zell Liew著のGulpを利用したワークフローの自動化についての書籍が良いでしょう。

数多くのモバイル端末でメールをテストする

あなたの手持ちのモバイル端末でのテスト結果だけに頼らないよう注意してください。テクノロジー企業で働く人の多くは、たいていプロ仕様のコンピュータやスマートフォンを所有しています。送信しようとしているメールテンプレートがChromeブラウザやMail for iOSで完璧に表示されたとしても不思議ではありません。受信者が使用しているモバイル端末を対象にしてテストをしましょう。

また、開発中にテストすることを忘れないでください。セクションやコンテンツが多くなると、壊れている箇所を把握するのが難しくなります。小さな変更を加えるたびにテンプレートをテストすることで、問題箇所の特定と修正が容易になります。

まとめ

メール開発のワークフローは、テンプレートの作成とメンテナンス手順を簡単にするためのものですが、テンプレート言語やビルドツールを利用する場合、ワークフローの構築に時間がかかることがあります。しかしながら、時間的な初期投資は既存テンプレートのメンテナンスや新規テンプレートを追加する際に報われるでしょう。

ロゴやソーシャルメディアのリンクなど、影響範囲の広い変更を行う場合、テンプレート言語やビルドツールを使うことで大幅に時間を節約できます。上述したように、すべてをあなた自身が作成する必要はありません。他の開発者が時間をかけて構築、テストしたものを使うようにしてください。こうすることで、必要なときに適切な解決策を見出すことができるでしょう。

メールテンプレートについては、こちらの記事も参考にしてみてください。