Marketing Cloud Engagementから配信するメールのコーディング最適化について

author クリエイティブソリューションチーム

date 2023.12.13

update 2025.06.02

「toBeマーケティング株式会社では、Marketing Cloudの導入から活用、運用までをトータルでサポートしています。

またMarketing Cloudだけでなく、Personalizationと組み合わせて、お客様の課題や目標に合わせて最適なマーケティング戦略を策定し、その実行を支援いたします。
⇒ 「Marketing Cloud支援の詳細はこちら」

Marketing Cloud Engagement 上手く運用するために気をつける点とは？成功事例もご紹介

デジタルマーケティングの高度化により、顧客との関係構築には新たなアプローチが求められています。本資料では、Marketing Cloud Engagementの主な機能に加え、導入時や運用時に陥りやすい課題とその回避策、導入成功事例を紹介しています。こんな方におすすめです！

マーケティングツール選定に悩んでいる方
他社の成功事例を参考にしたい方
ツール導入後の活用に不安がある方

無料で資料ダウンロード

はじめに

皆さんこんにちは！Marketing Cloudも段々と普及してきて、Marketing Cloud Engagementからのメール配信が活発になってきた印象があります。そこで今回はMarketing Cloud Engagementから配信するメールのコーディング最適化についてご紹介します。画像を見ながらぜひ参考になさってください！

主要なメーラーへの最適化

Marketing Cloud Engagementでメールを配信するアプリケーションであるEmail Studioには、ブロックエディターが装備されており、ビギナーでもメールを作成しやすいのが特徴です。さらに、HTMLを理解していれば強い味方となるのがHTMLエディター。このHTMLエディターは、コードの属性やパラメーターを見やすく色分けしてくれたり、選択したタグの対となるタグをハイライトしてくれたりなど、使いやすいエディターとなっています。

また、Email Studioにはデスクトップ表示とモバイル表示を切り替えてプレビューできる機能も備わっており、レスポンシブデザインを確認しながらメールを作成することができます。

メールを作成したらテスト送信を行い、主要なメーラー（Apple Mail、 Gmail、 Outlookなど）で受信してみましょう。想定通りのレイアウトになっているかなどを確認しながら調整とテスト送信を繰り返し、表示を最適化していきます。

受信してみるとメーラーごとに特徴があることがお分かりいただけると思います。
Apple Mailは素直！iOS版では数字の連続を電話番号と解釈しリンクにしてしまったり、ややお節介な挙動への対応は覚えておく必要がありますが、ほぼ想定通りのレンダリングをしてくれます。
Gmailは我が道を行きます！こちらの書いたコードに独自のCSSを上書きしてきたり、少し強引なところはありますが、付き合い方を覚えてしまえば対応可能なレンダリング。
一方Outlookは... コーダー泣かせのメーラーです（涙）。一言で表すなら難敵...

まだまだ無視できない難敵Outlook

まもなく2024年を迎えようとしている現在でも、メーラーのシェアを考えるとなかなか無視できない存在としてOutlookがあります。OutlookはCSSのサポートも限られているため、思わぬ場所でレイアウトが崩れることもあり、一筋縄では行きません。
時間をかけてコーディングし、ほとんどのメーラーでは想定通りなのに、Outlookで受信したら表示が崩れていた... そんな経験はございませんか？

「ただ、角丸のボタンを表示したいだけ... 」
「ただ、コンテンツのサイズを揃えたいだけ... 」
「ただ、マージンを入れたいだけ... 」

そんなささやかな願いをことごとく打ち砕いてくる難敵、それがOutlookです。