デジタル化が進み顧客と接点を持つ手段が増えた現代においてもメール配信は未だ広く採用されている施策です。
実際に、Forbesに掲載された記事でも、マーケティング担当者の81%がメール配信を使用し、73％は「今でもメール配信が見込み客とコンタクトをとる最も効果的な方法である」と回答しています1。
日本でもコロナ禍を経てBtoBマーケティングに力を入れる企業が増えました。大量に獲得したリードに対してメール配信を継続し、顧客との接点を持とうとする企業は、着実に増加していることでしょう。
一方で、メール配信のベストプラクティスについて論じる場面では「開封率・クリック率を上げるためのメッセージング」「CTAボタンの場所」などに焦点が当たることが多く、UI/UXの観点から語られることは多くないのが現状です。
そこで、本記事ではメール配信の効果向上を図る上で見落とされがちな「フォント」に焦点を当て、その有用性を解説します。
メール配信におけるフォント選定の重要性
メール配信を行う際に「自社が伝えたい内容」がより伝わるようにするため、配信コンテンツの内容や訴求メッセージについて検討する企業は多いのではないでしょうか。
一方で、メール配信で成果を出すためには、内容が伝わることはもちろん、UI/UXの観点も求められます。
BtoBマーケティングでなぜメールのUI/UXを改善する必要があるのかでも解説したように、BtoBのメール配信はほとんどがインハウスで完結しており、客観的なFBを得にくいのが実情です。
ユミルリンク株式会社と株式会社ライトアップが共同で行った調査によると、メルマガユーザーの67.1％がメールの閲覧にかける時間が1分以内であると答えました。うち37.3%が30秒以内にメールを読むのをやめてしまうとのことです2。
そのため、自分たちの伝えたい内容をメールという手段で伝えるためには、読み手がいかに短い時間で内容を理解できるかどうか。つまりUI/UXの重要性がより重要になっているといえます。
伝達手段におけるフォントの影響力は大きくはないと思われがちですが、実際はそうではありません。
実際に、米SendGrid社が公開している情報によると、適切なフォントの選択はメール配信において以下のような恩恵があるとされています3。
- 受信者がコミットする可能性を高める：文章でタスクを提示した際に、読みやすいフォントであればコミットされやすい。
- コンバージョン率が向上する：Click Laboratory によると、 フォント サイズを 10 ポイントから 13 ポイントに変更し、行間を少し広げるだけで、フォームのコンバージョンを 133% 増加させた。
- 読者の判断に影響を与える：特定のフォントは、読んだコンテンツに対する人々の印象に影響を与える。Baskerville フォントを使用した結果、意見に同意する人が 1.5% 増加した。
つまり、フォントに起因する文章の読みやすさは、メール配信で意図した目的を果たすという点において影響が大きいのです。
メール配信のフォント設定で考慮すべきポイント
以上を踏まえ、メール配信における成果を最大化させるためのフォント選定において考慮すべき要素を解説します。
具体的には、次の要素について勘案しましょう。
- フォントの種類
- フォントサイズ
- フォントカラー
- 文字や行ごとの間隔
以下より、詳しく解説します。
フォントの種類
フォントは大きく「sans-serif（サンセリフ）体」「serif（セリフ）体」の2種類に大別されます。
サンセリフ体は文字にセリフ(serif)と呼ばれる装飾がないフォントを指し、例として「ヒラギノ角ゴシック」「メイリオ」が挙げられます。
セリフ体は文字通り装飾のある（＝セリフがある）フォントを指し、「明朝体」が代表例です。
メール配信においては視認性の高いサンセリフ体を用いるのが一般です。
「そのなかでどのフォントを選ぶのか」については、対外的な資料/Webページなどで使用可能なフォントは企業毎のブランドガイド内で規定されていることも多いため、ブランドガイドに則って選定する前提です。
ただし、選定時の注意点として「Webフォント」と「デバイスフォント」の違いについて考慮する必要があります。それぞれの意味については、以下のとおりです。
- Webフォント：Webサーバーやクラウド等ネット上で提供されているフォントを各デバイスに読み込ませて表示させるフォント。
- デバイスフォント：PCやスマホ等デバイスにダウンロードされているフォント。
各社のブランドガイドではHPなどでの見え方を想定してフォントを規定していることが多いでしょう。
しかし、メール配信の場合は、デスクトップのOutlookだとWebフォントが機能しません。そのため、ブランドガイドで指定されているWebフォントとは別に、デザイン面で大きな乖離のないデバイス側のフォントを別途指定する必要があります。
BtoBマーケティングでなぜメールのUI/UXを改善する必要があるのかで記載した通り、多様なメール環境へ対応するためには、Email on Acidi4をはじめとする検証ツールでメールの表示性を確認しつつ、テンプレートの改修で品質を担保していくことが有効です。
＜Tips＞
フォントの種類においてメイリオを指定する場合は、Outlookではline-heightのCSSが効かなくなるという仕様があります。そのため「mso-line-height-rule:exactly」というOutlook専用の補正コードを入れることで、Outlookに対してline-heightを厳密に適用するよう指示することが可能です。
フォントサイズ
メール配信では、視認性を高くすることでメッセージが伝わりやすくなります。そのため、フォントサイズは受信者側のデバイスにおいて「読みやすい大きさ」で表示されるようにする必要があります。
一般的に、メール配信のフォントサイズは「headline（見出し）は18〜20px」「body（本文）は14〜16px」が推奨されています。
なお、フォントサイズをPCでの閲覧にのみ最適化すると、スマートフォンやタブレットで表示された際に大きく読みづらくなります。
そのため、デバイス環境毎に適切な文字サイズで表示される設定する「レスポンシブデザイン」を設定し、「デバイス毎の見え方」を調整しましょう。
＜Tips＞
レスポンシブデザインを実現するために、CSSの「media query」という機能を使用します。
これにより、閲覧するデバイスに合わせて最適な表示を提供することが可能です。
フォントカラー
各社のブランドガイドには使用可能なフォントカラーも指定されているケースも多くあり、まずはブランドガイドに記載のカラーを使用するのが基本です。
ただし、複数色を使用すると「雑然とした印象」を与えてしまうことから、同じメール内で3色以上使用しないのが理想的で、ベースカラーとしての”黒”と、アクセントカラー1色の追加に抑えることが望ましいです。
例えば以下文章だと”黒”含め3色使用しておりますが、強調される箇所が多く読みづらいため、使用する色は”黒”含めた2色以内に抑えることが推奨されます。
なお、使用するカラーについては、東京電機大学 先端工学研究所の齋藤らの研究5によるとコントラストが高いと視認性が高くなる一方、眼精疲労も蓄積しかねないとされています。
そのため、適切なコントラストとなるよう使用するカラーを選びましょう。
＜Tips＞
メールの背景色が「白」である場合、ピュアなブラックをフォントカラーに設定するとコントラストが高くなりすぎ、読みづらい文章となってしまいます。
そのためメール配信に限らず、Webデザインにおいては「ピュアなブラック(#000000)」ではなく、「グレー(#333333)」を使用するのが有用です。
文字や行ごとの間隔
BtoBにおけるメール配信の送信対象には「役職者」が含まれることが多く、彼らにとっても読みやすい文章であることが重要です。特に、高齢の方や視力に配慮が必要な方もいらっしゃるため、テキストの間隔を十分に開ける設定を行うことが望ましいです。
具体的には「文字と文字の間を適切に開ける」「文節毎の改行の幅を意図的に分ける」ことで視認性が高くなり、メッセージ内容も理解もしやすくなるでしょう。
文章の間隔について制御を加えていないものと加えたものと、それぞれ以下のような見え方となります。
後者の方が視認性高く意味も理解しやすいと思われるため、これらの設定についても気を配りましょう。
＜Tips＞
- 文字と文字の間：letter-spacingを設定し、文字と文字の間が繋がりすぎないように設定する必要がある。
- 行間：line-heightを活用し、文章毎の間隔を適切に開けることで視認性が高まる。
- 要素間：marginを活用し、適切に間隔をあけることで、要素毎のまとまりが分かりやすくなる。
まとめ
メール配信においてフォントの与える影響が大きく、視認性が低くなるとメール配信の目的の達成を妨げかねません。
さらに、読み手にとっても読みづらいメールが届き続けると、そのブランド自体に対する印象が悪化し、最終的にメール配信における企業との関係を断つ＝オプトアウトにつながってしまう恐れがあります。
メール配信の成果を最大化させかつブランドイメージの悪化につながる事態を避けるために、まずはこれまで配信した内容を振り返る。その上で、提示したポイントについて設定が漏れている箇所があれば早急に対応しましょう。
- Forbes「49 Email Marketing Statistics In 2024」 [↩]
- YMIRLINK「メルマガ購読は1分以内が7割弱 ライトアップとの共同調査でわかったメルマガユーザーのリアルな動向」 [↩]
- SendGrid「19 Best Email Fonts That Won’t Let You Down in 2024」 [↩]
- Email on Acid [↩]
- 齋藤大輔 斎藤恵一 納富一宏 斎藤正男「白色背景における文字色の視認性検討」『FIT2004（第3回情報科学技術フォーラム）』pp.281-282 [↩]
