Litmus Builder Essentials：BuilderでHTMLメールテンプレートを作成するためのベストプラクティス

Litmus Builderは、HTMLメール用の強力なカスタムメールビルダーです。 Litmus Builder Essentialsシリーズの以前のエディション（パート1、2、および3）で、以前にBuilderの使用方法を分解しました。 今日は、独自のHTMLテンプレートを作成するときにこれらの機能を使用する方法を紹介します。

パート1で見たように、独自のキャンペーンには、事前に作成およびテスト済みのHTMLテンプレートをいくつでも使用できます。 それぞれが優れた基盤として機能し、時間を節約し、重要なもの、つまりコンテンツに集中できるようにします。 テンプレートを使用すると、コーディングを行わないマーケターやデザイナーが自分で優れたメールキャンペーンを作成することもできます。

ただし、メールデザインの柔軟性とカスタマイズ性を高めたい場合は、独自のテンプレートを最初から作成することをお勧めします。

Builderを使用している場合は、左上の[ビルドの開始]ボタンまたは右側の[新しい作成]ボタンをクリックして、プロジェクトにタイトルを付け、[ビルド]を選択して、[次へ]ボタンをクリックします。 [新しいメールを作成]画面で、最初のオプションである[空白のメール]を選択します。 Builderは、新しい電子メールプロジェクトを作成し、Builderインターフェイスにドロップします。

独自のテンプレートの作成を非常に簡単にするLitmusBuilderの機能は次のとおりです。

• CSSインライン化
• スニペットとパーシャル
• グリッド線
• メールプレビュー
• 共有

CSSインライン化を使用する

CSSインライナーを使用すると、HTMLとCSSをインターフェイスの異なるタブに分離できます。 これにより、コードが可能な限りクリーンで読みやすくなり、テンプレートのコードをすばやくナビゲートして更新できるようになります。 あまり技術的でないチームメンバーに引き渡す必要がある開発者にも最適です。

CSSのインライン化を有効にするには、ビルダー画面の左側にある歯車のアイコンをクリックし、インラインCSSと呼ばれるオプションを切り替えます。 エディタツールバーのオプションを使用して、HTMLエディタとCSSエディタを切り替えることができます。

BuilderのCSSインライナーは、電子メールを真に理解するように設計されています。 たとえば、Outlookの条件付きコメントや疑似セレクターを削除せず、文字エンティティを保持し、ワークフローを改善できる多くのツールを備えています。

テンプレートをLitmusBuilderから独自の電子メールサービスプロバイダー（ESP）に移動する準備ができたら、[エクスポート]ボタンをクリックします。 ここから、電子メールをESPに同期したり、コンパイルされたHTMLをコピーしたり、コンパイルされたHTMLをダウンロードしたりできます。 とても簡単です！

スニペットとパーシャルを活用する

Litmus Builderには、テンプレートの作成と使用をより速く簡単にするために特別に設計された2つのツールがあります。スニペットとパーシャルです。 それらがどのようにあなたがより良いテンプレートを構築するのを助けることができるかを詳しく見てみましょう。

切れ端

スニペットを使用すると、すべてのBuilderプロジェクトでコードの一部を保存して再利用できます。 [挿入]ボタンを使用してスニペットにアクセスできます。

以前にスニペットを使用したことがない場合は、空のライブラリが表示されます。 幸い、新しいスニペットの作成は簡単です。

スニペットライブラリ内で、 [スニペットの管理]をクリックします。 ここから、[新しいスニペット]を選択します。 新しい画面がポップアップ表示されます。ここで、スニペットに名前を付け、そのスニペットを挿入するためのスニペットトリガーを作成し、スニペットに含めるHTMLやCSSを作成または貼り付けることができます。

スニペットを効果的に使用するための鍵は、電子メールで一般的に使用されるコンポーネント用にスニペットを作成し、スニペットトリガーに依存してそれらを挿入することです。

たとえば、ほとんどの電子メールキャンペーンは、購読者に電子メールを開くように促すためにプレビューテキストに依存しています。 作成するすべての電子メールに対して新しいプレビューテキストコンポーネントを手動で入力する代わりに、そのコンポーネントをスニペットとして保存し、Builderのエディターで直接トリガーすることができます。 この場合、新しいスニペットにコードを含めて名前を付け、トリガーをpvtのようなものに設定できます。

これで、エディターでそのスニペットを呼び出す必要があるときはいつでも、 pvtと入力し、すぐにタブボタンを押すだけで、Builderがコードをテンプレートに挿入します。

テキストを中括弧で囲むことにより、スニペットに編集/ジャンプポイントを含めることもできます。 編集/ジャンプポイントのあるスニペットは、スニペットを挿入すると自動的にそのポイントにカーソルを置き、スニペットのコンテンツをすばやく編集できるようにします。

自分のライブラリに含めるスニペットがわからない場合は、 インスピレーションを得るために、Eメールデザインでスニペットを使用するための究極のガイドをご覧ください。

パーシャル

スニペットと同様に、パーシャルを使用すると、Builderプロジェクト全体で使用するコードコンポーネントを収集できます。 スニペットとパーシャルの主な違いは、スニペットがテンプレートにハードコードされてしまうのに対し、Builderは、テンプレートをプレビュー、コンパイル、またはダウンロードするたびにパーシャルをテンプレートにプルすることです。

パーシャルにアクセスするには、[挿入]、[パーシャル]の順にクリックします。

新しいパーシャルを作成するには、[パーシャルの管理]をクリックします。 Builderは、パーシャルを新しいウィンドウで開きます。 ここから、[新しいパーシャル]を選択して、新しいパーシャルを作成します。 各パーシャルはドキュメントのタイトルで識別され、パーシャルのタイトルを二重中括弧で囲むことにより、独自のテンプレートに含めることができます。 たとえば、部分的な名前付きヘッダーがある場合、 {{header}}と入力してBuilderドキュメントでそれを呼び出すことができます。 コードエディタは、部分が動的に電子メールに取り込まれている間、その短いテキストブロックのみを表示します。

「なぜスニペットの代わりにパーシャルを使用するのか」と疑問に思われるかもしれません。 それは素晴らしい質問です。

スニペットは非常に便利ですが、パーシャルのキラー機能は、テンプレートに動的に追加されることです。 テンプレートをコンパイル、プレビュー、ダウンロード、または共有するまでコードは実際にはエディターに追加されないため、パーシャルを1か所で更新し、そのパーシャルを使用するすべてのテンプレートに変更を加えることができます。

メールフッターについて考えてみてください。 多くの場合、企業は、法務部門が変更を加えるたびに、複数の電子メールのフッターにある情報を更新する必要があります。 数十通のメールを個別に手動で更新する代わりに、それらすべてのメールに取り込まれる単一の{{footer}}パーシャルを更新できます。 その部分を更新すると、すべてのテンプレートが自動的に更新されるため、時間を大幅に節約できます。

これは、より大きなチームの一員である設計者や開発者にとって非常に役立ちます。 マーケターに電子メールのコンテンツを含むテンプレートへのアクセスを許可しながら、パーシャルを制御できます。 マーケターは、ヘッダーやフッターなどの要素をそのままにして、エラーを減らし、サブスクライバーにとってより良い電子メールを確保しながら、そのコンテンツを更新できます。

迅速なナビゲーションのためにグリッド線を使用する

CSSのインライン化、スニペット、パーシャルは開発をスピードアップし、コードのナビゲートを容易にするのに役立ちますが、ほとんどの電子メールには、読みにくいコードがたくさん含まれています。 数百行のコードをスクロールして編集が必要な1つのセクションを見つける代わりに、Builderのグリッド線を使用すると、焦点を当てる電子メールの要素をすばやく見つけて選択できます。

グリッド線を有効にするには、プレビューツールバーの歯車アイコンを押してから、[グリッド線の切り替え]をクリックします。 グリッド線は、プレビューペインでメールの青いボックスをオーバーレイし、メールテンプレートの個々の要素を強調表示します。 グリッド線を有効にした状態で、任意の要素を選択するだけで、コードエディターがそのコードブロックに自動的に移動するため、必要な更新を行うことができます。

100以上の電子メールクライアントでプレビュー

Litmus Builderでテンプレートの作成を開始したら、次のステップは、必要なすべての電子メールクライアントでテンプレートが正しくレンダリングされることを確認することです。 Litmus Email Previewsを使用すると、これをすばやく簡単に行うことができます。 メールビルダーのプレビューペインで、デフォルトのブラウザプレビューとメールプレビューを切り替えます。 電子メールプレビューを選択すると、100以上の電子メールクライアントでテンプレートがどのように表示されるかを確認できる一連のテストが開始されます。

オーディエンスが特定の電子メールクライアントでのみキャンペーンを開くことがわかっている場合は、[電子メールプレビュー]ビューの[クライアントの選択]ボタンをクリックして、テストするクライアントを選択できます。 これにより、オンとオフを切り替えることができるすべての利用可能なクライアントのリストが開きます。 サブスクライバーが使用している電子メールクライアントがわからない場合は、 Litmus Email Analyticsを試して、サブスクライバーの行動を詳しく調べてください。

テンプレートをチームと共有する

Litmus Builderでテンプレートを開発する最後のステップは、それらのテンプレートをチームメンバーや利害関係者と共有することです。

コードと画像をESPにコピーし、テストリストを設定し、そのリストにキャンペーンを手動で送信する代わりに、LitmusBuilderにはキャンペーンに関するフィードバックの取得に専念する共有パネル全体があります。

共有パネル内には、テンプレートを公開、電子メール送信、および埋め込むオプションがあります。 メールを公開する場合は、選択したクライアントでメールプレビューのみを共有するか、HTMLプレビューとメールプレビューの両方を一緒に共有するかを選択できます。

このようにして、各利害関係者と共有するものを選択できます。 デザインを承認するために利害関係者が必要な場合は、HTMLで混乱しないように、プレビューのみを共有してください。 レビューまたはトラブルシューティングのためにテンプレートを別の開発者に送信しますか？ HTMLとプレビューの両方を共有します。

[電子メール]オプションを使用すると、ESPにアップロードしなくても、テスト電子メールを受信トレイに直接すばやく送信できます。

テンプレートをブログまたはLitmusコミュニティで共有する場合は、埋め込み機能を使用して、テンプレートのライブプレビューを任意のWebサイトに埋め込みます。 人々はコードを開いて自分のBuilderアカウントで編集を開始することもでき、チームメンバーは自分のテンプレートに影響を与えることなくアイデアをすばやくリフすることができます。 Builderプレビューは、作成後60日で期限切れになります。

今すぐBuilderを使い始めましょう

Builderでテンプレート、スニペット、パーシャルを作成する方法がわかったので、試してみませんか？ これは、独自のキャンペーンで最高の品質基準を確保しながら、ワークフローをスピードアップするための最も強力な方法の1つです。

すでにリトマスの顧客ですか？ それ以外の場合は、Litmusを7日間無料で試して、Builderが今日の開発プロセスをどのように改善できるかを確認してください。

Litmus Builderは、メールを作成するだけではありません オーディエンスにとって最も重要な電子メールクライアントをすばやく構築してQAテストを行い、再利用可能な電子メールモジュールとテンプレートを利用して、エラーを減らし、ブランドの一貫性を維持します。 すべての特典を見る→

Litmus BuilderEssentialsシリーズで詳細をご覧ください

• Litmus Builder Essentials、パート1：メールビルダーについて知る
• Litmus Builder Essentials、パート2：メールビルダーで作成
• Litmus Builder Essentials、パート3：チームがEメールビルダーを使用する方法
• 現在地：Litmus Builder Essentials、パート4：BuilderでHTMLメールテンプレートを作成するためのベストプラクティス