Clever Geek Handbook

プロの組版メールの基本

メールのレイアウト

電子メールマーケティングが世界中で勢いを増し始めていることは周知の事実です。 また、ロシアにとっては、市場におけるまったく新しいニッチ市場でもあります。 そして、メールのプロフェッショナルなレイアウトは成功の要素の1つです。 プロフェッショナルレイアウトとは、視覚的に美しく信頼性の高いレイアウトだけでなく、マーケティングの観点から見たハガキの使いやすさ、スパムフィルターのタイポグラフィとグラフィックスの最適化などを意味します。 電子メールのレイアウトはかなり広範なトピックであり、すべてを1つの記事に収めることはできません。この投稿では、長年の実践で確実にテストされ、世界で最も使用されている電子メールクライアントで動作する基本要素と技術のみを説明します： iPhone 4S / 5; Outlook 07/10/13; iPad Apple Mail Android 2.3 / 4.0 ヤフー Gmail ロシア市場のみを考慮すると、 Mail.ruとYandex.Mailに言及するしかありません。



最初に何を知る必要がありますか？



すぐに、いくつかの主要な重要なポイントを強調したいと思います。



  1. 私たちの武器には、すべてのメーラーでサポートされているcssプロパティの非常に切り捨てられたセットがあります。 同時に、スタイルはインラインで記述する必要があり、 先頭にはベンダープロパティと、レターの主要な様式を持たない広告ユニットのみを表示する必要があります。 まあ、 頭の中でリンクを使用することは非常に望ましくない。
  2. メインのビジュアルデザイン要素でbackground-imageを使用したり、重要なテキスト情報を画像に入れたりしないでください。 一般に、受信者が単一の画像なしでレターを表示するようなオプションを常に考慮する必要があります。




フレーム



おそらく、少なくとも一度はニュースレターのレターを作成した人なら誰でも、テーブルを使用してワイヤーフレームを作成する方が良いことを知っているでしょう。 実際、単純なブロックdivモデルは、2007年以降のMS Outlookを除き、上記のすべてのメーラーで現在サポートされています。 これは、Outlookの最新バージョンがMicrosoft Wordをエンジンとして使用しているためです。このエンジンは、ブロックcssプロパティについてあまり詳しくありません。 レイアウト時にこのメールクライアントを無視することはお勧めしません。そのため、 tableを基盤として使用してください 。 はい、Outlookで良い結果が得られたので、ほとんどのメーラーでは、レターも見た目が良くなりますが、むしろ良くなります。



例として、複雑なテンプレートではなく、以下の最も重要な要素を検討してください。

ニュースレターメールテンプレート



ここでのマークアップは、次のように表すことができます。 

<table width="100%" cellspacing="0" cellpadding="0" border="0"> <tr> <td align="center"> <table width="600" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;"> <!--header line statrs--> <tr> <td><img ... /></td> <td><img ... /></td> <td><img ... /></td> </tr> <!--header line end--> <!--content statrs--> <tr> <td colspan="3" align="center"> <table width="540" cellpadding="0" cellspacing="0" border="0" style="border: solid 1px #000; border-collapse: collapse;"> <tr> <td>content</td> </tr> </table> </td> </tr> <!--content end--> </table> <!--footer img starts--> <table width="660" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;"> <tr> <td><img ... /></td> </tr> </table> <!--footer img end--> </td> </tr> </table>




ここで何が重要ですか？



  1. widthで指定した値を確認するために、テーブルを常に「ゼロ」にします。 

     <table width="600" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;">
  2. 要素の整列は、次のいずれかの方法で実行されます。 

     <td align="center"> style="text-align: center;"   <center></center>
  3. テンプレートの視覚的整合性を順方向文字で保持する場合は、中間セルを空のままにしたり、 nbspシンボルで埋めたりしないでください。 透明な.gif画像でそれらを埋める方が良いです（下の例を参照）。


テーブルまたはテーブル行の間に垂直方向の間隔を作成する場合は、 marginとpaddingを使用しないでください。 このデザインで支柱を作ることをお勧めします。 

  <tr> <td height="10"> <div style="margin: 0; padding: 0; line-height: 0;"> <img src="...indent.gif" border="0" width="1" height="1" style="display: block;" alt="" /> </div> </td> </tr>


ここで、高さは表のセルの高さの値によって異なります。 透明な.gifはセルの塗りとして使用されます。 実際のサイズは1x1pxではなく、もう少し（たとえば20x20px）行い、属性weightまたはheightを使用して圧縮することをお勧めします。 したがって、画像をアップロードせずにレターを表示するときの視覚的な欠陥を取り除き、ジャンクボックスにレターが入らないようにします。 cellpaddingおよびcellspacingテーブルの属性を忘れないでください。 彼らはどこでも素晴らしい仕事をしますが、彼らの助けを得ることが常に可能とは限りません。



テキストデザイン



ここで物事は多かれ少なかれ良いです。 仕様2.1のほとんどすべてのCSSプロパティがサポートされています。



  1. 当初、文字のレイアウトについては、すべてのテキストをスパンまたはフォント文字列要素にラップし、 フォントスタイリングを設定することをお勧めしました。 現在、これは無視できます。 bodyタグ内のHTML要素でテキストのプロパティを記述できますが、インラインのみが望ましいです。
  2. フォントサイズを設定するには、ベースフォントのスタイルに常にアクセスできるとは限らないため、絶対単位（ pxまたはpt ）を使用することをお勧めします。 これにより、すべてのメールクライアントで同じフォントサイズが保証されます。 WebKitデバイスはデフォルトでテキストスケーリングを使用します。 この動作を無効にするベンダープロパティ-webkit-text-size-adjustがあります。 次のセレクターをheadに単純に作成することをお勧めします。 

     div, p, span, strong, b, em, i, a, li, td { -webkit-text-size-adjust: none; }
  3. リンクをクロスリンクするには、次の構成が必要です。 

     <a href="#" target="_blank" style="color: #267f00 !important; text-decoration: underline;"><span style="color: #267f00;">link</span></a>


    Outlookでは、リンクをスパンに再ラップして色を設定する必要があります。 重要な優先順位を理解していないため、Yandex.Mailはホバーイベント中にリンクを赤で塗り直します。

    target = "_ blank"属性は、レターにWebバージョンのレターへのリンクがあり、このバージョンのリンクが新しいタブで開く場合にのみ必要です。 そのため、すべてのメールクライアントが独自にこれを行います。
  4. 行の高さをどこでも機能させる場合は、ブロック要素（ td、div、p、li ）に対してのみ行の高さを指定します。


画像



1つのセルに画像が1つしかなく、その周りに余分なスペースが表示されないようにする場合は、 ディスプレイを書く習慣を取ります：それをブロックします（たとえば、この欠陥はGmailに1年以上存在します）。



Outlook 2013には、高さが20ピクセル未満の画像に対して独自の欠点があり、上部に8ピクセルのスペースがあるため、レイアウトが提供されない場合、レイアウトの外観に大きな影響を与える可能性があります。 これは、親ブロックのline-heightプロパティを設定することで解決されます。その値は画像の高さ以下です。 tdセルとラップされる要素の両方に指定できます。 

 <div style="margin: 0; padding: 0; line-height: 15px;"> <img src="..." border="0" width="600" height="15" style="display: block;" alt="" /> </div>




文字の角を丸くする



border-radiusは現在、最も人気のあるほとんどの電子メールクライアントをサポートしていますが、MS Outlook 07/10/13はサポートしていません。 角を丸くする方法については、レイアウトの実装の1つの例を示します。 上記のレイアウトで使用したオプションを示します。 

  <tr> <td align="left" valign="top" style="background-color: #0BB40B;"> <img src="round_l.png" /></td> <td style="background-color: #0BB40B;"> <img ... /></td> <td align="right" valign="top" style="background-color: #0BB40B;"> <img src="round_r.png" /></td> </tr>


丸めのイメージとして、透明度のある2つのイメージを使用し、サイドセルに配置しました。



文字の角を丸くする



将来的には、背景色を変更することにした場合、 background-colorの値を変更するだけでよいため、この方法は適切です。 欠点は、親ブロックの背景色が画像で指定された色と一致しなければならないことです（私の場合は白です）。



最後に何を知る必要がありますか？



ここで、あなたのメールがスパムボックスに入る可能性を減らす方法について少し書きたいと思います。 現在、多くのスパムフィルターがあり、誰もが異なるアルゴリズムに取り組んでいます。 同時にすべてのフィルターに理想的なレターを作成することはほとんど不可能です。スパムの割合は常に存在しますが、それはあなた次第です。 もちろん、すべてのスパムフィルターは、件名とメッセージ本文のテキストの内容に大きな注意を払っていますが、HTMLチェックも最後の基準ではありません。



最も信頼できる方法は、ニュースレターの作成元のメールアドレスをアドレス帳に追加するよう受信者を説得することです。 ただし、受信者がそれを行ったかどうかは決してわからないので、メールを設計するときは最も簡単なヒントに従ってください。





最後に、電子メールの適切なレイアウトがマーケティングに大きな利点をもたらすことを再度お知らせします。 きれいで魅力的なポストカードを作成します。 ご清聴ありがとうございました！


More articles:


All Articles