メールのデザイン

学習の目的

この単元を完了すると、次のことができるようになります。

• メールのデザインおよびアクセシビリティのガイドラインを確認する。
  
• さまざまなレベルの応答性の高いデザインを比較する。
  

メールデザインの原則

優れたコンテンツを構築したら、メールに戻って、アクセシビリティのガイドラインとメールデザインの原則について確認します。優れたデザインを認識してメールに適用するのにデザイナーである必要はありません。それを念頭に置いて、この単元では、アクセシビリティ、明確性、モバイルでの応答性、感情というデザインの 4 原則に焦点を当てます。 

アクセスしやすい

Merriam-Webster によると、アクセシビリティとは「障害のある人が簡単に使用、アクセス、または適応できること」と定義されています。アクセシビリティのガイドラインに従うことで、能力や障害に関係なく、すべての購読者がメールを表示できるようにします。率直に言うと、ガイドラインは優れたデザインも奨励しています。つまり、アクセシビリティは後から付け足すものではなく、優れたコンテンツを作成するためのガイドです。 

では、アクセスしやすいコンテンツはどのように作成するのでしょうか? アクセシビリティを確保するリソースは (この単元の最後に記載されているものも含め) 多数ありますが、手始めに主要なヒントを紹介します。

• 正確な件名行を使用する。件名行は明確であること。ただし人の心を捉えるものにします。
  
• 読むときの論理的順序で整理する。コンテンツは操作しやすく、ざっと目を通せること。コンテンツ、レイアウト、ビジュアルスタイルの一貫性が重要です。
  
• 大きくて読みやすいフォントを使用する。コンテンツの重要な部分を太字で表示し、フォントサイズを大きくして (16pt 以上)、コンテンツを読みやすく、理解しやすくします。
  
• 行間隔を調整する。行間を十分に取り、段落を見やすく、読みやすくします。
  
• 明確なラベルが付いた大きくてクリック可能なボタンを使用する。ボタンは、モバイルの場合は最低でも 44 x 44 ピクセルで、アクションを示し、ユーザーがクリックしたときの移動先を予期できる必要があります (「詳細」、「こちらで購入」、「購入する」など)。豆知識: MIT の調査によると、ほとんどの成人の人差し指の平均幅は約 0.6 ～ 0.7 インチで、45 ～ 57 ピクセルに相当します。また、多くのユーザーは親指 (約 1 インチ幅) を使ってモバイル画面上のボタンをクリックしています。
  
• ライブテキストオプションとテキストのみオプションを使用する。ライブテキストは、画像に埋め込まれていない HTML テキストまたは編集可能なテキストです。可能な場合はライブテキストを含めて、読み込み時間を短縮し、応答性を高め、画像をオフにしたときのエクスペリエンスを向上させます。ボーナス: ライブテキストは見た目に優れています。ライブテキストはピクセル化されることはなく、すべてのデバイスで鮮明なままです。
  
• 色は慎重に選ぶ。高コントラストの配色 (背景、ボタン、リンク、テキストを含む) を使用して、すべての輝度レベルで読みやすくします。コントラスト比のガイドラインは次のとおりです。
  
• 小さなテキスト (18 ピクセル未満) は少なくとも 4.5 ～ 1。
  
• 大きなテキスト (24 ピクセルを超える) は 3.0 ～ 1。
  
• aremycolorsaccessible.com で色をテストする。
  

コントラストのガイドラインを満たす (「Pass」のマーク) または満たさない (「Fail」のマーク) 小さいテキスト、太字テキスト、大きいテキストの例を確認してください。 

次に、スクリーンリーダーや支援技術を使用しているユーザー向けにコンテンツをさらに簡単にするためのコーディングのヒントを示します。

明確である

デザインの明確性の原則では、閲覧者にとってコンテンツがどれだけ読みやすく、理解しやすいかについて言及しています。明確性はアクセシビリティのガイドラインの重要な要素であり、論理的な流れ、適切な行間隔、読みやすいフォントの必要性を繰り返し述べています。また、メールのデザインを通じてブランドがどれだけ明確に伝わるかについても言及してます。それにはどうすればよいでしょうか? メッセージの価値を正直に伝え、文章は短くします。余白を使用するのも良いでしょう。また、前の単元で触れたように、コンテンツの配置が重要です。最も重要なコンテンツを最初に配置する一貫したメール形式を使用します。メールをシンプルでありながら意義のあるものにします。 

アントワーヌ・ド・サン=テグジュペリは、文学的な経歴で知られていますが、「デザイナーは、付け加えるものがなくなったときではなく、もう取り除くものがなくなったときに、完璧な仕事を成し遂げたことを知る。」というすべてのデザイナーも非デザイナーも従うべき名言を述べています。

モバイルでの応答性の高さ

「Adestra Consumer Adoption and Usage Study (Adestra 消費者による採用および使用状況調査)」によると、消費者の 71％ がモバイルで見映えの悪いメールを削除しています。削除されるリスクを冒さないでください。モバイル用にメールを最適化します。モバイルの最適化では、検討するオプションが 3 つあります。顧客がどのようにメッセージとやり取りしているか、メールを作成およびコーディングするのにメール制作チームにどれだけの時間と経験があるかを評価することにより、ブランドに適したものを選択します。ではオプションを見てみましょう。 

感情の追加

Interaction Design Foundation によると、感情に訴えるデザインは、ユーザーに良い体験を創出するために、適切な感情を引き起こそうとします。では、感情とメールにはどのような関係があるのでしょうか? 単純なことです。購読者が関心を持てば、メールを削除することはありません。メールは、ストーリーテリングとキャンペーンの全体的な美的感覚を通して感情的な反応を呼び起こすことができます。では、メールの視覚要素に関する考慮事項を確認しましょう。 

ブランド

ブランドに忠実に、Web サイトと合致する明確なブランド標準を使用して、ユーザーが CTA をクリックすると、メールエクスペリエンス が Web またはモバイルアプリケーションのエクスペリエンスとシームレスになるようにします。重要なのは一貫性と明確性です。 

画像とグラフィック 

顧客をブランドにつなげる高解像度のグラフィックと目的を持った画像を使用して、顧客とエンゲージします。具体的なヒントをいくつか紹介します。

• 高解像度の Retina 画面を考慮して、ロゴも含めて画像のサイズを 2 倍にします。この画像がメール内で縮小されると、より鮮明に見えます。
  
• そのような画像抜きでメールを表示します。画像が読み込まれない、またはオフになっている場合でも、コンテンツは機能しますか?
  

アニメーション GIF

アニメーション GIF は、注意を引き付けたり、複数の画像を紹介したり、何かがどのように機能するのかを見せたりするのに最適な方法です。ただし、視覚障害のある購読者に対してアクセシビリティの問題を引き起こす可能性があります。次の点を考慮して、アニメーションを確認します。

• アニメーション GIF がスムーズに表示されるようにします。
  
• 2 Hz 〜 55 Hz のコンテンツ閃光速度は、光過敏性てんかんを持つユーザーに害を及ぼす可能性があります。
  

アニメーションと動画を検討します。ただし、読み込み時間とファイルサイズを必ずテストして確認します。価値が付加されるのであれば、そのまま使用します。付加価値がないのであれば省略します。 

コンテンツの語調が適切で、多様性が平等に表現されていることを確認します。次の単元では、送信前の最も重要なステップである「テスト」について詳しく見ていきます。 

リソース

• Salesforce ブログ: How Salesforce Built its First Email Design System (Salesforce がどのように最初のメール設計システムを構築したか)
• Salesforce: Email Design Best Practices (メールデザインのベストプラクティス)
• 外部サイト: Ultimate Guide to Accessible Emails (アクセスしやすいメールの究極ガイド) (ダウンロード任意)
• 外部サイト: Check Email Accessibility (メールのアクセシビリティチェック)
• 外部サイト: Web Content Accessibility Guidelines (Web コンテンツのアクセシビリティに関するガイドライン)
• 外部サイト: Are My Colours Accessible? (私の色はアクセス可能か?)
• 外部サイト: Finger Friendly Design (指先操作が容易なデザイン)
• 外部サイト: How Does Your Email Sound? (あなたのメールはどのように聞こえるか?)