読み上げでも伝わるメールにする方法｜誰にも届く作り方

「読み上げの環境では、記号だらけの装飾が意味不明に読まれると聞いた」「配慮したいが、何をどう直せばよいのか分からない」——メール配信の担当者から届くようになった相談です。読み上げに配慮した文面は、特別な誰かのためだけのものではありません。装飾を減らした文面は、通常の環境でも読みやすくなります。この記事では、読み上げで崩れる書き方と、直すべき箇所を整理します。

音声で読まれると何が起きるか

メールの本文が音声で読まれるとき、読み上げの仕組みは画面の見た目を見ていません。参照しているのは、メールを組んでいる要素の構造です。どこが見出しで、どこが本文で、どこが画像なのかを要素から読み取り、順番に音声にしていきます。見た目の位置関係は関係ありません。

そのため、見た目を整えるために使った作りが、そのまま音声の障害になります。文字を画像にして配置した見出しは「画像」と読まれるだけで内容が伝わりません。配置のために使った表は、行と列の構造として読まれ、意味のない順序で内容が並びます。凝った作りほど、この影響は大きくなります。

読み上げを使うのは視覚に障害のある人だけではありません。移動しながら耳で確認する人、目が疲れて音声に切り替える人もいます。さらに、画像の表示を止めている環境では、読み上げでなくても同じ状態になります。つまり読み上げへの対応は、画像が出ない環境への対応と重なります。

BtoBではこの重なりが特に効きます。受信する側が会社の環境で読むため、画像の表示を初期状態で止めている場合があります。読み上げに配慮した作りは、そうした環境でも内容が届く作りです。対応の範囲が広い割に、手を入れる箇所は限られています。

画像の代替の文字を入れる

最初に手を入れるべきはここです。画像には、その画像が伝えようとしている内容を文字で添えます。これがないと、音声では「画像」と読まれるだけで終わります。画像が表示されない環境でも、この文字が代わりに表示されます。

書き方には決まりがあります。まず簡潔にすること。そして「〜の画像」「〜の写真」という言い回しを付けないこと。読み上げの仕組みは画像であることを先に伝えるため、重複した説明になってしまいます。内容だけを書けば足ります。

装飾のためだけに置いた画像は、扱いが逆になります。区切りの線や余白を作るための画像に説明を付けると、意味のない音声が挟まって読みにくくなります。こうした画像は代替の文字を空にして、読み上げの対象から外します。

図やグラフのように複雑な画像は、2段構えにします。画像には簡潔な説明を付け、詳しい内容は本文の中に文章で書く。代替の文字に長い説明を詰め込むと、聞き手が全体を把握できないまま長い音声を聞くことになります。

文字を画像にしない

見た目を揃えたいという理由で、見出しやキャッチの言葉を画像にすることがあります。配信の道具の書体の制約を回避する手段として使われてきました。しかしこれは避けるべき作りです。

理由は3つあります。1つ目は音声で読まれないこと。代替の文字を付けても、見出しとしての構造は伝わりません。2つ目は拡大したときに文字がぼやけること。画像の文字は、大きくすると読みにくくなります。3つ目は画像が表示されない環境で消えることです。

代わりに使うのは、文字としての本文と、指定できる範囲の書体です。装飾のない読みやすい書体を選び、大きさと太さで見出しを表現します。見た目の自由度は下がりますが、届く範囲は大きく広がります。

配置のための表を読み上げから外す

メールの組み方には独特の事情があります。受信する環境ごとに表示の仕組みが違うため、配置を安定させる手段として表が使われてきました。画面を分割したり、要素を横に並べたりするために表の行と列を使う形です。

この作りが読み上げでは問題になります。読み上げの仕組みは表をデータの表として扱い、行と列の構造を音声で説明しながら中身を読みます。配置のための表がデータの表として読まれると、内容が意味のない順序で並びます。

解決は簡単です。配置のために使っている表には、これは配置のためのものだと示す指定を付けます。この指定があると、読み上げの仕組みは表の構造を説明せず、中身だけを順に読みます。

配置のために使う表には次の指定を付ける
table role="presentation"

データを示す表には付けない（構造を読み上げてもらう）

逆に、料金の一覧や仕様の比較のようにデータを示す表には、この指定を付けません。そちらは構造を読み上げてもらう必要があるためです。見出しのセルを正しく指定しておけば、どの列の値なのかが音声でも分かります。表の役割で使い分けます。

色の対比を数値で確かめる

読みやすさには数値の基準があります。文字と背景の明るさの差を対比と呼び、本文は4.5対1以上が求められます。大きい文字の場合は3対1以上まで緩みます。

大きい文字の定義も決まっています。24ピクセル以上、太字であれば18ピクセル以上。この大きさを超える見出しやボタンの文字は、本文よりゆるい基準で判断できます。ただし緩いとはいえ、3対1は下回れません。

対象	必要な対比	大きい文字の定義
本文の文字	4.5対1以上	該当しない
大きい文字	3対1以上	24ピクセル以上
太字の大きい文字	3対1以上	18ピクセル以上

実際に問題になるのは、淡い色の文字です。白い背景に淡い灰色の文字を置く形は、洗練された見た目になりますが対比が基準を大きく下回ります。パステルの色も同じです。見た目の好みと読みやすさが衝突する典型です。

対比の値は無料の道具で測れます。文字の色と背景の色を入力すると数値が出ます。配信の前に、本文の色とボタンの文字の色を測る工程を入れておけば、感覚での判断を避けられます。測るのは数か所で済みます。

文字の大きさと拡大への備え

文字の大きさにも目安があります。本文は16ピクセル以上。これより小さいと、読みにくいだけでなく拡大して読む人が増えます。小さい文字で情報を詰め込むより、量を減らして大きく出すほうが読まれます。

拡大への備えも必要です。受信する側が文字を大きくして読む場合、200%まで拡大しても崩れないことが目安になります。固定した幅で作り込んだ作りは、拡大すると文字が重なったり切れたりします。

崩れを防ぐには、幅を固定しすぎないことです。特に文字を入れる領域は、内容に応じて広がる形にしておく。箱の大きさを先に決めて文字を詰める作り方が、拡大に弱い形です。文字を主にして箱を追従させます。

あわせて確かめたいのが、指を置いて押す領域の大きさです。小さな文字のリンクが密に並んでいると、手元の操作で押し間違えます。ボタンの高さと、リンクの間隔を十分に取る形にしておきます。

リンクの文言を目的が分かる形にする

読み上げの仕組みには、リンクだけを順に読み上げて選ぶ使い方があります。このとき「こちら」「詳しく」ばかりが並ぶと、どれが何のリンクなのか判別できません。

直し方は単純です。リンクの文言に、行き先か動作を入れます。「こちら」を「導入の事例を見る」に変える。「詳しく」を「料金の一覧を開く」に変える。文言だけを読んで内容が分かる形にします。

この直しには副次的な効果があります。リンクの文言が具体的になると、音声を使わない読者のクリックも増えます。何が起きるか分かるリンクのほうが押されるためです。配慮のための作業が、成果の改善にもつながる数少ない項目です。

同じ文言で複数のリンクを置く場合は、行き先を後ろに添えます。「事例を見る」が3つ並ぶなら、「製造業の事例を見る」「小売の事例を見る」と分ける。音声で拾ったときに区別が付く形になります。

見出しの構造を要素で表す

メールの本文にも見出しの階層があります。この階層を、文字を大きくすることで表していないかを確かめます。見た目を大きくしただけでは、音声では見出しと認識されません。

読み上げの仕組みは、見出しの要素を手がかりに構造を伝えます。そのため見出しは見出しの要素で組み、階層も飛ばさずに順に使います。見出しを拾って全体像を掴む読み方ができるようになります。長いメールでは特に効きます。

箇条書きも同じです。行の先頭に記号を置いただけの見た目の箇条書きは、音声では続く文章として読まれます。一覧の要素で組めば、項目の数と区切りが伝わります。見た目が同じでも、伝わり方が変わる箇所です。

階層を飛ばさないことも条件です。最上位の次に3段目を置くと、構造として不整合になります。メールの本文では、見出しは2段までに収めるのが扱いやすい。段が深いほど、音声で構造を追うのが難しくなります。

言語と方向を示す指定

見落とされやすいのが言語の指定です。本文がどの言語で書かれているかを指定しておくと、読み上げの仕組みが正しい発音の規則を選びます。

指定がないと、別の言語の規則で読まれることがあります。日本語の文章が英語の発音の規則で読まれると、音声としてまったく意味を持ちません。1か所の指定で防げる問題です。

多言語の配信をしている場合は、言語ごとに指定を分けます。あわせて文字を読む方向の指定も必要になります。右から左へ読む言語に配信する場合は、方向の指定がないと表示そのものが崩れます。

指定を入れる場所は、本文全体を囲む要素です。配信の道具のひな形を直せば、以降の配信すべてに効きます。毎回の作業ではなく、一度の整備で済む項目です。

英字の社名や製品名が本文に混ざる場合も、通常は問題になりません。全体の言語を指定しておけば、個々の語に指定を足す必要はありません。長い英文を引用する場合だけ、その部分に別の指定を添えます。

暗い配色の表示への対応

受信する側が暗い配色の表示を選んでいる場合、色が自動で置き換えられます。白い背景を前提に作った画像が浮いて見えるという問題が起きます。

対策の中心は画像です。背景を透過させた形式の画像を使えば、背景の色が変わっても違和感が出ません。逆に白い背景を焼き込んだ画像は、暗い背景の中に白い四角として浮きます。ロゴや図はこの影響を受けやすい要素です。

確認は両方の表示で行います。明るい表示だけで確認して配信すると、暗い表示で読む人には別の見た目が届きます。配信の前の確認を2通り行う工程として組み込みます。手間は数分です。

文字の色を明示的に指定している箇所も確かめます。濃い色の文字を指定していると、背景だけが暗く変わって文字が読めなくなる場合があります。背景と文字の両方を指定するか、どちらも指定しないかで揃えます。

文章そのものを短くする

作りの話とは別に、文章の側にも配慮の余地があります。音声で聞く場合、長い一文は理解が難しくなります。1文を短く保つことが最も効く配慮です。

目安として、1つの文に情報を1つだけ入れる形にします。接続の言葉でつないで長くするのではなく、文を分ける。受け身の言い方を能動の言い方に変えるだけでも、聞いて分かる文になります。

専門の言葉や社内の略称も、音声では特に伝わりません。文字なら前後から推測できますが、耳で聞くと聞き流されて終わります。初出で言い換えを添えるか、平易な言葉に置き換えます。

数字や範囲の書き方にも配慮の余地があります。記号で範囲を示す書き方は音声で意図どおりに読まれないことがあるため、「から」「まで」と言葉で書く。箇条書きの中でも、記号ではなく言葉でつなぐほうが確実に伝わります。

声に出して読んでみる確かめ方も有効です。息が続かない文は、耳で聞いても長すぎる文です。分ける箇所は、声に詰まった位置がそのまま目印になります。道具も準備も要らず、書いた本人がその場でできる点検です。

文字だけの版を併せて送る

装飾のある形式で配信する場合、同じ内容を文字だけで書いた版を一緒に送る形が採れます。受信する側の環境に応じて、どちらかが表示されます。

この形の利点は、装飾が使えない環境への保険になることです。画像も配置の表も含まれない版が届くため、読み上げでも文字だけの環境でも内容が伝わります。配信の道具の多くがこの形に対応しています。

注意点は、文字だけの版を手を抜いて作らないことです。自動で作られた版は、装飾を取り除いただけの読みにくい文章になりがちです。リンクの行き先が分からない形で並ぶこともあります。自分で書き直す手間をかける価値があります。

書き方の目安は、箇条書きを活かして段落を短く保つことです。装飾がない分、改行と空行だけで構造を伝えることになります。見出しに当たる行は、前後に空行を置いて区切りを作ります。

• 装飾のある版と文字だけの版を一緒に送れる
• 自動で作られた文字だけの版は読みにくいことが多い
• リンクの行き先が分かる形に書き直す

やってはいけない作り

読み上げを妨げる作りには型があります。見た目を優先した結果として生まれるものばかりです。先に知っておけば、作る段階で避けられます。

• 見出しやキャッチの言葉を画像にして配置する
• すべての画像に「〜の画像」と書いた説明を付ける
• 装飾の区切り線の画像にも説明を付けて音声を増やす
• 配置のための表に、読み上げから外す指定を付けないまま送る
• 白い背景に淡い灰色の文字を置いて洗練された見た目にする
• リンクの文言を「こちら」で揃えて統一感を出す

2つ目と3つ目は、配慮しようとして逆効果になる例です。説明を付ければよいと考えて、すべての画像に一律で説明を入れると音声が冗長になります。内容を伝える画像と装飾の画像を分けて扱います。

6つ目も見た目の統一を狙った結果です。文言を揃えると整って見えますが、リンクだけを拾って読む使い方では区別が付きません。統一するのは文言ではなく、書き方の型にします。

件名と冒頭の文にも同じ配慮が効きます。受信の一覧では、件名と冒頭の一部だけが読まれます。ここに要点が入っていないと、開くかどうかの判断ができません。装飾の記号を冒頭に並べる形は、音声で意味のない文字列として読まれます。

数字の書き方にも配慮の余地があります。記号で範囲を示す書き方は音声で伝わらないことがあるため、「から」「まで」と言葉で書く。箇条書きの中でも、記号ではなく言葉でつなぐほうが確実です。

読み返しの目安として、声に出して読んでみる方法があります。息が続かない文は、耳で聞いても長すぎる文です。分ける箇所は、声に詰まった位置がそのまま目印になります。

配信の前に確かめる項目

ここまでの内容を確認の項目にまとめます。毎回すべてを見る必要はなく、型を作り込む段階で通せば、以降は使い回せます。

• すべての画像に代替の文字があり、装飾の画像は空になっているか
• 見出しやキャッチの言葉を画像にしていないか
• 配置のための表に、読み上げから外す指定を付けたか
• 本文の色の対比が4.5対1以上あるか
• 本文の文字が16ピクセル以上あるか
• リンクの文言だけを読んで行き先が分かるか
• 見出しと箇条書きを、見た目でなく要素で組んでいるか
• 言語の指定を入れたか
• 明るい表示と暗い表示の両方で確認したか

9項目のうち、型に組み込めるのは3つ目から8つ目までです。配信の道具で使うひな形を一度直しておけば、毎回確認する必要があるのは画像とリンクの文言だけになります。

既存のひな形をどう扱うか

長く使ってきたひな形には、過去の判断が積み重なっています。作り直すのではなく、直す箇所を絞るのが現実的です。手を入れる価値が高いのは3か所です。

1つ目は配置に使っている表への指定。2つ目は本文の色と大きさ。3つ目は画像に代替の文字を入れる欄が用意されているかどうか。この3つを直せば、以降の配信すべてに効きます。

直したひな形は、名前を変えて残します。古いひな形が並んで残っていると、担当が取り違えて古い形で配信してしまいます。使わないひな形は消すか、名前に印を付けて区別します。

直す手順

既存のメールを直す場合の順序を示します。全部を一度に直そうとすると着手できません。影響の大きい順に手を入れます。

4つ目の工程が最も学びが多いです。自分が作ったメールを耳だけで聞くと、どこが伝わっていないかが数十秒で分かります。読み上げの機能は多くの環境に標準で入っているため、準備も要りません。

直す作業の下書きは生成AIに任せられます。画像の代替の文字の案を作らせる、リンクの文言を具体的な形に書き換えさせる。ただし色の対比と文字の大きさは数値で確かめます。見た目の判断は任せず、測った数字で判断します。

送る相手を絞った配信では、言葉を選ぶ余地も広がります。業界の共通の言い方が通じる相手なら短く書けますが、経営の層まで届く配信では平易な言葉に寄せる。誰が耳で聞くかを想定すると、書き方が決まります。

よくある質問

実務で迷いやすい点をまとめます。対応の範囲をどこまで広げるかの判断が中心になります。

文字だけのメールにすれば解決しますか

多くの問題は解決します。画像も配置の表も使わないため、読み上げでの問題はほとんど起きません。画像が表示されない環境への対応も同時に済みます。

ただし失うものもあります。開封や読了の測定ができなくなり、見た目で内容を伝える手段も使えません。どちらかを選ぶのではなく、装飾のある形式で配慮するのが現実的な解です。

どこまで対応すればよいですか

優先順位を付けるなら、画像の代替の文字とリンクの文言が最初です。この2つは手間が小さく、効果が大きい組み合わせです。配置の表への指定も一度で済むため、早めに入れます。

言語の指定や暗い配色への対応は、ひな形を直すときに合わせて行えば足ります。すべてを一度に完璧にする必要はありません。効果の大きい順に、できる範囲から入れていく形で構いません。

配信の道具の機能で対応できますか

道具によります。代替の文字を入力する欄が用意されているものは多くありますが、配置の表への指定を自動で付けるものは限られます。作られる中身を確かめる必要があります。

確かめ方は、送ったメールの中身を表示する機能で見ることです。配置の表に指定が付いているかを確認します。付いていない場合は、道具の設定か、ひな形の作りで対応します。

まとめ

音声で読まれても伝わるメールにするために手を入れる箇所は限られています。画像に内容を説明する文字を添え、装飾の画像は読み上げから外す。文字を画像にせず、本文の文字として組む。配置のために使っている表には、配置のためだと示す指定を付ける。本文の色の対比は4.5対1以上、文字は16ピクセル以上を保つ。リンクの文言は行き先が分かる形に書き換える。このうちひな形を直せば済むものが大半で、毎回確認するのは画像とリンクの2つだけになります。一度自分のメールを耳で聞いてみると、着手すべき箇所がすぐに見つかります。

※本記事にはAIが活用されています。編集者が確認・編集し、可能な限り正確で最新の情報を提供するよう努めておりますが、情報の完全性、正確性、最新性、有用性等について保証するものではありません。本記事の内容に基づいて行動を取る場合は、読者ご自身の責任で行っていただくようお願いいたします。