件名–メールデザインへのアプローチ方法

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

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

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

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

現在、すべての電子メールの少なくとも半分がモバイルデバイスで開かれ、読み取られているため、設計者がモバイル対応の電子メールデザインを無視することは無責任です。 特に、モバイルメールのコンバージョン率はデスクトップのレートよりも大幅に高くなる傾向があることを考慮してください。

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

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

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

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

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

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

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

ブランディングの強化

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

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

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

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

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

色で注目を集める

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

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

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

スカンジナビアの家具eコマースサイトであるArticleは、落ち着いた赤と緑の配色を採用しており、赤は最も重要な部分である販売の召喚ボタンに注意を向けています。

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

見事な画像の使用

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

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

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

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

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

多くの電子メールデザインには、かなり標準的な形式があります。上部にヘッダーがあり、単一列のコンテンツで、上部と下部の近くに召喚状があります。 しかし、設計者がその特定のパターンに従わなければならないという規則はありません。

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

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

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

フォントの操作

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

もちろん、Webフォントを使用する代わりに、フォントを含む画像を使用することもできます。 これは、特にフォールバックフォントが見当違いに見える可能性が高いヘッダーで、多くの電子メール設計者が行うことを選択することです。

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

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

アニメーションを楽しむ

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

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

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

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

召喚状

召喚状は、企業が送信するほとんどすべての電子メールの中で間違いなく最も重要な部分です。 ほとんどの電子メールは、そのアクションが記事を読んだり、製品を購入したり、その他の行動を実行したりする場合でも、プロンプトアクションに送信されます。

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

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

召喚状にメールの残りの内容とはまったく異なる色を使用すると、目立つようになります。 キャンペーンモニターのメールにあるライムグリーンは、背景を構成する紫を補色に分割しているため、衝突することなく目立ちます。

メールデザインのベストプラクティスに注意を払う

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

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

設計者がさまざまな電子メールプラットフォームで電子メールがどのように表示されるかを確認するために使用できる電子メールテストサービスがいくつかあります。 Litmusは最も人気のあるオプションの1つですが、Mailgun、Email on Acid、Mailtrap、Preview My Emailなどの他のオプションも、各プロジェクトのニーズに最適なものを確認する価値があります。

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

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

•••

Toptal Designブログでさらに読む：

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