このレシピ集では、アカウントから送信されるメールの外観をカスタマイズするためのHTMLレシピを紹介します。メールの外観をカスタマイズすることで、ブランドの一貫性を高め、顧客エンゲージメントを強化することができます。たとえば、メールのレイアウトにCTA（call-to-action）バナーを追加し、会社のブランドアイデンティティやヘルプセンターの外観に合わせることができます。
Zendeskアカウントから送信されるメール通知の外観と操作感は、管理センターにある2つのテンプレート（HTMLとプレーンテキスト）によってほぼ決定されています。プレーンテキストテンプレートでは、このクックブックで説明するカスタマイズはサポートされていません。詳細については、「通知用のメールテンプレートのカスタマイズ」を参照してください。
このクックブックでは、以下のトピックについて説明します。
レシピでは、HTMLとCSSを使用してメール通知をカスタマイズします。CSSの概要とリファレンスについては、Mozilla Developer Networkの「CSS:Cascading Style Sheets」を参照してください。
通知メールの一般的なデザインパターン
一般的なデザインパターンを理解することで、ブランドのイメージに沿った統一感のある効果的なメールレイアウトを作成できます。
ほとんどの通知メールは、以下に示すいくつかのコンポーネントで構成されています。
- ロゴ：ロゴ画像。
- 会社のバナー：ロゴのみの使用に代わるコンポーネント。
- コンテンツ：メール本文。
- CATバナー：コミュニティへの参加やヘルプセンターの利用、新製品の試用などへの呼びかけ。
- フッター：連絡先情報やソーシャルメディアへのリンクなど、さまざまな情報を含めることができる。
メールテンプレート内のコンテンツ以外のコンポーネントはすべて省略可能です。
このクックブックで提供しているレシピでは、テンプレートにデザイン要素を作成して挿入する方法を説明しています。これらのコンポーネントをうまく組み合わせることで、独自のメールデザインを作成できます。以下に、一般的なデザインパターンをいくつか紹介します。
| 会社のロゴ | フッターある会社のロゴ |
 |
 |
| フッターのある会社のバナー | CTAバナーとフッターのある会社のバナー |
 |
 |
インスピレーションを得るには、Lotus Themesブログのメールデザインをご覧ください。
メールのHTMLガイドラインとベストプラクティス
HTMLとCSSはメールアプリケーションによって作られる表示が変わるため、メールのルック＆フィールをデザインすることは難しい場合があります。書式の中には迷惑メールとして解釈されてしまうものもあります。
メールをデザインする際は、以下の一般的なガイドラインに従ってください。
- シンプルに保つ：デザインはシンプルに保ち、複雑なレイアウトは避けること。
- レイアウトにテーブルを使用する：一部のメールアプリケーションでは、CSSによるレイアウトが正確に表示されない場合があります。HTMLテーブルを使用してレイアウトを作成すると、より確実に表示されます。
-
CSSのインラインスタイルを使用する：インラインスタイルを使用します。インラインスタイルとは、HTML要素の
style属性で定義されたスタイルです（例：<p style="width=400px;">」など）。インポートされたスタイルシートや<style>タグで定義されたスタイルは、すべてのメールアプリケーションでサポートされるとは限りません。 - 標準のWebフォントを使用する：Arial、Verdana、Georgiaなどの標準のWebフォントを使用すること。カスタムフォントは、すべてのメールアプリケーションでサポートされていなかったり、正しく表示されない場合があります。
- テキストの書式設定を最小限に抑える：テキストの書式設定を最小限に抑えることで、レイアウトをすっきりと保つことができます。また、太字のテキストが多いと、迷惑メールフィルターが作動する場合があります。
画像については、以下のガイドラインに従ってください。
- 画像は控えめに使用する：画像を少なくすると、レイアウトがすっきりとして見やすくなります。また、画像を多用すると、迷惑メールフィルターが作動する場合があります。
- CSSで画像サイズを設定する：レイアウト内の画像のサイズを指定するには、インラインスタイルを使用します。画像のサイズが指定されていないと、メールのレイアウトが壊れることがよくあります。さらに安心を期すには、リサンプリングを使用して画像を物理的にリサイズします。
- すべての画像にALTタグを使用する：ALTタグを使用すると、ユーザーがメールで画像を表示する前に、画像の説明が表示されます。
- 非公開のZendeskアカウント内の画像にはリンクしない：メールの受信者が非登録ユーザーでサインインしていない場合、画像が正しく表示されません。
レシピ：会社のロゴを追加する
このレシピでは、メールテンプレートに会社のロゴを追加する方法を説明します。以下はその例です。
材料
- 会社のロゴ画像のURL
レシピ
- HTMLまたはテキストエディターに以下のコードブロックを貼り付けます。
<table width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation"> <tbody> <tr> <td align="center" style="padding-top: 0px; padding-bottom: 0px;"> <img src="company_logo.png" alt="company logo" style="width: 100px; height: auto;"> </td> </tr> </tbody> </table> - 以下のいずれかの要素に変更を加えて、ロゴをカスタマイズします。
変更 ロゴ画像
要素：img > src
src属性のプレースホルダの値を会社のロゴ画像のURLに置き換えます。以下はその例です。
img src="https://www.example.com/images/logo_acme.png"ロゴのサイズ
要素：img > style > width
widthの値を変更してロゴのサイズを変更します。以下はその例です。
img style="width: 120px; height: auto; ..."ロゴ周辺のスペース
ロゴの周囲の余白が大きい場合は、画像編集ツールで画像周辺の余白をトリミングする必要があるかもしれません。
画像の周囲の余白が狭い場合は、テーブルセルのパディングを増やすことができます。
要素：td > style
paddingをstyle属性に追加し、その値を調整します。以下はその例です。
td style="padding: 10px; ..."ロゴの水平方向の配置
要素：td > align
center、left、rightのいずれかを選択します。
以下はその例です。
td align="left"ロゴの縦方向の間隔
要素：td > style > padding-top
padding-topの値を変更して、ロゴの上の余白を増やします。要素：td > style > padding-top
padding-bottomの値を変更して、ロゴの下の余白を増やします。以下はその例です。
td style="padding-top: 15px; padding-bottom: 5px; ..." - 必要に応じて他の値も調整します。
- ファイルを.htmlの拡張子で保存し、ブラウザで変更結果を頻繁にプレビューします。
- アカウントのメールテンプレートにロゴを追加する前に、テストのメールテンプレートでロゴをプレビューします。
- 公開の用意ができたら、管理センターのHTMLメールテンプレート（管理センター >「チャネル」>「メール」）の以下の場所にロゴのコードブロックを挿入します。
レシピ：会社のバナーを追加する
このレシピでは、メールテンプレートに会社のバナーを追加する方法を説明します。会社のバナーは通常、背景色の上に配置した会社のロゴと社名で構成されます。以下はその例です。
材料
- 会社のロゴ画像のURL
- ブランドアイデンティティのカラー値
レシピ
- HTMLまたはテキストエディターに以下のコードブロックを貼り付けます。
<table style="background-color: #c0c7d8;" width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation"> <tbody> <tr> <td align="left" style="display: flex; padding-top: 0px; padding-bottom: 0px;"> <img src="company_logo.png" alt="company logo" style="width: 100px; height: auto; margin-right: 10px;"> <p style="font-family: Verdana, Arial, sans-serif; font-size: 24px; font-weight: bold; color: #333; margin-top: 50px;">Company name</p> </td> </tr> </tbody> </table> - 以下のいずれかの要素に変更を加えて、会社のバナーをカスタマイズします。
変更 ロゴ画像
要素：img > src
src属性のプレースホルダの値を会社のロゴ画像のURLに置き換えます。以下はその例です。
img src="https://www.example.com/images/logo_acme.png"ロゴのサイズ
要素：img > style > width
widthの値を変更してロゴのサイズを変更します。以下はその例です。
img style="width: 120px; height: auto; ..."ロゴ周辺のスペース
ロゴの周囲の余白が大きい場合は、画像編集ツールで画像周辺の余白をトリミングする必要があるかもしれません。
画像の周囲に十分な余白がない場合は、テーブルセルのパディングを増やすことができます。
要素：td > style
paddingをstyle属性に追加し、その値を調整します。以下はその例です。
td style="padding: 10px; ..."会社名の書式設定
要素：p > style
テキスト書式を変更するか、独自の書式を追加します。
以下はその例です。
p style="font-size: 30px; color: #553e3e; ..."ロゴと会社名との間隔
要素：img > style > margin-right
margin-rightの値を増減して、ロゴと社名との間隔を調整します。以下はその例です。
img style="margin-right: 15px; ..."ロゴに対する社名の垂直方向の位置
要素：p > style > margin-top
margin-topの値を増減して、ロゴに対する社名の位置を上下に移動します。以下はその例です。
p style="margin-top: 40px; ..."バナーの背景色
要素：table > style > background-color
background-colorスタイルの #d3d3d3 の16進数値を、独自の値に置き換えます。ブランディングガイドラインを参照するか、html-color.codesなどのオンラインカラーピッカーをご利用ください。以下はその例です。
table style="background-color: #d8e3fb; ..." - 必要に応じて他の値も調整します。
- ファイルを.htmlの拡張子で保存し、ブラウザで変更結果を頻繁にプレビューします。
- アカウントのメールテンプレートにバナーを追加する前に、テストのメールテンプレートでバナーをプレビューします。
- 公開の用意ができたら、管理センターのHTMLメールテンプレート（管理センター >「チャネル」>「メール」）の以下の場所にバナーのコードブロックを貼り付けます。
レシピ：CATバナーを追加する
このレシピでは、メールテンプレートにCTA（call-to-action）バナーを追加する方法を説明します。CTAバナーは通常、メール本文の後に配置します。通常、ユーザーにコミュニティへの参加、ヘルプセンターの利用、新製品の試用といった何らかの行動を促すものです。CTAバナーは、グラフィック、テキスト、リンク、および背景色で構成されます。以下はその例です。
材料
- CTAのテキスト
- CTA画像のURL
- CTAをユーザーに実行させるためのリンクのURL
- ブランドアイデンティティのカラー値
レシピ
- HTMLまたはテキストエディターに以下のコードブロックを貼り付けます。
<table style="background-color: #d8e3fb; margin-top: 12px;" width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation"> <tbody> <tr> <td align="left" style="display: flex; padding-top: 0px; padding-bottom: 0px; padding-left: 50px; margin-top: 12px; margin-bottom: 8px;"> <div id="cta-text" style="width: 300px;"> <p style="font-family: Verdana, Arial, sans-serif; font-size: 18px; font-weight: bold; color: #333; margin-top: 6px;">Take a hand, lend a hand</p> <p style="font-family: Verdana, Arial, sans-serif; font-size: 14px;">Join our worldwide community to ask expert users for advice or share your own.</p> <p style="font-family: Verdana, Arial, sans-serif; font-size: 12px;"><a href="#">Ask the community</a></p> </div> <div id="cta-image" style="padding-left: 20px;"> <img src="cta_image.png" alt="cta_image" style="width: 140px; height: auto; border-radius: 50% 50% 0 0;"> </div> </td> </tr> </tbody> </table> - 3つの段落タグにCTAを追加します。必要に応じて段落を追加または削除します。
- 以下のいずれかの要素に変更を加えてCTAバナーをカスタマイズします。
変更 CTA画像
要素：img > src
src属性のプレースホルダの値をCTA画像のURLに置き換えます。以下はその例です。
img src="https://www.example.com/images/cta_image.png"画像サイズ
要素：img > style > width
widthの値を変更して画像のサイズを変更します。以下はその例です。
img style="width: 120px; height: auto; ..."CTAメッセージの書式
要素：p > style
テキスト書式を変更するか、独自の書式を追加します。
以下はその例です。
p style="font-size: 30px; color: #553e3e; ..."メッセージと画像との間隔
要素：div id="cta-image" > style > padding-left
padding-leftの値を増減して、メッセージと画像との間隔を調整します。以下はその例です。
div id="cta-image" style="padding-left: 30px; ..."バナーの背景色
要素：table > style > background-color
background-colorの#d8e3fbの16進数を、独自の値に置き換えます。ブランディングガイドラインを参照するか、html-color.codesなどのオンラインカラーピッカーをご利用ください。以下はその例です。
table style="background-color: #d3d3d3; ..." - 必要に応じて他の値も調整します。
- ファイルを.htmlの拡張子で保存し、ブラウザで変更結果を頻繁にプレビューします。
- アカウントのメールテンプレートにバナーを追加する前に、テストのメールテンプレートでバナーをプレビューします。
- 公開の用意ができたら、管理センターのHTMLメールテンプレート（管理センター >「チャネル」>「メール」）の以下の場所にバナーのコードブロックを貼り付けます。
レシピ：フッターを追加する
このレシピでは、メールテンプレートにフッターを追加する方法を説明します。フッターには、連絡先情報やソーシャルメディアへのリンクなど、さまざまな情報を含めることができます。ソーシャルメディアリンクについては、次のレシピ「レシピ：ソーシャルメディアへのリンクをフッターに追加する」を参照してください。
標準のメールテンプレートには、フッター用に以下のプレースホルダがすでに用意されています。
-
{{footer}}：「このメールはAcmeからのサービスです。」という一文を表示します。この「Acme」をお客様の会社名に置き換えてください。 -
{{footer_link}}：「Zendeskからの配信です。」という一文をメールに表示します。この「Zendesk」にはzendesk.comへのリンクが貼られています。
これらのプレースホルダを会社の独自のフッターに置き換えたり、補足したりすることができます。
このレシピでは、連絡先情報を提供するフッターを作成します。{{footer}} と {{footer_link}} のプレースホルダを置き換えます。以下はその例です。
材料
- 会社の連絡先情報
- ブランドアイデンティティのカラー値
レシピ
- HTMLまたはテキストエディターに以下のコードブロックを貼り付けます。
<table style="background-color: #d8e3fb; margin-top: 12px;" width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation"> <tbody> <tr> <td align="center" style="padding-top: 4px; padding-bottom: 8px; margin-top: 12px; margin-bottom: 8px;"> <p style="font-family: Verdana, Arial, sans-serif; font-size: 12px; font-weight: bold; color: #333;">support.eatwell.com</p> <p style="font-family: Verdana, Arial, sans-serif; font-size: 9px;">181 Fremont Street, San Francisco, CA 94105</p> <p style="font-family: Verdana, Arial, sans-serif; font-size: 9px;">Copyright 2024 Eatwell Inc All Rights Reserved</p> </td> </tr> </tbody> </table> - 3つの段落タグ内の連絡先情報を変更します。
- 以下のいずれかの要素に変更を加えて、フッターをカスタマイズします。
変更 フッターの背景色
要素：table > style > background-color
background-colorの#d8e3fbの16進数を、独自の値に置き換えます。ブランディングガイドラインを参照するか、html-color.codesなどのオンラインカラーピッカーをご利用ください。以下はその例です。
table style="background-color: #d3d3d3; ..."テキストの色
要素：p > style > color
colorの値を変更します。以下はその例です。
p style="color: #553e3e; ..."テキストフォーマット
要素：p > style
テキスト書式を変更するか、独自の書式を追加します。
以下はその例です。
p style="font-family: Georgia, sans-serif; ..."上端および下端との隙間
要素：td > style > padding-top
padding-topの値を増減して、上端とテキストとの隙間を調整します。以下はその例です。
td style="padding-top: 8px; ..."要素：td > style > padding-bottom
padding-bottomの値を増減して、テキストと下端との隙間を調整します。以下はその例です。
td style="padding-bottom: 8px; ..." - 必要に応じて他の値も調整します。
- ファイルを.htmlの拡張子で保存し、ブラウザで変更結果を頻繁にプレビューします。
- アカウントのメールテンプレートにバナーを追加する前に、テストのメールテンプレートでフッターをプレビューします。
- 公開の用意ができたら、管理センターのHTMLメールテンプレート（管理センター >「チャネル」>「メール」）の以下の場所にコードブロックを貼り付けます。
レシピ：ソーシャルメディアへのリンクをフッターに追加する
このレシピでは、ソーシャルメディアへのリンクをカスタムフッターに追加する方法を説明します。
{{footer}} プレースホルダにソーシャルメディアチャネルのボタンを表示することができます。詳しくは「メールへのソーシャルメディアボタンの追加」を参照してください。以下はその例です。
材料
- ボタンとして使用するソーシャルメディア画像のURL
- ソーシャルメディアアカウントへのリンク
レシピ
- HTMLまたはテキストエディターに以下のコードブロックを貼り付けます。
<table style="background-color: #d8e3fb; margin-top: 12px;" width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation"> <tbody> <tr> <td align="center" style="padding-top: 4px; padding-bottom: 8px; margin-top: 12px; margin-bottom: 8px;"> <p style="font-family: Verdana, Arial, sans-serif; font-size: 12px; font-weight: bold; color: #333;">support.eatwell.com</p> <p style="font-family: Verdana, Arial, sans-serif; font-size: 9px;">181 Fremont Street, San Francisco, CA 94105</p> <p style="font-family: Verdana, Arial, sans-serif; font-size: 9px;">Copyright 2024 Eatwell Inc All Rights Reserved</p> </td> </tr> </tbody> </table>これは、連絡先情報を含むフッターを作成するレシピです（レシピ：フッターを追加する）。
- ソーシャルアイコンを、最初の段落タグの前のHTMLに追加します。以下はその例です。
<div style="padding-top: 12px; padding-bottom: 0px;"> <a href="#"><img style="width: 30px; padding-right: 10px;" src="https://www.example.com/images/icon_facebook.png"/></a> <a href="#"><img style="width: 30px; padding-right: 10px;" src="https://www.example.com/images/icon_x.png"/></a> <a href="#"><img style="width: 30px;" src="https://www.example.com/images/icon_instagram.png"/></a> </div> - 各ソーシャルメディアリンクについて、リンクのURL（
href="..."）と各ソーシャルメディアリンクのアイコン画像（src="..."）を変更します。 - 以下のいずれかの要素に変更を加えて、アイコンをカスタマイズします。
変更
アイコンのサイズ
要素：img > style > width
すべてのアイコンの width の値は同じにしてください。
以下はその例です。
img style="width: 24px; ..."アイコン間の間隔
要素：img > style > padding-right
最後のリンクを除き、各ソーシャルメディアリンクの
padding-rightスタイルの値を変更します。以下はその例です。
img style="padding-right: 8px; ..."アイコンの上側と下側の余白
要素：div > style > padding-top
padding-topの値を増減して、アイコンの上側の余白を調整します。以下はその例です。
div style="padding-top: 8px; ..."要素：div > style > padding-bottom
padding-bottomの値を増減して、アイコンの下側の余白を調整します。以下はその例です。
div style="padding-bottom: 10px; ..." - 必要に応じて他の値も調整します。
- ファイルを.htmlの拡張子で保存し、ブラウザで変更結果を頻繁にプレビューします。
- アカウントのメールテンプレートにバナーを追加する前に、テストのメールテンプレートでフッターをプレビューします。
- 公開の用意ができたら、管理センターのHTMLメールテンプレート（管理センター >「チャネル」>「メール」）の以下の場所にコードブロックを貼り付けます。
レシピ：メールの本文をカスタマイズする
このレシピでは、メールの本文をカスタマイズする方法を説明します。テキストのフォントとサイズ、およびメール本文の周囲の余白を変更します。
メールは通知メッセージとメールの会話で構成されます。メールテンプレートでは、メールの本文は {{content}} プレースホルダで表されます。Zendeskは、メールを送信する前に、このプレースホルダをHTMLに置き換えます。以下はその例です。
Zendeskによって挿入されるHTMLの中には、変更または上書きできないスタイルが含まれていることがあります。詳細については、「メール本文のカスタマイズの制限事項」を参照してください。
レシピ
- HTMLまたはテキストエディターに、
{{content}}プレースホルダとその親divタグを貼り付けます。以下はその例です。<div style="padding: 10px; line-height: 1.5; font-family: 'Lucida Grande',Verdana,Arial,sans-serif; font-size: 12px; color:#444444;"> {{content}} </div> - 以下のいずれかの要素に変更を加えて、親divのスタイルをカスタマイズします。
変更 メッセージテキストのサイズ
要素：div > style > font-size
font-sizeの値を変更します。この変更では、ユーザー名やメール送信時刻のテキストサイズは変更されません。
以下はその例です。
div style="font-size: 11px; ..."テキストのフォント
要素：div > style > font-family
フォントは、制限の範囲内で変更することができます。Trebuchet MS、Verdana、Georgiaなどの標準のWebフォントを使用します。これら以外のフォントは、すべてのメールアプリケーションでサポートされていない場合があります。
以下はその例です。
div style="font-family: 'Trebuchet MS', sans-serif; ..."メール本文の周囲の余白
要素：div > style > padding
paddingの値を増減して、メール本文の周囲の余白を調整ます。以下はその例です。
div style="padding: 15px; ..."左右の余白を変更する場合（例えば25pxに変更する場合）、
paddingスタイルに2つの値を指定します。最初の値は上下のパディング、2つ目の値は左右のパディングです。以下はその例です。
div style="padding: 15px 25px; ..." - 必要に応じて、他のインラインスタイルを追加したり、他の値を調整します。
メール本文の特定のプロパティは変更できません。詳しくは「メール本文のカスタマイズの制限事項」を参照してください。
- ファイルを.htmlの拡張子で保存し、ブラウザで変更結果を頻繁にプレビューします。
- アカウントのメールテンプレートに追加する前に、テストのメールテンプレートで変更をプレビューします。
- 公開の用意ができたら、管理センターのHTMLメールテンプレート（管理センター >「チャネル」>「メール」）の以下の場所にコードブロックを貼り付けます。
メール本文のカスタマイズの制限事項
Zendeskは、メールを送信する際に、{{content}} プレースホルダを独自のHTMLに置き換えます。ただし、システム生成のHTMLには、メール本文の特定の要素に対するインラインスタイルが含まれています。これらのインラインスタイルにアクセスして変更することはできません。また、メールテンプレートのインラインスタイルを使用して、これらのスタイルを上書きすることもできません。CSSでは、子要素のインラインスタイルは、divなどの親要素のインラインスタイルよりも優先されます。
このセクションでは、メール本文のカスタマイズに関する制限事項のいくつかを概説します。メール本文のその他の部分のデザインを決定する際には、これらの設定を考慮に入れるようにしてください。
本文のテキスト
本文のテキストの以下の書式は変更できません。
- フォントの色
- 行の高さ
- テキストの周囲の余白
これらの書式には、以下の設定があります。
color: #2b2e2f; line-height: 22px; margin: 15px 0名前とテキスト送信日
名前とテキスト送信日の以下の書式は変更できません。
- フォントの色
- フォントファミリー
- フォントのサイズ
- 行の高さ
- テキストの周囲の余白
名前テキストには、以下の設定があります。
color: #1b1d1e"; font-family: Verdana, Tahoma, sans-serif; font-size: 15px;
line-height: 18px; margin-bottom: 0; margin-top: 0;padding: 0; color: #1b1d1e"送信日テキストには、以下の設定があります。
font-family: Verdana, Tahoma, sans-serif; font-size: 13px; line-height: 25px;
margin-bottom: 15px; margin-top: 0; padding: 0; color: #bbbbbb"変更点のテスト
このレシピに添付されているテスト用メールテンプレートを使用して、変更をテストすることができます。
管理センターでメールテンプレートに直接行った変更は、即時に反映されます。そのため、アカウントのメールテンプレートに変更を追加する前に、テスト用テンプレートで変更を十分にテストし、期待通りに動作することを確認する必要があります。
変更をテストするには
- 以下の添付ファイルであるテスト用のメールテンプレート test_email_template.html をダウンロードし、HTMLまたはテキストエディターで開きます。
- テスト用のメールテンプレートの指定された位置に、お客様のコンポーネントのコードブロックを貼り付けます。以下はその例です。
<!-- Paste logo or company banner code block here --> - テストテンプレートをブラウザで開き、ブラウザウィンドウの幅を狭くしてメールアプリケーションをエミュレートします。
- テストテンプレートのコードを調整し、ブラウザページを更新して変更の効果を確認します。
- デザインに満足できるまで、この作業を繰り返し行います。
- 公開の準備ができたら、管理センターのメールテンプレート（管理センター >「チャネル」>「メール」）の同じ場所にコンポーネントのコードブロックを貼り付けます。
2件のコメント
サインインしてコメントを残してください。