メールのデザインのヒントと注意すべきよくある間違い

人々が最初に視覚的要素に注意を払う傾向があることはよく知られている事実であり、それはしばしば彼らに内容よりも形を好ませる。 メールマーケティングも例外ではありません。 通常、ユーザーがメールを読み終えて目的のアクションを完了するかどうかを決定するのは、メール、イラスト、テキストの書式設定、カラーパレット、モバイルの最適化の構造です。

電子メールのデザインは、読者の認識だけでなく、送信者の評判にも影響を与えます。 メールボックスプロバイダーは、レイアウトやデザインの間違いを含むメールをスパムとしてマークすることがよくあります。これは、メールテンプレートのデザインに注意を払う必要がある理由です。

この記事では、メールを視覚的に魅力的で全体的に効果的にする方法に関するメールデザインのヒントをいくつか紹介します。 また、最も一般的な設計ミスについて説明し、さまざまなブランドからの適切に設計された電子メールの例を示します。

メールテンプレートのデザインのヒント

テンプレートはすべてのメールの基盤です。 これは、将来の電子メールのレイアウトと外観を定義し、キャンペーンの全体的な結果に影響を与えます。

メールテンプレートのデザインでは、会社のWebサイト、ソーシャルメディア、およびその他のプラットフォームで使用するのと同じ視覚的なガイドラインに従う必要があります。 テンプレートを作成する際に考慮したほうがよい、一般的なメールデザインの間違いとメールデザインのヒントをいくつか見ていきましょう。

避けるべき間違い

1.メールテンプレートのデザインを頻繁に変更しないでください。 ユーザーが毎回異なるメールを受信すると、ユーザーがあなたを覚えて認識しにくくなります。

2.テキストの代わりに画像を使用しないでください。

• 画像が表示されない場合があります。
• テキストを変更するたびに、テンプレートを手動で変更する必要があります。
• 画像に配置されたプロモーションコードは、必要に応じてコピーして貼り付けることはできません。
• メールボックスプロバイダーは、画像のみで構成される電子メールをスパムとしてマークする場合があります。

3.太すぎて明るすぎる場合は、会社の色をメールのメインカラーとして使用しないでください。

4.テキストに明るい背景や複雑な背景を使用しないでください。

5.そのような機会があれば、プロの電子メールデザイナーの助けを借りることを躊躇しないでください。 悪い方法で設計された電子メールは、会社の評判を台無しにしたり、メールボックスプロバイダーによって単にスパムとしてマークされたりする可能性があります。 一方、プロのデザイナーは、購読者の関心と関心を維持する、長持ちする電子メールテンプレートデザインを作成できます。

従うべきベストプラクティス

1.常に会社の視覚的なガイドラインに基づいて電子メールテンプレートを設計します。 デジタルアピアランスに全体的なアプローチをとることで、ブランドの認知度が高まり、顧客の忠誠心が高まります。

2. A / Bテストを実施する場合は、電子メール全体ではなく、個別の要素をテストします。 このようにして、どの詳細が多かれ少なかれ効果的であるかを確実に知ることができ、あなたの会社のスタイルは聴衆に認識され続けます。

3.さまざまな種類の電子メール用に個別のテンプレートを作成し、同様の企業スタイルで設計します。 これは、購読者があなたの電子メールを他のブランドの電子メールと区別するだけでなく、タイプに基づいて互いに区別するのにも役立ちます。

4.最も重要な情報とCTAを最初のスクロールに配置し、電子メール全体のバランスが取れていることを確認します。 見出しと説明がきちんとデザインされていて、召喚ボタンが人目を引くものであり、画像が高品質である場合、受信者は電子メール全体を通して行動を呼びかけるためにスムーズに案内されます。

5.すべての電子メールクライアントで正しく表示されるように、電子メールの幅を600ピクセルにするようにしてください。

6.代替テキストブロックと画像。 読みやすさだけでなく、メールの配信性を向上させるためにも重要です。特に、それほど前にメールを送信し始めた場合はなおさらです。 一般に、80：20または60:40のテキストと画像の比率に従うことをお勧めします。

7.明るい背景の場合は、対照的な鈍いプレースホルダーを使用することをお勧めします。

8.デザイナーの助けを借りることができない限り、ドラッグアンドドロップの電子メールエディターを使用して自分で電子メールテンプレートを設計することができます。

次に、これらのベストプラクティスの実際を示すいくつかの例を見てみましょう。

Behanceから最初の2つの例を取り上げました。 ウェルカムメール用と毎週の「新しいインスピレーション」メール用の両方のテンプレートは、同様の設計原則に従いますが、外観は少し異なります。 ウェルカムメールには、大きくて明確なタイトル、高品質の画像、壊れたグリッドレイアウト、読みやすいフォントが含まれています。 テキストブロックと画像ブロックが交互に表示されるため、メールが読みやすくなります。

毎週のメールについては、全体的に短く、画像に重点を置いており、最上部に太字のCTAボタンがあります。

Downshiftologyの優れたメールテンプレートの別の例を次に示します。 同社は、適切に構造化されたグリッドを使用して最小限の電子メールを送信することを自慢できます。 それらは通常、ヘッダーとイントロで始まり、その後にいくつかの高品質の料理の写真とレシピへのハイパーリンクが続きます。 位置合わせと明るい色は、メールを読みやすく、読みやすくします。

レスポンシブメールデザインのヒント

メールのレイアウトとテンプレートについて考えるときは、モバイルを含むさまざまなデバイスでどのように表示されるかを常に念頭に置いてください。 避けるべきいくつかの間違いとレスポンシブメールデザインのために従うべきヒントがあります。

避けるべき間違い

1.散らかる可能性があるため、複数のハイパーリンクを一緒に使用することは避けてください。 受信者が、クリックしたいリンクに近すぎる場所にある間違ったリンクを誤ってタップする可能性があります。

2.CTAボタンを小さくしすぎないでください。 ズームインしてボタンをクリックすると、受信者は本当にイライラする可能性があります。

3.メールの本文に14px未満、メールの見出しに20px未満のフォントを使用しないでください。これにより、小さな画面でメールが読みにくくなります。

従うべきベストプラクティス

1.レスポンシブメールのルールに従います。 たとえば、メールテンプレートが複数の列で構成されていて、それらをモバイル画面に合わせて調整する場合は、特別なコードを挿入して、テーブル内にメールを作成します。

2.コードをいじりたくない場合は、SendPulseの既製のアダプティブメールテンプレートを使用するか、ドラッグアンドドロップビルダーで独自のテンプレートを作成します。 これらは、デスクトップとモバイルの両方ですでに調整されています。 さらに、両方のデバイスのメールテンプレートをいつでもプレビューできます。

デスクトップとモバイルの両方でよく表示されるユニクロからの次のメールをご覧ください。 デスクトップユーザーに表示されるものは次のとおりです。

モバイル版のレイアウトは少し異なります。

メールテンプレートのデザインでテキストを使用する方法のヒント

最も魅力的なコピーでさえ、魅力的でないように見えたり、読みにくい場合は注目されません。 対照的に、ユーザーは、きちんとしたレイアウト、短い段落、キャッチーな見出し、および最も重要な情報の適切なハイライトを備えた電子メールを無視することはほとんどありません。

避けるべき間違い

1. 1つのメールに多くのフォント、スタイル、色、フォントサイズを混同しないでください。見た目が悪くなる可能性があります。

2.小​​さすぎるフォントや薄いフォントの使用は避けてください。どちらの場合も、メールが読みにくくなる可能性があります。

3.段落、見出し、強調表示された重要なポイントを含まないテキストベースの電子メールを作成しないでください。 あなたのテキストが実際に興味深いものであったとしても、それはおそらくあなたの読者を退屈させるでしょう。

従うべきベストプラクティス

1.見出しと本文には、1つまたは2つのメインフォントを選択します。それ以上は選択しないでください。

2. Gmail、Yahoo、Outlookなどのほとんどの電子メールクライアントで正しくレンダリングされる基本的なフォントを使用します。 サービスが書体を認識できない場合は、他のフォントに置き換えられ、メールテンプレートのデザイン全体に悪影響を与える可能性があります。 最も安全なフォントは、Arial、Lucida Grande、Tahoma、Trebuchet、Verdana、Georgia、Palatino、Times New Roman、Courier New、Courier、およびImpactであると見なされます。

3.バナーや画像に独自の企業フォントを自由に使用してください。 ただし、バナーとメールのフォントがうまく調和していることを確認してください。

4.見出しと短い段落を使用してテキストをセクションに分割します。 適切に構成されたテキストは、常に読みやすくなります。

5.フォントを14px以上にします。

優れたテキストレイアウトの例の1つは、DesignLabからの電子メールです。 中央に太字の見出しがあり、3つの短い段落と、それに続くオレンジ色で強調表示された目立つCTAで構成されています。

メールテンプレートデザインで色を使用するためのヒント

Colorは、メールのムードを作り出し、メッセージを強化できる強力なツールです。 ただし、間違った色を選択すると、電子メールが退屈になったり、気が散ったり、混沌としたりするリスクがあります。

避けるべき間違い

1.たくさんの色で読者を圧倒しないでください。 テキストの背景としての赤、黄色、または互いに一致しない色の組み合わせが多すぎると、ユーザーの主なアイデアから気が散る可能性が高いため、作成しようとしている印象が損なわれる可能性があります。

2.グラデーションが多すぎないようにします。 専門外で使用すると、電子メールがだらしなく見えたり、テキストの視認性が低下したりする可能性があります。

従うべきベストプラクティス

1.大胆で明るい色は、背景に落ち着いた色を選択しながら、個別の要素や単語を強調するためにのみ使用します。

2.色のテーマを選択するときは、聴衆の好みを考慮してください。 たとえば、Kissmetricsは、男性は対照的な色を好み、女性はより柔らかいカラーパレットを選ぶと報告しました。 ユーザーが何よりも好きな色を知るには、A / Bテストを実施し、一度に1つまたは2つの要素の色を変更して、結果を正確に測定してみてください。

3. Adob​​e Colorなどのツールを使用して、視覚的にバランスの取れた外観の完璧なカラーパレットを選択します。

たとえば、B＆Qは、企業のオレンジ色を蛍光ペンとして使用し、残りの要素についてはよりニュートラルな色調に固執します。

メールヘッダーのデザインのヒント

ヘッダーは、その最上部に配置される電子メールの最初のブロックです。 通常、ロゴ、Webサイトのセクションへのリンク、連絡先の詳細、およびその他の一般情報が含まれています。 電子メールヘッダーは、送信者名とともに、ユーザーが送信者を識別するのに役立ちます。

避けるべき間違い

1.ヘッダーに多くの情報を入れようとしないでください。 はい、たとえばWebサイトへのリンクを指定することはできますが、ソーシャルメディアリンク、詳細な連絡先情報、およびその他のブロックをヘッダー内に配置すると、後者が大きくなりすぎて混乱する可能性があります。

2.ヘッダーやメールの他の場所で低品質の画像を使用しないでください。これは、アマチュアのデザインの印象を与えるためです。

従うべきベストプラクティス

1.ヘッダーの主な情報を強調し、他の要素を少し小さくしたり、明るくしたりします。

2.休日、セールシーズン、その他の特別なイベントでは、特別なテーマのヘッダーを使用して気分を盛り上げます。 ダイジェストやトランザクションメールなど、さまざまな種類のメールのヘッダーを変更することもできます。

TheRealRealからの電子メールの最小限のヘッダーを見てください。

フッターのデザインのヒントをメールで送信

電子メールの最後のブロックですが、少なくともブロックはそのフッターです。 通常、電子メールの署名、購読解除リンク、会社の連絡先の詳細、およびソーシャルメディアのリンクが含まれています。 このブロックは設計が最も簡単なように見えますが、企業が頻繁に犯す間違いはまだいくつかあります。

避けるべき間違い

1.あまりにも多くの一般的な情報でフッターを圧倒しないでください。そうすれば、フッターが乱雑で混乱しているように見えないようになります。

2.購読解除リンクを非表示にしないでください。小さすぎるか、ほとんど表示されないようにしてください。 ユーザーが登録解除が難しいと感じた場合、「スパム」をクリックする可能性が高くなります。これは、送信者の評判にとって常に悪いニュースです。

従うべきベストプラクティス

1.ユーザーにとって本当に重要なフッターへのリンクのみを含めます。 読みやすさを向上させるために、コンテンツの同様のブロックをグループ化してみてください。

2.視聴者に正直になり、登録解除リンクがよく見えるようにします。

3.クリエイティブな電子メールの署名をフッターに追加して、親しみやすいメモで電子メールを完成させ、受信者が次回あなたからの連絡を楽しみにできるようにします。

以下に表示されるLinkedInからの電子メールのフッターは、上記のヒントに完全に準拠しています。 これには、電子メールの署名、明確な購読解除ボタン、および会社の連絡先の詳細が含まれており、不要な情報は提供されていません。

メールデザインで画像を使用する方法のヒント

ビジュアルはEメールのデザインにおいて重要な役割を果たします。画像を賢く選択することで、サブスクライバーはすぐに良い立場に立つことができ、エンドラインまでEメールとのエンゲージメントを確保できます。

避けるべき間違い

1.ユーザーの43％がメールクライアントで画像をオフにしているため、画像のみで構成されるメールを作成しないでください。 ただし、画像が表示されていなくても、メールの内容は明確なままである必要があることに注意してください。

2.推奨よりも画像を大きくしないでください。 たとえば、幅300ピクセルの画像を使用するようにアドバイスされている場合は、幅1200ピクセルの画像を使用しないでください。

従うべきベストプラクティス

1.画像をメールに追加する前に、画像を最適化します。 特に携帯電話では、重い写真を含むメールの読み込みに時間がかかります。 ほとんどの場合、ユーザーは画像が読み込まれるのを待たずに、メールを閉じるだけです。 写真を最適化するには、SquooshやTinyPNGなどのツールを使用します。

2.画像​​が自動的に読み込まれない場合に備えて、ユーザーが画像の内容を理解できるように、画像に代替テキストを追加します。

3.アイコンのサイズを2倍に大きくして、Retina画面を搭載したiPhoneおよびMacbookデバイスで見栄えがするようにします。 たとえば、70×20のアイコンを使用する必要がある場合は、140×40のバージョンをサーバーにアップロードしてから、次の属性を使用して電子メールのアイコンのサイズを変更します： width="70" 。

ノート！ この方法を使用する場合、画像のサイズのみを変更し、画像の太さは変更しません。 そのため、最初に画像を最適化してから、サーバーにアップロードする必要があります。

4.画像をクリック可能にします。 メールのクリックマップを見ると、ほとんどの場合、ユーザーが画像をクリックしていることがわかります。 その利点を利用して、人々をあなたのWebサイトやソーシャルメディアに導きます。

5.自分で撮影した、またはストックフォトのWebサイトで見つけた高品質の画像を使用します。

例に移ると、TheSillは、画像に描かれている花の種類を明確にする代替テキストを追加することを忘れないでください。

一方、ニューヨークタイムズマガジンは、高品質の写真とユニークなイラストを使用して、テキストが満載のメールを明るくしています。

CTA設計のヒント

電子メールでの行動の呼びかけは、ユーザーから何らかの応答（登録、購入、またはマネージャーとの連絡）を取得するために作成されたリンクまたはボタンです。 明確な召喚状とその正しい配置は、CTRの向上に役立ちますが、CTAの誤りは、サブスクライバーが目的のアクションを実行する能力を複雑にし、電子メールを単に役に立たなくする可能性があります。

避けるべき間違い

1.メールの最後、または最初のスクロールの後ろにある1つの召喚ボタンを非表示にしないでください。

2.ユーザーに何をする必要があるかを推測させないでください。代わりに、明確な呼び出しをユーザーに提供してください。

3. CTAボタンの代わりにハイパーリンクを使用する場合は、ハイパーリンクを非表示にしないでください。 メールの他の要素に対して迷子にならないようにする必要があります。 また、小さすぎたり、彩度を下げたりしてはいけません。

従うべきベストプラクティス

1.メインCTAを最初のスクロールに配置します。 電子メールが長い場合は、CTAを数回繰り返すことができます。

2.件名とCTAが同じトピック専用であることを確認します。

3.CTAボタンを明るく表示します。 メールの背景、テキスト、その他の要素とは対照的である必要があります。

たとえば、LinkedInのメールの1つでは、CTAを2回繰り返しただけでなく、大胆で対照的なものにしました。

Neil Patelの別の例では、電子メールの件名がCTAテキストと相関していることがわかります。

メールデザインのヒントのチェックリスト

送信する前にメールを簡単に確認できるように、覚えておく必要のあるすべてのガイドラインを収集し、カテゴリ別にグループ化しました。

これらすべてのヒントが手元にあれば、SendPulseなしではなく、レスポンシブで適切に設計された電子メールを作成できると信じています。 このサービスは、メールのさまざまな要素をA / Bテストし、キャンペーンに最適なオプションを選択するのにも役立ちます。