メールのデザイン

学習の目的

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

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

メールデザインの原則

優れたコンテンツを構築したら、メールに戻って、アクセシビリティのガイドラインとメールデザインの原則について確認します。優れたデザインを認識してメールに適用するのにデザイナーである必要はありません。それを念頭に置いて、この単元では、アクセシビリティ、明確性、モバイルでの応答性、感情というデザインの 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」のマーク) 小さいテキスト、太字テキスト、大きいテキストの例を確認してください。

小さいテキスト、太字のテキスト、大きいテキストに基づく色のコントラストの例。

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

ヒント	説明	例
ALT タグを含める。画像に関する必要な情報を提供します。ただし、できるだけ短く簡潔にします。	ALT タグ (ALT テキストまたは ALT 記述とも呼ばれる) が HTML に追加され、その画像のテキスト記述が提供されます。タグは、画像がブロックされたり、読み込みが遅い場合にも役立ちます。	`alt="Descriptive text about an image"`
レイアウトテーブルに role="presentation" 属性があることを確認する。各 <table> テーブルに role="presentation" を追加して、テーブルを div ベースのレイアウトのように扱います。	ネストされたテーブルは、支援技術を使用するユーザーに不愉快なユーザーエクスペリエンスをもたらすことがあります。	`<table role="presentation" border="0" cellpadding="0" cellspacing="0"></table>`
セマンティック HTML タグを使用する。特定の識別子を使用して段落、リスト、見出しをコーディングし、ユーザーがコンテンツを簡単に操作および利用できるようにします。	セマンティック HTML は、意味やコンテキストをコードに追加する HTML で、支援技術に役立ちます。	`<header></header> <section> <article> <figure> <img> <figcaption></figcaption> </figure> </article> </section> <footer></footer>`

明確である

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

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

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

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

説明

使用する状況

知っておくべきこと

モバイル認識

縮小するようにデザインされた、モバイルでも見映えの良い単一のレイアウト。

迅速なターンアラウンド、少ない労力

1 列レイアウト
全幅表示されるプライマリグラフィック
大きめのテキストサイズ (本文の宣伝文は 17px 以上、見出しは 26px 以上)
幅広のタップ可能な CTA ボタン

応答性認識

応答性の高いヘッダーとフッター。

反復可能な要素、初期労力。

ヘッダーモジュールとフッターモジュールに簡単な変更と適応を可能にするメディアクエリが含まれている

抑制されたコンテンツ
スタックナビゲーション

メール本文でモバイル認識戦術を維持

1 列
大きなテキストサイズ
幅広の CTA ボタン

応答性

モジュール形式のコンテンツがデバイスの画面サイズに適応する。

最適なエクスペリエンス、継続的な労力。

一般的な表示環境に基づいて代替スタイルを有効化する CSS3 @media クエリを使用する。
画面サイズ (px) を検出する (小と大)
@media がサポートされていない場合はデスクトップバージョンに戻る。

感情の追加

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

ブランド

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

画像とグラフィック

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

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

アニメーション GIF

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

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

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

最後に、コンテンツが適切な語調で平等に表現されていることを確認するために、「インクルーシブマーケティングの実践方法」モジュールも参照してください。次の単元では、送信前の最も重要なステップである「テスト」について詳しく見ていきます。

ヘルプをお探しですか?

もっと探す