Googleデジタルマーケティング＆Eコマース：アクセシブルなメール

# はじめに

”Googleデジタルマーケティング＆Eコマース プロフェッショナル認定証"　の受講が完了しました(2022/3/3)。私がこのコースから得られた素晴らしい体験を、テーマごとに分割して、わかりやすくご紹介しています。興味を持たれた方は、是非下記を受講してみてください。

https://jp.coursera.org/professional-certificates/google-digital-marketing-ecommerce

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/bc50df6f-2af4-4c58-96fb-829e0752d0af.png" width="800">

# アクセシブルなメール

Eメールは優れたマーケティング手法ですが、全てのオーディエンスが等しく体験できるコンテンツを作成することが重要です。これには、人の五感のうちの1つ以上に影響を与える感覚障害のある人も含まれます。

アクセシビリティとは、障がい者のための製品、機器、サービス、環境などの設計を意味します。アクセシビリティの低いデザインのメールは、聴覚や視覚の情報を伝えることができない場合があります。

例えば、

- 送信するメールには、ナレーターやスピーカーによって情報が語られる動画が含まれている場合があります。
- ビデオの画面にキャプションを表示するオプションやトランスクリプトを含めると、聴覚障害のある人が確実に内容を理解するのに役立ちます。
- キャプションやトランスクリプトは、大音量のバスやカフェなど、音を聞き取ることが難しい環境にいるユーザーや、図書館など、他の人の邪魔にならないように音を再生するユーザーにとっても便利です。

アクセシブルでない電子メールは、聴覚や視覚に障害を持つ多くの人にとって、ナビゲーションが難しく、混乱する可能性があります。アクセシブルでないメールを継続的に作成すると、ブランドにとってマイナスになり、メールの開封率やクリック率が時間とともに低下する可能性があります。これは、エンゲージメントの低下を意味し、収益を上げるチャンスを逃すことになります。

# アクセシブルな技術

障害のある人は、通常であれば困難または不可能な作業を行うために、支援技術を使用することができます。アクセシブルな技術の例としては、移動に不自由のある人の移動をサポートする車椅子や、聴覚を可能にしたり強化したりする補聴器などのよく知られた発明があります。

また、あまり知られていませんが、テキストや画像をベースとしたデジタルメディア用の支援技術もあります。電子メールにアクセスするための支援技術としては、

| アクセシブルな技術 | 内容  | 
| :--- | :--- | 
| 画面拡大アプリケーション |コンピュータやデジタル機器の画面上のテキストや画像を拡大することによって、ユーザーがコンテンツを見やすくするためのもの  | 
| スクリーンリーダー | テキスト、ボタン、画像、およびその他の画面要素を音声または点字に変換するアプリケーション


スクリーン・リーダーは、電子メールのテキストコンテンツと、ヘッダー、画像、リンクなどの電子メールの要素に接続されている目に見えないコードを識別することができます。スクリーンリーダーは、見えないコードを読み上げると、要素の種類と、電子メールの作成者が追加した説明を識別します。

例えば、電子メールの作成者は、代替テキスト（altテキスト）と呼ばれる不可視コードを画像に追加することができます。altテキストは、視覚障がい者を支援することを主な目的とした、画像に関する簡潔な文章による説明です。さらに、ヘッダーなどの構造的な要素は、スクリーン・リーダーのユーザーに電子メール内のコンテンツの階層に関する情報を提供します。

# アクセシブルなメールにおけるベストプラクティス

### Formating

- ***<font color="MediumBlue">見出しを考えて整理する。</font>*** ヘッダーには、ヘッダータグという目に見えないコードがあります。スクリーンリーダーがヘッダーを読み取るとき、ヘッダーのサイズが記述されます。
- ***<font color="MediumBlue">すべて大文字にしたり、過度な斜体や下線を付けないようにする。</font>*** これは、スクリーン・リーダーが処理するのが難しく、情報が明確に伝達されていないことを意味します。

### Fonts

- ***<font color="MediumBlue">テキストのフォントサイズは14以上であることが望ましい。</font>*** 小さなフォントは、弱視の方にとって読みにくい場合があります。大きなフォントは、ユーザーが文字や単語をより簡単に識別するのに役立ちます。見出しは、太字にしたり、大きめのフォントを使用することを検討してください。
- ***<font color="MediumBlue">シンプルなフォントを使用する。</font>*** セリフのないフォントは、サンセリフフォントと呼ばれ、文字軸の末尾に装飾的なストロークがあります。このフォントは、ミニマルなスタイルで、文字間隔が広く、読みやすいのが特徴です。弱視や失読症など、視覚処理に障害のある方に有効です。
- ***<font color="MediumBlue">絵文字の使用には注意が必要です。</font>*** 絵文字は、電子メッセージやウェブページで使用される、テキストベースの小さなイラストです。絵文字は視覚的に面白いものですが、弱視の方にとっては理解しにくく、見づらい場合があります。このため、件名や重要な情報の表現に絵文字を使用することは避けてください。

### Colors

- ***<font color="MediumBlue">文字色と背景色にコントラストをつける。</font>*** 前景色と背景色の間に大きなコントラストがあると、弱視のユーザーが言葉を識別しやすくなります。最も効果的なコントラストカラーは、白地に黒文字です。
- ***<font color="MediumBlue">色だけで意味を伝えない。</font>*** メッセージを伝えるために特定のテキストや画像の色に依存すると、色覚異常のある人が混乱する可能性があります。

### Images

- ***<font color="MediumBlue">画像中のテキストは必要な場合のみ使用する。</font>*** 重要な情報を伝えるのに、画像中のテキストだけに頼ると、弱視の利用者を混乱させることになります。
- ***<font color="MediumBlue">メッセージにとって重要な画像には、すべてaltテキストを含める。</font>*** 情報量が多く、実用的な画像、またはユーザー体験に必要な画像には、その画像を説明する正確なaltテキストを含める。
- ***<font color="MediumBlue">装飾的な画像のaltテキストは省略する。</font>*** ロゴ、ライフスタイル画像、アイコンなどの装飾的な画像にaltテキストを含めると、スクリーンリーダーを使用している人が混乱する可能性があります。

### Links

- ***<font color="MediumBlue">ハイパーリンクテキストの目的を明確にする。</font>*** ハイパーリンクテキストでは、「ここをクリックしてください」「行ってください」「始めてください」などの曖昧な表現は、スクリーンリーダーを使用する際にメールを理解しづらくします。その代わり、実用的な言葉を使いましょう。たとえば、オンライン小売店のセールのハイパーリンクテキストは、「ここをクリックしてください」ではなく、「セールについてもっと知ってください」とすることができます。