電子メールデザインでスニペットを使用するための究極のガイド

公開: 2015-11-20

数十の電子メールクライアント、一見無数のレンダリングの癖、HTMLとCSSのサポートの変更の間で、電子メールキャンペーンのコーディングは複雑です。メールデザイナーにとって残念なことに、その複雑さはメールデザインに時間がかかることを意味するため、メールデザインでスニペットを使用するための究極のガイドを作成しました。

電子メールデザイン会議で、CodeSchoolのDanDenneyは問題を完全に組み立てました。

メールを作成する際の最大の課題はGmailではありません…今がその時です。

メールのデザインに関しては、時間が重要であり、開発ワークフローを導入することが重要です。電子メールデザインの急速に変化する要求に対応するために、ワークフローを可能な限り効率的にすることがますます重要になっています。

では、ワークフローを最適化するために何ができるでしょうか。一言：スニペット。

スニペットを使用すると、これまでになく簡単に、そしてより迅速にメールを作成できます。電子メールの作成とトラブルシューティングに費やす時間を減らし、購読者にとってより良い電子メールエクスペリエンスを作成するためにより多くの時間を費やします。

スニペットとは何ですか？

スニペットは、電子メールテンプレートまたはより広範な電子メール設計システムで使用できる再利用可能なコードの電子メールモジュールです。これらは、Doctype、防弾ボタン、リンクなど、電子メールのデザイン全体で一般的に使用される要素に最適です。これらの要素のいずれかが使用されるたびにコードを書き直す必要はなく、スニペットを使用できます。スニペットを使用すると、コーディングが自動化され、開発時間が大幅に短縮されます。

スニペットの使用方法

メールの作成に使用しているメールエディタに関係なく、スニペットを使用してワークフローを最適化できます。最も一般的なエディタでそれらを使用する方法を見てみましょう。

ドリームウィーバー

Dreamweaverでは、Windows→スニペット→新規/編集にアクセスして、スニペットを追加または編集できます。スニペットをグループに保存して（つまり、テーブル関連のスニペット、画像関連のスニペットなど）、簡単に検索することもできます。

メールをコーディングするときは、スニペットのタイトルをダブルクリックするか、[挿入]をクリックするか、キーボードショートカットを使用してスニペットを使用します。

Litmus Builder

Builderプロジェクト内で、エディターの右上にあるスニペットアイコンをクリックします。

そのインターフェース内で新しいスニペットを作成および編集し、キーボードショートカットを介してコード内でスニペットをトリガーできます。 {中かっこ}を使用して、スニペット内に編集ポイントを追加することもできます。スニペットをトリガーすると、スニペット内の事前定義された編集ポイントに自動的にジャンプして、すばやく簡単にカスタマイズできます。

崇高なテキスト

既存のスニペットを表示したり、Sublime Textに新しいスニペットを追加したりするには、[ツール]→[スニペット] / [新しいスニペット]にアクセスします。各スニペットは、独自の.sublime-snippetファイルに保存されます。

キーボードショートカットトリガーを使用して、コードにスニペットを追加します。たとえば、以下のコードでは、コード内に「hello」と入力するとスニペットがトリガーされます。ドル記号を順番に使用して、スニペット内に編集ポイントを追加することもできます（ $ 1 、 $ 2など）。

 <snippet> <content><![CDATA[ /* Insert snippet here */ ]]></content> <!-- Optional: Set a tabTrigger to define how to trigger the snippet --> <!-- <tabTrigger>hello</tabTrigger> --> <!-- Optional: Set a scope to limit where the snippet will trigger --> <!-- <scope>source.python</scope> --> </snippet>

原子

Atom→スニペットを開くにアクセスして、Atomでスニペットを表示、編集、または追加します。各スニペットは、独自のsnippets.csonファイルとして保存されます。

Sublime Textと同様に、Atomのスニペットはキーボードショートカットトリガーを介して機能します。ドル記号を順番に使用して、スニペット内に編集ポイントを追加することもできます（ $ 1 、 $ 2など）。

 'Name': 'prefix': 'tabtrigger' 'body': """ /* Insert snippet here */ """

コーダ

Codaのスニペットは「クリップ」と呼ばれます。クリップを追加または編集するには、サイドバー→クリップにアクセスします。クリップはグループで保存でき、キーボードショートカットトリガーで機能します。 UIでカスタムプレースホルダーポイントを定義することにより、スニペット内に編集ポイントを追加することもできます。

スニペットライブラリ

各エディター内で、スニペットのライブラリを作成できます。ライブラリ内のすべてが最新であり、事前にテストされている必要があります。メールの世界は絶えず変化しているため、スニペットを頻繁にテストし、必要に応じて新しいスニペットを追加してください。

他にもたくさんありますが、メール開発に使用するために、お気に入りのすぐに使えるスニペットのいくつかの包括的なリストをまとめました。それらをスニペットライブラリに自由に追加してください！

Doctype

Doctypeは、電子メールを標準モードまたはクォークモードでレンダリングするように電子メールクライアントに指示します。電子メールに使用するDoctypeの推奨される形式は2つあります。 1つ目はHTML5Doctypeです。

HTML5

 <!doctype html>

XHTML

2番目はXHTMLDoctypeです。

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

キャンペーンモニターは、どのHTML doctypeを使用するのが適切かを分析し、Litmusコミュニティでもそれについて素晴らしい議論があります。電子メールのDoctypeを指定しない場合、電子メールクライアントは電子メールを「クァークモード」でレンダリングするため、レンダリングの問題が発生する可能性があります。

メタタグ

レスポンシブになるようにメールをコーディングしている場合は、含める必要のあるいくつかの重要なメタタグがあります。

UTF-8

最初に推奨されるメタタグは、文字エンコードをutf-8に設定します。これは、電子メールの一般的なエンコードです。これは必要に応じて変更できます。

 <meta http-equiv="Content-Type" content="text/html;" charset="utf-8" />

ビューポート

2番目に推奨されるメタタグは、電子メールの応答性を設定します。

 <meta name="viewport" content="width=device-width, initial-scale=1" />

ウインドウズの電話

3番目に推奨されるメタタグは、特にWindowsPhoneで電子メールをレスポンシブにするためのものです。

 <meta http-equiv="X-UA-Compatible" content="IE=edge" />

テーブル

HTMLメールは、テーブルを使用してコンテンツを構造化します。テーブルは手作業でコーディングするのが非常に面倒な場合があるため、単純なテーブルレイアウト用の基本的なスニペットを開発しました。

表1×1

 <table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> </tr> </table>

表2×1

 <table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> </table>

表3×1

 <table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> </table>

表2×2

 <table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> </table>

表2×3

 <table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> </table>

表3×2

 <table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> </table>

表3×3

 <table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> </table>

防弾ボタン

Outlookのレンダリングの癖のおかげで、電子メールでボタンを作成するのは非常に面倒です。防弾ボタンには、画像の有無に関係なく表示される4種類の推奨ボタンがあります。

VMLボタン

最初の防弾ボタン方式は、キャンペーンモニターのStig Morten Myreによって開発され、VMLベースのボタンアプローチです。

 <div> <!--[if mso]> <v:roundrect xmlns_v="urn:schemas-microsoft-com:vml" xmlns_w="urn:schemas-microsoft-com:office:word" href="{link}" arcsize="{arcsize}%" strokecolor="#{strokecolor}" fillcolor="{fillcolor}"> <w:anchorlock/> <center>{button text}</center> </v:roundrect> <![endif]--> <a href="{link}">{button text}</a> </div>

キャンペーンモニターは、上記のVMLボタンコードを生成するためのシンプルなツールであるbuttons.cmも作成しました。

パディングベースのボタン

2番目の方法は、パディングベースのボタンを使用したライブテキストアプローチです。

 <table border="0" cellspacing="0" cellpadding="0"> <tr> <td bgcolor="#{bgcolor}" align="{align}"> <a href="{link}" target="_blank">{button text}</a> </td> </tr> </table>

このボタンの主な欠点は、100％クリックできないことです。

ボーダーベースのボタン

3番目の防弾ボタンの方法では、リンクの周囲に境界線を作成して、クリック可能な大きな領域を作成します。

 <table border="0" cellspacing="0" cellpadding="0"> <tr> <td> <a href="{link}" target="_blank">{button text}</a> </td> </tr> </table>

この方法の主な欠点は、Outlook 2007-2013がリンクタグの境界線の幅を尊重しないため、ボタンの人為的なパディングがいくらか減少することです。

パディング+ボーダーベースのボタン

最後の方法は、パディングボタンとボーダーボタンの組み合わせです。

 <table border="0" cellspacing="0" cellpadding="0"> <tr> <td align="{align}" bgcolor="#{bgcolor}"> <a href="{link}" target="_blank">{button text}</a> </td> </tr> </table>

このハックは、Outlookのパディングレンダリングの問題を回避するために使用されます。

画像

電子メールで画像を使用する際に考慮すべき重要な要素は多数あります。たとえば、Outlookで画像を正しくレンダリングするには、HTML属性で高さと幅を定義する必要があります。また、ALTテキストの使用は、アクセシビリティの目的だけでなく、43％のユーザーが画像をオフにしてメールを表示するために非常に重要です。最後に、画像の周りの余分なパディングやギャップを防ぐために、display：block;に設定する必要があります。

 <img src="{src}" width="{width}" height="{height}" border="0" alt="{alt}"/>

リンク

基本リンク

メールでリンクを使用する場合は、フォントサイズ、フォントファミリ、テキスト装飾などのインラインスタイルを設定する必要があります。これらのインラインスタイルがすでに配置されている単純なスニペットを次に示します。

 <a href="#">{style}</a>

iOSで青いリンクを削除する

iOSで青いリンクを削除する方法はいくつかありますが、単一のCSS宣言を使用して削除する簡単なスニペットを次に示します。

 a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important; }

隠しプリヘッダー/プレビューテキスト

プリヘッダーまたはプレビューテキストは、電子メールの本文から引き込まれたコピーであり、通常、サブスクライバーの受信ボックスの差出人名と件名の下に表示されます。非表示のプリヘッダーテキストを使用することは、使用するコピーを定義し、それが電子メールの実際のデザインに影響を与えないようにする方法です。

スニペットは次のとおりです。

 <div> {preheader text} </div>

メディアクエリ

メディアクエリは、Webサイトや電子メールキャンペーンのスタイル設定に使用される言語であるカスケードスタイルシート（CSS）のコンポーネントです。メディアクエリを使用すると、電子メールのデザインを微調整して、モバイル、デスクトップ、およびWebメールの受信ボックスでより使いやすくすることができます。

メールをデザインするときに必要となるすべての重要なメディアクエリのリストは次のとおりです。

ベースメディアクエリ

@media screen and ({declaration}) { {content} }

最大幅メディアクエリ

@media screen and (max-width: {width}) { {content} }

最小幅のメディアクエリ

@media screen and (min-width: {width}) { {content} }

iPad 1＆2 + iPadミニメディアクエリ

@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) { {style} }

iPad 3＆4メディアクエリ

@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) { {style} }

iPhone 2G / 3G / 3GSメディアクエリ

@media screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 1) { {style} }

iPhone 4 / 4S / 5 / iPhone 6（ズームビュー）メディアクエリ

@media screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) { {style} }

HTC ONE + SAMSUNG GALAXY S4 / S5メディアクエリ

@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) { {style} }

iPhone 6（標準ビュー）+ iPhone 6 Plus（ズームビュー）メディアクエリ

@media screen and (max-device-width: 375px) and (max-device-height: 667px) { {style} }

iPhone 6 Plus（標準ビュー）メディアクエリ

@media screen and (max-device-width: 414px) and (max-device-height: 776px) { {style} }

Outlookの条件付きコメント

Outlookをサポートする必要があることに伴うレンダリングの問題が多数あるため、特定のスタイルでOutlookをターゲットにすると便利な場合があります。 Outlookは、HTMLまたはCSSコンテンツの条件付きmsoコメントを使用してターゲットにできます。

MicrosoftWordのレンダリング

<!--[if mso]> {content} <![endif]-->

Outlook 2000-2013

 <!--[if (gte mso 9)|(IE)]> {content} <![endif]-->

その他のOutlook条件付きコメント：

Outlook 2000
Outlook 2000-2002
Outlook 2000-2003
Outlook 2000-2007
Outlook 2000-2010
Outlook 2002
Outlook 2002-2013
Outlook 2003
Outlook 2003-2013
Outlook 2007-2013
Outlook 2010
Outlook 2010-2013
Outlook 2013

WebKit

電子メールを段階的に強化するための最良の方法の1つは、WebKitレンダリングエンジンをターゲットにすることです。電子メールの開封の約47％は、WebKitを利用した受信トレイで発生します。

 @media screen and (-webkit-min-device-pixel-ratio: {value}) { {style} }

Gmail

Gmailは、メールの<head>内のクラスまたはIDをサポートしていません。そのため、CSSをメールにインライン化する必要があります。しかし、FreshInboxのJustin Khooは、GmailがメールのCSSを読み取る新しいハックを発見しました。

langまたはtitle属性を属性セレクターとして使用し、その値が空白で区切られた値のリストにあり、そのうちの1つが完全に一致する場合、GmailはそのCSSを読み取ります。それは一口なので、ここにあなたを助けるためのスニペットがあります：

 * [lang~="{name}"] { {style} }

Yahoo

Yahoo Mailは最近、独自のメディアクエリを導入し、Webメールの特定のスタイルを簡単にターゲットにできるようにしました。

 @media yahoo { {style} }

アンドロイド

James Whiteは最近、Android4.4でメールを中央に配置するためのハックをLitmusコミュニティに投稿しました。

 body { margin:0 !important; } div[style*="margin: 16px 0"] { margin:0 !important; }

コミュニティのスニペット

さらに多くのスニペットが必要ですか？共有したいお気に入りがありますか？あらゆる場所の電子メールオタクの助けを借りて、Litmusコミュニティには、iOSデバイス上の青いリンクを削除するコードなどの便利なスニペットがすでに数十あります。

既存のスニペットを、それが作成された電子メールクライアント、またはスニペットのタイプ（つまり、ハック、画像、リンクなど）で並べ替えます。独自のものを追加して、お気に入りのスニペットライブラリを作成できます。また、コミュニティから直接Builderにスニペットをインポートすることで、さらに時間を節約できます。 Builderのインスタントプレビューと組み合わせると、スニペットを使用したコーディングが、すばらしいメールキャンペーンを作成するための最速の方法になる可能性があります。

コミュニティでスニペットをチェックしてください→