ただし、HTMLレターには否定できない利点が多数あることを否定することはできません。企業のコーポレートアイデンティティに応じてメッセージを設計し、明確な構造を作成し、メッセージの重要な場所を強調できます。 昨日、このトピックに戻りました。今日の記事では、すべてのプラットフォームで美しく表示される有能なレターを作成できる便利なヒントを提供します。
写真： ヨハン・ラーソン / Flickr / CC
メール用のHTML
HTMLレイアウトは、テーブル、HTML属性、インラインCSSの3つの柱に基づいています。 残念ながら、さまざまな方法で同じことを「理解」している電子メールクライアントの仕事の特性のため、ごくわずかなHTMLおよびCSS要素のセットを自由に使用できます。
1.テーブル
Webページの作成とは異なり、電子メールのレイアウトでセマンティック要素を使用する機能はありません。 したがって、各読者が郵送の手紙を正しく作成するために、テーブルを使用せざるを得ません。 スタイルを設定するには、幅、高さ、bgcolor、align、cellpadding、cellpacing、borderなどの属性を使用する必要があります。 パディング、幅、最大幅などのインラインスタイルと組み合わせて、この属性セットは特定の操作場所を提供します。 以下は、表形式の電子メールのサンプルコードです。
<table border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <td bgcolor="#333333"> <div align="center" style="padding: 0px 15px 0px 15px;"> <table border="0" cellpadding="0" cellspacing="0" width="500" class="wrapper"> <tr> <td>…Content…</td> </tr> </table> </div> </td> </tr> </table>
2.画像
多くのメールクライアントはデフォルトで画像の表示をブロックします。そのため、メッセージの意味は、画像のないサブスクライバーに理解されることが重要です。 これは、代替テキストを使用して実行できます。 インラインスタイルとimg要素を使用すると、スタイルを設定できます。
<img src="img/fluid-images.jpg" width="240" height="130" style="display: block; color: #666666; font-family: Helvetica, arial, sans-serif; font-size: 13px; width: 240px; height: 130px;" alt="Fluid images" border="0" class="img-max">
3.行動を促すフレーズ
理想的には、手紙を読んだ後、ユーザーは何らかのアクションを実行する必要があります。 したがって、CTA（行動を促すフレーズ）ボタンは大きく、目立つようにし、可能であれば文字の上部に配置する必要があります。 従来の画像の代わりに、 防弾ボタンを使用することをお勧めします 。 デフォルトでは画像表示が無効になっているクライアントでも表示されます。
モバイルデバイス用の文字の最適化
Litmusの調査によると、電子メールの53％がモバイルデバイスで開かれています。 同時に、それらの26％はiPhone上にあり、7％はAndroidデバイス上にあります。 この違いは主に、iOSではデフォルトで画像の表示が有効になっており、Androidの多くのメールクライアントではその逆が行われているという事実によるものです。
レターを送信する会社は、特別な「トラッキングピクセル」を使用して開かれたかどうかを判断できます。これは、サードパーティのサーバーからアップロードされた小さな画像です。 画像の読み込みがブロックされている場合、開口部の数を計算することはできません。
複数のプラットフォームで作業すると、必然的にエラーが発生します。 一方で見栄えのよいものを他方で「曲がって」表示することができます。 iOSおよびAndroid用の電子メールを作成する場合、すべてのモバイル電子メールクライアントが同じHTMLおよびCSSをサポートしているわけではないことを覚えておくことが重要です。 たとえば、iOSとAndroidは、レスポンシブデザインを異なる方法で「理解」します。
- iOSデバイスは、画面全体に合わせてレター全体を拡大縮小します。
- Androidデバイスでは、100％のスケールで文字が表示されますが、それに関連して、ごく一部しか表示されません。
サブスクライバーに送信する文字が小さな画面での表示用に最適化されていない場合、聴衆の大部分は単にそれらを読むことができません。 次のニュアンスに注意すると、これを回避できます。
1.件名の長さを追跡する
短いヘッダーのあるメッセージは、受信トレイ内の多くの中で際立っています。 通常、コンピューターの電子メールクライアントでは、メッセージの件名に約60文字が表示されます。 モバイルデバイスには20〜30文字しか表示されません。 さらに、企業は平均して40を超える文字を使用して執筆のトピックを説明しています。
2.プリヘッダーテキストを使用する
プリヘッダーは文字のテキストの最初の行で、件名の下の行に「プル」され、サブスクライバーがメッセージの内容を理解できるようにします。 正しく選択されたプリヘッダーテキストにより、配布の効率が向上します。
プリヘッダーを作成するには：
- 提案の本質と利点を特定します。
- リンク先ページへのリンクと行動を促すフレーズを追加します（「詳細」など）。
- プリヘッダーテキストは30ワードを超えないようにします（可能であれば、20ワードに減らします）。
- それを擬人化してみてください。
- タイトルテキストを繰り返さないでください、プリヘッダーで補足する必要があります。
- レターの他の要素と同様に、プリヘッダーテキストをテスト、テスト、および再テストする必要があります。
3.テキストは短くする必要があります
小さな画面では、使用可能なスペースを効率的に使用することがより重要です。 したがって、メッセージの重要なポイントを受信者にできるだけ明確に伝え、行動を促すフレーズを強調する必要があります。
4.大きなCTAボタンを使用する
行動を促すフレーズは強調表示し、画面の中央に配置する必要があります。 さらに、かなりの空きスペースでそれらを囲む価値があります。そのため、指で簡単にそれらに入ることができます。 たとえば、Apple iOSヒューマンインターフェイスガイドラインの最も初期のバージョンでも、ボタンのサイズは44×44ピクセル以上でなければなりません。
5.正しいフォントを選択します
メッセージの本文が長いブロックで構成されている場合は、セリフフォントを使用する必要があります。 GeorgiaおよびVerdanaフォントを使用すると、テキストが読みやすくなります。 ただし、短い文字やテキストの単一のパッセージには、sans-serifフォントの方が適しています。 詳細はこちらをご覧ください 。
フォントサイズは十分に大きくする必要があります。 メッセージの本文に14ピクセル、ヘッダーに22ピクセルのフォントが最適です。 14ピクセルサイズの選択は、iOSがフォントを少なくとも13ピクセルに自動的に増加させるためです。
6.単一列レイアウトを使用する
モバイルデバイスでは、500〜600ピクセル以下の単一列パターンがより効果的です。 2列のレイアウトを1列のレイアウトにするには、デスクトップバージョンの640ピクセルのコンテナーテーブルと320ピクセルのネストされたテーブルを作成する必要があります。 ネストしたテーブルは列として機能します。
これはWebレイアウトではないため、対応するCSSレイアウトではなく、HTMLレイアウトの属性を使用することをお勧めします。 たとえば、テキストを整列するには、float：left;の代わりに属性align =” left”およびcellpadding =” 10”を使用します。 およびパディング：10px;。
2列のテンプレートのレイアウトは次のようになります。
<table width="640" border="0" cellpadding="0" cellspacing="0"> <tr> <td> <table width="320" border="0" cellspacing="0" cellpadding="20" align="left"> <tr> <td> <p>Column Left Content</p> </td> </tr> </table> <table width="320" border="0" cellspacing="0" cellpadding="20" align="right"> <tr> <td> <p>Column Right Content</p> </td> </tr> </table> </td> </tr> </table>
7.「段階的な開示」手法を使用する
「段階的な開示」の本質は、ボタンやリンクなどのインタラクティブ要素の背後にコンテンツを隠し、クリックしてそのコンテンツを表示することです。 これにより、ユーザーは、レターの下部にある目的のコンテンツに到達するためにあまりスクロールする必要がなくなります。 このアプローチでは、モバイルプラットフォーム用にWikipediaを使用します。
8.送信する前にレターをテストします
メールクライアントは、ブラウザよりもHTMLとCSSのレンダリングとサポートがさらに悪いです。 文字のテストは、実際のデバイスでも、特別なプレビューサービス（たとえばPechkinから）を使用しても必要です。
2010年から2015年の間に、モバイルデバイスで開かれる電子メールの数は30％増加しました。 また、この傾向は、レスポンシブな電子メールの設計が贅沢ではなく、必要であることを再度確認しています。 投稿で提示された推奨事項に従って、任意のプラットフォームで正しく表示される魅力的なHTMLレターを作成できます。
Pechkin-mailブログでは他に何を書いていますか：
- 「手紙を書く」： 良いメールを作るための3つのテクニック
- メールマーケティング： 適切なプレーンテキストメールのレシピ
- 方法： インタラクティブレターガイド
- Pechkinメール「wiki」： メールニュースレターチェックリスト
- インターフェースとユーザビリティ： UXを設計する人と方法