メールがOutlookクライアントで見栄えが悪いのはなぜですか？

公開: 2018-07-04

真実に立ち向かおう。メールの作成は非常に簡単な作業です。しかし、これらの電子メールをOutlook互換になるようにフォーマットするのはかなりの作業です。実際、あなたが思っているより難しい。

Outlookは最も使用されていますが、古くからある電子メールクライアントです。ただし、Gmailなどの他のメールクライアントに見られるいくつかの進歩はサポートされていません。

これを試してみてください：

背景が透明なPNG画像を使用した場合、Outlookはおかしくなります。そのような画像をレンダリングする方法がわかりません。同様に、丸みを帯びたボタン（border-radius CSSプロパティを使用して作成）がOutlookクライアントで正方形に見えるのはなぜか疑問に思われるかもしれません。 Outlookはborder-radiusおよびその他のいくつかのCSSプロパティをサポートしていないためです。

Outlookの電子メールがひどく見える理由と、電子メールのデザインを改善するためにできることは次のとおりです。

メールがOutlookで見栄えが悪いのはなぜですか？

メールマーケターにとっての最大の課題は、Outlook用のメールテンプレートを作成することです。これは、Outlook 2007以降、MicrosoftがInternet Explorerを使用した電子メールのレンダリングを停止し、MicrosoftWordをレンダリングエンジンとして使用し始めたためです。この切り替えは、WordまたはExcelからOutlookの電子メールにコンテンツをコピーまたは貼り付けるだけで済むため、MicrosoftOfficeユーザーに最適です。しかし、HTMLベースの電子メールビルダーにとってシナリオは困難になりました。 HTMLメールの外観は異なるため、特定の課題を克服するには、以下の手順に従ってメールキャンペーンを改善してください。

Outlookを使用した電子メールレンダリングの課題

メールマーケティング担当者は、メールキャンペーンを設計する前に多くのことを考慮する必要があります。彼は、Outlookを使用する顧客サブスクリプションを知る必要があります。 Outlookのデスクトップバージョン、モバイルバージョン、およびWebバージョンは、電子メールのレンダリングが完全に異なります。 Outlookを使用した電子メールのレンダリングに関しては、次の点に注意してください。

画像がクリップされて読み込みが遅くなるのはなぜですか

電子メールに画像を含める場合、Outlookには画像サイズに一定の制限があります。

メールマガジンは、メールマーケティングキャンペーンで主要な役割を果たします。それらはそれに画像を追加することによって動的になります。キャンペーンのテンプレートに長い画像が追加されると、受信側でクリップまたは再スケーリングされることがあります。これは、Outlookが1728pxの高さを超える画像の上部をクリップするためです。したがって、この場合、画像を1728px未満にサイズ変更して、クリッピングなしで表示されるようにする必要があります。

画像のサイズを変更できない場合は、画像を2つの別々の画像に切り抜いて、キャンペーンで使用するのが最善の方法です。

画像のサイズが変更されない

Outlookは、HTMLで制約されている画像ではうまく機能しません。つまり、HTMLを使用してサイズ変更された画像が電子メールテンプレートに追加された場合、Outlookは、サイズ変更された値ではなく、元のサイズでのみ画像を表示します。そのため、メールの自動化で使用する前に、画像のサイズが適切に変更されていることを確認する必要があります。

背景画像

顧客を「驚かせる」ための最善の戦略は、ブランドを特徴とする背景画像を含む電子メールを作成することです。画像にライブテキストを重ねることで、背景画像をより目的のあるものにすることができます。ライブテキストは、顧客が画像とともに表示されていない場合でも、電子メールの目的を伝えるのに役立ちます。

ただし、OutlookはHTMLを使用した背景画像をサポートしていません。サブスクライバーが表示する背景画像には、VML（Vector Markup Language）を使用する必要があります。

メールウィンドウ全体をカバーする背景画像のHTMLの<body>タグに以下のコードを入力します

<div> <!--[if gte mso 9]> <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t"> <v:fill type="tile" src="/IMAGE.png" color="#000000"/> </v:background> <![endif]--> <table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0"> <tr> <td valign="top" align="left" background="IMAGE.png">

上記のコードは、Outlook 2007、2010、および2013で開かれた電子メールで背景画像を表示する際に完全に機能しました。ただし、Windows Mail 10では、背景画像を許可するソースを使用して画像を追加するために、コードを変更する必要がありました。

以下のコードは、画像の最上層を透明にし、背景画像を修正するのに役立ちます。

 <td valign="top" height="700" background="Image Live URL Here" bgcolor="#f7901e"> <!--[if gte mso 9]> <v:image xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" src="/Image Live URL Here" /> <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false"> <v:fill opacity="0%" color="#f7901e" /> <v:textbox inset="0,0,0,0"> <![endif]--> <div> <!-- HTML Content Here --> </div> <!--[if gte mso 9]> </v:textbox> </v:fill> </v:rect> </v:image> <![endif]--> </td>

アニメーションGIFは適合しません

ビデオは言葉以上のものを話します。

ただし、技術的に言えば、電子メールテンプレートには、ビデオをサポートするための複雑なコーディングが必要です。代替案を考えると、メールマーケティング担当者として、私はGIFが動的なオプションであると考えています。 GIFは、最も単純な形式でメッセージを伝えるためのアニメーション画像です。 OutlookはGIFをサポートしていません。

GIF画像が読み込まれますが、GIFの最初のフレームのみが顧客にレンダリングされます。

メーリングリストにOutlookサブスクライバーが含まれている場合は、画像の最初のフレームがGIFのメインコンテキストを共有していることを確認してください。

アニメーション部分を使用して、他の電子メールクライアントのサブスクライバーに追加の利点を提供することを検討してください。

境界半径プロパティ

メールマーケティングと言えば、行動を促すメッセージボタンは、メールでリードを生成する機能です。先端が丸いCTAボタンを何回クリックしましたか？

Border radiusプロパティは一般的なCSSプロパティですが、これはOutlookではうまく機能しません。 Outlookを使用すると、サブスクライバーには四角い境界線のあるCTAボタンが提供されます。

追加の空白スペース

電子メールがOutlookでレンダリングされた後、印刷プレビューオプションで表示されていたように、画像の上に空白が表示されることがあります。

ブログで前述したように、これはOutlook2007がMicrosoftWordを使用してHTMLメールをレンダリングするためです。

したがって、電子メールは実際のデザインとは少し異なって見えます。

プライマリフォントの問題

サブスクライバーのデバイスにプライマリフォントスタイルがない場合、Outlookは、コードに記載されているフォールバックフォントを無視して、電子メール全体をTimesNewRomanでレンダリングします。

 <!--[if mso]> <style> h1 { font-family: Primary font, Fallback font; } </style> <![endif]-->

メールテンプレートは完璧でなければなりません

eコマースストアのメールキャンペーンを実行します。設計したテンプレートは、効果的な電子メールの送信に役立つはずです。これは、顧客が直接会う古い伝統的なフィールドマーケティングではないためです。

マーケティング担当者の外見は、ブランドの信頼性を定義します。それで、私たちは今、私たちのブランドを表すために何を送っていますか？

メール。メールのデザインテンプレートは、顧客にブランドの第一印象を与えます。メールの内容がよく見えるほど、ブランドも良くなります

ただし、電子メールを魅力的に見せるために高度なフォーマットオプションを使用する自由はありません。 Outlookで電子メールが完璧に見える場合がありますが、他の電子メール受信者によってレンダリングされた場合、それはシナリオではありません。

電子メールのhtmlでテーブルを使用することに固執する必要があります。 Outlookはサポートしていないため、位置と浮動小数点数でdiv要素を使用しないでください。残念ながら、現時点ではこれに対する回避策はありません。

登録解除オプションは必須です

eコマースストアを管理する私たちは、常にお客様のブランドへの関心を維持したいと考えています。

どうやってするの？

ニュースレター。あなたのビジネスニッチのトレンドとアップデートに関する潜在的な情報を顧客に提供します。

しかし、最終的には、あなたのブランドに従うかどうかを決めるのは顧客です。私たちにサブスクライブした顧客には、いつでもサブスクリプションリストからオプトアウトするオプションが提供されます。

登録解除ボタンは、お客様に送信するすべてのニュースレターで必須です。お客様にこのボタンが表示されない場合は、
何を期待しますか？
スパムになる可能性があります！

Outlookから電子メールを送信すると、ブランドはこのリスクにさらされます。この標準オプションは提供されません。

リンクが下線付きの青/紫の色のテキストに変更されます

メールマーケターとして、お客様に送信するメールを最大限に活用する必要があります。

サブスクリプションリンク、トレンドブログへのリンク、Webサイトへのリダイレクトリンクを含めて、カスタマーエンゲージメントを実現できます。

HTMLメールがOutlookから送信される場合、そのようなリンクは、さまざまなメールクライアントで表示されるときに下線が引かれた青/紫のテキストで表示されます。

この問題を回避するには、 <font>タグを使用し、テキストを<span>タグとstyle属性でラップします。

次のコードを使用してみてください-

 <a> <span> <font color="#E3A216"> Click me </font> </span> </a>

Outlookは、個人の受信トレイを埋めるのに適している場合があります。

しかし、ビジネスを話す-箱から出して見てください。