Microsoft Outlook で表示すると、メールの見た目が異なります

このページで学べること

Microsoft Outlook では、他の受信トレイと比べて一部のメールの見た目が異なる理由と、Outlook でメッセージの表示（レンダリング）の一貫性を高めるためのヒントをご紹介します。

Outlook のレンダリング エンジン

Windows用の従来のOutlookでは、Microsoft Wordを使用してメールを表示します。Windows用の新しいOutlook、Mac用Outlook、Outlook.comなどの他のバージョンでは、ブラウザベースのレンダリングエンジンを使用します。つまり、同じメールでもOutlookのバージョンによって表示が異なる場合があります。

Microsoft Word で表を編集したり、画像のサイズを変更したりしようとした直近のことを思い出してください。Word を使用する際に直面する書式設定の課題は、Outlook の受信トレイにおけるメールが直面する課題と似ています。

このため、メールは Outlook では、Klaviyo で最初にデザインしてプレビューしたときと比べて、少し異なって表示される場合があります。

Outlook向けにメールを最適化することを選択した場合は、さまざまなデバイスや受信トレイでメッセージをプレビューするために、Klaviyoに組み込まれている受信トレイテスト（有料アカウントで利用可能）を使用してください。

Outlook 向けにメールを最適化する

Microsoft Wordを使用してメールを表示するOutlookのバージョンでは、次の問題が発生する場合があります。

• div とテーブルセルの背景画像はサポートされていないか、表示されません。
• CSS の float と position 要素が無視されます
• テキストの影はサポートされていないか、表示されません
• これらの要素のサポートが不十分なため、パディングとマージンが通常と異なる
• これらの要素のサポートが不十分なため、CSS の幅と高さが意図どおりに表示されません
• ネストされた要素の背景色が誤って表示される、または無視される

Outlook向けにメールを最適化するには、時間とテストが必要になる場合があります。画像の配置を変更すると、他のメールクライアントやモバイルデバイスでのメールの表示に影響する可能性があります。そのため、オーディエンスが使用している受信トレイ全体でデザインをテストしてください。

Outlook 向けの画像サイズ調整

Outlookで画像が引き伸ばされたり大きすぎたりして表示される場合は、テンプレートで表示幅を設定してください：

1. 画像ブロックを選択します。
2. Image layout > Wフィールドに数値を追加してください。全幅画像の場合は600 px（またはメールに設定されている任意の幅。Stylesセクションで確認できます）を使用してください。
   

3. その後、変更を保存します。

Outlook での GIF

GIFアニメーションのサポートは、Outlookのバージョンによって異なります。一部のバージョンでは、最初のフレームのみが静止画像として表示されます。アニメーションなしでも内容が伝わるように、最初のフレームに重要なメッセージを含めてください。

Outlook がオーディエンスに与える影響を理解する

最近送信したキャンペーンについて、Klaviyoが検出したメールクライアントを確認するには：

1. Klaviyo の [キャンペーン] タブに移動します。
2. 最近送信されたメールキャンペーンを見つけてください。行が展開可能な場合は展開し、送信済みメールメッセージの名前をクリックしてください。それ以外の場合は、キャンペーン名をクリックしてください。
3. メールのレポートのデリバビリティタブをクリックしてください。
4. メールクライアント別パフォーマンスセクションを確認し、デスクトップでの開封の下にあるOutlookの項目を探してください。

この割合は、受信者リスト全体ではなく、認識できるメールクライアントによるユニーク開封数に基づいています。不明なクライアントは除外されます。また、ブラウザまたはモバイルでの開封では、Outlookを名前で特定できない場合があります。どの受信トレイをテストするかを選ぶ際は、この内訳をガイドとしてご活用ください。

その他のリソース