かなりの割合の消費者— 99％ —毎日メールをチェックしてください。を含むいくつかの人口統計 ミレニアル世代 、電話やテキストなどの他の形式の通信よりも、企業からの電子メール通信を優先します。また、世界中で50億を超える電子メールアカウントがアクティブになっているため、電子メールはデジタル製品戦略の重要な部分です。

マーケターが利用できるメールテンプレートのデザインは数千ありますが、メールのデザインは ウェブデザイナー 。これは、より大きなブランド、クリエイティブな会社、およびテンプレートを敬遠する他の人々と協力したい人に特に当てはまります。

ほとんどのメールプラットフォームの制限（最大級のGmailのウェブフォントなどのサポートが制限されている）や、消費者がメールを開くときに期待することなど、デザイナーがメールを設計する際に留意すべき点がいくつかあります。彼らがすでに取引しているかもしれない会社。

モバイルメールデザインの重要性

少なくとも すべてのメールの半分 現在、モバイルデバイスで開かれ、読み取られているため、デザイナーが無視するのは無責任です。 モバイルフレンドリー メールのデザイン。特にモバイルメールのコンバージョン率は 大幅に高い デスクトップ料金より。

PiperJaffrayのこのモバイルメールデザインは、物事をシンプルかつエレガントに保ちます。クリーンなリンクと微妙なブランディングにより、モバイルデバイスで読みやすくなっています。ユーザーのニーズを最優先し、全体的なユーザーエクスペリエンスと会社の認識を向上させます。

Dribbbleは、コンテンツに完全に焦点を合わせて、「人気のあるショット」の電子メールを的確に保ちます。このフォーカスにより、モバイルデバイス上で電子メールを簡単にナビゲートできます。コンテンツに焦点を当てたシンプルなレイアウトは、多くの種類のメールに適していますが、コンテンツの利用と操作の両方が容易になるモバイルメールに特に適しています。

コンテンツに焦点を当てる

ベストプラクティスとして、電子メールまたはその他のデジタル製品を設計するかどうかにかかわらず、 デザイナー 常に焦点を当てる必要があります コンテンツ 。一部の電子メールデザインは、コンテンツが最小限のデザインでこのベストプラクティスを極限まで取り入れています です デザイン。

ほとんどの電子メールデザインに取り組む場合、デザイナーは、デザインに飛び込む前に最初にコンテンツを作成することで恩恵を受けます。ただし、特にミニマリストデザインでは、コンテンツがどのようなものになるかを事前に知ることがさらに重要です。

マーベル ミニマリストデザインでコンテンツに真っ向から焦点を当てます。白い背景とページ上のテキストのみをサポートする画像は、コンテンツを本当に際立たせます。

Unsplashのすべてのメールは、宣伝している画像に真っ向から焦点を合わせています。 [コレクションを表示]ボタンと画像の下部にあるフェードにより、サイトへのクリックスルーが増える可能性があります。これにより、人々はもっと見たいと思うようになります。

ブランディングの強化

訪問者がWebサイトにアクセスすると、（理想的には）没入型のブランディング体験になります。すべてがウェブサイトのデザイナーの管理下にあります。しかし、電子メールのデザインは異なります。ユーザーは別のアプリ内でメールを表示していますが、すべてのメールアプリがすべてのメールを均等にレンダリングするわけではありません。

このため、電子メールデザインのブランディングは、電子メールを読むユーザーに適切なエクスペリエンスを提供するために不可欠です。ただし、さまざまなデバイスや電子メールクライアントで最も高い割合のユーザーに効果的にレンダリングするには、ブランディングをシンプルに保つ必要があることがよくあります。

メールの上部にあるシンプルなロゴ、複数の画像で同じヘッダー画像を使用し、ブランドの他のデジタル製品との一貫性を保つことは、消費者に対するブランドの認識をサポートおよび強化するのに大いに役立ちます。

Everlaneのブランディングは、メールやウェブサイト全体で本質的にシンプルです。このメールの上部に目立つように表示された彼らのロゴは、そのブランドを強調しています。

ザ・ ミドルフィンガープロジェクト 明るい紫色のアクセントカラーとともに、すべてのメールで一貫したヘッダー画像を使用します。これにより、購読している人なら誰でもすぐにメールを認識できるようになり、ブランディングはWebサイトで継続されます。

色で注目を集める

色は人間の精神に強い影響を与え、感情、知覚、さらには行動にさえ影響を与えることができます。メールで色を効果的に使用すると、クリックスルー率とコンバージョン率を高めることができます。一部のテストでは、ボタンの色の違いにより、 20％の違い コンバージョン率で。

しかし、色を使用することでメリットが得られるのは、行動を促すフレーズだけではありません。カラフルなメールを作成することは、期待から逸脱し、人の受信トレイにある他のメールとはまったく異なるルックアンドフィールを作成する可能性があります。

真っ赤なセールバナーに注目を集めることは、実際のセールサインを彷彿とさせます。これも同じ色で行われることがよくあります。読者の目はすぐに赤くなります。

論文 スカンジナビアの家具eコマースサイトである、は、落ち着いた赤と緑の配色を採用しており、赤は最も重要な部分である行動を促すフレーズの販売ボタンに注目しています。

一部のメールデザインでは、コンテンツの特定の部分に注意を引く方法として色を使用していますが、ヒューストン動物園からのこのメールでは、明るい色を使用して楽しくエネルギッシュなデザインを作成しています。明るいオレンジとホットピンクの配色はすぐに目を引くもので、読者を引き付けます。

見事な画像の使用

人間は視覚的な生き物であり、見事な画像はメールを高め、読者の注意を引くことができます。画像は、メールのメッセージや会社のブランドを強調することもできます。

テレビ番組は「見事な画像」カテゴリで優位に立っているようです。このNetflixのメールは、活気に満ちた、しかし神秘的な静止画を使用しています。 ストレンジャー・シングス 。目を引く画像とそのすぐ下にある「再生」の行動を促すフレーズを組み合わせることは、読者が宣伝された番組をすぐに見ることができるため、UXの観点からは理にかなっています。

見事な画像は写真だけにとどまりません。 WePresentがメールで使用しているような漫画やイラストは、写真と同じように人目を引くものであり、読者をコンテンツに引き込むのに役立ちます。

この ベーリング海の一攫千金 ディスカバリーチャンネルのドキュメンタリーシリーズを宣伝する電子メールは、その下のコンテンツに溶け込む見事なヘッダー画像を表示します。これは、視聴者が読み続けることを奨励する便利なテクニックです。

型破りなレイアウトの実験

多くのメールデザインには、かなり標準的な形式があります。上部にヘッダー、単一列のコンテンツ、上部と下部に行動を促すフレーズがあります。しかし、デザイナーがその特定のパターンに従わなければならないという規則はありません。

型破りなレイアウトは、読者の注意を引き、コンテンツを読みたくなるようにするための優れた方法です。珍しいデザインを作成するには、さまざまな方法があります。一般的な方法の1つは、画像を使用して、多くのメールプラットフォームと必ずしも互換性がないメールレイアウトを作成することです。

型破りなレイアウトは、必ずしも壁から外れている必要はありません。これはMailchimpからのもので、1列がカラーブロックで占められている2列のデザインを使用しています。印象に残るのは、視覚的に魅力的で予想外のことです。

画像を使用すると、KLMのこのような予期しない電子メールレイアウトが可能になります。設計者は、一部の電子メールクライアントが引き続き画像の自動読み込みをブロックするため、メッセージの要点を伝えるフォールバックテキストが必要になることを覚えておく必要があります。

フォントの操作

最も人気のあるメールクライアントはウェブフォントをサポートしていますが、残念ながらすべてがサポートしているわけではありません。Gmailは最も注目すべき例外です（GmailはGmailインターフェースの一部としてRobotoとGoogle Sansをサポートしています）。しかしながら、 デザイナー 多数の電子メールクライアントが代替フォントを使用することを念頭に置いている限り、Webフォントを引き続き使用できます。

もちろん、Webフォントを使用する代わりに、フォントを含む画像を使用することもできます。これは、多くの電子メールデザイナーが選択することです。特に、代替フォントが見当違いに見える可能性のあるヘッダーではそうです。

このFabFitFunニュースレターは、楽しいスクリプトフォントを使用してコンテンツに注目を集め、非常に読みやすいサンセリフ書体と組み合わせています。電子メールデザインでフォントの組み合わせを試すことは素晴らしいアイデアであり、Webサイトで書体を変更したり、他のブランドの資料で使用したりする前の試運転としても使用できます。

Sickbubbleは、電子メールのデザインにさまざまなフォントを使用していますが、これには注意が必要です。ただし、この場合は、セクションごとに分かれているため、機能します。ヘッダーの表示フォントは非常にエッジの効いた感じで、本文は読みやすいサンセリフです。商品プロモーションセクションの手書きフォントは、メールの本文からオフセットされているため機能します。

アニメーションを楽しむ

アニメーションは、電子メールに視覚的な興味を追加し、すぐに読者の目を引きます。アニメーションGIFは、電子メールに動きを追加するための一般的な選択肢であり、ほとんどの電子メールクライアントでサポートされています。

非常に多くの人がモバイルデバイスで電子メールを読むため、設計者はアニメーションを埋め込むときにファイルサイズを念頭に置く必要があります。また、アニメーションがコンテンツをサポートし、単なるフィラーではないことを確認する必要があります。

Product Huntのこのメールの例のように、アニメーションGIFを使用してポイントを家に持ち帰ったり、楽しい方法で提示されたコンテンツをわかりやすく説明したりすることは、メールデザインへの素晴らしい追加です。

ハッスルは、電子メールでアニメーションGIFを使用して、メッセージの要点を説明し、それ以外の場合は最小限の電子メールデザインに視覚的な関心を追加します。

行動を促すフレーズ

行動を促すフレーズは、企業が送信するほとんどすべての電子メールの中で間違いなく最も重要な部分です。ほとんどの電子メールは、そのアクションが記事の閲覧、製品の購入、またはその他の動作の実行であるかどうかにかかわらず、プロンプトアクションに送信されます。

デザイナーは、行動を促すフレーズのデザインに細心の注意を払い、パフォーマンスが最適化されていることを確認するためにA / Bテストを実行することができます。

リトマスがここで行ったように、行動を促すフレーズに明るい色を使用すると、他のコンテンツから目立つようになります。デザイナーは、さまざまな色を試して、メールキャンペーンを送信するときにA / Bテストを使用して、どの色がオーディエンスに最適かを確認することを検討する必要があります。

行動を促すフレーズにメールの残りのコンテンツとはまったく異なる色を使用すると、目立つようになります。キャンペーンモニターのメールのライムグリーンは、背景を構成する紫を補色に分割しているため、衝突することなく目立ちます。

メールデザインのベストプラクティスに注意してください

メールのデザインには創造性と実験の余地がたくさんありますが、デザイナーはメディアのベストプラクティスと制限にも留意する必要があります。

電子メールの設計で最も重要な手順の1つは、送信する前にさまざまな電子メールプラットフォームで電子メールをテストすることです。それらの間には小さな違いがある可能性があり、デザインを異なる方法でレンダリングするあまり一般的でないプラットフォームを使用する人は常にいますが、ほとんどのユーザーがメールを受け入れられるようにするのは賢明です。

設計者がさまざまな電子メールプラットフォームで電子メールがどのように表示されるかを確認するために使用できる電子メールテストサービスがいくつかあります。 リトマス 最も人気のあるものの1つですが、 メールガン 、 アシッドに関するメール 、 メールトラップ 、および メールをプレビューする また、各プロジェクトのニーズに最適なものを確認するためにチェックする価値があります。

さらに、モバイルデバイスで開かれる電子メールの数のために、画像サイズと帯域幅の使用量に留意することが不可欠です。同じ理由で、レスポンシブデザインは事実上必要です。

最高のメールデザインは、どのデバイスでも読みやすく、最も重要なこととして、メール内の行動を促すフレーズをクリックするように促します（または、要求されたアクションを実行します）。これらの電子メール設計のベストプラクティスに従うと、 ウェブデザイナー これを効果的に行うメールを作成する上での優位性。

•••

ApeeScapeデザインブログの詳細：

• 経験がすべて–究極のUXガイド
• すべてのトレンドは価値がありますか？デザイナーが犯す最も一般的なUXの間違いトップ5
• UIとUX–コアの違いを探る[インフォグラフィック]
• モバイルUXの設計原則とベストプラクティス
• モバイルユーザビリティの基本ガイド

基本を理解する

メールに最適な幅はどれくらいですか？

人々はさまざまなデバイスでメールを読むため、各画面に適応するレスポンシブメールデザインを作成するのが最善の選択肢です。ただし、最大幅を設定するのが賢明です（コンピューター画面の平均幅は、1366ピクセルであり、ほとんどの電子メールアプリには、ある程度のスペースを占めるサイドバーがあるため、1024ピクセルが適しています）。

メールをどのようにデザインしますか？

メールのデザインは、ウェブページのデザインと大差ありません。 HTMLとCSSで構成されており、ほとんどのウェブデザインのベストプラクティスはメールデザインのベストプラクティスに似ていますが、モバイルデバイスで開かれるメールの数（少なくとも半分）や簡略化されたデザインなど、考慮すべき点がいくつかあります。

メールの画像のサイズはどのくらいにする必要がありますか？

メールのデザインに画像を追加する際に考慮すべき最大のことは、実際のピクセルサイズではなく、ファイルサイズです。電子メールの半分以上がモバイルデバイスで開かれるため、ファイルサイズを小さくして読み込みを高速化することが、電子メールの使いやすさの重要な要素です。

s-corp vs c-corp

メールデザイナーとは？

メールデザイナーはウェブデザイナーに似ていますが、ウェブサイトの代わりにメールとメールテンプレートをデザインする点が異なります。 「メールデザイナー」は、メールをデザインするためのアプリを指す場合もあり、デザイナー以外の人がよく使用します。

メールテンプレートを作成するにはどうすればよいですか？

メールテンプレートデザインの作成は、ウェブページテンプレートの作成に似ています。多くの場合、デザイナーはワイヤーフレームまたはモックアップから始めて、テンプレートのHTMLおよびCSSコードを作成し、それを選択した電子メールマーケティングプラットフォームにインポートします。そこから、テンプレートを複数の将来の電子メールに使用できます。