メールエディター

メールエディターは、顧客に送信するメールの作成や編集に使用する操作性の高いレスポンシブエディターです。

メールエディターには、リッチでレスポンシブなメールの作成や編集に役立つ、コンテンツエレメントとフィールドで構成されたドラッグ＆ドロップ式のインターフェイスが備わっており、デスクトップとモバイルの両方のメールメッセージ設計に対応するレスポンシブな設計手法が採用されています。

このエディターでは、テキストの書式を設定したり、パーソナライズ化したり、画像、コールトゥアクション (CTA) ボタンやリンクなどを加えたりできます。また、メール追跡オプションを追加することも可能です。

エディターを使用する際、HTMLコーディングのスキルは必要ありませんが、お望みであれば、独自のカスタムHTMLを入力するオプションも用意されています。

メールを一から作り始めたくない場合は、過去に保存したテンプレートを今後のメールキャンペーン用に選択したり、独自に作成したメッセージ設計をテンプレートとして保存し、他の人が使えるようにしたりすることができます。

メールを作成する際、受信者がメールをどのように見るかを事前に確認することができます。

Webインターフェイス上で、サイドメニューのMoments またはCampaigns (キャンペーン) に移動します。ここから、新しい ブロードキャスト あるいは新しい フロー を作成できます。

例えば、新しいブロードキャスト用のメールの作成を開始するには、All broadcasts (全ブロードキャスト) ページで、Create Broadcast (ブロードキャストの作成) をクリックします。次に[チャネル]ドロップダウンリストから Email (メール) を選択します。

そして[メール]フォームで、Create Custom Email (カスタムメールの作成) オプションを選択します。

メールエディターが、デスクトップメールのレイアウトや本文を作成したり、パーソナライズしたりできる設計モードで開きます。エディターには、Content (コンテンツ)、Block (ブロック)、Body (本文)、Audit (監査)、Subject line (件名)、Display conditions (表示条件) のタブで構成されるサイドパネルがあり、各タブを開くと、それぞれに付随する機能にアクセスできるようになります。また、複数用意されているウィジェットを使って、コンテンツエレメントを必要に応じて追加したり、移動したり、画像、ボタン、リンクなどを添付したりすることもできます。

メールをレスポンシブに設計できることを確かめたい時は、デスクトップ設計のスタイルを設定する際に、モバイルに切り替えて、設計がモバイルデバイス向けにどのように最適化されているかを確認できます。そして必要に応じて、モバイルレイアウトに特化した修正を加えることができます。例えば、画像など、モバイルでの表示に適した向きやサイズではないコンテンツを非表示にすることができます。

設計モードでは、空白の編集領域とサイドパネルのタブが表示されます。

Content (コンテンツ) では、利用可能なコンテンツエレメントを選択して使用できます。コンテンツエレメントには、列や区切り線、見出しや本文テキストスタイル、ボタンやメニュー、画像やビデオなどが含まれます。また、ソーシャルメディアや Gmail のプロモーションへのリンクを含めることもできます。

コンテンツエレメントとその編集方法の詳細については、設計ガイドライン をご参照ください。

Block (ブロック) では、予め作成されている様々な列サイズの空白ブロックを使って、メールレイアウトをカスタマイズしたり、セクションを追加または削除したりすることができます。また、すぐに利用可能なブロックテンプレートもいくつか用意されています。これらのテンプレートブロックは、ヘッダー、コンテンツ、カタログ、フッターなどの基本構造から設計を開始するのに役立ちます。

Body (本文) では、メール本文のテキストのデフォルト属性を設定し、テキストと背景の色を選択できます。また、コンテンツの幅やアラインメントを調整して定義することもできます。

Audit (監査) では、メール作成時によく見られる問題を継続的に監査することができます。修正が必要な箇所にはフラグが立てられ、推奨される修正方法をメールの設計を完了する前に確認することができます。

Display conditions (表示条件) を使用すると、様々な条件に基づいて、メールの受信者が目にするコンテンツを変更できます。

Subject line (件名) では、メールの件名として最も適切で具体的なテキストを作成するための手引きとなる一連のルールが表示されます。作成した件名は一定の基準に沿って分析され、その分析結果から導き出される推奨案やべストプラクティスの知見を参照できるようになります。また、そうした提案に基づいてテキストの編集や改良を加えると、さらにリアルタイムで分析を続き、新たな推奨案が提示されます。

メールの作成を開始するには、新しいコンテンツエレメントをドラッグして、空白のコンテンツブロックにドロップします。設計領域にエレメントを追加すると、各セクションにコンテンツオプションを設定できるようになります。メールのコンテンツやレイアウトの構成を変えたい時は、ドラッグアイコンを使っていつでも調整可能です。各セクションをクリックすると、それぞれに対応するアクションが表示されます。

設計をよりスピーディーに作成する方法の一つとして、作成したコンテンツエレメントをメッセージ内で複製することができます。この機能は、設計がほぼ同じで内容を少しだけ変えるセクションをいくつかメールに含めたい時に便利です。この機能を活用するには、メッセージ設計で繰り返したいエレメントを選択し、複製ボタンをクリックします。複製されたエレメントが下に表示され、少し変えたいコンテンツの部分をそこで調整できるようになります。

メールを作成する際に、アンドゥーを選んで、最後に行った変更を取り消すことができます。考えが変わった場合は、リドゥーを使って変更を再び反映させることができます。コンテンツのいずれかのエレメントを削除したい時は、メッセージ内の該当セクションを選択し、Delete (削除) ボタンをクリックします。

設計プロセスのどの時点でも、Preview (プレビュー) に切り替えて、メールがどのように表示されるかを確認できます。プレビューでは、メールをデスクトップ、タブレットまたはモバイルのビューで表示できます。また、プレビューを使用して、設計中のメールに含めたいプレースホルダーをテストすることもできます。詳しくは、プレースホルダーおよびプレビューでの属性のパーソナライズをご参照ください。

さらに、Inbox Previews (受信トレイのプレビュー) を使うと、あらゆるメールクライアントやデバイスでメールがどのように取り扱われるかをテストすることもできます。詳しくは、受信トレイのプレビューをご参照ください。

メッセージの設計を完了したら、エディターを終了する前に、以下の操作を行うことができます：

コンテンツをメールテンプレートとして保存 - 設計したメールのコンテンツに名前を付け、テンプレートとして保存します。
HTMLのダウンロード - メールメッセージの HTMLバージョンをダウンロードします。

メッセージを保存し、エディターを終了するには、Done Designing (設計完了) をクリックします。

コンテンツエレメントの構成と制限の詳細については、設計ガイドライン をご参照ください。

設計ガイドライン

メールキャンペーンならびに配信を成功させるためには、設計が重要な役割を果たします。メールの構成に難があると、読者の信頼が損なわれ、無視されたり、迷惑メールに振り分けられたりする恐れがあります。以下に記載する設計ガイドラインは、メールを最も効率よく作成できる方法を提示するように考案されています。

最初のステップは、サイドパネルのウィジェットから手動で、または既定のテンプレートの1つを使ってメール構造を定義することです。サイドパネルには、エレメントを必要に応じてドラッグ&ドロップしながらメールを作成できるようにするウィジェットやオプション類が用意されています。エレメントはいつでも配置を変えたり、追加または削除したりできます。

Block (ブロック) タブは、空白の列レイアウトを選択してメッセージ構造の設計にのみ集中したい時に有用です。デフォルトの列レイアウトで良ければ、そのまま維持し、もし変えたいところがあれば、背景色、パディングや罫線など、個々の列設定を調整することができます。

ヘッダー、コンテンツ、カタログやフッターのブロックテンプレートを使用すると、設計をより充実させた状態で次の作業に進むことができます。また、ブロックをカスタマイズしたい場合は、カスタムブロックを最大25個まで作成できます。

メールエディターには、推奨される設計に関する知見が得られる Audit (監査) タブが設けられています。メッセージの監査を実行すると、重要なフォーマットまたはリンクが欠落している場合に通知を受けられるようになります。詳しくは、Audit (監査) をご参照ください。

レイアウトを完了したら、コンテンツ編集用のウィジェットをドラッグしてメールの入力を開始できます。各ウィジェットには独自の編集オプションがあり、その点については以下で詳しく説明します。ディバイダー用のウィジェットを使用すると、設計レイアウト用の視覚的なディバイダーを作成し、コンテンツをセクション別に分離できるようになります。また、行またはコンポーネントごとに、パディングを設定して、設計したコンテンツのエレメント間のスペースの間隔を調整することもできます。

その他にも、メディアをメール本文に挿入することができます。また、メールを設計した後に Attachment (添付ファイル) オプションを使って、追加のメディアやその他のファイルをメールに添付することも可能です。

監査

メールエディターを初めて開くと、Audit (監査) タブに注意書きが表示されています。監査タブで表示される注意書きは、メールを有効化するために、または法的に適合させるために実行しなければならない未完了の設計アクションが残っている場合にそのことを知らせるために表示されます。

最初に表示される注意書きは、すべてのメールにフッターが必要であることを通知するためのものです。フッターは、メールの受信者が希望すれば、配信を停止できるようにする場で、その機会の提供は標準的な法的要件として義務付けられています。この法的要件を満たすようにするには、[フッター] コンポーネントをメッセージ設計領域にドラッグします。

備考

設計したメッセージにフッターが加えられていない場合、そのメッセージの送信時にNTT CPaaSの方でデフォルトのフッターが自動的に挿入されます。

監査関連の通知は、重要項目を漏らすことなく、すべて構成に含めたメールを作成できるようにサポートすることを目的としています。その他の典型的な例としては、ボタン用のリンクの欠落や画像の代替テキスト (alt属性) 用のテキストの欠落を知らせる通知などがあります。

テキスト

メールの件名は通常、コンバージョンの獲得を左右するメールの最も重要な部分の一つです。

件名を書く時は、以下のルールを守るように心がけることをお勧めします：

件名は長すぎず、短すぎず、適度 (20〜60文字の間) の長さにする
適切な単語量で構成する
行動を起こさせる、あるいは目を引く言葉を使う
否定的な言葉を含めない
迷惑メールによく使用される文字または単語を含めない
過剰な句読点を使用しない
大文字と小文字を使って、スキャンと読みやすさを向上させる
数字を使用する (数字は開封率を高めることが証明されている)
様々な画面 (デスクトップ／モバイル)で問題なくプレビューを可能にする

件名が不適切な場合、迷惑メールと見なされる恐れがあります。常に「SPAM※」な件名にすることを心がけるようにしてください。※SPAM ＝ Short (短い)、Personable (親しみを感じさせる)、Attention-grabbing (注目を集める)、Meaningful (意味のある)

親しみやすい言葉と顔文字／絵文字を使って、受信者と個人レベルで繋がるようにします。相手のファーストネーム、時事ネタ、質問などを使って、注意を引くようにします。また、特別なプロモーションや限定品を暗示することで、件名に意味を持たせるようにします。

テキストやリンクに属性やプレースホルダーを使用すると、細部にわたってパーソナライズすることができます。詳しくは、URL、属性、そしてプレースホルダーについてそれぞれ詳述しているページをご参照ください。

メール本文は、他の種類のメディア、ならびにその後に続くフッターを挿入する前に、残りのテキストを記載するフィールドです。本文に含める文字数に制限はありませんが、読者の多くはプロモーション用のメールが長文だとあまり読む気にならないことに留意するべきです。

テキストフィールドには、選択可能な色やスタイルのオプションが数多く用意されています。デフォルトのテキスト属性とコンテンツのアラインメントは、本文タブで設定できます。

各テキスト領域のスタイルを変更したい時は、コンポーネントを選択し、コンテンツ タブで設定を調整します。

フォント

フォントは、メール設計の重要な要素です。エディターでメールを作成する時は、幅広い範囲 (約40種類) からフォントを選択して、デザイン性を向上できます。

現在、メールエディターはカスタムフォントの追加をサポートしていません。これは、すべてのフォントが無料で公開されている必要があるためです。また、フォントがメールクライアントと互換性がない場合は、それにマッチするフォールバックフォントを提供する必要があります。

法律上、Webフォントをオンラインで使用するにはライセンスが必要です。Webフォントは数年前から様々なウェブサイトで提供されており、その使用を許諾するライセンスはすでにウェブサイトやモバイルアプリの方でカバーされています。但し、メールで使用する場合のライセンスは、まだそれほど普及していません。多くのWebフォントサービスでは、メールでWebフォントを使用することは、フォントの再配布と見なされる可能性があり、EULA (エンドユーザーライセンス契約) に準拠していない場合もあります。

Webフォントをメールに使用することを認めるほとんどのライセンスは、毎月の開封数に基づいています。メールに有料のWebフォントを使用する場合、これは重要な留意点です。もしNTT CPaaS に有料のWebフォントを追加すると、すべてのクライアントがそのフォントを利用できるようになり、多大なコストが発生する恐れがあります。

また、カスタム (Web) フォントは通常、iOS メール、Apple Mail、Android (Gmail アプリではなく既定のメールクライアント)、Outlook 2000、Outlook.com アプリ、Thunderbird など、限られたメールクライアントでしかサポートされていません。

画像

画像はメールキャンペーンに欠かせない構成要素の一つです。画像を含まないメールキャンペーンもありますが、それはあくまで稀なケースです。画像を含むメールを作成する際、留意しておくべき点がいくつかあります。

メールエディターでは、画像の幅が701pxに制限されています。この設定を採用しているのは、画面やメールプロバイダーのフォーマットに最適なサイズであることが実証されているためです。エディターで画像の幅を編集することも可能ではありますが、メールに挿入する画像は、トリミングやサイズ変更によってコンテンツが失われるリスクを回避するためにも、この幅までに止めておくことをお勧めします。

画像ファイルは、エディターでは添付ファイルとして扱われます。添付可能な画像ファイルの最大データ容量は10 MBです。

メール本文に画像を追加する方法は2通りあります。ローカルデバイスから画像をアップロードするか、画像にアクセスできるリンクを添付するかです。後者の場合、リンク先が認証済み画像でないことを事前に確認しておく必要があります。

サポートされている画像形式は次のとおりです：

jpg/jpeg
png
gif

メールの受信者がクリックする画像にハイパーリンクを追加したい場合は、エディターの Image Link (画像リンク) オプションを使用します。このオプションを使用すると、例えば、メールで紹介しているプロモーションのサイトや送信元の自社ホームページに誘導することができます。

画像にAlternate Text (代替テキスト) を追加できます。代替テキスト (alt属性) は、画像がアクセシビリティ要件を満たすために重要です。このテキストを使うと、スクリーンリーダーを使用するユーザーに、画像の性質や内容に関する情報が確実に届きます。なお、記述する情報は簡潔することをお勧めします。

画像に代替テキストを追加しない場合は、Audit (監査) タブに注意書きが表示されます。

HTML

HTMLメールテンプレートを使用する場合は、HTML用ウィジェットを使った、コードをメッセージに直接貼り付けます。

ウィジェットを使ってHTMLに変更を加えた内容は、メールエディターにリアルタイムに反映されます。HTMLコードは、HTML用ウィジェットが置かれたセクションでのみ有効です。他のセクションの HTMLコードを編集することはできません。

ボタン

メール内の行動喚起ボタンは、メールキャンペーンに必要なランディングページへのファネルとしての役割を果たします。これらのボタンを使用することは常に良い習慣ですが、読者を混乱させるほど多くのボタンを置くべきではありません。必要最低限にとどめ、読者のクリックを促すのに十分な程度に目立たせるようにする方が効果的です。

ボタンは、読者が気づくのに十分な大きさにすると同時に、ラベルがはっきり見えるだけの大きさにしておくべきです。ラベルがボタンの幅を超える場合は、ボタンの幅を調整してください。

色、フォント、罫線など、他のスタイリング用の設定を使って、ボタンを目立たせることもできます。企業は多くの場合、自社のブランドカラーにこだわりますが、その色が映えるようにメールの背景とコントラストを付けることを心がけるべきです。

ソーシャル

ビジネスソーシャルページにソーシャルメディアへのリンクを追加することは、読者や顧客の関心を維持する上で非常に有効です。そうしたリンクは、彼らが他のコミュニケーションチャネルにオプトインする可能性を広げることにも繋がります。

他のソーシャルネットワークを追加したい時は、ソーシャルメディア用アイコンを選択します。必要な数だけ追加できるようになります。また、誘導したいページへのリンクを提供し、それを反映するようにアイコンを表示することができます。提供した画像を読者がクリックすると、事前にパーソナライズしたURLにその読者を移動させます。

ソーシャルネットワークを追加したら、サイドパネルで並べ替えることができます。3本線のアイコンの上にマウスを置き、選択範囲を別の位置にドラッグします。必要に応じて、スタイリング用オプション (パディング、背景、アラインメント) を使って、全体の見栄えを整えるようにします。

選択可能なソーシャルメディアリンクは30種類用意されています。アイコンの種類もお好みのスタイルに変更できます。

ビデオ

ビデオはメールに含めると、強力なメディアコンテンツになりますが、ほとんどのメールプロバイダーは、メール内で動画を再生するための技術要件をサポートしていません。

ビデオ用ウィジェットを使用すると、メールレイアウトに動画ファイルを挿入できます。指定したいビデオリソースのファイル保存先に直接アクセスできるようにするには、そのURLの直リンクを追加します。

サポートされているビデオ形式は次のとおりです：

mov
mp4
Webm

リンクからYouTubeやVimeoなどでホスティングされている動画にアクセスすることはできません。

サムネイルは必要に応じてカスタマイズできます。

ビデオへのリンクを使用せずにメールにアニメーションコンテンツを含める場合は、画像ウィジェットを使ってGIFを挿入します。

フッター

フッターは、メールの一番下に配置されるセクションであり、ここには通常、メール送信者に関する基本的な情報が記載されます。それに加え、メーリングリストから登録を解除するオプションなどへのリンクもよくここに置かれます。さらにフッターには、利用規約 (T&C)、著作権、プライバシーポリシー、受信の理由などを記載することもできます。こうした情報の掲載は、迷惑メールに関する苦情を減らすのに効果的です。

フッターは、すべてのメール通信において必須です。適用対象の迷惑メール防止法ならびにNTT CPaaSの利用規約に基づいて、フッターには以下の情報を記載することが義務付けられています：

当年
送信者の会社名
送信者の物理アドレス
登録解除リンク

必要な情報は、フッター用ウィジェットを使って表示します。フッターに記載されるデフォルトのテキストには、お使いのアカウントの詳細情報から取得した会社名と住所のプレースホルダーが使用されます。

フッターなしでメールキャンペーンを送信しようとすると、メールを起動する際にシステムがフッターの存在の有無を確かめます。

Webインターフェイスを通じてメールトラフィックを処理する場合、登録解除用のURLは自動的に追加されます。

APIを通じてメールトラフィックを処理する場合、登録解除用のURLは自動的に追加されないため、手動で追加する必要があります。

その際、APIリクエストに次の追加行を含めるようにします：

<a class="unsubscribe_link" href="{$unsubscribe}" style="color:#999; text-decoration:underline"> Unsubscribe </a>

登録解除リンクは NTT CPaaS によって生成され、プロバイダーは常に存在する必要があります。フッターには独自のリンクを使用できますが、NTT CPaaS によって生成された登録解除リンクは、プレビューモードでは表示されていなくても、常に存在しています。

HTTP および SMTP API で登録解除機能を有効にして使用するには、href 属性の値を {$unsubscribe} に置き換えます。

List-unsubscribe ヘッダー

メーリングリストへの登録を解除する機能は、送信者の信頼とレピュテーションにとって重要です。登録解除リンクは、見つけるのが難しかったり、メール本文の奥深くに置かれていたりする場合があります。ベストプラクティスは、登録解除の方法をいくつか提供するようにすることで、そうしておく方が受信者からの登録解除やスパム／迷惑メールの報告の数を減らすことに繋がります。

list-unsubscribe ヘッダーは、デフォルトでメールの見出しに配置される埋め込みリンクです。このリンクにより、受信者はメールをオプトアウトする方法を簡単に確認でき、メール内の登録解除リンクを検索せずに配信リストから各自のメールアドレスを削除できます。

list-unsubscribe ヘッダーは、すべての NTT CPaaS メールに含まれています。

URL

URLとリンクは、メッセージエディターならびにその中に用意されている数々のウィジェットを使って挿入することができます。メールには、画像リンク、ボタン、アカウント、フッター内のリンクなど、様々な移動先に結びつくリンクが数多く含まれている場合があります。

リンクアイコンとフィールドを使用して、選択した要素にリンクを追加します。一部のウィジェット (ビデオやボタンなど) にはリンクが必要です。リンクを追加せずにボタンや動画を追加すると、サイドパネルの Audit (監査) タブに注意書きのメッセージが表示されます。

Gmail プロモーション

Gmail Promo (Gmail プロモ) ウィジェットを使用すると、Gmail のアノテーションをメッセージに追加したり、インタラクティブで魅力的なコンテンツを設計したりできます。

Gmailのプロモーションタブでは、アノテーション付きのメールが自動的にグループ化され、強調表示されます。この機能を使うと、人々が最も関心を持ちやすいメールのコンテンツを特定し、お得な情報やプロモーションコード、有効期限などの重要な情報をアノテーション付きで簡単にハイライトすることができます。

アノテーションに画像を追加すると、メールメッセージに命が吹き込まれ、人の目に付きやすくなり、心に響くものになります。例えば、会社のロゴや画像をアップロードすると、他のメッセージとの差別化を図り、エンドユーザーの注目を集めることができます。

アノテーションを含むメールは、受信者のモバイル Gmail アプリケーションの Promotions (プロモーション) タブで強調表示されます。

Gmailプロモーションをテストする際、以下のヒントが参考になります：

アドレスの最後がpromotabtesting@gmail.comで終わるチーム専用のGmailテスト用アカウントを作成します (例：mycompany.promotabtesting@gmail.com)。このアカウントは、テストをより簡単かつ迅速に行うために、メールランキングやバンドリングをより積極的に行う機能を備えています。また、Gmailではそうした機能を一般ユーザー向けに提供する前に、テスト用アカウントで使用できるようにしています。
テスト前に繰り返し変更を行う場合は、プロモーションが正しく表示されるよう、必ず受信トレイから古いメッセージを削除するようにしてください。
こうしたメールの送信に使用する送信者は、「検証済み送信者」である必要があります。これは、DNSレコードが適切に設定され、Googleガイドライン (opens in a new tab)に準拠していることを意味します。
画像を正しく表示するには、アスペクト比が 3.9 であること、HTTPS でホストされていること、gif または webp 画像ではないことを確認してください。

備考

Gmail Promotions (Gmail プロモーション) タブでは、デスクトップ用の Gmail アプリケーションのアノテーションはサポートされていません。

キネティック機能

キネティック機能は、インタラクティブなコンテンツを追加して、メールをよりエキサイティングでインパクトのあるものにし、コンバージョン率を高める方法を提供します。この機能は、受信者がメールを離れることなくウェブサイトを体験できるようにすることを目的としています。

NTT CPaaSのキネティック機能をメールに追加するには、同機能に対応するウィジェットを設計中のメールにドラッグし、設定を使って動作を変更します。基本的なキネティック機能用ウィジェットは以下のとおりです：

インタラクティブクーポン
雨のアニメーション
カルーセル
ホバー画像
アコーディオン
ホットスポット
タブ

各ウィジェットには、アニメーションがメールクライアントと互換性があるかどうかを示す[互換性]セクションが表示されます。

インタラクティブクーポン

インタラクティブクーポン用ウィジェットを使用すると、インタラクティブな表示が可能な画像を追加することができます。インタラクティブクーポンは、受信者がクーポンをクリックして初めて、割引などのプロモーション内容が表示されるように設計されています。

クーポンの表と裏の両面を表示できるようにするために 2 つの画像を追加する必要があります。表面の画像はメールに表示され、受信者はそれをクリックすることで、クーポンの詳細内容が記載されている裏面を見ることができるようになります。画像アニメーションとしては、画像を裏返しになるように見せるFlip (反転) 、または画像が左右に動くように見せるSlide (スライド) のどちらかを選択できます。

雨のアニメーション

雨のアニメーション用ウィジェットを使用すると、雨が降っているかのように動くオブジェクトを設計中のメールに追加できます。オブジェクトとしては、Sphere (球体)、Image (画像) またはText (テキスト) のいずれかを選択できます。

オブジェクトの表示方法を変えることができます。例えば、表示するオブジェクトの数、それぞれのサイズや色などが変更可能です。また、オブジェクトが落下する間、それらを回転させるようにするオプションも用意されています。

雨のアニメーション用ウィジェットは、設計しているメールに一度だけ追加することができます。

カルーセル

カルーセル用ウィジェットを使用すると、そのカルーセルに含めたい画像の数々を設計中のメールにアップロードして、スライド式画像ギャラリーに追加することができます。カルーセルは、受信者がメールに挿入された一式の画像を左右に動かしながら閲覧できるように設計されています。

ギャラリーに追加できる画像の最大数は 10 枚です。画像ごとに、画像上に表示する個別のキャプションを追加したり、パーソナライズ用のプレースホルダーを含めたりすることもできます。

ホバー画像

ホバー画像用ウィジェットでは、2 つの画像を使って、メールメッセージに表示する情報を変更できます。ホバー画像は、受信者がメール内の画像にカーソルを合わせると、別の画像に切り替わるように設計されています。

メイン画像とホバー画像を表示できるようにするには、2つの別々の画像を追加する必要があります。メイン画像はメールに表示され、受信者がその上にカーソルを合わせると、ホバー画像が表示されます。

互換性がないためにホバー画像を表示できない場合、元の画像のみがフォールバック状態で表示されます。

各画像は異なる情報を伝えることができます。それはつまり、長くなりそうなコンテンツの文字数を減らせることを意味します。この機能を使って画像に微妙な変化を加えることで、メールの受信者の目を各画像ならびにそれぞれのテキストに自然と向かせることができるようになります。

アコーディオン

メールメッセージに大量のテキストが含まれる場合、限られたコンテンツの表示スペースを有効活用できるようにする折りたたみ可能なセクションを作成することができます。折りたたみ可能なセクションを使用すると、メールメッセージの表示用として割り当てるスペースの節約が図れ、メッセージが長文であった場合でも、そのメッセージを読む受信者の負担を軽減できます。

Accordion widget (アコーディオン用ウィジェット) を使用すると、メッセージテキストを複数のドロップダウンセクションに分けて表示できるようになります。

受信者が受け取ったメールを開くと、まず見えるのが、各セクションがタイトルとして表示されている状態のメッセージです。受信者は、詳細を読みたいセクションがあれば、そのタイトルを選択することで、折りたたまれていたテキストを展開できます。

ホットスポット

ホットスポット用ウィジェットを使用すると、インタラクティブなホットスポットで画像やグラフィックの機能性を高められます。例えば、画像上の特定箇所について詳しい追加情報を提供したり、商品の特徴を強調したり、コレクションに含まれる個々のオファーの詳細を伝えたりすることができます。ホットスポットは人の目を引き、クリックスルーコンバージョンを向上させるように設計されています。受信者がホットスポットをクリックすると、関連する画像、テキストや行動喚起のポップアップが表示されます。

ホットスポット用ウィジェットを使うと、ホットスポットの作成が簡素化でき、複雑なマッピングや座標の調整が不要になります。ホットスポットは、各画像に最大10個まで追加できます。

各ホットスポットはマーカーで識別されます。マーカーにラベルを付け、Top (上) とLeft (左) のパーセンテージ矢印を使って画像上のラベルの位置を調整します。ホットスポットをクリックすると、事前に定義した画像とテキストを表示するポップアップが現れます。また、行動喚起リンクをここに追加することもできます。

互換性がないためにホットスポットを表示できない場合、元の画像と画像リンクのみがフォールバック状態で表示され、受信者はそのリンクから、より詳細なページを開くことができます。

タブ

タブ用ウィジェットを使用すると、限られたスペースにコンテンツを部分的に分けて表示するための個別のセクションを作成できるようになります。各タブに設けられるこうしたセクションは、メールメッセージを表示するスペースを効率よく使い、長いメッセージでも受信者にあまり負担をかけずに読み進められるようにします。

設計上、メッセージテキストを別々のタブに分けて表示したい時は、Tabs widget (タブ用ウィジェット) を使用します。タブを作成する際、コンテンツを識別するための Header text (ヘッダーテキスト) を指定します。各タブに関連する詳細情報を入力することができます。また、情報に合わせてテキストの書式設定を調整できるオプションも用意されています。タブは最大10個まで追加できます。完成したメールメッセージのタブがどのように表示されるかを確認するには、[プレビュー] オプションを使用します。

受信者が受け取ったメールを開くと、ページ上部に、メッセージを部分的に分けて表示する各セクションがタブとして表示されています。受信者は、タブを選択することで、それぞれのタブに関連する詳細情報を読むことができるようになります。

パーソナライズ化

プレースホルダー

氏名やアカウント番号などの個人属性をリンクやフィールドで使用するだけでなく、標準属性やカスタム属性のプレースホルダーを追加して、同時に多くの顧客をターゲットにすることもできます。

リンクを追加する際、そのリンクを[特別リンク]として動作するように設定すると、メッセージをブラウザで表示するか、受信を停止するかを選択できるようになります。そうしたい場合は、リンクを挿入または編集する際に、特別リンク をクリックして、次のどちらかを選択します：

View in browser (ブラウザーで表示) {$browserlink}
Unsubscribe (登録解除) {$unsubscribe}

備考

[ブラウザーで表示]機能は、API 経由で送信されるメールトラフィックに対しては自動的にアクティブ化されません。この機能を使用するには、NTT CPaaS の担当者にお問い合わせください。

標準属性とカスタム属性は、ユーザープロファイルに関連付けられています。属性とその設定方法の詳細については、People について詳述しているドキュメントをご参照ください。

単純式

単純式は、メールメッセージに含める個人用設定を操作できるようにする機能です。

これは、挿入される属性のデータ型に基づきます。例えば、文字列属性では、proper caseやlower caseなどの式で表示できます。また、数値属性では、round、formatなどの式で表示できます。

単純式により、システムへの格納方法に関係なく、すべての属性が適切かつ一貫して表示されます。

単純式機能では、次の書式設定オプションがサポートされています；

String: (文字列：)

proper case (適切な大／小文字)
lower case (小文字)
upper case (大文字)

Numeric: (数値：)

round (< X.5 の場合は切り捨て、>= X.5 の場合は切り上げ)
floor (切り捨て)
format (小数点以下 2 桁まで)

Date(Time): (日付 (時刻)：)

US 形式 (yyyy-MM-dd または yyyy-MM-dd hh:mm)
EU 形式 (dd/MM/yyyy または dd/MM/yyyy hh:mm)
DayOfYear関数
DayOfWeek関数
日付の月

例えば、firstName などの文字列属性を選択してメールメッセージに含めると、次のオプションが表示されます：

最初の文字だけが大文字のファーストネーム
すべての文字が小文字のファーストネーム
すべての文字が大文字のファーストネーム

表示条件

表示条件は、メールに適用する条件を設定・管理できる機能です。この機能を使用すると、様々な条件に基づいて、特定の受信者に特定のコンテンツを送信できるようになります。その結果、1つのメッセージを広く配信する際、受信者はそれぞれ自分に合ったコンテンツを受け取ることになります。

表示条件を使用すると、各メッセージの条件を作成したり、管理したりできます。メッセージごとに最大50の条件を定義できます。

新しい表示条件を作成するには：

メールエディター上で、Display conditions (表示条件) タブを選択します。
Create Condition (条件の作成) をクリックします。
条件の Name (名前) とDescription (説明) を入力します。
条件の Attribute (属性) を選択します。例えば、Interest is Messaging (関心はメッセージング) を選択します。
より複雑な条件を作成したい場合は、AND または OR 演算子を活用します。次の例の図では、表示条件の Nameフィールドに [Messaging] または [Technology] が表示され、条件として使用する [Interest (関心)] の OR 演算子が Messaging または Technology になっています。次に、Save (保存) をクリックして、メール表示で使用する条件を保存します。
メール設計画面で、条件を割り当てる行またはコンテンツを選択します。次の例の画像では、行が選択されています。
プロパティパネルで Add Display Condition (表示条件の追加) をクリックして、選択したコンテンツの条件を追加します。
選択したコンテンツの条件を選択します。
作成した条件に問題がないかを確認したい時は、Preview (プレビュー) を使用します。Test placeholders (プレースホルダーをテスト) タブを開き、そこに選択した条件を入力します。

例えば、メッセージの中に様々なトピックを盛り込んだニュースレターを作成し、受信者の関心事に基づいて、それに関連するトピックのみを動的に表示できるようにする表示条件を作成することができます。

リピートブロック

リピートブロック機能を使用すると、パーソナライズされたリストをメールのメッセージに含め、キャンペーンまたは受信者ごとに品目が動的に読み込まれます。

この機能を使用すると、次のものを構築できます。

カート放棄メッセージ
ニュースレター
在庫残りわずか
値下げ
ポリシーの有効期限のリマインダー

リピートブロックは、データのリスト (配列) を使用し、配列内のエントリーごとにテンプレートのセクションを自動的に繰り返します。品目のプロパティに格納されたデータは、繰り返されるブロックごとに動的に読み込まれます。

リピートブロックを作成するには、以下を使用します：

カスタムメール メッセージを作成するか、テンプレートを使用します。
表示したコンテンツのレイアウトを作成します。
各項目で繰り返したいブロックをクリックします。
プレースホルダーのアイコンをクリックします。
ポップアップウィンドウで、表示したい項目が含まれているリストを選択します。カタログまたはリスト属性をループできます。
リストの中から一部の品目を特定したい時は、Filter (フィルター) オプションを使って絞り込みます。
メッセージに表示する品目の数を制限したい時は、Maximum amount (最大量) カウンターを使用します。
備考
各メッセージで表示する品目は 15 個以内に止めておくことをお勧めします。
カタログをデータソースとして使用する場合は、各受信者によりマッチする品目を提示して、メッセージのパーソナライズ化を図ることができます。 People 属性とマッチする Catalog (カタログ) フィールドを選択すると、受信者の属性に一致する品目のみがメッセージに表示されます。複数のマッチングルールを追加して、パーソナライズされたリストを調整できます。例えば、受信者と同じ[サイズ]の品目があり、そのパーソンが関心を持っている[Category (カテゴリー)]に分類される[Catalog (カタログ)]内の[Product (製品)]を表示したい場合に、この操作を行うようにします。
さらに、項目を並べ替えて、表示される順序を調整します。 Available placeholders (利用可能なプレースホルダー) セクションには、メッセージで使用できるすべてのデータが表示されます。これらのプレースホルダーを使用して、各項目に関するデータを動的に読み込みます。
メッセージをテストしたい時は、Preview (プレビュー) をクリックします。

テンプレート言語

動的コンテンツを含むメールを送信するには、HTML コンテンツ内でテンプレート言語を使用し、リクエストの to パラメーターでプレースホルダー値を定義します。使用可能なテンプレート言語コンストラクトのいずれかを HTML コンテンツに追加して、置換、条件ステートメント、または反復を解決します。

APIリクエストで新しいテンプレート言語コンストラクトを使用するには、templateLanguageVersion=2というパラメーターを指定します。

詳しくは、API 開発者ハブのフル機能を備えたメールの送信 (opens in a new tab)をご参照ください。

テンプレート言語構文

テンプレートには Placeholder (プレースホルダー)が含まれる場合があり、テンプレートが評価される時に値に置き換えられます。また、テンプレートのロジックを制御する expressions (式) とtags (タグ) を含めることもできます。

テンプレート言語要素は、次の区切り文字で囲む必要があります：

{$placeholder_name} プレースホルダーをプリントする場合
{{ ... }} テンプレート出力にプリントしたい式の場合
{% ... %} 文を制御・操作するタグ (条件とループ) の場合

テンプレートエンジンは、プレースホルダーまたは式を検出すると、それを評価して結果に置き換えます。

条件

{% if %} タグを使用して、式の結果に応じてコンテンツのチャンクを条件付きとして指定します。式の結果が true の場合、コンテンツが表示されます。

入力	出力
{% if {$firstName} == "Alex" %} Hello, Alex! {% endif %}	Hello, Alex!

if ブロック内で {% elseif %} タグと {% else%} タグを使用して、前の条件がすべて失敗した場合に表示される追加の条件を定義します。

備考：すべての if ブロックには、終了タグ {% endif %} が必要です。

入力	出力
{% if {$firstName} == "Alex" %} Hey Alex!{% elseif {$firstName} == "Anna" %}Hey Anna!{% else %}Hi Stranger!{% endif %}	Hey Anna!

演算子

if 文では、論理演算子と比較演算子を使用できます。

`==`	等しい	{% if {$firstName} == "Alex" %}Hey, Alex{% endif %}
`!=`	等しくない	{% if {$firstName} != "Alex" %}Hey, you!{% endif %}
`>`	greaterthan (大なり)	{% if {$score} > 50 %}Congratulations!{% endif %}
`<`	less than (小なり)	{% if {$score} < 50 %}I'm sorry, but you lost{% endif %}
`>=`	以上	{% if {$grade} >= 95 %} Congratulation, you passed! {% endif %}
`<=`	以下	{% if {$grade} <= 30 %} You failed {% endif %}
`or`	論理和	{% if {$season} == “Summer” or {$weather} == “Hot” %} It’s time for ice cream! {% endif %}
`and`	論理積	{% if {$gender} == “Female” and {$married} == “yes” %} Hello, Mrs. {$lastName}! {% endif %}
not	論理否定ブール式を否定します	{% if not {$hasAccount} %}Please, register!{%else%}Hello, customer!{% endif %}
contains関数	文字列の中に部分文字列があるかどうかをチェックします。文字列の配列の中に文字列があるかどうかも調べることができます。	{% if {$productTile} contains “Jeans” %} This product’s title contains the word Jeans. {% endif %} {% if {$products}[0] contains 'title' %}You have {{ {$product}[0].title }} in your cart.{%endif%}
even	数値が偶数かどうかを確かめます	{% if {$number} is even %}4 is even!{% endif %}
odd	数値が奇数かどうかを確かめます	{% if {$number} is odd %}5 is odd!{% endif %}

ループ

{% for %} タグは、要素またはオブジェクトのコレクションに対する単純な反復処理に使用します。

limit:n を使用して、ループを指定されたn 回の反復回数に制限します。

注: すべての for ブロックには、終了 {% endfor %} タグが必要です。

要素のリストを反復処理する

入力	出力
You left products in your cart: {% for item in {$cart} limit:3 %} {{ product }}{% endfor %}	You left products in your cart:ShirtJeansShoes

オブジェクトのリストを反復処理する

入力	出力
You left products in your cart: {% for item in {$cart} limit:3 %} {{ item['name'] }}, {{ item['price'] }}, {{ item['quantity'] }} {% endfor %}	You left products in your cart:Shirt, 10 EUR, 2Jeans, 20 EUR, 1Shoes, 50 EUR, 1

リスト内の項目の位置を計算する

テキスト内の項目のリストを反復処理する場合は、リストのサイズを計算し、リスト内の項目の位置に応じてルールを追加できます。

入力	出力
{% if {$dataList of Products}.size == 1 %} Your Policy for {{ {$Policies}[0]['Name'] }} expires in 10 days. Renew now on our app and get cash rebates for driving less. {% elseif {$dataList of Products}.size > 1 %} Your Policies for {% for item in {$Policies} limit:3 %} {{ item['Name'] }} {% if not loop.last %} and {% endif %} {% endfor %} expire in 10 days. Renew now on our app and get cash rebates for driving less. {% else %} Your Policies are fine. {% endif %}	Your Policies for ABC1 and ABC2 expire in 10 days. Renew now on our app and get cash rebates for driving less.

入力

出力

{% if {$dataList of Products}.size == 1 %}
Your Policy for {{ {$Policies}[0]['Name'] }} expires in 10 days.
Renew now on our app and get cash rebates for driving less.
{% elseif {$dataList of Products}.size > 1 %}
Your Policies for
{% for item in {$Policies} limit:3 %}
{{ item['Name'] }}
{% if not loop.last %} and
{% endif %}
{% endfor %} expire in 10 days. Renew now on our app and get cash rebates for driving less.
{% else %} Your Policies are fine.
{% endif %}

Your Policies for
ABC1 and ABC2 expire in 10 days. Renew now on our app and get cash rebates for driving less.

式

expression 関数を呼び出すことで、メールで式を使用できます。

詳しくは、式言語について詳述しているドキュメントをご参照ください。

例

文字列フォーマット
lower	文字列をすべて小文字に変換します。	入力：{ expression('lower({$title})') }} 出力：hello, dear friend!
upper	文字列をすべて大文字に変換します。	入力：{ expression('upper({$title})') }} 出力：HELLO, DEAR FRIEND!
proper	単語の頭文字だけ大文字にして、残りの文字を小文字にすることで、文字列を適切な大文字と小文字に変換します。	入力：{ expression('proper({$title})') }} 出力：Hello, Dear, Friend!
番号の形式
numberformat	10 進数を書式設定します。ドットの後に表示する記号の数を調節するには、[#]記号を使用します。	入力：Price is: {{ {$price} \| numberformat('#.##') }} EUR 出力：Price is: 5.00 EUR
round (四捨五入)	指定した小数点以下の桁数で四捨五入した数値を返します。	入力：{{ expression('round({$pi}, 2)') }} 出力：3,14
floor (床)	最も近い整数に切り捨てられた数値を返します。	入力：{{ expression('floor({$pi}') }} 出力：3
日付フォーマット　詳しくは、https://pebbletemplates.io/wiki/filter/date/ (opens in a new tab) をご参照ください。
date (日付)	指定されたパターンを使って日付を書式設定します。このフィルターを使用する別の方法は、文字列に対して使用し、2 つの引数を指定することです: 1 つ目は出力に必要なパターンで、2 つ目は入力文字列の解析に使用される既存の形式です。	入力：{{ expression('formatDate({$birthDate}, "dd.MM.yyyy")') }} 出力：01.05.2000 入力：{{ "May 01, 2000" \| date("yyyy-MM-dd", existingFormat="MMMM dd, yyyy") }} 出力：2000-05-01
dayOfYear	指定された日付の通算日を 1 から 366 までの数値で返します。	入力：{{ expression('dayOfYear({$birthDate})') }} 出力：121
dayOfMonth	指定された日付を月の何番目の日を示す 1 から 31 までの数値で返します。	入力：{{ expression('dayOfMonth({$birthDate})') }} 出力：1
dayOfWeek	指定された日付が週のどの曜日であるかを示す 1 (日曜日) から 7 (土曜日) までの数値で返します。	入力：n{{ expression('dayOfWeek({$birthDate})') }} 出力：2
数学関数
+, -, *, /	通常の数学演算子はすべて使用できます。演算順序が適用されます。	入力：Price without tax: {$price} EUR. With tax: {{ {$price} + ({$price} * {$taxSize}) }} EUR.Split for 4 payments (without tax): {{ {$price}/4 }} EUR. 出力：Price without tax: 8 EUR. With tax: 9.04 EUR. Split for 4 payments (without tax): 2 EUR.

HTMLの使用

メールを最初から作成したくない場合、またはメールキャンペーン用に提供されている HTMLファイルがある場合は、その HTMLファイルをメールエディターにアップロードできます。場合によっては、どのようなメールクライアントで閲覧されても、期待通りのメール構成と閲覧が保証されるようにHTMLファイルが提供されることもあります。また、HTMLを使用することで、例えばリストを含む場合など、メールのコンテンツエレメント構造をフルに活用することができます。

HTMLに慣れていない場合、メールを作成する最も簡単な方法は、メールエディターを使用することです。

HTMLファイルは、ブロードキャストおよびフローでメッセージの一部として使用できます。上記の手順を使用して新しいメールを作成する場合は、カスタムメールを作成する代わりに、Upload HTML File (HTMLファイルのアップロード) オプションを選択します。次に、ローカルに保存したHTMLファイルを選択できるアップロードウィンドウが表示されます。

アップロードしたHTMLファイルは編集できるようになります。また同時に、デスクトップ用とモバイル用のプレビュー画面が横に表示され、編集するたびに表示内容がリアルタイムに更新されていきます。

編集を完了したら、Done Designing (設計完了) をクリックします。必要に応じて、いつでも戻ってエディターでHTMLを編集できます。

プレビュー

プレビューでは、表示条件やリピーターの設定などの追加要素を表示せずに、設計中のメールを表示できます。プレビューには、メールを顧客に送信する前にテストするためのオプションがいくつか用意されています：

メッセージレイアウト内でパーソナライズした属性をテストするオプション
設計したメールを使ったテストメッセージを送信するオプション

プレビューに表示するパーソナライズされた属性

プレビューモードでは、表示条件やリピーター設定などの設計要素を非表示にした状態でメールがどのように表示されるかを確認できます。設計にパーソナライズされたプレースホルダーを含める場合は、最終的な設計を確定する前に、メッセージで使用される変数の値を評価することをお勧めします。

プレビューには、プレースホルダーをテストするオプションが用意されています。そのオプションを使うと、名前、苗字やその他のプレースホルダーにそれぞれ何がしらの値を入力して、パーソナライズした属性が設計でどのように表示されるかを確認できます。

例えば、メールにDear {$firstName} というプレースホルダーが含まれている場合、メールをプレビューする際に、サンプル情報を使用してプレースホルダーがどのように表示されるかをテストするオプションがあります。

Test placeholders (プレースホルダーをテスト) タブを選択して、メールに含まれるすべてのプレースホルダーを表示します。この例では、プレースホルダー {$firstName}は First Name (ファーストネーム) を表示しています。プレースホルダー入力フィールドに文字や値を入力すると、入力したメールプレビューのテキストが自動的にプレビューに表示されます。

プレビューに表示するテストメッセージ

プレビューを使用すると、通信設定なしで、メールのメッセージを顧客に送信する前にテストできます。プレビューは、フロー、ブロードキャスト、コンテンツメールテンプレートなど、メールのメッセージを作成できる場所であればどこでも利用できます。

この機能を使うと、メールメッセージを簡単にチェックし、設計段階で直接調整を加えることができるため、必要な通信設定に煩わされることなく、メッセージの内容の吟味に専念することができます。

プレビュー画面で、Send a test message (テストメッセージの送信) タブを選択し、テストメールの受信者のメールアドレスを入力します。

テストメッセージを送信する準備ができたら、Send Test Message (テストメッセージの送信) ボタンをクリックします。

テストメッセージは、件名が testの受信トレイに送られます。テストメッセージの送信者名は、ブロードキャストまたはフローのメッセージに既に指定した送信者、またはこのアカウントに最初に登録されたドメインから取得されます。

アカウントにドメインが登録されていない場合、送信者名は、このアカウントに対して検証された単一送信者から取得されます。

受信トレイのプレビュー

受信トレイのプレビューを使用すると、多くのメールクライアント、アプリ、デバイスでメールを簡単にプレビューして、ブランドに合ったエラーのない購読者体験を確実に提供できるようになります。

一部のメールクライアントでは、スタイルが上書きされ、意図したとおりにメッセージがレンダリングされない場合があります。この機能は、実際に受信者に送信する前にメッセージをテストし、配信先の受信者が閲覧する手段として選択する可能性のあるあらゆるメールクライアントやデバイスで、設計したメールがどのように表示されるか確認するのに役立ちます。

メールエディターで、受信トレイのプレビューにアクセスするには、Inbox Previews (受信トレイのプレビュー) をクリックします。受信トレイのプレビューは、Litmusのメールマーケティングプラットフォームと統合しているNTT CPaaS でアクティブ化されます。

備考

この機能を使用するには、Litmusアカウントが必要です。

受信トレイのプレビューの使用を開始するには、Exchange で Litmus アプリをアクティブ化する必要があります。

Inbox Previews (受信トレイのプレビュー) をクリックすると、既にアプリをアクティブ化している場合は Litmusログインページが開くか、Activate the Litmus Integration in Exchange (ExchangeでLitmus統合をアクティブ化する) オプションが表示されます。

Inbox Previews (受信トレイのプレビュー) のLitmus統合をアクティブ化するには：

NTT CPaaSのWebインターフェイスで、Exchange (opens in a new tab) > All Apps に移動します。
Litmusを検索します。
Add (追加) をクリックしてアプリを追加します。

Email Editor Inbox Previews Litmus Integration

受信トレイのプレビューは、メッセージを設計する時に有用です。

Inbox Previews (受信トレイのプレビュー) をクリックします。Litmusアカウントの使用に関するメッセージが表示されます。
Connect (接続) をクリックして、Litmusアカウントにサインインします。
Litmus登録しているメールアドレスとパスワードを入力し、Sign In (サインイン) をクリックします。
Desktop Clients (デスクトップクライアント) ページが開きます。そこでは、メールクライアントの様々なプレビューをナビゲートできます。
Choose email clients (メールクライアントの選択) をクリックして、テストするメールクライアントを構成します。ダークモードを含むデバイスをテストすることもできます。次に、Save list (リストを保存) をクリックします。
Retest (再テスト) をクリックして、クライアントとデバイスのリストのプレビューを生成します。
個々のプレビューをクリックすると、それぞれの詳細が表示されます。
Comparison View (比較ビュー) をクリックすると、クライアントビューまたはデスクトップビューをモバイルビューと比較できます。この比較作業は、その結果に基づいて、必要ならば要件を再調整し、メッセージ設計がそのままで問題なく、追加の調整が不要であることを確認するのに役立ちます。

メール検証テンプレート