メールのカスタマゼーション

どのように動作するか

ログイン製品では、ユーザーに送信するメールの標準テンプレートが用意されています：

登録情報
ウェルカム
確認（リンクとコード付き）
パスワード変更
メールアドレス変更
多要素認証（MFA）コード
MFA設定変更
ニュースサブスクリプション

テンプレートはHTMLとCSSで書かれています。

以下のことができます：

標準のテンプレートに変更を加え、メールの外観や内容をカスタマイズする；
エクソーラからメールサービスを使用してメールを送信するか、SendGridアプリケーションを使用してメールを送信するかを設定する。

上記のすべての場合（登録確認、ウェルカムメッセージなど）、エクソーラはユーザーにメールを送信します。この機能を無効にすることはできません。

メールのカスタマイズは、製品使用許諾契約を締結した場合にのみ利用可能です。契約書にサインするには、アドミンページの契約セクションにアクセスしてください。

使用に適した方

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

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

メールアプリケーションには統一されたメール開発標準がなく、アプリケーションごとにメールの表示が異なります。メールアプリケーションやデバイスが変わっても、同じように表示されるように、シンプルで簡潔なデザインを作成する必要があります。

一般構造

JavaScriptとCSS

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

メールアプリケーションによっては、CSS3機能のサポートが制限されているものがあります。メールテンプレートを作成する際には、この点に注意してください。

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

Copy

Full screen

Small screen

<div style="text-align: center;"></div>

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

独立したブロックによる最も効果的なメール開発方法をお勧めします。この方法には、次のような利点があります：

ある端末でブロックが正しく表示されていなくても、残りのブロックには影響がありません。
既存のメールのブロックを調整し、素早く結果をテストすることができます。
ブロックのコレクションを作成し、目的別に素早くメールを作成することができます。

表を取り扱う

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

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

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

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

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

%またはemでline-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"を指定します。

他のレコメンデーション

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

入手方法

ユーザーに送信するメールには、説明文とユーザーの操作を確認するためのリンクが必要です。メールの各要素について、以下のことを使用することができます：

書かれたのと同じ言語で表示される独自のテキスト；
20の言語にローカライズされたエクソーラ標準テキスト。

エクソーラのテキストは、例えば、変数（プレースホルダー）としてメールテンプレートに挿入されます。

{{subject}} – メールヘッダーテキスト。
{{text}} – メール本文テキスト。
{{action_link}} – リンクテキスト。リンクアドレスはエクソーラによって生成されます。
{{button}} – ボタンテキスト。

メール生成時には、プレースホルダーの代わりに対応する言語のテキストが使用されます。

メールの言語は、ユーザーのロケールに基づいて選択されます。ユーザーのロケールを決定するために、以下の方法が利用可能です：

ログインウィジェットを介して統合する場合、ウィジェットが開かれたときに、アプリケーションのインターフェースからユーザーのロケールをウィジェットに渡すことができます。ウィジェットは、そのロケールをログインAPIのメソッドに渡します。
ログインAPI経由で統合する場合、ログインAPIメソッドが呼び出されたときに、アプリケーションのインターフェースからユーザーのロケールを渡すことができます。
ユーザーのロケールを渡さない場合、言語はIPアドレスまたはブラウザの言語から判断されます。

メールテンプレートをカスタマイズするには：

アドミンページに移動して「プロジェクト > ログイン」を開きます。
ログインプロジェクトのパネルで構成するをクリックします。
「カスタマイズ」ブロックに移動して「メールカスタマイズ」セクションを選択してください。

ドロップダウンリストからメールテンプレートを選択します。
テンプレートがプレビューモードで開く場合は、トグルボタン（右上）をクリックしてHTMLモードに切り替えてください。
レコメンデイションを考慮して、メールのHTMLレイアウトを追加または変更します。
メールがどのように表示されるかを確認するには、プレビューモードに切り替えます。

メールコードの有効性を確認します。
必要に応じて、メールの送信元フィールドを編集します：メールのヘッダーに表示される送信者の名前と、送信者のメールアドレスを指定します。ログインプロジェクトの名前がデフォルトの送信者名として使用され、デフォルトのメールアドレスはnoreply@login.xsolla.com。フィールドに入力する際には、application.nameという形式の任意の共通変数を使用することができます。例えば、{{application.name}} <>のようになります。

カスタマイズされていないメールは、標準のエクソーラテンプレートを使用します。

メールテンプレートの例：

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>

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

あなたのメッセージを確認し、体験を向上させるために利用させていただきます。

続きを読む

よくある質問（FAQ）で回答を探す

独自のSendGridアプリを使ってメールを送信することはできますか？

最終更新日: 2024年10月24日

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

内容

どのように動作するか
使用に適した方
メール開発のレコメンデーション
一般構造
画像を取り扱う
リンクを取り扱う
他のレコメンデーション
入手方法

Your browser is not supported. Please try a different browser

メールのカスタマゼーション

どのように動作するか

使用に適した方

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

一般構造

JavaScriptとCSS

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

表を取り扱う

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

フォントを取り扱う

プリヘッダー

コードの長さ

画像を取り扱う

リンクを取り扱う

他のレコメンデーション

入手方法

続きを読む

よくある質問（FAQ）で回答を探す