メール画像のベスト プラクティスについて

Klaviyo Email で画像を使用する際のベストプラクティス（推奨サイズや画像の追加方法など）について説明します。

メールで画像を使用するためのベストプラクティス

メールで使用する画像を作成する際は、次の点を考慮してください。

• Klaviyo は、JPEG、PNG、GIF の画像ファイルをサポートしています。WebP ファイルをアップロードし、Klaviyo が自動的に PNG ファイルに変換するように選択することもできます。一般的に、PNG ファイルはデバイス間で最も表示が良好で、特にテキストを含む画像に適しています。
• Klaviyo でサポートされている画像ファイルの最大サイズは 10MB です。ただし、画像が大きいと読み込みに時間がかかり、受信者のエクスペリエンスが低下する可能性があるため、1MB 以下の画像を使用することをおすすめします。Klaviyo に組み込まれている画像圧縮ツールを使用すると、品質を大きく損なうことなく、アップロードした画像のファイルサイズを削減できます。
• ウェブ全体では、解像度を 72dpi に設定することがベストプラクティスです。画像品質と読み込み速度のバランスを取るために、画像の幅は 600～1000 px、高さは全幅画像の場合 2000px 未満にしてください。メールの全幅より小さい画像は、600px 未満でも構いません。
• 全幅画像を 72dpi で使用する場合、多くの場合 1MB を超えることにご注意ください。また、画像のサイズを縮小すると、目に見えてぼやけたり低品質に見えたりする可能性があります。メッセージで使用する画像を選ぶ際は、画像品質と読み込み時間のトレードオフをご考慮ください。大きな画像は、特にインターネット接続が遅い場合、メールを開いてもすぐに表示されない可能性があります。
• 画像には必ず alt テキストを追加してください。Outlook や Apple Mail などの一部の受信トレイでは、受信者が表示を許可するまで画像が表示されません。alt テキストを含めることで、これらの受信トレイを使用している受信者が画像で伝えたい内容を理解しやすくなり、アクセシビリティの向上にもつながります。

画像ブロックを挿入する

テンプレートに画像を追加するには:

1. 画像ブロックをプレビュー キャンバスにドラッグし、含める画像を選択します。

2. 画像ブロックを配置すると、次の方法で画像を追加するよう求められます：

• すぐにアップロードできるように、1 つ以上の画像をブロックにドロップします。
• コンピューターを参照して、1 つ以上の画像を見つけてアップロードする
• URL からインポートする
• 画像ライブラリから画像を選択する
• 商品カタログから画像を選択する（E コマース プラットフォームと連携している場合、またはカスタムカタログを同期している場合）
• 画像を動的に表示させたい場合は、プレースホルダー URL または 変数シーケンス を挿入します（フローのみ）。

画像をアップロードする場合、アップロードできる画像の最大サイズは 10 MB です。

画像ファイルの自動圧縮

Klaviyo には、画像のアップロードプロセスの一部として自動画像圧縮ツールが含まれており、画像の鮮明さと高速な読み込み時間のバランスを取るのに役立ちます。この機能は gif ではサポートされていませんのでご注意ください。

画像をアップロードすると、レビュー ステップで元のファイルと圧縮版が比較用に表示されます。各プレビューには、ファイルサイズと、それらの差分の割合が表示されます。画像の上にある切り替えでアップロードするバージョンを選択でき、Klaviyo は推奨する選択肢に 推奨 バッジを追加します。ただし、圧縮版で鮮明さが失われていることに気付いた場合は、これを上書きできます。これは元のファイルが小さい場合に起こることがあります。

元の画像が推奨される場合、画像比較パネルはデフォルトで閉じられていることに注意してください。複数の画像を一度にアップロードした場合は、各画像について個別に確認し、希望するオプションを選択してください。

アップロードの設定

画像のアップロード時に確認手順をスキップしたい場合は、アップロード設定を調整してください。画像をアップロードすると、アップロード設定ボタンが表示されます。

ここでの選択は、今後のアップロードのために保存されます。選択できます。

• [比較]（デフォルト）：元のバージョンと圧縮版を確認して選択します。
• オリジナルを使用：元のファイルを常にアップロードします。レビューのステップはありません。
• 圧縮済みを使用：Klaviyo の自動圧縮バージョンを常にアップロードします。レビューの手順はありません。

画像をトリミングする

画像ブロック、分岐ブロック、テーブルブロック内の画像は、簡単にトリミングできます。

1. 画像ブロックをクリックします。
2. 左側の画像アイコンの下にある [切り抜き] をクリックしてください。
   
   画像は、円、正方形、または幅と高さをカスタム設定した長方形に切り抜くことができます。エディタ内で画像を切り抜いても元の画像は保持されるため、切り抜きはいつでも調整または解除できます。

3. 切り抜きが完了したら、戻る矢印をクリックして変更を適用します。
   

画像のサイズを変更する

画像のサイズを変更するには、キャンバス内のサイズ変更スライダーを使用します。

アップロードした HTML テンプレート内の画像

Klaviyo にコピーする HTML テンプレート（MailChimp テンプレートを除く）の場合、インポートプロセス中に画像が含まれた zip ファイルをアップロードします。

MailChimp のテンプレートに関しては、MailChimp にすでに読み込まれている画像が含まれるテンプレートをアップロードすると、Klaviyo がこれらの画像をすべて自動的にコピーします。

画像をアップロードすると、[画像を挿入]ボタンを使用して、そのテンプレートに新しい画像をアップロードできます：

画像の品質

テンプレートで画像が期待どおりにきれいに、または鮮明に表示されていない場合は、画質を向上させるための手順を実施できます。

メール内でレンダリングされる画像の鮮明さを向上させる一般的な標準の 1 つは、希望するサイズの 2x の画像を挿入してから、テンプレートで画像サイズを縮小することです。これには 2 つの方法があります：

1. テンプレートに画像の大きく鮮明なバージョンを挿入し、次に [編集] をクリックして、希望する寸法にサイズ変更します
2. ネイティブで大きい画像（つまり、幅 600px）を挿入し、より小さいサイズ（つまり、CSS を使用して 300px 幅）で設定するには、この方法を使用する場合、画像を専用の HTML ブロックに挿入し、CSS を直接調整する必要があります。

画像の種類

Klaviyo は、次の画像形式をサポートしています：JPEG、PNG、GIF。

WebP ファイルをアップロードし、Klaviyo の組み込みコンバーターを使用して PNG ファイルに変換できます。ただし、アニメーション WebP ファイルのコンバージョンはサポートされていません。

PSD や SVG など他のファイル形式がある場合は、アップロードする前に、サポートされている画像タイプに変換する必要があります。

メールに最適な画像タイプについては、こちらをご覧ください。

画像ライブラリ

Klaviyo にアップロードした画像は、[コンテンツ] > [メディア & ブランド] > [画像] に保存されます。画像ライブラリから画像を削除しても、現在使用中のテンプレートからは削除されません。

その他のリソース