エディターのデザインガイドライン
電子メールのデザインは、電子メール キャンペーンの成功の重要な要素です。適切に構成され、視覚的に魅力的な電子メールは、信頼を築き、エンゲージメントを高め、スパム フィルターを回避するのに役立ちます。
Start は、メールのレイアウトを確立することから始めます。できます：
- サイドパネルのウィジェットを使用して、構造を手動で構築します。
- 事前定義されたテンプレートを使用して、セットアップを高速化します。
サイドパネルから要素をドラッグ&ドロップしてコンテンツを追加し、必要に応じて要素を並べ替えたり、追加したり、削除したりします。
Content (コンテンツ)
コンテンツ タブには、電子メール キャンペーンの作成とカスタマイズに使用できる要素が用意されています。
テキスト
件名は、開封率とコンバージョンに直接影響するため、電子メールの最も重要な部分の 1 つです。よく練られた件名は 20 文字から 60 文字の間で、実用的で注目を集める言葉を使用し、否定的な用語や過剰な句読点を避ける必要があります。大文字化は読みやすさを向上させ、数字はエンゲージメントを高めることができます。件名がデスクトップとモバイルデバイスの両方で正しく表示されることを確認してください。
人柄の良い言葉、絵文字、または名を使用して受信者とつながり、現在のイベント、質問、または限定オファーを参照してメッセージを関連性のあるものにします。
テキストとリンクの属性とプレースホルダーを使用して、高度にパーソナライズされたメッセージを作成できます。
メールの 本文 には、メイン テキスト コンテンツ、画像、ビデオ、その他のメディア要素、フッターが含まれます。読者のエンゲージメントを維持するために、コンテンツを簡潔かつ焦点を絞ったものにしてください。
既定のテキスト属性と配置は、[本文] タブで設定できます。コンポーネントを選択し、[コンテンツ**タブで設定を調整することで、個々のテキスト領域のスタイルを設定できます。
フォント
フォント は、電子メールのデザインと読みやすさにおいて重要な役割を果たします。電子メール エディターには、電子メールの外観をブランド スタイルに合わせるのに役立つ幅広いフォントが用意されています。
電子メールで使用されるすべてのフォントは無料で公開されている必要があり、受信者の電子メール クライアントでサポートされていない場合に備えて一致するフォールバックが必要であるため、カスタム フォントはサポートされていません。
法的およびライセンスに関する考慮事項
- Webフォントをオンラインで使用するにはライセンスが必要です。多くの Web フォント ライセンスでは再配布が制限されているため、電子メールに有料フォントを含めると、エンド ユーザー ライセンス契約 (EULA) に違反する可能性があります。
- 一部の有料 Web フォントは、毎月の E メールの開封数に基づいてライセンスされますが、E メールエディタですべてのクライアントがフォントを利用できるようにすると、コストがかかる可能性があります。
互換性に関する考慮事項
カスタム Web フォントは、通常、次のような限られた電子メール クライアント セットでのみ機能します。
- iOSメール
- アップルメール
- Android のデフォルトのメール クライアント (Gmail アプリではない)
- Outlook 2000 (英語)
- Outlook.com アプリ
- サンダーバード
他のメールクライアントの場合、選択したフォントは自動的にデフォルトのフォントにフォールバックし、メッセージが読みやすい状態を保ちます。
画像
画像は、ほとんどの電子メール キャンペーンの重要なエレメントです。電子メール エディターでは、画像の幅が 701 ピクセルに制限されており、これは画面やほとんどの電子メール プロバイダーに最適です。トリミングやサイズ変更の問題を避けるために、このサイズで画像を準備してください。画像ファイルのサイズは 10 MB を超えてはなりません。
メールに画像を含めるには、次の方法があります。
- デバイスからエディターに直接アップロードします。
- 画像リンクを使用して、URL にアクセスするために認証を必要としないことを確認します。
サポートされている形式は次のとおりです。
- JPG/JPEG
- PNG
- GIF
画像リンクオプションを使用して、プロモーション、ホームページ、またはその他の関連ページにリンクすることで、画像をクリック可能にすることができます。
画像には常に 代替テキスト (代替テキスト) を追加してください。代替テキストを使用すると、スクリーン リーダーを使用するユーザーが画像の内容や目的を理解できるようになります。説明は簡潔にしてくださいが、重要な情報を伝えるのに十分な説明性を保ちます。代替テキストがない場合、監査タブに警告が表示されます。
ベストプラクティス: すべての画像に明確で説明的な代替テキストを使用して、アクセシビリティと配信品質を向上させます。
HTMLの
カスタムHTMLメールテンプレートを使用する場合は、HTMLウィジェットを使用して、コードをメッセージに直接貼り付けることができます。HTML に加えた変更は電子メール エディター内にリアルタイムで反映され、視覚的なフィードバックを即座に提供します。
ボタン
行動喚起 (CTA) ボタン は、受信者を電子メール キャンペーンの目的のランディング ページに誘導します。読者を圧倒したり混乱させたりしないように、ボタンは控えめに使用してください。目立ち、クリックを促すボタンの数を最小限に抑えます。
ボタンをデザインするときは、ボタンが目立ち、テキスト ラベルを収容するのに十分な大きさであることを確認してください。ラベルが完全に見えるように、必要に応じて幅を調整します。
ボタンのスタイルは、次のようなカスタマイズが可能です。
- 色: コントラストを使用して、ボタンを背景に対して目立たせます。
- フォント: ラベルが読みやすく、ブランディングと一致していることを確認してください。
- 境界線: デザインを乱雑にすることなく視覚的な定義を追加します。
エンゲージメントを最大化するために、ボタンが背景と視覚的に区別されていることを常に確認してください。
社会的
ビジネスのソーシャルメディアページへのリンクを追加して、読者を引き付け、追加のチャネルを通じてつながるよう促します。対応するソーシャル メディア アイコンを選択し、ページへのリンクを入力すると、電子メール内のアイコンをクリックすると、受信者は指定された URL に誘導されます。
サイドパネルでソーシャルネットワークを目的の位置にドラッグして並べ替えることができます。パディング、背景、配置などのスタイル オプションを調整して、レイアウトをすっきりと保ちます。
エディターには 30 のソーシャル メディア ネットワークが用意されており、デザインの好みに合わせてアイコン スタイルをカスタマイズできます。
Video
動画は非常に魅力的ですが、ほとんどのメールプロバイダーは、メール内での動画の直接再生をサポートしていません。ビデオウィジェットを使用すると、ビデオファイルに直接URLリンクを追加してビデオを挿入できます。
サポートされているビデオ形式は次のとおりです。
- 移動
- MP4
- ウェブM
動画のサムネイルをカスタマイズして、見栄えを改善し、クリックを促すことができます。動画にリンクしていないアニメーションコンテンツの場合は、画像ウィジェットを使用してGIFを挿入します。
フッター
フッターはメールの下部にあるセクションで、通常は送信者に関する重要な情報が含まれています。購読解除のオプション、利用規約、著作権表示、プライバシー ポリシー、電子メールの受信理由などのリンクを含めます。フッターを適切に使用すると、スパムの苦情が減り、スパム対策規制への準拠が保証されます。
必須のフッター情報
すべての電子メール通信は、フッターに次の詳細を含める必要があります。
- 当年
- 送信者の会社名
- 送信者の物理アドレス
- 登録解除リンク
フッターウィジェットを使用して、この情報を表示します。デフォルトのフッターテキストでは、会社名と住所のプレースホルダーが使用され、アカウントから自動的に取得されます。
*著作権©CURRENT_YEAR COMPANY_NAME。無断複写・転載を禁じます。郵送先住所はADDRESSです。これらのメールの受信方法を変更したいですか?このリストから「購読解除」できます。
フッター付きのメールの送信
フッターなしでメールを送信しようとすると、フッターが存在するまで送信が禁止されます。
- Web インターフェイス を使用すると、購読解除 URL が自動的に追加されます。
- API を使用する場合は、リクエストに次の行を含めて、登録解除 URL を手動で追加する必要があります。
<a class="unsubscribe_link" href="{$unsubscribe}" style="color:#999; text-decoration:underline">Unsubscribe</a>
NTT CPaaS で生成された購読解除リンクは常に含まれており、プレビュー モードで非表示になっている場合でも、存在し続ける必要があります。HTTP または SMTP API 経由で購読解除機能を有効にするには、href 属性値を {$unsubscribe} に置き換えます。
List-unsubscribe ヘッダー
受信者に購読を解除する簡単な方法を提供することは、信頼を維持し、送信者の評判を保護するために不可欠です。list-unsubscribe ヘッダー は、電子メール ヘッダーに直接リンクを埋め込むため、受信者は今後の電子メールを簡単にオプトアウトできます。
URL
リンクは電子メールの重要な部分であり、メッセージ エディターとそのウィジェット全体に追加できます。各ウィジェットのリンクアイコンまたはフィールドを使用して、選択したエレメントに目的のURLを添付します。ボタンやビデオなどの一部のウィジェットは、正しく機能するためにリンクが必要です。
必要なリンクが見つからない場合は、[監査] タブに警告が表示され、必要な URL を追加するように求められます。
Gmail プロモーション
Gmail プロモーション ウィジェット を使用すると、メールに Gmail の注釈を追加して、インタラクティブで魅力的なコンテンツを作成できます。Gmail は [プロモーション] タブで注釈付きのメールをグループ化して強調表示し、受信者がエンゲージする可能性が最も高いメッセージを特定できるようにします。注釈には、取引、プロモーション コード、有効期限などの重要な情報を含めることができます。
注釈に画像を追加すると、メッセージを視覚的に魅力的で見つけやすくすることができます。たとえば、会社のロゴやプロモーション画像を含めると、電子メールが他のメッセージから目立ち、受信者の注意を引き付けることができます。注釈付きのメールは、モバイル デバイスの [Gmail プロモーション] タブで特に強調表示されます。
Gmail のプロモーションをテストするためのヒント
- テストを高速化するには、
mycompany.promotabtesting@gmail.comなどの専用テストアカウントを使用します。 - 古いメッセージをクリアして、プロモーションが正しく表示されるようにします。
- Google のガイドラインに準拠した適切な DNS 設定で送信者を確認します。
- 画像のアスペクト比が 3:9 で、HTTPS でホストされ、GIF または WebP 形式ではないことを確認してください。
キネティック機能
キネティック機能 を使用すると、電子メールにインタラクティブなコンテンツを追加して、電子メールをより魅力的にし、コンバージョン率を高める可能性があります。これらの機能は、電子メール内で直接 Web サイトのようなエクスペリエンスを提供します。
キネティック機能を追加するには、目的のウィジェットを電子メール デザインにドラッグし、利用可能な設定を使用してその動作をカスタマイズします。
基本的なキネティックウィジェットには、次のものが含まれます。
- インタラクティブクーポン
- 雨のアニメーション
- 回転木馬
- ホバー画像
- アコーディオン
- ホットスポット
- タブ
各ウィジェットには、アニメーションをサポートする電子メールクライアントを示す 互換性 セクションが含まれています。
インタラクティブクーポン
インタラクティブ クーポン ウィジェットには、操作すると割引やオファーが表示されるクリック可能な画像が表示されます。
設定するには、次の 2 つの画像を指定します。
- フロント画像: 最初にメールに表示されます。
- 背面画像: 受信者が前面画像をクリックすると表示され、クーポンの詳細が表示されます。
画像トランジションのアニメーションのタイプを選択します。
- 反転: 画像が裏返され、裏側が現れます。
- スライド: 画像が左右に移動して裏側が現れます。
雨のアニメーション
雨のアニメーションウィジェットは、電子メールのデザインに動的な落下オブジェクトを追加します。
表示するオブジェクトのタイプは、次のようなものを選択できます。
- 球
- 画像
- テキスト
オブジェクトの数、サイズと色、およびオブジェクトが落下するときに回転するかどうかを調整して、アニメーションをカスタマイズします。
カルーセルウィジェット
カルーセルウィジェットは、メール内に直接スライド画像ギャラリーを作成します。
主な機能:
- ギャラリーごとに最大 10 枚の画像。
- パーソナライズ用のプレースホルダーを含む、画像ごとに個別のキャプションを追加します。
- エンゲージメントを向上させるインタラクティブなスライド機能。
ホバー画像
ホバー画像ウィジェットは、2つの画像を使用して動的コンテンツを表示します。受信者がメイン画像にカーソルを合わせると、ホバー画像に切り替わります。
ホバー画像を設定するには、以下を指定します。
- メイン画像: 最初にメールに表示されます。
- ホバー画像:受信者がメイン画像にカーソルを合わせると表示されます。
ホバー効果が受信者の電子メールクライアントでサポートされていない場合、フォールバックには元のメイン画像のみが表示されます。
アコーディオン
アコーディオンウィジェットは、大量のテキストを含む電子メールに最適です。折りたたみ可能なセクションを作成し、コンテンツをコンパクトかつ整理された方法で表示できます。
メッセージの各セクションは、メールのタイトルとして表示されます。受信者はタイトルをクリックしてセクションを展開し、詳細な内容を読むことができます。
ホットスポット
ホットスポットウィジェットは、ホットスポットを追加することで、画像とグラフィックをインタラクティブにします。これらのインタラクティブなポイントは、製品の機能を強調したり、個々のオファーに関する詳細を提供したり、画像の特定の部分を強調したりすることができます。
受信者がホットスポットをクリックすると、画像、テキスト、およびオプションの行動喚起リンクを含むポップアップが表示されます。
画像ごとに最大 10 個のホットスポットを追加できます。各ホットスポットはマーカーで表され、上と左のパーセンテージ設定を使用してラベルを付けて配置します。関連付けられたポップアップには、定義したコンテンツが表示されます。
受信者の電子メール クライアントでホットスポットがサポートされていない場合、フォールバックには元の画像とそのリンクが表示されます。
タブ
タブ ウィジェットはコンテンツを個別のセクションに整理し、スペースを節約し、長いメッセージを読みやすくします。
各セクションを識別するヘッダー テキストを提供して、個々のタブを作成します。各タブの詳細内容を入力し、必要に応じて書式設定します。
ウィジェットは最大 10 個のタブをサポートしており、プレビュー オプションを使用して、完成した電子メールでタブがどのように表示されるかを確認できます。
受信者には、メッセージの上部にタブヘッダーが表示され、タブを選択して対応するコンテンツを表示できます。
ブロック
ブロックタブでは、メールの構造に集中できます。
- 空白の列レイアウトから選択するか、既存の列レイアウトをカスタマイズします。
- 個々の列の背景色、パディング、境界線を調整します。
- ヘッダー、コンテンツ、カタログ、フッターにブロック テンプレートを使用して、より豊かな出発点を作成します。
- ブランド スタイルに合わせて最大 25 個のカスタム ブロックを作成します。
体
本文タブを使用して、メールの全体的な外観をカスタマイズし、ブランドと一致していることを確認します。次の設定を調整できます。
- テキストの色: 読みやすさとエンゲージメントを向上させます。
- 背景色: コントラストと視覚的な魅力を高めます。
- コンテンツ幅: さまざまな画面サイズでのメールの表示方法を制御します。
- コンテンツの配置: バランスの取れたレイアウトのためにテキストとメディアを整理します。
- フォントファミリーと太さ: メール全体で一貫したスタイルを維持します。
- リンクの色と下線のオプション: リンクを目立たせたり、デザインに合わせたりします。
これらの設定により、電子メールのプレゼンテーションを完全に制御できるため、すべてのデバイスで洗練されたプロフェッショナルに見えるようになります。
監査
監査タブには、電子メールが有効で機能し、法的に準拠していることを確認するために完了する必要がある未処理の設計アクションに関する警告通知が表示されます。これらの通知は、重要な電子メール要素を完了するためのガイドであり、プロフェッショナルな電子メールを作成する際のエラーを回避するのに役立ちます。
その他の一般的なアラートには、次のものがあります。
- ボタンのリンクが欠落している
- 画像の代替テキストがありません
すべての監査通知を確認して解決し、電子メールがコンプライアンスと品質基準を満たしていることを確認します。
