10分間のメール：開発にかかる時間を節約する方法

コードを編集するように言われた最初のメールを見て、「何？ なぜ彼らはこれらすべてのテーブルを持っているのですか！？」 そして、それを「修正」して、私のAppleMailで機能するようにしました。 どういうわけか、その電子メールは私に電子メールとランディングページを構築するマーケティングチームの仕事を得ました。 これはおなじみのように聞こえるかもしれません。 ほとんどの人がEメールマーケティングに出くわしたようです。

自分もつまずいていることに気付いていないことの1つは、短時間で大量のメールを作成することです。 開発者として、これは困難な作業になる可能性があります。 適切なツールを使用することで、作成に1日かかるメールと10分かかるメールの違いが生じる可能性があります。

このブログ投稿では、長いメール作成プロセスからはるかに短いプロセスへの私の個人的な旅を共有します。 それがあなたにインスピレーションを与えてくれることを願っています！

開発者のツールボックスから時間節約ツールに足を浸す

最近、私は製薬（製薬）メールをコーディングしました。 Eメールマーケティングには、膨大な量の監視と大量の要件がある業界がいくつかあります。つまり、Eメールを非常にクリエイティブにコーディングする必要があります。 製薬会社はその1つです。 脚注を正確に並べたり、Outlookでフォントサイズを適切に調整したりするのに何時間費やしたかわかりません。

そのため、私は常に、開発時間を短縮して、代わりに小さな電子メールの癖により多くの時間を費やせるようにする製品や方法を探していました。

メールフレームワーク

私が最初に見つけたものの1つは、電子メールフレームワークでした。 特殊なマークアップ言語を使用してコードを大幅に削減し、コンパイルして通常のHTMLおよびCSSに変換してメールに戻すことができます。 はい、これはあなたが新しいコーディング言語を学ばなければならないことを意味します。 ただし、一度実行すると、数行を記述するだけでコードのブロック全体を取得できます。 そう。 簡単。 ただし、新しい言語を学ぶ時間がない場合は、これらの言語が適切でない可能性があります。

CSSインライナー

使用できるCSSインライン化ツールがいくつかあるので、スタイルをHTMLの先頭に一度記述して、後で本文全体にインライン化することができます。 一部の電子メールクライアントはhead要素のCSSスタイルを削除し、電子メールの外観を台無しにするため、これは重要です。 しかし、各段落やリンクなどにスタイル要素を挿入するために1行ずつ移動するのは、とても面倒でした。 勝利のための自動インライン化！

私のお気に入りのツールの1つは、HTMLファイルとSassファイルを電子メール対応のHTMLにコンパイルする電子メールを構築するためのGulpワークフローでした。 しかし、私が製薬会社に引っ越したとき、これらのツールはあまり便利ではなくなりました。 デザインのすべてのニュアンス（たとえば、1つの<p>タグが1つの色で、別の<p>タグが別の色である必要がある）により、<style>タグのCSSや自動インライン化に依存できなくなりました。 スタイルをインラインで手動でコーディングする必要がありました。

では、これらすべてに直面して何をすべきでしょうか？ 結局のところ、テンプレートをDropboxのフォルダーに配置しながら、コードスニペット（再利用可能な電子メールモジュール）をコードエディターに保存しました。 このシステムは開発時間を半分に短縮しました。 これは1人のメールチームにとっては素晴らしいことですが、チームを拡大し始めたとき、プロセスは崩壊しました。

テンプレートを使用してメールをより速く作成する方法を学ぶ より多くの、より多くの電子メール。 時間やリソースが足りません。 誰が関係できますか？ スケーラブルで再利用可能で信頼性の高いメールテンプレートを使用して、より生産的で効率的なメールワークフローを開始します。 ガイドを入手→

究極のメール開発効率：Litmus Builder

Litmus Builderが私の人生に入ったとき、私はとても幸せでした。 Builderは、すべてのスニペットとテンプレートの作成、使用、保存を処理するように設定されているため、チームのスケーリングが簡単になります。 また、それらのスニペットはすべて、チーム全体が使用できるようにBuilderから直接簡単にアクセスできるデザインライブラリの1つの場所に格納されています。

Litmusで作成したメールデザインシステムと組み合わせると、ほとんどのメールを約10分で作成できます。 また、新しい電子メールまたはカスタム電子メールの場合、基本的なフレームワークを同じ10分で実行できるため、カスタム電子メールのコーディングとテストに多くの時間を費やし、絶えず変化する電子メールクライアントを最新の状態に保つことができます。

私を信じないの？ 最近の製品アップデートメールの作成を示すビデオを作成しました。 Litmus Builderでスニペット、パーシャル、ビジュアルエディターを使用して作成するのに、メール全体が10分強かかりました。

自分でどれだけ速くかかったかを確認してください（そして、その過程でどの曲にジャムアウトしたかを調べてください）：

時間を節約するために自分自身を設定する方法も

「これはすべてうまくいっています」とあなたは言います。「しかし、これらすべてのスニペット、パーシャル、およびテンプレートをセットアップするのにどれくらいの時間がかかりましたか？」 お知らせできてうれしいです。それほど時間はかかりませんでした。 方法をお教えします。

主な構造

まず、各メールに使用する主要な構造を構築する必要があります。 これは、スニペットとパーシャルが追加される会社の標準CSSとスケルトンコードです。 おそらく、あなたはおそらくすでにどこかにこれのバージョンを持っています。

次に、それをテンプレートとして保存して、簡単にアクセスできるようにします。 その定型文またはスターターテンプレートは、テンプレートがまだ設定されていない、作成するカスタム電子メールの開始点です。

パーシャルとスニペット

次に、パーシャルとして作成するものとスニペットとして作成するものを決定します。

基本レベルでは、パーシャルとスニペットはどちらも再利用可能なコードのブロックであり、各メールを作成するときにボイラープレートに挿入します。 スニペットにはトリガーワードが必要ですが、パーシャルには必要ありませんが、基本的に同じ方法でLitmusに入力されます。

大きな違いは、パーシャルはコードで編集できないことです。 したがって、あまり変更しないブロックを特定し、それらを部分的に作成します。 ここリトマスでは、それらはヘッダーとフッターです。 それ以外はすべてスニペットです。

コードブロックの作成

コードブロックを分割する方法を決定したら、Litmusで新しいパーシャルまたはスニペットを作成することを選択して、コードブロックを作成できます。 コードを貼り付けて名前を付け、スニペットの場合はトリガーワードを付けるだけです。

スニペットを作成するには：

デザインライブラリからスニペットライブラリを開き、右上隅にある[新しいスニペット]ボタンをクリックします。 次の画面で、スニペットに名前を付け、トリガーワードを割り当て、スニペットのコードを貼り付けることができます。

右上の[新しいスニペットを作成]ボタンを使用してさらにスニペットを作成するか、スニペットライブラリに戻って新しいスニペットを見つけることができます。 スニペットをクリックすると、右側に詳細ウィンドウが表示され、すべての情報が表示され、スニペットを再度編集できます。

上級者向けのヒント：スニペットをためらわないでください。 はい、それらはコードのブロックである可能性がありますが、それよりも小さい場合もあります。 ブランドカラーの16進値のスニペットと、絵文字やヘッドショットのスニペットがあります。 スニペットは、必要に応じて大きくすることも小さくすることもできます。 頻繁に使用するものはすべてスニペットにする必要があります。

パーシャルを作成するには：

デザインライブラリからパーシャルライブラリを開き、右上隅にある[新しいパーシャル]ボタンをクリックします。 パーシャルに名前を付けると、Builderのような画面が表示されます。 必要なパーシャルをコーディングします（最初にスニペットをコーディングすると、それらを使用してパーシャルを作成できます）。 「保存」をクリックします。

パーシャルライブラリに戻って新しいパーシャルを見つけるには、左上のパーシャルの名前の下にある[パーシャル]リンクをクリックします。 それをクリックすると、右側に詳細ウィンドウが表示され、すべての情報が表示され、何かを忘れた場合は部分を再度編集できます。

ここから、LitmusBuilderでスニペットとパーシャルをメールに簡単に取り込むことができます。 以上です！

旅は続く…

以前のメールの作成方法を振り返ると、どこまで来たのかほとんど信じられません。 最高のヒントやコツをすべて使っても、数時間でメールを作成することから、わずか10分で作成できるとは思ってもみませんでした。

Litmus Builderは、私の電子メールワークフローに電力を供給しました。 リトマスで約3日間で作成した170を超えるスニペットとパーシャルがあります。 しかし、ここでの私の仕事はまだ終わっていません。 メールデザインシステムは進化を続けているため、必要に応じてスニペットやパーシャルを編集したり、さらに追加したりすることができます。 追加すると、すぐに使用できるようになります。

時間を節約できたので、楽しいアニメーションの作成、Vector Markup Language（VML）の学習、Gmailのダークモードで何が起こっているのかを正確に把握することに集中できます。

何を求めている？ Litmusを使用して（私のように）すばやくメールを作成し始めます。

無料トライアルを開始→

リトマスのお客様？ すぐにジャンプ→