メールテンプレートまたはセクションに背景画像を追加する方法
このページで学べること
背景画像の上にテキスト、画像、その他のメールコンテンツを重ねる方法を確認します。背景画像は、メール全体または 1 つのセクションに追加できます。この機能を使用すると、画像を別の画像の上に重ねたり、画像の上にボタンやテキストを追加したりできます。
背景画像について
テンプレート全体の背面、またはテンプレート内の特定のセクションの背面に、背景画像を追加できます。テンプレートの背景は、テンプレートの [スタイル] タブを使用して追加します。通常、メールの全幅および全高にまたがります。
ただし、セクションの背景はメール内の特定の領域にのみ適用されます。これらを使用すると、動的で目を引く画像と行動喚起を作成できます。また、1 つの画像に複数の行動喚起を含めることもできます (例: “シューズを購入” と “アクセサリーを購入”)。これらのセクション固有の背景画像は、セクションの [スタイル] タブから追加できます。
テキストやほかのコンテンツを重ねた背景画像を使用すると、テキストを含む単一の画像を挿入する場合と比べて、メールのアクセシビリティを向上させることができます。メッセージに画像コンテンツが主でテキストがほとんど含まれない場合、画像を表示しないスクリーン リーダーやほかのアクセシビリティ デバイスを使用する受信者は、代替テキストをもとにメッセージの内容を把握します。
また、プレーンテキストの受信トレイを使用している、または既定で画像を非表示にするよう受信トレイを設定している受信者は、メッセージを簡単に理解できません。背面に画像がある標準のテキストブロックを使用すると、アクセシビリティのニーズがある受信者や代替デバイスを使用している受信者がメッセージを理解しやすくなります。
背景画像の選択
セクションまたはテンプレートの背景として使用する画像を選択する場合は、受信トレイで鮮明でプロフェッショナルに表示される十分に高い解像度の画像を選択してください。ただし、不必要に大きいファイルは使用しないようにしてください。メールの読み込み時間が遅くなる可能性があります。一般的に、セクションの背景には 1MB 以下の画像を使用してください。
セクションの背景画像を設定
使用する画像を選択したら、メールテンプレートに新しいセクションを追加します。
- セクションの スタイル タブで、[背景] セクションを見つけます。
- + をクリックして画像を追加します。
- [画像ライブラリを参照] をクリックし、画像をアップロードします。
- 背景画像のスタイルを設定したら、セクションにコンテンツを追加します。セクションには任意のブロックタイプ（例：テキスト ブロック、ボタン ブロック、テーブル ブロック）と、任意の数のブロックを追加できます。
背景画像を設定したら、背景色も選択してください。この色は、何らかの理由で背景画像を読み込めない場合に表示されます。
- セクションの [スタイル] タブを開きます。
- セクションの色 をオンに切り替えます。
- 選択した画像の色に近い色を選択してください。
セクション背景のスタイル オプション
画像をメールの全幅に広げるか、メールのコンテンツ内に収めるかを選択するには、 表示先 設定で [ コンテンツ] または [ セクション] を選択します。
形式 セクションで、次のオプションから選択してください。
- 元のサイズ
画像は元のサイズで表示され、いかなる方法でも制約されません。 - [フィット]
画像はセクション領域内に完全に収まり、セクション領域と正確に同じサイズでない場合は、下の背景色が表示されることがあります。 - 塗りつぶし
画像はセクション領域全体を完全に塗りつぶし、画像の一部がトリミングされる場合があります。 - タイル
画像は繰り返してセクション領域全体を埋め、タイル サイズを切り替えてスケールを選択できます。
テンプレートの背景画像を設定する
メールテンプレートに背景画像を追加するには:
- テンプレートの [スタイル] タブに移動します。
- + をクリックして画像を追加します。
- 画像ライブラリから画像を選択するか、新しい画像をアップロードしてください。
画像を追加したら、その配置方法や、水平方向および垂直方向に繰り返す（またはタイル状にする）かどうかを変更できます。
テンプレートの背景画像として設定された画像は、テンプレート領域の全幅をカバーできます。画像の読み込み中や、受信者がメールで画像を無効にしている場合に背景色が表示されることがあるため、画像と同系色の テンプレートの背景 色を設定することをおすすめします。
背景画像の受信トレイ対応
ほとんどの受信ボックスは背景画像をサポートしていますが、表示されない場合もあります。これらのシナリオでは、代わりに背景色が表示されます。
次の受信トレイでは背景画像がサポートされていません：
- Outlook for Windows
- Yahoo! メール（部分的にサポート）
- AOL（部分的にサポート）
さらに、受信者のインターネット接続が制限されている、または低速である場合、背景画像の読み込みに時間がかかるか、まったく読み込まれず、代わりに背景色が表示されることがあります。
その他のリソース
- メール画像のベスト プラクティスについて
Klaviyo Email で画像を使用する際のベストプラクティス（推奨サイズや画像の追加方法など）について説明します。
- ダークモードメールデザインのベストプラクティス
ダークモードについてご確認ください。これは、一部のユーザーがディスプレイを暗くするためにオンにするデバイス設定です。この設定は、メールの表示方法に影響します。ダークモードはデバイスレベルで選択されるエンドユーザー設定であり、Klaviyo では、各デバイスでダークモードがどのように実装されるかを直接制御できません。
- Coding HTML email backgrounds