Intercomでカスタムメールを作成するためにHTMLを使用できます。3つのオプションがあり、それぞれ目的が異なります。次のいずれかを選べます。
HTMLから再利用可能なメールテンプレートを作成する
推奨ワンオフの完全なHTMLメールを送信する。
HTMLブロックを使ってメールをフォーマットする。
HTMLから再利用可能なテンプレートを作成する
Intercomはメールに使える3つのテンプレートを提供しています。しかし、ブランドのデザインに合ったスタイリッシュなテンプレートを作成したい場合は、HTMLからメールテンプレートを作成できます。新しいカスタムテンプレートはIntercomにテンプレートとして保存され、何度でも使用可能です。
なぜワンオフのHTMLメールではなくカスタムテンプレートを作成するのか？
ブランドのカスタムスタイルが欲しいが、作成ツールの利便性とパワーを活かしたい場合はカスタムテンプレートを作成すべきです。Intercomにカスタムテンプレートを保存すれば、テンプレートとして選択し、HTMLを使わずにメールを書くことができます。
HTMLからメールテンプレートを作成したい場合は：
フォントの種類、サイズ、背景色などメールのスタイルを設定する。
カスタムのヘッダー、フッター、または枠線を追加する。
テンプレート化されたURLのリンクトラッキングを使用する。
Intercomのボタンスタイルをカスタマイズするには、HTMLクラス.intercom-h2b-buttonにスタイルを追加してください。
始める準備はできましたか？IntercomでHTMLからメールテンプレートを作成する方法はこちらです。
ワンオフの完全なHTMLメールを送信する
カスタムコンテンツレイアウトを作成し、HTMLでデザインしたワンオフメールを送信することもできます。
注意：テンプレート化されたURLのリンクトラッキングはワンオフHTMLメールでは機能しません。カスタムメールテンプレートの使用か、HTMLから新しいテンプレートを作成することを強く推奨します。
完全なHTMLメールの作成方法
メッセージを完全なHTMLで書くには、任意のテンプレートで新しいメールメッセージを作成し、メール作成画面の左下にある</> HTMLエディターに切り替えをクリックします。
HTML作成画面が右側に開き、ここでメールを作成できます。
作成中はテンプレートプレビューでメッセージの見え方を確認できます。
重要：完全なHTMLでメールを書き始めると、ビジュアルエディターに戻したり、メッセージタイプをアプリ内に変更したりできません。
HTMLブロックを使ってメールをフォーマットする
作成ツールの通常のフォーマットオプションから外れたい場合、HTMLブロックを使ってメールにカスタム要素を追加できます。
HTMLブロックでできること：
メールにテーブルを配置する。
データをHTMLテーブルで表示し、見やすくする。
HiDPIレティナ画像をメールに挿入する。
ブロック引用を作成する。
カスタムボタンを追加する（ボタンスタイルはカスタムテンプレートで作成し、HTMLブロックでクラスを設定します）。
カラムを追加する（画像を横並びに配置するのに便利です）。
メールにHTMLブロックを追加するには、作成ツール上にカーソルを合わせ、＋アイコンを選択して</> HTMLを挿入します。
メールでHTMLブロックを使う際の4つのポイント
画像にはHTTPS（HTTPではなく）を使い、混在コンテンツ警告を回避してください。HTTP画像はIntercomのメールプレビューに表示されません。
特にメール送信時はメッセージのプレビューを入念に行ってください。アプリ内メッセージは後で調整可能ですが、メールは送信後に取り消せません。
埋め込み動画はアプリ内メッセージで動作しますが、iframeはサポートしておらず、埋め込み動画は表示されません。
メッセージ本文に含まれるすべてのスタイルとID属性は削除されることを覚えておいてください。
HTMLブロック内のHTMLに特別なスタイルを適用したい場合は、HTMLからメールテンプレートを作成し、<head>内に特定のスタイルを入れてHTMLブロックでクラスを参照してください。メール送信時にこれらのスタイルはインライン化されます。
IntercomがサポートするHTMLタグと属性
Intercomでは2つのHTMLサブセットをサポートしています。以下は完全なHTMLメールとカスタムテンプレートでサポートされるタグと属性、そしてHTMLブロックでサポートされるタグと属性です。
HTMLモードでサポートされる要素（完全なHTMLメールとカスタムテンプレート用）：
構造要素：
article, aside, blockquote, body, br, div, figcaption, figure, h1, h2, h3, h4, h5, h6, head, header, hgroup, hr, html, main, p, section, wbrヘッド要素：
meta, titleリスト要素：
dd, dl, dt, li, ol, ulテキストフォーマット要素：
a, abbr, address, b, bdi, bdo, center, cite, code, del, dfn, em, i, ins, kbd, mark, pre, q, rp, rt, ruby, s, samp, small, span, strike, strong, sub, sup, time, u, varメディア要素：
imgテーブル要素：
caption, col, colgroup, table, tbody, td, tfoot, th, thead, tr
HTMLモードでサポートされる属性（完全なHTMLメールとカスタムテンプレート用）：
すべての属性がサポートされています:
align, bgcolor, class, dir, height, id, lang, style, title, widthaタグがサポートする属性:href, name, targetblockquoteタグがサポートする属性:citecolタグがサポートする属性:span, valigncolgroupタグがサポートする属性:span, valigndelタグがサポートする属性:xmlnshtmlタグがサポートする属性:href, name, targetimgタグがサポートする属性:alt, srcinsタグがサポートする属性:cite, datetimemetaタグがサポートする属性:content, http-equiv, nameolタグがサポートする属性:reversed, start, typeqタグがサポートする属性:citestyleタグがサポートする属性:data-premailer, typetableタグがサポートする属性:border, cellpadding, cellspacing, summarytbodyタグがサポートする属性:valigntdタグがサポートする属性:abbr, axis, colspan, rowspan, valigntfootタグがサポートする属性:valignthタグがサポートする属性:abbr, axis, colspan, rowspan, scope, valigntheadタグがサポートする属性:valigntimeタグがサポートする属性:datetime, pubdatetrタグがサポートする属性:valignulタグがサポートする属性:type
HTMLブロックでサポートされているさまざまなHTMLタグはこちらです:
見出し:
h1, h2, h3, h4, h5, h6テキストフォーマットタグ（例:
strong, em, sub, sup, small, code, pre, strike）テーブル作成用タグ:
table, thead, tbody, tfoot, th, tr, tdリスト:
ol, ulアンカー要素を使ったハイパーリンク
画像
HTMLブロックでサポートされているHTML属性はこちらです:
すべてのタグで
dir, lang, title, width, height, id, class, alignが許可されていますaタグはhref, target, nameを許可していますblockquoteタグはciteを許可していますcolタグはspan, width, valignを許可していますcolgroupタグはspan, width, valignを許可していますdelタグはcite, datetimeを許可していますimgタグはalign, alt, height, src, width, titleを許可していますinsタグはcite, datetimeを許可していますolタグはstart, reversed, typeを許可していますqタグはciteを許可していますtableタグはsummary, width, border, cellspacing, cellpaddingを許可していますtbodyタグはvalignを許可していますtfootタグはvalignを許可していますtheadタグはvalignを許可していますtdタグはabbr, axis, colspan, rowspan, width, valignを許可していますthタグはabbr, azis, colspan, rowspan, scope, width, valignを許可していますtheadタグはtrを許可していますtimeタグはdatetime, pubdateを許可していますulタグはtypeを許可しています
IntercomでHTMLを使用する際のベストプラクティス
一度限りのHTMLメールを送信する場合でも、再利用可能なカスタムメールテンプレートを作成する場合でも、以下のベストプラクティスが適用されます:
CSSスタイルをインライン化する
ほとんどのメールクライアントはCSSスタイルのインライン化を必要とし、開発体験があまり快適でないことがあります。これは、スタイルを追加したい場合、各<p>タグに個別に追加しなければならず、スタイルを変更したい場合も各<p>タグごとに変更する必要があるためです。しかし、Intercomでは通常通りstyleタグとクラスを使ってHTMLとスタイルを書くことができ（そしてそうすべきです）、メール送信時にIntercomがすべてのCSSスタイルを適切な要素にインライン化します。
レスポンシブスタイルはインライン化しない
ただし、@media() {} ブロック内のレスポンシブスタイルはインライン化してはいけません。インライン化されると特定の画面幅ではなくデフォルトで適用されてしまいます。代わりに、これらのレスポンシブスタイルはdata-premailer="ignore"という特別な指定を持つstyleタグ内に配置する必要があります。これにより、レスポンシブスタイルはインライン化されず、メディアクエリを理解するブラウザが画面サイズに応じて適用します。
適切なデータ属性を追加する
カスタムテンプレートを作成する際には、単一の{{content}}タグが必要です。これは<body>タグ内のどこにでも配置できます。現在、1通のメールにつき1つの{{content}}タグのみサポートしているため、メール内に複数のコンテンツ領域を持つことはできません。
カスタムテンプレートを作成する場合やIntercomで完全なHTMLを書く場合は、迷惑メール防止法に準拠するために{{unsubscribe_url}}または{{unsubscribe_link}}のいずれかを必ず含める必要があります。これは<body>タグ内のどこにでも配置可能です。方法はこちら。
HTMLの基本を押さえる
最後に、より良いHTMLメールを作成するための基本的なヒントをいくつか共有します:
レイアウトはテーブルを使って作成し、すべてのメールクライアントで正しく表示されるようにしてください。例えば、段落の下に20pxの隙間を設けたい場合は、height="20"属性を持つ行を追加するのが最適です。パディング、マージン、フロートは使用しないでください。これらは特にOutlookの特定バージョンで正しく動作しないことがあります。
すべてのスタイルをメールにインライン化して、各メールクライアントでスタイルが適用されるようにし、送信時にデザインが正しく表示されるようにして作業効率を高めましょう。Intercomがサポートします。
Google Fontsのようなオープンソースのフォントサービスからカスタムホストされたウェブフォントを使用できます。メールテンプレートにコードを埋め込むだけです。ただし、メールクライアントがこれをサポートしていない場合、メール内のテキストはウェブセーフフォントにフォールバックします。
レスポンシブデザインを作成するには、幅は最低320px、最大600pxにしてください。デフォルトの表示幅は最大600pxにするのが最適です。また、メディアクエリを使って小さい画面ではテンプレートを1カラムに変換することも重要です。
画像ファイルサイズはできるだけ小さく（最大1MB）保つようにしてください。大きな画像をダウンロードすると、特にモバイルデバイスでメールを閲覧するusersにとって表示に時間がかかり、最適でない体験となります。
Litmusのようなメールテストツールを使って、すべての対象メールクライアントとブラウザでメールをテストしてください。通常のブラウザや1、2のメールクライアントで見るだけでは不十分です。すべて異なる結果を出します。Litmusのようなツールは、メールがどこでどのように表示されるかを完全に把握できます。
Intercomでより良いHTMLメールの作成方法を学んだ今、メールが確実に配信され開封されるようにしましょう。