すべての電子メールクライアントで完璧なメッセージを作成する

Sep 17, 2025

操作方法

働く電子メールマーケティングキャンペーンのために、電子メールは受信トレイに到達し、他のすべてのものから目立つ必要があります。しかし、物語はそこに終わらない。あなたのEメールがあなたのEメールを開くことができ、CTAをクリックして変換してください。

すべての電子メールクライアントとデバイスがコードを異なる方法で認識しているため、レンダリングは問題です。 1つの電子メールクライアントとうまく機能するコードは、レンダリングの問題を別のものに作成できます。より大きく使用されている電子メールクライアントでさえも、Quirksと問題を抱えています。この記事では、メインの各Eメールクライアントの課題と回避策を見てみましょう。

見通し

Outlookの思想で開発者が震えていると言うのは誇張者ではないでしょう。明らかな理由は、このEメールクライアントによって提示された数多くのレンダリングの課題です。驚くべきことは、企業が標準の電子メールクライアントとして展示されていて、あなたの加入者の小さな割合がまだ忠実であるということです。

Outlook用の課題やハックのいくつかを見てください。

チャレンジ： Outlookはマージンのマージンをサポートしていません ＆lt; p＆gt; そして ＆lt; a＆gt;
ハック： マージンを提供したい場合は、を使用してください ＆lt; td＆gt; 鬼ごっこ;大文字はタグの外側で使用され、小文字のインライン

チャレンジ： パディングは特定のHTML属性でのみサポートされています（ONを含めていません）。 ＆lt; div＆gt; または ＆lt; p＆gt; タグ）
ハック： テーブルベースのレイアウトは、この問題を克服するための最も安全な賭けです

チャレンジ： OutlookはGIFをサポートしていない唯一の電子メールクライアントです。
ハック： 一部のクライアントはアニメーションの最初のフレームを見るだけで、これにはすべての重要な情報を含め、数ミリ秒の間だけ実行し、スタンドアロンのイメージとして意味があります。

チャレンジ： OutlookはGoogleフォントをサポートしていないため、オフローマンがフォールバックとして実装します
ハック： 次のコードを埋め込む...

＆lt;！ -  [MSOの場合]＆gt。
＆lt;スタイルタイプ= "Text / CSS"＆gt;
。fallback-text {
フォントファミリー：アリア、Sans-Serif;
}
＆lt; /スタイル＆gt;
＆lt;！[Endif]  - ＆GT;

Outlook.com

新しいバージョンのOutlook.comが2016年上旬に導入されましたが、レガシー版はまだ使い切られていません。これは、そのクライアントに特有の課題とハッキングです。

チャレンジ： 画像の下に4-5pxの不要なギャップが追加されます
ハック： ディスプレイプロパティASを設定します "img {表示：ブロック;}" パディングを取り除く

Outlook.com introduces unnecessary spacing between your images — Outlook.comはあなたの画像の間に不要な間隔を紹介します

チャレンジ： RGBボーダーをサポートしていません
ハック： HTMLの背景色を設定するには、HEXコードを使用してください

チャレンジ： 追加＃に h リンクはアンカータグを破り、CSSを別の場所に移動します
ハック： ではなくドメイン名を使用してください href＃

iPhoneネイティブアプリ

ネイティブのiPhoneの電子メールアプリは最もよく使われるクライアントで、あなたが通常Eメールで見つけるすべての対話型要素をサポートします：GIF、メニュー、アコーデオン、カウントダウン、スライダーなど。さらに、それはまた電子メールマーケーターが素晴らしいユーザーエクスペリエンスのために高精細な網膜画像を使用することを可能にする。

ユーザーが電子メールでプレビューテキストの行数を調整し、List-Unsubscribeを選択できるようにするため、IOS10はすべて閉じられています。それにもかかわらず、これらの強い点にもかかわらず、iPhoneネイティブアプリにも特定の欠点があります。見てみましょう。

iOS10 users can opt for list-unsubscribe — IOS10ユーザーはList-Unsubscribeを選択できます

チャレンジ： 小さなテキストは自動的にサイズ変更されます
ハック： ヘッダーの最小フォントサイズは22px、およびBody Text 14pxの場合

チャレンジ： 新しいiPhoneモデルのリリースにより、レンダリングの問題が発生する可能性があります。
ハック： 流体レイアウトは、すべてのデバイス間で電子メールが正しく表示されるようにします

チャレンジ： IOS9では、いつ インラインブロック レベル要素は、2つの要素の端の間のスペースを持つコード内の互いの隣に、それは包装問題を引き起こす可能性があります
ハック： 単にスペースを削除します

チャレンジ： iOS10は固定位置決めをサポートしていません
ハック： 現在の回避策はありません...

gmail.

Gmailはとても便利なので人気があります。しかし、それはその課題なしではそれがそれを意味するのではありません。

チャレンジ： HTMLファイルが102KBを超える場合、Gmailはそれをクリップします
ハック： 不要なスタイルタグや属性を避け、Microsoft Wordまたは他のテキストエディタからコードをコピーしないでください（これにより、HTMLファイルに追加のタグが追加されます）。

チャレンジ： GmailはからCSSを削除します ＆lt;スタイル＆gt; ブロック8142文字を超える場合、またはエラーまたはネストされている場合 @宣言
ハック： 埋め込みスタイルが短く、Typosが無料であることを確認してください

チャレンジ： フロート、マージン、段落、およびパディングはサポートされていません
ハック： テーブルベースのレイアウトを使用してください ＆lt; td＆gt; パディングとマージンのために

チャレンジ： Gmailで設定されているGmail以外のIDが機能しない
ハック： フォールバックとして背景色を適用します

チャレンジ： 属性セレクタが機能しません
ハック： 使用する 。クラス 代わりにセレクタ

アップルメール

アップルメールはおそらく私たちが持っている完璧な電子メールクライアントに最も近いものです。 Apple Mailの主な利点は、それが悪い電子メールコーディングに関して非常に寛容であるということです。さらに、iPhoneネイティブアプリと同じように、それは電子メールの対話性をサポートし、それによってブラウザの電子メールを見る必要がなくなります。

Apple Mail Subscribersの電子メールをコーディングしながら、2つのことを断念に留意すべきです。

Calibriフォントを使用しないでください
内部リンクがApple Mailで機能しないため、電子メールをホストしてサーバーへのリンクをサーバーに提供します。

ヤフー！郵便物

新しくてより良い電子メールクライアントが到着したように、Yahoo！ Mailは最近頻繁に使用されます。そのレンダリングの課題とハックのいくつかについては後述します。

挑戦：それはサポートされていません 中央揃え HTML属性
ハック：ユース align = "center"

チャレンジ： 最小装置幅 そして 最大装置幅 メディアクエリではサポートされていません
ハック： width属性とampを使用してください。またはminまたはmax-widthではなくスタイルで
使用幅の代わりに属性 min または 最大幅 別途または埋め込まれた ＆lt;スタイル＆gt; 鬼ごっこ

チャレンジ： floatタグは機能しません
ハック： 追加 align = "top" 問題の画像に

そのため、電子メールクライアントに対する最も典型的なレンダリングの課題についての議論の終わりに達しました。見てみましょうここにより課題と回避策のために。電子メールマーケティングが正しく行われた場合、あなたのマーケティング戦略のために新しい道を舗装することができます。これらの単純な回避策を念頭に置いておくと、あなたの購読者は再びあなたのEメールで壊れた電子メールレイアウトを見ることは決してないでしょう。

関連記事：

15素晴らしい電子メールニュースレターデザイン
10最適な電子メールニュースレターツール
電子メールでのマスターHTMLタイポグラフィ

すべての電子メールクライアントで完璧なメッセージを作成する

見通し

Outlook.com

iPhoneネイティブアプリ

gmail.

アップルメール

ヤフー！郵便物

操作方法 - 最も人気のある記事

Adobe Frescoチュートリアル：絵画アプリで肖像画を作成する

アートのコントラストの力を描く

Facebookのプライバシー設定：プロフィールをプライベートに保つ方法

グリッドとFlexboxでブログを構築する

アップルの写真アプリをマスターするための10のヒント

アニメーション蒸気テキスト効果を作成する

Daz StudioとZbrushの間の移動方法

正確な骨と筋肉を描く

カテゴリ