メール通知用のテンプレートのカスタマイズ

現在のプランを確認

ファストパス： 管理センター >「チャネル」>「Talkとメール」>「メール」

重要：トライアル版では、メールテンプレートを編集するオプションはデフォルトで有効になっていません。また、一部のアカウントでは有効にできない可能性があります。編集を有効にするには、自社のサブドメイン、自社のWebサイトへのリンク、どのような変更を行いたいかの簡単な説明を添えて、Zendeskカスタマーサポートにお問い合わせください。

チケットやヘルプセンターの記事通知など、アカウントから送信されるほとんどすべてのメール通知は、メールテンプレートによって制御されています。サイドカンバセーションのメール通知は、メールテンプレートを使用しません。

メールテンプレートは、HTMLとプレーンテキストの両方の形式に対応しています。両方のフォーマットがすべてのメールに含まれています。どちらのフォーマットがエンドユーザーに表示されるかは、ユーザーのメールクライアントの設定によって異なります。

HTMLテンプレートは、簡単なスタイル変更をいくつか行うことで、自社のブランド設定に合わせてカスタマイズできます。またプレーンテキストのメールに含まれる情報も編集可能です。

ヒント：カスタマーサービス用のメールテンプレートで時間を節約する方法については、こちらのブログ記事をお読みください。

この記事では、以下のトピックについて説明します。

• メールテンプレートを編集する
• HTMLテンプレートを編集する
• テキストテンプレートを編集する
• システムプレースホルダについて

関連記事

• メールにチケットリンクを追加または削除する
• メール通知への区切り行の追加と削除

メールテンプレートを編集する

カスタマーに送信するメール通知の外観と操作性をカスタマイズすることができます。通知には、HTMLテンプレートとプレーンテキストのテンプレートがあります。

Enterpriseプランの場合は、メールを実際に使用する前に、サンドボックスでメールに変更を加え、変更をテストすることができます（「サンドボックスでの変更のテスト」を参照）。

メールテンプレートを編集するには

1. 管理センターで、サイドバーの「 チャネル」をクリックし、「Talkとメール」>「メール」を選択します。
2. 必要に応じて、HTMLテンプレートを編集します。
3. 必要に応じて、テキストテンプレートを編集します。
4. デフォルトのバージョンに戻ってやり直す場合は、それぞれのテンプレートの下にある「デフォルトに戻す」をクリックします。
5. ページの下部にある「保存」をクリックします。

   メールテンプレートが更新されます。

メールテンプレートをカスタマイズするだけでなく、以下のようにメール自体を変更することもできます。

• ユーザープロフィールの写真を表示する
• チケットリンクを追加または削除する
• メール通知への区切り行の追加と削除
• リキッドマークアップを使用する
  メモ：リキッドマークアップはマクロ、トリガ、自動化でサポートされ、チケットの通知（フォロワーに送られるメール通知など）で機能しますが、ヘルプセンターの記事の通知ではサポートされません。リキッドマークアップを使用してメール通知の外観を変更する代わりに、メールテンプレートを複数のブランドで使用する方法もあります。

HTMLテンプレートを編集する

HTMLメールの外観を変更するには、HTMLテンプレートでHTMLおよびCSSを編集します。

メモ：トライアルでは、HTMLテンプレートの編集はデフォルトで有効になっていません。HTMLテンプレートの編集を有効にするには、サブドメイン情報をご用意の上、Zendeskカスタマーサポートにお問い合わせください。

このセクションでは、以下のトピックについて説明します。

• HTMLメールの外観を変更する
• HTMLメールのカスタマイズのガイドライン

HTMLメールの外観を変更する

HTMLテンプレートは、DIVタグとシステムプレースホルダで構成されています。

メールのほとんどの部分は、プレースホルダに挿入される内容から構成されます。

• {{content}}は必須プレースホルダなので、削除しないでください。
• {{delimiter}}が必要なのは、通知内にメール区切り行を使用している場合だけです。
• {{styles}}および{{attributes}}のプレースホルダは将来使用するためのものです。書字方向が右から左のロケールに対応するスタイルや属性を挿入するために、システムによって使用されることもあります。
• {{footer}}はオプションです。

これら以外のプレースホルダはテンプレートでは使用できません。詳しくは「システムプレースホルダについて」を参照してください。

DIVタグはコンテンツにCSSスタイルを適用します。CSSスタイルを追加または修正することで、メール全体の見た目と操作感、区切り行テキスト、またはフッターを変更できます。

テキストの色を変更する場合は、アクセシビリティを考慮し、色に適切なコントラスト比を確保してください。Webアクセシビリティガイドライン（WCAG）の推奨に従い、WebAIMのカラーコントラストチェッカーなどのツールを活用して、テキストと背景のコントラスト比を確認してください。

ヒント：複数のブランドを設定している場合は、Andrew Soderbergが寄稿したこちらのヒント「How to structure your email template to use custom HTML layouts for your multiple brands（Zendeskメールテンプレートを構築して、複数のブランドごとにカスタムHTMLレイアウトを使用する方法）」を参照してください。

テンプレート内のスタイルを編集するには

1. 管理センターで、サイドバーの「 チャネル」をクリックし、「Talkとメール」>「メール」を選択します。
2. メールテンプレートセクションで、必要に応じてHTMLテンプレートを編集します。

   

   標準のテンプレートプレースホルダを使用する場合は、プレースホルダ名の一部を入力し、表示される候補から目的のプレースホルダを選択します。

   

3. 「保存」をクリックします。

たとえばフッターのフォントの色を青緑に変更するには、次のように編集します。

...
 <div style=" color: #009966;
              margin: 10px 0 14px 0;
              padding-top: 10px;
              border-top: 1px solid #eeeeee;" >
    {{footer}}{{footer_link}}
  </div>
...

次のようなスタイル宣言を使って、16進数値でフォントの色を青緑に設定できます。

color: #009966;

メモ：リンクの色はカスタマイズできません。リンクの書式は、:hoverなどのCSS擬似クラスのスタイルで設定します。例：a:hover {color:#FF00FF;}ただし、CSS擬似クラスはインラインCSSではサポートされておらず、Gmailなどの一般的なメールクライアントではインライン以外のCSSは適用されません。

会社のロゴなどの画像をテンプレートに追加するには、画像を参照するIMGタグを挿入します。以下に例を示します。

<img src="http://YOURWEBSITE.com/logo.png"/>

メモ：ロゴなどの画像を追加する場合、通常のメールクライアントでは、デフォルトでは画像を表示しないので注意が必要です。

ロゴにハイパーリンクを追加する場合は、次のようにIMGタグをアンカータグで囲みます。

<a href="http://YOURACCOUNT.zendesk.com"><img src="http://YOURWEBSITE.com/logo.png"></a>

詳細については、以下のリソースを参照してください。

• CSS portal（CSSポータル）（Mozilla Developer Network）
• ヘルプセンターのCSSレシピ集

HTMLメールのカスタマイズのガイドライン

HTMLテンプレートは自由にカスタマイズできますが、Zendeskはカスタムコーディングをサポートしていないことに注意してください。2022年6月15日以降に作成されたアカウントの場合、テンプレートはHTML5対応となります。サポートされているHTML5タグの詳細については、www.w3docs.comの「HTML5 Elements Reference」を参照してください。

HTMLメールの設計は、Webブラウザやメールクライアントに応じてHTMLとCSSがレンダリングされる方法が異なるため、簡単なことではありません。書式の中には迷惑メールとして解釈されてしまうものもあります。

通常、カスタマイズはできるだけシンプルなものにし、さらに次のガイドラインに従ってください。

• CSS3スタイル宣言は使用しないこと。CSS1またはCSS2のスタイル宣言を使用すること。
• DIVセクションは追加しないこと。
• テキストの書式設定を最小限にすること。太字のテキストが多いと、迷惑メールフィルターが作動する場合があります。
• 画像を大量に追加しないこと（迷惑メールフィルターを作動させるもう1つの要因です）。また使用する画像を縮小しないこと。
• すべての画像にALTタグを使用すること。このタグを使用すると、ユーザーがメールで画像を表示する前に、画像の説明が表示されます。
• 画像の幅と高さがわかっている場合は、それらを設定すること。これにより、画像をダウンロードする前に、メールクライアント側でメールのレイアウト内に画像の表示領域を確保することができます。
• 背景画像はすべてのメールクライアントでサポートされているとは限らないため、情報提供または機能設計を背景画像に依存しないこと。
• 非公開のZendeskアカウント内の画像にはリンクしないこと。メールの受信者が非登録ユーザーでサインインしていない場合、画像は表示されません。

テキストテンプレートを編集する

メールをHTML形式で表示しない場合は、テキスト形式のメールテンプレートを使用します。このテンプレートは次の2つのプレースホルダで構成されます。

{{content}}

{{footer}}

{{content}}プレースホルダには、テキスト区切り文字、チケットタイトル、ビジネスルール（トリガ、自動化、またはマクロ）によって生成されたテキスト、およびチケットコメントが挿入されます。{{footer}}プレースホルダは省略可能です。不要であれば削除できます。詳しくは「システムプレースホルダについて」を参照してください。

メモ：{{delimiter}}プレースホルダはテキストテンプレートでは必須ではありません。{{content}}プレースホルダには区切り文字のテキストが含まれています。

メールに行を追加したい場合は、テンプレートに追加します。

Thanks for contacting MondoCam Support!

{{content}}

{{footer}}

テキストテンプレートを編集するには

1. 管理センターで、サイドバーの「 チャネル」をクリックし、「Talkとメール」>「メール」を選択します。
2. メールテンプレートセクションが表示されるまで、下にスクロールします。
3. 必要に応じて、テキストテンプレートを編集します。
4. ページの下部にある「保存」をクリックします。

システムプレースホルダについて

通知メールのコンテンツの多くは、Zendeskシステムによって動的に生成されます。動的に生成されるコンテンツは、メールテンプレートのプレースホルダによって表されます。プレースホルダは、{{footer}}のように、二重括弧で囲まれています。

プレースホルダには、区切り行のテキスト、メールの内容、およびフッターを挿入します

{{delimiter}}

「##- 返信メールでコメントを追加する際は、これより上に書いてください -##」のテキスト行が表示されます。古い内容と新しい内容を分けるために、システムにより区切り行が使用されます。ある人がメールに返信すると、返信に含まれる新しい内容がコメントとしてチケットに追加されます。メール区切り行を使用している場合、このプレースホルダはHTMLテンプレートで必須です。「メールの区切り行のカスタマイズ」を参照してください。

{{content}}

チケットのコメントやユーザープロフィール写真などのメールの内容を表示します。この内容は、トリガや自動化など、ご使用のアカウントからメールを送信するあらゆるものに定義されています。「チケットの更新と通知のためのトリガの作成と管理」を参照してください。

{{quoted_content}}

省略可能です。メッセージ履歴を表示します。引用されたコンテンツは、通常、ユーザーのメールアプリケーションでは折りたたまれていますが、ユーザーが展開できます。たとえばGmailの場合、ユーザーは省略記号（...）をクリックします。詳しくは「シンプルなメールスレッドについて」を参照してください。

チケットの作成方法によっては、引用したコンテンツに添付ファイルが含まれない場合があります。

• チケットがメールで作成された場合、添付ファイルは引用コンテンツに含まれません。
• チケットがWebフォーム（またはメール以外のチャネル）で作成された場合、添付ファイルは引用コンテンツに含まれます。

{{footer}}

省略可能です。「本メールはYourZendeskNameから送信されています」という行を表示します。また、エージェントに送られるメールにはチケットのプロパティ（ステータスやリクエスタなど）も表示されます。これらのプロパティはエンドユーザーに送られるメールには表示されません。

{{footer_link}}

省略可能です。「Zendesから配信されています」というメッセージ行を表示します。Zendeskという単語は、https://www.zendesk.comへのリンクになっています。

{{styles}}

省略可能です。将来使用するため。現在、このプレースホルダは、書字方向が右から左のロケールを検出した場合にスタイルを挿入するために使用されます。

{{attributes}}

省略可能です。将来使用するため。現在、このプレースホルダは、書字方向が右から左のロケールを検出した場合に属性を挿入するために使用されます。