エディターのデザインガイドライン

メールのデザイン は、メールキャンペーンの成否を左右する重要な要素です。構成がしっかりしていて、視覚的にも魅力的なメールは、信頼関係の構築やエンゲージメントの向上につながり、スパムフィルターに引っかからないようにするのに役立ちます。　　

まずはメールのレイアウトを固めるところから始めます。レイアウト作業は。以下の方法で進めることができます：

サイドパネルのウィジェットを使って、全体の構造を手動で組み立てます 。
セットアップを迅速に行いたい時は事前定義されたテンプレート を使用します。

サイドパネルから要素をドラッグ&ドロップしてコンテンツを追加し、必要に応じて要素を並べ替えたり、追加したり、削除したりします。

コンテンツ

Content (コンテンツ) タブには、メールキャンペーンを作成したり、カスタマイズしたりする時に使用できる様々な要素が用意されています。

テキスト [#text-content]

メールを構成する最も重要な要素の一つが件名です。その理由は開封率やコンバージョンに直接影響を与えるからです。よく練られた件名は、行動を喚起する言葉や注目を集める表現が並び、20～60文字程度にまとめられています。否定的な文言や過剰な句読点の使用は避けるべきです。大文字を使うと読みやすさが向上し、数字を入れるとエンゲージメントを高めることができます。件名が決まったら、デスクトップとモバイルの両方で正しく表示されることを必ず確認するようにしてください。

ヒント件名を作成する際、 SPAM の原則を適用することをお勧めします。つまり、件名は短く (Short)、親しみやすく (Personable)、注目を引き (Attention-grabbing)、意味のある (Meaningful) ものにすることを心がけるようにします。

親しみやすい表現、絵文字や送信相手のファーストネームを織り交ぜて、受信者と親密な関係を築き、時事問題や質問、限定オファーなどを盛り込むことで、それぞれがメッセージに関連性を感じられるようにします。

テキストやリンク内に属性やプレースホルダーを使用すると、高度にパーソナライズされたメッセージを作成できるようになります。

メールの本文には、主なテキストコンテンツが記載され、その後に画像、動画またはその他のメディア要素、そしてフッターが続きます。読者の関心を引き続けるために、コンテンツは簡潔かつ要点を絞ったものにすることが望ましいです。

Body (本文) タブでは、テキストのデフォルトの属性やアラインメントを設定できます。個々のテキスト領域のスタイルを設定するには、そのコンポーネントを選択し、Content (コンテンツ) タブで設定を調整します。

フォント [#fonts-content]

フォント は、メールのデザインや読みやすさを向上させる上で重要な役割を果たします。メールエディターには、メールの見た目がブランドのスタイルにマッチしやすくなるよう、豊富な種類のフォントが用意されています。

カスタムフォントはサポートされていません。メールで使用するすべてフォントは、無料で一般に公開されているものに限られ、受信者のメールクライアントでサポートされていない場合に備えて、対応する代替フォントが用意されている必要があります。

法令およびライセンスに関する考慮事項

ウェブフォントをオンラインで利用するには、ライセンスが必要です。多くのウェブフォントのライセンスでは再配布が制限されているため、有料フォントをメールに含めると、エンドユーザー使用許諾契約 (EULA) に違反する可能性があります。
一部の有料ウェブフォントは、月間のメール開封数に基づいてライセンスが設定されており、メールエディターですべてのクライアントがそのフォントを利用できるようにすると、コストが嵩んでしまう恐れがあります。

互換性に関する考慮事項

カスタムウェブフォントは、一般的に、以下を含む限られたメールクライアントでしか正しく表示されません：

iOS Mail
Apple Mail
Androidのデフォルトのメールクライアント (Gmailアプリ以外)
Outlook 2000
Outlook.com アプリ
Thunderbird

その他のメールクライアントでは、メッセージを読みやすくするため、選択したフォントは自動的にデフォルトのフォントに切り替わります。

画像 [#images-content]

画像は、たいていのメールキャンペーンで重要な素材となります。メールエディターでは、画像の幅を多くの画面や大半のメールプロバイダーにとって最適なサイズである701ピクセルに制限しています。画像の切り取りやサイズ変更の問題を避けるため、このサイズに合わせて画像を準備することをお勧めします。画像ファイルの容量の上限は10MBです。

メールに画像を添付するには、以下の方法があります：

デバイスからエディターに直接アップロードする。
画像リンクを使用する。（この方法を採用する場合は、そのURLにアクセスする際に認証が不要であることを確認しておく必要があります。）

対応している形式には、以下のものが含まれます：

JPG/JPEG
PNG
GIF

Image Link (画像リンク) 機能を使用すると、画像をクリック可能な状態にして、クリックすると、そこからプロモーション、ホームページやその他の関連ページに遷移するように設定できます。

画像には必ず Alt Text (代替テキスト) を追加するようにします。代替テキストを設定しておくと、スクリーンリーダーを使用しているユーザーが画像の内容や目的を理解できるようになります。説明文は簡潔にまとめるようにしながらも、必要な情報を十分に伝えられるようにしておくべきです。代替テキストが設定されていない場合、Audit (監査) タブに警告が表示されます。

ベストプラクティス： アクセシビリティと配信到達性を向上させるために、すべての画像に明確で理解しやすい代替テキストを設定しておくようにします。

HTML [#html-content]

カスタムのHTMLメールテンプレートを使用したい場合は、HTMLウィジェット を使ってコードをメッセージに直接貼り付けることができます。HTMLで行った変更は、メールエディター内にリアルタイムで反映されるため、変更内容をすぐに視覚的に確認できます

備考HTMLコードは、HTMLウィジェットが配置されているセクションにのみ影響します。メールの他のセクションのHTMLを編集することはできません。

ボタン [#buttons-content]

行動喚起 (CTA) ボタン は、メールキャンペーンの受信者を目的のランディングページへと誘導します。読者に過度の負担をかけたり混乱させたりしないよう、ボタンの数は控えめに止めておくべきです。目に留まりやすく、クリックを促しやすい位置に、最小限のボタンを配置することに重点を置くようにします。

ボタンをデザインする際は、認識しやすく、テキストラベルが収まる十分な大きさにすることが重要です。ラベルがすべて表示されるよう、必要に応じて幅を調整するようにします。

ボタンのスタイルは、次のようにカスタマイズできます：

色：コントラストを使用すると、ボタンを背景に対して目立たせることができます。
フォント：ラベルが読みやすく、ブランドのスタイルとマッチしているものを選ぶようにします。
ボーダー：デザインを煩雑にすることなく、視覚的なアクセントを加えたい時に役立ちます。

ユーザーのエンゲージメントを最大限に高めるためには、ボタンが背景と視覚的に明確に識別できることを常に心がけるべきです。

ソーシャル [#social-content]

メールを受信した読者の関心を高め、他のチャネルを通じて繋がりを深めてもらうために、自社のソーシャルメディアページ へのリンクを追加しておくようにします。該当するソーシャルメディアのアイコンを選択し、自社ページへのリンクを設定しておけば、メール内のアイコンをクリックした受信者は指定されたURLに遷移します。

サイドパネル内に表示するソーシャルネットワークは、ドラッグして希望の位置に入れ替えることができます。パディング、背景、アラインメントなどのスタイル設定を調整して、レイアウトをすっきり整えておくようにします。

エディターには30種類のソーシャルメディアネットワークが用意されており、デザインの好みに合わせてアイコンのスタイルをカスタマイズすることができます。

動画 [#video-content]

動画は非常に魅力的ですが、ほとんどのメールプロバイダーは、メール内で直接動画を再生する機能をサポートしていません。動画ウィジェット は、動画ファイルに直接アクセスできるリンクとなるURLを追加することで、動画の挿入を可能にします。　

対応している動画形式には、以下のものが含まれます：

MOV
MP4
WebM

備考YouTubeやVimeoなどのプラットフォームで視聴できる動画へのリンクはサポートされていません 。

動画のサムネイルをカスタマイズして、見栄えを良くし、クリックを促すことができます。動画にリンクしていないアニメーションコンテンツの場合は、画像ウィジェット を使ってGIFを挿入できます。

フッター [#footer-content]

フッター とは、メールの下部に表示されるセクションのことで、通常、送信者に関する重要な情報が記載されます。それには、登録解除のリンク、利用規約、著作権に関する通知、プライバシーポリシー、そのメールが送信された理由などのリンクが含まれます。フッターを適切に使用することで、スパムに関する苦情を減らし、迷惑メール防止法などの法規制に確実に準拠することができます。

フッターへの記載が義務付けられている情報

すべてのメール通信のフッターには、以下の情報を記載する必要があります：

今年度
送信者の会社名
送信者の物理的な住所
登録解除リンク

これらの情報は、フッターウィジェット を使って表示できます。デフォルトのフッターテキストには、会社名と住所のプレースホルダーが含まれており、これらはお使いのアカウントから自動的に取得されます：

フッター付きのメールの送信

フッターなしでメールを送信しようとすると、フッターが追加されるまでシステムは送信を許可しません：

APIを使用する際は、リクエストに以下の行を含めて、登録解除用URLを手動で 追加する必要があります： <a class="unsubscribe_link" href="{$unsubscribe}" style="color:#999; text-decoration:underline">Unsubscribe</a>
Webインターフェース経由でメールを送信する場合、Create custom email (カスタムメールの作成) または Choose a template (テンプレートを選択) オプションを使用すると、登録解除用URLが自動的に含まれます。Upload HTML file (HTMLファイルのアップロード) オプションを選択した場合は、上記で説明した通り、登録解除用URLを手動で 追加する必要があります。

NTT CPaaSによって生成された購読解除リンクは常に含まれており、プレビューモードで非表示になっている場合でも、必ずそのまま残しておく必要があります。HTTP または SMTP API 経由で登録解除機能を有効にするには、href属性の値を{$unsubscribe}に置き換えるようにします。

List-unsubscribeヘッダー [#list-unsubscribe-header-content]

受信者に登録解除を簡単にできる手段を提供することは、信頼の維持や送信者のレピュテーションの保護にとって不可欠な対応です。list-unsubscribeヘッダー を使用すると、メールのヘッダーに直接リンクが埋め込まれるため、受信者は今後のメール配信から簡単にオプトアウトできます。

備考list-unsubscribeヘッダーは、NTT CPaaSを通じて送信されるすべてのメールに含まれています。

URL [#urls-content]

リンクはメールに欠かせない要素であり、メッセージエディターやそのウィジェットの各所で追加できます。追加したい時は、各ウィジェットにあるリンクアイコンや入力フィールドを使って、選択した要素に希望のURLを割り当てるようにします。なお、ボタン や動画などの一部のウィジェットでは、正常に機能させるためにリンクを設定する必要があります。

必要なリンクが欠落している場合、Audit (監査) タブに警告が表示され、必要なURLを追加するように促されます。

Gmailプロモーション [#gmail-promotions-content]

Gmail Promoウィジェット を使用すると、メールにGmailの注釈を追加して、訴求力のあるインタラクティブなコンテンツを作成できます。Gmailでは注釈付きのメールをPromotions (プロモーション) タブにまとめてグループ化して強調表示するため、受信者が関心を持つ可能性の高いメッセージを簡単に判別できるようにしています。注釈には、特典の詳細内容、プロモーションコード、有効期限などの重要な情報を含めることができます。

注釈に画像を追加すると、メッセージがより視覚的に引き立ち、視認性が高まります。例えば、会社のロゴやプロモーション画像を挿入することで、メールが他のメッセージから際立ち、受信者の関心を集めやすくなります。注釈付きのメールは、モバイル端末では特にGmailのPromotions (プロモーション) タブで目立つように表示されます。

Gmailプロモーションをテストする際のヒント

テストを効率的に実施するには、mycompany.promotabtesting@gmail.comなどの専用のテスト用アカウントを使用するようにします。
プロモーションが正しく表示されるようにするために、古いメッセージはすべて消去しておきます。
Googleのガイドラインに準拠した適切なDNS設定によって送信者を検証するようにします。
画像のアスペクト比が3:9であること、HTTPSでホストされていること、そしてGIFやWebP形式ではないことを確認しておきます。

備考デスクトップ版Gmailアプリでは、Gmailプロモーションの注釈機能はサポートされていません。

キネティック機能 [#kinetic-features-content]

キネティック機能 を利用すると、メールにインタラクティブなコンテンツを追加して、メールをより魅力的にし、コンバージョン率の向上が一層期待できるようになります。これらの機能により、メール内でもウェブサイトのような体験を提供できます。

キネティック機能を追加するには、お好みのウィジェットをメールのデザイン領域にドラッグし、利用可能な設定を使ってその動作をカスタマイズします。

基本的なキネティックウィジェットには、以下のものが含まれます：

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

各ウィジェットには、Compatibility (互換性) があり、どのメールクライアントがアニメーションに対応しているかをそこで確認できます。

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

インタラクティブクーポン ウィジェットには、操作すると割引や特典内容が確認できるクリック可能な画像が表示されます。

設定するには、以下に挙げる2つの画像を用意します：

表面の画像： 最初にメールに表示される画像。
裏面の画像： 受信者がが表面の画像をクリックすると表示され、クーポンの詳細が確認できる画像。

画像の切り替えに使用するアニメーションの種類を選択します：

反転： 画像が裏返され、反対側が表示されます。
スライド： 画像が左右に動き、反対側が見えるように切り替わります。

雨のアニメーション

雨のアニメーション ウィジェットを使用すると、メールのデザインにダイナミックに舞い落ちるオブジェクトを追加できます。

表示するオブジェクトは、以下を含む様々な種類の中から選択できます：

球体
画像
テキスト

オブジェクトの数、サイズ、色、および落下中に回転させるかどうかを調整するなどして、アニメーションをカスタマイズします。

備考雨のアニメーションウィジェットは、1つのメールデザインにつき1回のみ追加できます。

カルーセルウィジェット

カルーセル ウィジェットを使用すると、メール内に直接、スライド式の画像ギャラリーを作成できます。

主な機能：

1つのギャラリーにつき、最大10枚の画像を含めることができます。
各画像にパーソナライゼーション用プレースホルダーを含む個別のキャプションを追加できます。
エンゲージメントを向上させるインタラクティブなスライド機能を備えています。

ホバー画像

ホバー画像 ウィジェットは、2つの画像を使用して動的なコンテンツを表示します。受信者がメイン画像にカーソルを合わせると、ホバー画像に切り替わります。

ホバー画像を設定するには、以下に挙げる2つの画像を用意します：

メイン画像：最初にメールに表示される画像。
ホバー画像：受信者がメイン画像にカーソルを合わせると表示される画像。

受信者のメールクライアントがホバー効果に対応していない場合、フォールバックとして元のメイン画像のみが表示されます。

アコーディオン

アコーディオン ウィジェットは、テキストが大量に含まれるメールに最適です。このウィジェットを使用すると、折りたたみ可能なセクションを作成し、コンテンツをコンパクトに見やすく整理して表示することができます。

メッセージの各セクションは、メール内でタイトルとして表示されます。受信者はそれぞれのタイトルをクリックすることで、選択したセクションを展開し、そこに含まれるコンテンツの詳細を読むことができます。

ホットスポット

ホットスポット ウィジェットは、ホットスポットを追加することで、画像やグラフィックをインタラクティブにします。これらのインタラクティブなポイントは、製品の機能を強調したり、個々のオファーに関する詳細を提示したり、画像の特定部分を際立たせたりすることができます。

受信者がホットスポットをクリックすると、画像、テキストやオプションの行動喚起 (CTA) リンクを含むポップアップが表示されます。

1つの画像につき、最大10個のホットスポットを追加できます。各ホットスポットはマーカーで表され、「上」および「左」のパーセンテージ設定を使って、ラベルを付けたり位置を調整したりできます。関連付けられたポップアップには、定義したコンテンツが表示されます。

受信者のメールクライアントでホットスポットがサポートされていない場合、フォールバックとして元の画像とそのリンクが表示されます。

タブ

Tabs (タブ) ウィジェットを使用すると、コンテンツを個別のセクションに整理してスペースを節約し、長いメッセージでも読みやすくすることができます。

各セクションを識別するためのヘッダーテキストを指定して、個別のタブを作成できます。各タブの詳細な内容を入力し、必要に応じて書式を設定します。

このウィジェットは最大10個のタブに対応しており、Preview (プレビュー) 機能を使用すると、完成したメールでタブがどのように表示されるかを確認できます。

受信者は、メッセージ上部に表示されるタブのヘッダーを参考に、お好みのタブを選択して対応するコンテンツを表示させることができます。

ブロック

Blocks (ブロック) タブを使えば、以下のようなメールの構図の調整に集中することができます：

空白の列が並ぶレイアウトから選択するか、既存のレイアウトをカスタマイズすることができます。
各列の背景色、パディング、ボーダーを個別に調整できます。
ヘッダー、コンテンツ、カタログ、フッターにブロックテンプレートを活用すると、より充実した土台から他のデザイン作業に取り組み始められます。
ブランドのスタイルに合わせて、最大25個のカスタムブロックを作成できます。

本文

Body (本文) タブを使用すると、メールの全体的な見栄えをカスタマイズし、ブランドのスタイルに合わせることができます。以下の設定が調整可能です：

Text color (テキストの色)：読みやすさとエンゲージメントの向上につながる効果的な色を選択できます。
Background color (背景色)：コントラストと視覚的な印象を向上させることができます。
Content width (コンテンツの幅)：様々な画面サイズでメールがどのように表示されるかを設定できます。
Content alignment (コンテンツのアラインメント)：テキストとメディアを整理して、バランスの取れたレイアウトに整えることができます。
Font family and weight (フォントの種類と書体の太さ)：メール全体で一貫したスタイルを維持して統一感を持たせることができます。
Link color and underline options (リンクの色と下線のオプション)：リンクを目立たせたり、デザインに合わせて調整したりできます。

これらの設定により、メールの体裁を自由に調整できるため、あらゆるデバイスで洗練されたプロフェッショナルな印象を与えることができます。

監査

Audit (監査) タブには、メールが有効で正常に機能し、法的要件を満たすために完了する必要がある未処理のデザイン作業について警告する通知が表示されます。これらの通知は、メールの必須要素を完成させるための指針となり、本格的なビジネスメールを作成する際にミスが生じるリスクを回避するのに役立ちます。

重要メールにはいずれも、法的要件を満たし、受信者が登録を解除できる手段を提供するためのフッターを含める必要があります。メッセージのレイアウトにFooter (フッター) コンポーネントをドラッグすることで、これに対処することができます。

その他の一般的な警告には、以下のものが含まれます：

ボタンのリンクが欠落している
画像の代替テキストが欠落している

すべての監査通知を精査して対処し、メールがコンプライアンスおよび品質基準を確実に満たしていることを確認するようにします。