ユーザーにメールをカスタマイズする方法

どのように動作するか

ユーザーに送信される次の電子メールの外観とコンテンツをカスタマイズできます:

  • アカウントの確認
  • メールの変更
  • パスワードの変更

メールはHTMLとCSSを使ってカスタマイズされています。

Notice
メールのカスタマイズは、製品使用許諾契約を締結した場合のみ可能です。サインをするには、パブリッシャーアカウント会計に移動します。

使用に適した方

すでにログインを統合し、エクソラデータベースまたはカスタムストレージを使用しているパートナー。

メール開発のレコメンデーション

メールアプリケーションには、メール開発のための統一された基準がありません。どのアプリケーションも独自の方法でメールを表示しています。異なるメールアプリケーションでメールを同じように表示させるには、シンプルでコンパクトなデザインを作成します。

一般構造

JavaScriptとCSS

JavaScriptを介して電子メールにマルチメディアコンテンツを追加することはできません。メールにアニメーションを追加するには、GIF画像を使用してください。メールに動画を追加するには、画像をリンクとして使用して、動画コンテンツを含むURLへのリンクとして画像を使用します。

すべてのメールアプリケーションがCSS3の機能を完全にサポートしているわけではありません。メールを開発する際には、この点に留意してください。

インラインスタイルのみを使用してください。ほとんどのメールアプリケーションでは、styleタグで書かれたスタイルは除外されています。

Copy
Full screen
Small screen
<div style="text-align: center;"></div>

独立したブロックによる開発

独立したブロックを経由して、最も安全なメール開発方法を利用することをお勧めします。この方法には以下のような特徴があります:

  • デバイス上に正しく表示されていないブロックは、残りのブロックには影響しません。
  • 既存のメールのブロックを調整して、すぐに結果をテストすることができます。
  • ブロックの集合体を作成して、目的別にメールを素早くまとめることができます。

表を取り扱う

メールアプリケーションは、ブロック要素とposition: absoluteプロパティで正しく動作しません。ブロックでメールを構築するには、テーブルレイアウトを使用し、テーブルセルにalignvalign属性を指定します。表は、より良い方法で異なる画面に適応します。

colspanrowspan属性によるセルの結合を避けるようにしてください。代わりに挿入された表を使用します。

サイズと使用済みユニット

大画面と小画面でスクロールバーなしでコンテンツが正しく表示されるようにするには、コンテンツのあるすべてのコンテナに以下の設定を指定します:

  • width: 100%プロパティは常に指定する必要があります。
  • 一番大きな画面での横幅制限です。この値は読み取りに最適であるため、おすすめの幅は800pxを超えないようにしましょう。

%またはemline-heightプロパティを指定しないでください。ピクセルのみを使用して、すべてのメールアプリケーションや異なる画面でメールが同じに見えるようにします。

フォントを取り扱う

標準フォントを使用します。ほとんどのメールアプリケーションは外部フォントをサポートしていません。

標準フォント:

  • セリフ付き:Courier、Courier New、Georgia、Times、Times New Roman
  • セリフなし:Arial、Black、Tahoma、Verdana、Trebuchet MS

プリヘッダー

ほとんどの電子メールアプリケーションでは、電子メールのプレビューとしてプレヘッダーが表示されます。常にプレヘッダーを追加する必要があります。受信したメールを開くようにユーザーを動機付けます。メールアプリケーションはメールの件名をカットすることがありますが、プレヘッダーはユーザーがメールの内容を理解するのに役立ちます。

コードの長さ

メールを正しく表示させるためにコードの長さを短くします。例えば、GmailやYahooは100 KBを超えるメールを表示するのに問題があります。

画像を取り扱う

画像付きのメールを開発する際には、以下のことを覚えてください:

  • ユーザーは、メールアプリケーションの設定で画像を無効にすることができます。
  • 画像の読み込みに時間がかかる場合があります。
  • 画質は画面によって異なる場合があります。

ほとんどの電子メールアプリケーションではサポートされていないSVG形式の代わりに、PNGまたはJPEG画像形式を使用してください。

4K解像度のモニターの場合は、推奨サイズの2倍の大きさの画像を使用してください。例えば、400pxの画像が必要です。この画像の800px幅バージョンを取得してメールに追加します:

Copy
Full screen
Small screen
<img src="https://site.com/images/123.png" width="400" height="auto" style="width: 400px; height: auto" />

どのようなリンクでも、スキームとホストを含める必要があります。例えば、https://site.ru/path。相対リンク(/path)またはスキームのないリンク(://site.ru/path)を使用しないでください。このタイプのリンクは自動的にfileスキームを取得でき、ブラウザは開く代わりにそれをダウンロードしようとします。

メールがスパムフォルダに入らないようにするには、すべてのリンクにtitle属性を指定してください。この属性は、ウェブコンテンツにアクセスするために追加のソフトウェアに依存している障害者を支援します。

リンクのフォント色は必ず指定する必要があります。指定しないと、メールアプリケーションは独自の色を使用します。

メールアドレスと電話番号をリンクとして追加します。アプリケーションのスタイルは、電話番号の正しい表示に影響を与えることができます。

メールからのリンクを新しいタブまたはウィンドウで開くには、target="_blank"を指定します。

他のレコメンデーション

適応型メール開発における追加のレコメンデーション

入手方法

メールには、説明文とユーザーの行動を確認するためのリンクを含める必要があります。以下のプレースホルダを使用します:

  • メールのヘッダーを配置するには{{subject}}
  • エクソラ側に使用したメールテキストを配置すには{{text}}
  • リンクを配置すには{{action_link}}。リンク自体はエクソラ側で生成されます。
  • ボタンのテキストを配置するには{{button}}

カスタマイズされたメールを作成するには:

  1. パブリッシャーアカウントに移動して、あなたのログインプロジェクト > カスタム化 > メール通知を開きます。
  2. メールのHTMLレイアウトを追加する際には、メール開発のレコメンデーションに従ってください。
  3. ブラウザでメールをプレビューし、マークアップ検証ツールを使ってメールコードを確認します。

メールの例:

Copy
Full screen
Small screen
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>{{subject}}</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body style="background-color:#0a1e37;">
  <table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:400px;" width="400">
    <tr>
      <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
        <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
          <tbody>
            <tr>
              <td style="direction:ltr;font-size:0px;padding:60px 0 0;text-align:center;vertical-align:top;">
                <table align="center"
                       background="https://cdn.xsolla.net/xsolla-login-widget/images/mail/hero_background.jpg"
                       border="0" cellpadding="0" cellspacing="0" role="presentation"
                       style="background:url(https://cdn.xsolla.net/xsolla-login-widget/images/mail/hero_background.jpg) top center / auto repeat;width:100%;">
                  <tbody>
                    <tr>
                      <td style="direction:ltr;font-size:0px;padding:0;text-align:center;vertical-align:top;">
                        <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
                          <tr>
                            <td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;">
                              <div style="font-family:Helvetica Neue, Helvetica, Arial, sans-serif;font-size:36px;line-height:42px;text-align:center;color:#fff;">
                                {{subject}}
                              </div>
                            </td>
                          </tr>
                        </table>
                      </td>
                    </tr>
                  </tbody>
                </table>
                <table align="center"
                       background="rgba(44,72,98,0.7)"
                       border="0" cellpadding="0" cellspacing="0" role="presentation"
                       style="background: rgba(44,72,98,0.7); width:100%;">    
                  <!-- Block with the email text -->            
                </table>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </table>
</body>
</html>

Note
カスタムアドレスからメールを送信する場合は、アカウントマネージャーにお問い合わせください。
この記事は役に立ちましたか?
ありがとうございます!
改善できることはありますか? メッセージ
申し訳ありません
この記事が参考にならなかった理由を説明してください。 メッセージ
ご意見ありがとうございました!
あなたのメッセージを確認し、体験を向上させるために利用させていただきます。
このページを評価する
このページを評価する
改善できることはありますか?

答えたくない

ご意見ありがとうございました!

続きを読む

最終更新日: 2020年12月24日

誤字脱字などのテキストエラーを見つけましたか? テキストを選択し、Ctrl+Enterを押します。

問題を報告する
当社は常にコンテンツを見直しています。お客様のご意見は改善に役立ちます。
フォローアップ用のメールをご提供してください
ご意見ありがとうございました!