メールデザインの推奨事項と禁止事項
公開: 2019-01-25メールマーケティングは、顧客ベースを迅速に構築し、最小限の投資で利益を上げたい中小企業にとって理想的で手頃なマーケティング戦略です. しかし、人々にあなたのメッセージをクリックしてもらう前に、彼らの注意を引く必要があります。 デザインはマーケティングの成功に重要な役割を果たします。そのため、メール キャンペーンを開発する際は、次のメール デザインの推奨事項と禁止事項を念頭に置いてください。
メールのレイアウト設計のヒント
ヘッダーからフッターまで、メールのレイアウトは自然に読者の目を惹きつけ、欲求を生み出す利点と、反応を促す強力な行動を促すフレーズ (CTA) に誘導する必要があります。
すべきこと
- コンテンツのバランスをとり、画像よりも多くのテキストを掲載します。少なくとも 60% のテキストと 40% の画像を使用します。
- デザイン要素を視覚的に分離するすっきりとした外観のために、余白を十分に取り込んでください。
- コンテンツの階層に優先順位を付け、最も重要なコンテンツを最初に (スクロールせずに見える範囲で) 表示します。
- デスクトップとモバイル デバイスの両方に最適化されたレスポンシブ テンプレートを使用します (メールの 50% はモバイルで開かれます)。
- コンテンツを簡単にスキャンできるようにすると、受信者がすべての単語を読んで E メールを理解し、CTA をクリックする必要がなくなります。
- 見出しと小見出しを使用して視覚的な構成を維持します。
下の Panera Bread の例では、十分な余白があり、画像とテキストを巧みに組み合わせ、小見出しを使用してセクションを分割しています。 これらすべての要素が連携して、スキャン可能で視覚的に魅力的な電子メールを作成します。
してはいけないこと
- メールに単一の画像を使用しないでください。 多くの電子メール クライアントは、画像を自動的に表示しません。
- メールのどこにも長いテキスト ブロックを含めないでください。 代わりに、コンテンツを簡潔なセクションに分割します。
- メールを長くしすぎないでください。 一部の電子メール クライアントは、長いメッセージをクリップします (たとえば、Gmail は 102 KB を超えるメッセージをクリップします)。 クリップされたメッセージは、マーケティングや転送に悪影響を与えるだけでなく、購読解除リンクを隠してしまうため、CAN-SPAM ルールに違反する可能性があります。
- 考えられることすべてをメールに詰め込まないでください。 代わりに、電子メールをツールとして使用して、より多くの情報や購入へのクリックを促す.
- コンテンツに暗い背景、パターン化された背景、または画像の背景を使用しないでください (すべてのメール クライアントで表示されるわけではありませんが、明るい本文コンテンツ領域の背後に暗い背景を使用しても問題ありません)。
- レイアウトが煩雑になりすぎないようにします。メールは、簡単に理解できる要約と明確な行動を促すフレーズでシンプルに保ちます。
色のヒントをメールで送信
メールの色を選択することで、ブランドとメッセージを際立たせることができます。 色を試すのは楽しいですが、選択は戦略的に行う必要があります。
すべきこと
- 使用する色の数を制限します (ブランドとウェブサイトの色に合わせるか、現在のプロモーションに固有の色を選択できます)。
- 明るい背景に対して暗いテキストを対比させます。
- 必要に応じて、ヘッダーとフッターを主要な色で塗りつぶすか、色付きの線を使用して本文のコンテンツと区別します。
- 画像を使用して、メールのデザインに色を追加します。
以下の Dr. Martens のメールの赤と黄色は、ポップな色を追加し、デザインの黒と白の要素を引き立てます。 限られたカラー パレットは読者の注意をコピーに引き付けますが、より忙しいデザインは最も重要な情報から焦点をそらしてしまう可能性があります。
してはいけないこと
- 色付きの本文テキストは使用しないでください。黒またはダーク グレーにしてください。
- メイン コンテンツ エリアに暗い色の背景を使用しないでください。
- デザインに 2 色以上を使用しないでください (多色のロゴや画像は問題ありません)。
- 衝突したり、魅力的でない色を使用しないでください。
メールのフォントとタイポグラフィのヒント
読者を惹きつける読みやすいメールのタイポグラフィはシンプルに保ちます。
すべきこと
- メールでは 1 つまたは 2 つのフォントのみを使用してください。
- 本文にはサンセリフ フォントを使用します。 ヘッダーとサブヘッダーには、サンセリフまたはセリフ フォントを使用できます。
- シンプルで読みやすい Web セーフ フォントを使用します。 例としては、Open Sans、Helvetica、Courier、Raleway、Droid Serif、Arial、Tahoma、Times New Roman、Georgia、Trebuchet MS などがあります。
- 読みやすくするために、本文のフォントは 14 ~ 16 ポイント、見出しのフォントは 22 ~ 24 ポイントのサイズにします。
- ブランディングやメッセージに合わせたフォントを使用してください。
Domino's は、このメールで使用しているフォントを楽しんでいます。 しかし、より様式化されたテキストでさえ読みやすいです。
してはいけないこと
- 読みにくいスクリプト フォントまたはその他のファンシー フォントを使用します。
- すべてのデバイスで正しく表示されない可能性があるカスタム フォントを使用します。
- ヘッダーを除いて、色付きのフォントを使用します (本文のコピーには濃い灰色または黒が最適です)。
絵文字のヒントをメールで送信する
ブランドによる絵文字の使用は、デジタル コミュニケーションにおいて前年比で 609% 増加しました。 それらを正しく使用する方法は次のとおりです。
すべきこと
- 絵文字を組み込んでスペースを節約しながら、メールの件名でより多くのことを伝えます (件名を「魔法の」49 文字のしきい値未満に保ちます)。
- 絵文字を使用して、受信者の受信トレイでメールの件名を目立たせます。
- メッセージを伝え、興奮を生み出すのに役立つ関連性のある絵文字のみを使用してください。
- あいさつ文や署名に絵文字を使って個性を加えます。
- 絵文字を使用して、本文のセールや特別オファーを目立たせます。
上記の Tarte Cosmetics の件名は、2 つのパイナップルの絵文字を特徴としており、新しいパイナップル型のメイクアップ パレットに関するメールへの完璧なリードインでした。
してはいけないこと
- 絵文字は多用しないでください。メッセージの大部分ではなく、意味のあるアクセントとして使用する必要があります。
- 紛らわしい絵文字を使用しないでください。 スマイリーフェイス、コーヒーマグなど、広く認識されている絵文字に固執します。
- キーポイントを作るために絵文字だけに頼らないでください。 すべてのメール クライアントで正しく表示されるとは限らないため、メッセージを補強するために使用する必要があります。
メール画像のヒント
画像は千の言葉に値しますが、メール内では適度に使用する必要があります。
すべきこと
- 画像を 72ppi/dpi で保存し、Web 用に最適化してメールをすばやく読み込めるようにします。
- 電子メールで JPG および PNG 画像を使用します。 GIF は慎重に使用し、サイズが大きすぎない場合にのみ使用してください。
- 画像とテキストをずらして、すっきりとしたわかりやすいレイアウトにします。
- 使用中の製品や満足した顧客など、魅力的なイメージを使用して、あなたのストーリーを伝えましょう。
- 画像の代替テキストを使用して、電子メール クライアントで画像が表示されない場合に、読者が画像の内容を読み取れるようにします。 優れた代替テキストは、依然としてクリックの動機となります。
- Retina ディスプレイ用のサイズの画像 (通常のディスプレイの 2 倍のサイズ)。
以下の Whosits & Whatsits からのメールでは、高品質の画像を使用して新しい帽子のラインを宣伝しています。 モデルが実際に動いている様子が示され、写真に命が吹き込まれます。
Whosits & Whatsits からのこのメールでは、高品質の画像を使用して新しい帽子のラインを宣伝しています。 モデルは、写真に命を吹き込むアクションで表示されます。
してはいけないこと
- 多くの電子メール クライアントでは画像が自動的に表示されない可能性があるため、電子メール全体として画像を使用しないでください。
- 画像は表示されない可能性があるため、行動を促すフレーズのボタンには使用しないでください。
- ストーリーを伝えるために画像に頼らないでください。 画像を自動的にレンダリングしない電子メール クライアントでは失われます。
- 複雑で紛らわしい画像を使用しないでください。顧客を遠ざけるリスクがあります。
- メールの画像サイズを大きくしないでください。鮮明で魅力的なメール画像を作成するには、常にサイズを小さくしてください。
行動喚起 (CTA) のヒントをメールで送信する
CTA はメールの成功を後押しします。 これらのヒントで効果があることを確認してください。
すべきこと
- 行動を促すフレーズを、他のメール コンテンツから目立つカラー ボタンにします。
- CTA テキストは短く意味のあるものにしてください。今すぐ購入、詳細を確認、詳細を読むなど。より多くのアイデアを売り込む 50 の行動喚起のリストを確認してください。
- 最初の CTA はスクロールせずに見える範囲の上に配置し、必要に応じて下に繰り返します (経験則として、メールごとに 2 つまたは 3 つの CTA を配置することをお勧めします)。
- 読者がボタンを見逃さないように、ボタンを十分大きくしてください。
ユニクロのダーク グレーのコール トゥ アクション ボタンはスクロールせずに見える位置にあり、メールの明るい背景に対して目立ちます。
してはいけないこと
- さまざまな行動を促すフレーズでメールを過負荷にしないでください。 代わりに、読者を 1 つのアクションに誘導することに重点を置きます。 複数ある場合は、複数のメールを送信してください。
- 行動を促すフレーズを埋めないでください。 CTA を目立たせ、注目してもらい、クリックしてもらいたいと考えています。
- あなたの主題から逸脱しないでください。 CTA は、読者がメールを開いたときに何を期待すべきかを理解し、CAN-SPAM 規制に準拠できるように、件名と一致させる必要があります (ごまかしは禁物です!)。
メールのヘッダーとフッターのヒント
メールのヘッダーとフッターをデザインするためのヒントを参考にして、プロフェッショナルな外観を実現してください。
すべきこと
- ロゴまたは会社名をヘッダーに組み込み、ブランドを識別します。
- ヘッダーの前にティーザー テキストを追加します。これは、多くのメール クライアントの件名に表示され、開封に影響を与える別の機会を提供します。
- 一貫したブランディングのために、すべてのキャンペーンに同じヘッダーとフッターを適用します。
- 連絡先情報、ソーシャル メディア リンクや付加価値リンクなどの追加リソース、登録解除リンク、および法的な細則をフッターに含めます。
以下のプロモーション メールでは、ラッキー ブランドのロゴが最初に表示されます。 この衣料品小売業者は、メールのフッターにも常にソーシャル メディアのリンクを含めています。
してはいけないこと
- ヘッダーやフッターに複雑なデザインを作成しないでください。読者がメールの要点を理解できるように、シンプルにしてください。
- ヘッダーやフッターに多くのナビゲーションを追加しないでください。 メッセージを邪魔することなく、効果的にメールをブランディングできるように、できるだけシンプルにします。
- ヘッダーやフッターに多くのテキストを含めないでください。繰り返しになりますが、シンプルさが重要です。
メールのデザインをいじる場合は常に、新しいデザイン要素がすべてのプラットフォームとブラウザーで正しく表示されるようにすることがベスト プラクティスであることを覚えておいてください。 幸いなことに、VerticalResponse のテスト キットを使用すると、その部分が簡単になります。 そして、これらのヒントを活用して、開封され、クリックを促し、売り上げを促進する魅力的なメールをデザインできます。
140,000 人のスモール ビジネス オーナーに参加
編集者注: この記事はもともと 2016 年に公開されたもので、正確さと関連性を高めるために書き直されています。