CX/UXメモ

何かの役に立つかもしれない、と思った情報を記録します

ベストプラクティスのコツで EメールUXとデザインはバッチリ

Eメール開発

 

By Nout Boctor-Smith

あなたの注意をつかむために、50ミリ秒しかありません。

Eメールでユーザーの注意を引こうとするときも、これと同じです。

 

ユーザーエクスペリエンス (UX) は重要です。Web UXについてもっと学びたいという人には十分なコンテンツがありますが、EメールマーケティングUXについては、それほどではないようです。

 

EメールUXは、しばしば忘れられ、無視され、赤毛の継子のように扱われます(赤毛の方へ、悪気はありません)。お粗末なデザインのEメールによって、コンバージョンが減少し、売上が失われ、ブランドへの信頼が損なわれかねません。多くを読み、調査した後、Eメールでの良いUXのための最善のアドバイスをまとめました。Eメールのアクセシビリティについては触れませんが、Eメール購読者のジャーニー全体ではなくEメールコンテンツにフォーカスして、Eメール購読者にとって最高のUXを作り出す方法を探っていきます。

 

 

EメールUXとは、Eメールを可能な限りシンプルかつ正直に保つことです。シンプルとはどういうことでしょう?ゴールを(通常はシングルクリックで)達成するために必要なもの以外は、いかなる余分な情報、画像やテキストを含まないということです。では正直とは? Eメールのコンテンツが、フェイク、不誠実、おとり商法などではないことです。

最もよいEメールは、ユーザーが簡単にあなたのコンテンツを使って行動できるようにします。

多くのEメールには、クリックを獲得するために一緒に動作する、数少ない要素があります。ある要素が不適切であると、他の要素に対して行ったすべての作業に伊朴とを与え、クリックやコンバージョンの機会を損ないかねません。

Eメールキャンペーンの重要な要素

受信トレイ詳細

受信者にあなたのEメールを開いてもらうための決定的な第一印象にあるチャンスです。件名、プリヘッダーテキスト、送信者アドレス、送信者名、返信先アドレスが含まれています。

スパマーみたいに見えないように。

—Matt Vernhout, 引用元不明

企業名を送信者とすることから始め、モニターされているEメールアドレスを返信先として使います。Eメールが誰からのものであり、そのコンテンツに期待できるものが何か、を読者がすぐに分かったとき、信頼が形成されます。ブランドガイドラインに沿っている場合には、異なる送信アドレスをテストする可能性がありますが、目標は一目で認識できることと、読みやすさです。さらにモニターされている返信先Eメールアドレスを含めることで、フィードバックループが完成します。

 

件名は、「なぜこのEメールを開く必要があるのか?」という疑問に答える必要があります。できるだけ短く、要点を押さえるようにします。完璧な件名とプリヘッダーテキストを作成することは大変に思われるかもしれませんが、必ず可能です。

 

コンテンツ

Eメールに含まれるすべてのもの、としてよく知られています。

「すべてを強調すれば、何も強調しないことになる」

—Herschell Gordon Lewis, Effective Email Marketing

あなたのメッセージを伝えるための時間は、せいぜい11秒しかありません。明確かつ簡潔に書くことは難しく、特にEメールではその価値に注意が払われていません。これについて語ると長くなりますが、コンテンツのUXを改善するいくつかの要素について触れていきます。

購読者はあなたからのEメールだけを見るものと仮定してみましょう。ものごとが簡単になります。

  1. 要点を押さえるために必要な最低限の文(コピー)から始めます。あなたのEメールニュースレターがeBookでない限り(その場合には、代わりにリンクを設定することを推奨します)、語数を制限します。
  2. 本文での最適な一行の長さは、50-80文字です。
  3. 読者の時間を無駄にしない。価値を伝えることで、ポイントを押さえることができます。
  4. Eメールには特定のゴール(一つが望ましく、せいぜい二つ)があるべきです。「私はなぜこのEメールを送るのか?」という質問に答えられないとしたら、送信すべきではありません。
  5. もしコンバージョン(クリック、購入、登録、ダウンロード、等)がEメールのゴールだとしたら、バリュープロポジションに細心の注意を払います。「なぜ彼らはクリックする必要があるのか?」という質問に答えてみてください。あなたのバリュープロポジションが確実なものであれば、「クリックすれば、何かそこから得られるつもりです。」と購読者は言うはずです。
 

「平均的な成人読者は、1分間に250から300語を読むことができます。Eメール1件あたりの平均的な読む時間が11秒であれば、Eメールの理想的な長さは50語程です。」

—Tom Tate, AWeber

 

認知負荷について少しお話ししたいと思います。これはシステムで処理するために必要なメンタルなリソースの量です。Nielsen Norman Group によれば、人間の処理能力は限られているため、認知負荷の最小化によってユーザビリティが最大化されます。

 

受け取った情報の量が私たちの処理能力を超えると、パフォーマンスが低下します。情報を理解するための時間が長くなり、重要な詳細を見落としたり、あるいは圧倒されて作業を放棄したりするかもしれません。認知負荷は、コンテンツを刈込み、小さく切り分け(チャンク化)、コンテンツ階層を使うことが重要なことの背景にある科学です。(詳細は次に示します)

 

デザイン

カラーの選定やイメージの選択に至るデザイン要素が、Eメールの作成時に見逃されてはなりません。

 

あなたのEメールは、どのように見え、振る舞い、そして購読者はどのようにそのEメールと対話するでしょうか?

 

「素晴らしいデザインは、必要のない詳細をすべて排除しています。」

—Minh D. Tran, technologist and designer

 

「ビジュアルデザインは、私たちがそれを通して購読者と対話するためのメカニズムです」

—Jason Rodriguez

 

いくつかの重要なデザイン要素と、最高のEメールUXのためにそれぞれを最適化する方法を確認してみましょう。

カラー

コントラストがゲームの名前

 

コントラストが不十分なカラーを使用すると、Eメールが読み難くなります。カラーパレットを選ぶ際には色覚異常を考慮します。また黒の背景と白のテキストのように、ある色と別の色との間に大きな違いがある、十分なコントラストがあるカラーを使うようにします。

Land’s Endによる高コントラストの良い例:

散漫なデザインと不適切なカラー選択の悪い例:

イメージ

静止画(写真)、アニメーションGIF、アイコン、などがあります。

 

大きなファイルと長いロード時間を避けます。Eメールのファイルサイズは100KB未満とすべきです。イメージサイズは１MB未満とすべきです。2倍のイメージ幅を使って、ファイルサイズを小さくしつつ、Retinaデバイスでもイメージの鮮明さを維持します。

 

HTML テキストオーバーレイで背景イメージを使用する場合、イメージがビジーあるいは邪魔にならないようにします。もしそうなってしまう場合、その代わりにライブテキストと背景色を使ってみるようにします。あなたのメッセージに注意を集めるために、コントラストを使うことを忘れないでください。

 

ユーザーはクリックするとリダイレクトされることを期待しているので、あなたのEメール内のすべてのイメージ、GIF、アイコン、等にリンクを設定することを忘れないでください。Gmailは200x200pxを超えるイメージにリンクがないとダウンロードボタンを追加するので、常にリンクを設定することが最善です。

画像優位性効果によれば、イメージは言葉よりも良く記憶されています。Eメールのメッセージを補完し、ゴールから気をそらせないイメージを使います。

 

多くの購読者はデフォルトでイメージがブロックされていることを忘れないでください。ですので、そうしたユーザー、そして視覚に障碍があってスクリーンリーダーを使うオーディエンスのために、イメージに対して説明的な代替テキストを設定することは、アクセシブルなEメールUXに不可欠です。

 

タイポグラフィ = 読みやすさ

人々があなたの言葉を読むことができないとしたら、なぜわざわざそれを使うのですか?

階層構造とコントラストを示すために、太字、斜体、さまざまなフォントの太さやサイズを使います。Georgia、Arial、Times New Roman、Verdanaなど、読みやすくEメールクライアントに安全なフォントを使います。

可能であれば、箇条書きにします。 コンテンツが読みやすくなりますが、項目数を必ず3〜5に抑えてください。 各段落は5行以下にすべきです。 経験則から、3行を超える段落は、中央揃えではなく、左寄せとすべきです。

余白を心配しない。特に見出し、小見出し、本文の間に、パディングを使います。

フォントサイズもまた重要です。デスクトップクライアント上で小さいテキストは、モバイル上では非常に小さいため、モバイルユーザーのためにフォントを調整する必要があります。 デスクトップでは、本文の推奨最小値は16px、最大21pxです。 行の高さには細心の注意を払ってください。 あなたのテキスト量によっては、それを調整する必要があるかもしれません。

可能であれば、リンクには常に下線を設定してリンクのクラスタ化を避けます。(特にモバイルでは)クリックが難しいのです。簡単にアクセスできるように、リンクを目立たせます。

コンテンツの階層構造

メッセージの最も重要なポイントを強調します。

  1. 見出しは最大文字とすべきです。大胆に太字にしても心配ありません。
  2. 小見出しは見出しより小さくすべきです。
  3. 本文を小さく切り分けてチャンク化します。短い段落、箇条書き、余白は友達です! 文章の壁を読みたいと思う(読もうとする)人などいません。
  4. Eメールの最後をCTA (Call to Action: 行ってほしい行動への誘導)で締めくくります。後で詳細を説明します。
PostMatesによる良いコンテンツ階層の例

Deciem による良いコントラストと階層構造の例

 

全体的なデザイン戦略

モバイルユーザーは、スクリーンサイズの制限があります。ActionRocketの専門家によれば、Eメールマーケターとしての仕事は、スクロール作業を簡単かつ魅力的にすることです。これを可能とするのは、良いデザインと適切なコンテンツの配置です。

 

対角線、画面サイズのチャンク、S字レイアウトなどの受信者のスクロールをガイドする視覚的な手掛かりは、受信者の関心を保つための一つの方法です。S字アプローチは2段組のレイアウトで、片側にイメージ、反対側に文章を配置し、続く行でその配置を入れ替えます。ActionRocket提供による、BBCのS字型レイアウト例をご確認ください。

 

どの要素がEメールの中で一番目立っているか明らかにするために、「細目テスト」を行います。

目を細めてEメールを見てみると、どうでしょう? 明らかに激しくはありませんが、(ぼやけていてさえ)最も際立つ要素が、ユーザーが見る際に目立つ部分です。

Thrive MarketによるS字レイアウトの例:

 

CTA

ユーザーにどのようなアクションを取って欲しいのかを伝えるために、CTAを使います。CTAがボタンである必要はありませんが、ボタンとなる傾向があります。デジタルなアクション(クリック、読む、オンラインで購入)を促したり、デジタル資産やオフラインでのアクションをとるように誘導したりします。私たちの目的のためには、ボタンやテキストリンクのCTAをEメール内で目にすることがほとんどのため、ここで説明しましょう。

 

ヒックの法則は、「意思決定にかかる時間は、選択肢の数の多さと複雑さによって増大する」としています。マーケターが通常、複数のCTAを一つのEメールに入れないのは、これが理由です。長い文書のニュースレターなど、例外はわずかです。

CTAデザインは視覚的な手掛かりですから、デバイスにかかわらず簡単にクリックできるようにします。サイズは最低44x44 px とすべきであり、ボタンは他のコンテンツから目立つようにすべきです。対比色を(もちろんブランドで)使い、プライマリCTAには塗りつぶしボタンを使います。ゴーストボタンやテキストリンクはセカンダリCTAにはOKですが、私の経験では通常の塗りつぶしボタンほどには機能しません。(細目テストをパスしないかもしれません)

自社のEメールのメトリックスが手元にあるようなら、注意深くモニターし、購読者がどのCTAに最も反応するかを観察します。

 

可能な限りライブテキスト(画像テキストではなく)を使い、常にビュレットプルーフボタン(Bulletproof Button: すべてのEメールクライアントで動作するHTMLボタン)を使います。こうすることで、購読者が画像ブロック状態であっても、CTAが見えるようにします。

 

配置についていえば、CTAは説明的なメッセージのいずれかの下に位置する傾向があります。そうすることで何が得られるのか分からなければ、人々がアクションを取ることはありません。メッセージがシンプルであるほど、CTAを上に置くことが受け入れられやすくなります.

REIによる、対比色を使った塗りつぶしCTAボタンの例:

 

全体的なEメールエクスペリエンス

アクセシビリティ、読みやすさ、モバイルでのレスポンシブを最高とするために、可能であれば、すべてのテキストをライブテキスト(画像ではなく)としてコーディングします。重要な情報の箇所は、画像ではなくライブテキストとします。繰り返しますが、これは画像ブロックのためです。

 

モバイルでのレスポンシブといえば、Eメールテンプレートをモバイルファーストアプローチでデザインすることを忘れないでください。画像サイズ、テキスト、HTMLファイルのサイズについて、よく考えます。業界によっては、最低50%がモバイルで開かれており、正しくレンダリングされないEメールは3秒で削除されかねません。

 

効果的なEメール開発のためのさらなるヒントについて、いつでもEmail on Acidを参照することができます。

ライブテキストではなく、テキストが画像の一部となっている例 – テキストの不鮮明さがいかに読みやすさを妨げているか、気づかされます:

 

 

Campaign Precheck(Email on Acidによるサービス)で送信ボタンを押す前に、Eメールデザインをテストし、最適化することを忘れないでください。シンプルで要点を押さえたものとします。UXを考慮したデザインシステム、ブランドガイドライン、コードスニペット(モジュラーなテンプレート)の作成を検討してください。

 

Eメールマーケティングは自社の全体戦略の密接な一部であるべきです。そしてそれ故にEメールUXは、Webサイト、ディスプレイ広告、ソーシャルメディア、その他すべてと同じくらい、企業のビジネスに不可欠なものです。

 

EメールUXについてのご意見、あるいは成功例(あるいは学んだこと)などをお知らせいただければ幸いです。

執筆者について

 

Nout (fruitと韻) はEメール マーケターであり、中小企業を支援するデジタルマーケティングエージェンシー Nine Lives Digitalの共同創業者です。およそ9年間デジタルマーケティング分野に携わり、およそ7年間Eメールを扱ってきました。プロセス改善、EメールUX、配信可能性、コードに関心を寄せています。自身を深刻に捉えすぎることなく、しばしばドジとも形容されます。Slackの#emailgeeksコミュニティで、ファッションへのこだわり、ペットの猫、おいしい食事についてチャットしている彼女を見つけることができるでしょう。

素晴らしいEメールでも、テストは必要

これは事実です。良くデザインされたEメールでさえ、時として壊れることがあります。だから Eメールテストが、成功するEメールを送るために重要な役割を果たすのです。 Email on Acidなら数秒でEメールコードのテストが可能で、70以上のEメールクライアントとデバイスによるデザインのプレビューもできます。 7日間無料でお試しいただき、現在のメールをご確認ください。

 

この記事は、Nail Your Email UX and Design with These Tips for Best Practicesを、許可を得て抄訳・一部補足したものです。