TOP > Colta日記 > 日記140228

「Colta」コルタ日記

■「HTMLメール、フォント(書体)の指定はできるコル?」-HTMLメールの作り方 第9回

14.02.28

こんにちは。こる博士です。
先日、いつもお世話になっているお客様から、「HTMLメールの場合書体を指定する事はできますか?」と質問をいただきました。

通常WEBページに書体を指定する場合、CSSプロパティの「font-family」を使います。
その時、指定したフォントがユーザ端末にインストールされているかを考慮し、幾つかのパターンを想定してフォントを指定しますよね。
↓↓こんな感じ
font-family: "メイリオ", Meiryo, Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "MS Pゴシック", "MS PGothic", sans-serif;

これがHTMLメールの場合はどうでしょう?
そもそも、CSSのプロパティ「font-family」自体が使えるのかが疑問なところです。
早速メール文面に、font-familyを入れて配信してみます。
指定したフォントは「MS 明朝」のみ。
検証端末のOSはwindows7、「MS 明朝」はデフォルトでインストールされています。

まず、Outlook2010で見てみます。
Outlook2010でfont-familyを検証した場合
ちゃんと、font-familyを指定した部分は、明朝体になっていますね!
続けて、その他代表的なメールソフトで検証してみたところ、下記の通り、検証したメールソフト全てfont-familyが効いている事がわかりました。

■メールソフト

Becky outlook2007 outlook2010 outlook express windows Live メール thunderbird
画像に隙間


さらに続けて、各種WEBブラウザでWEBメールを検証してみます。
まずは、Yahooメール!から。
Yahoo!メールでfont-familyを検証した場合
おっといきなり、NGです。
明朝体を指定しているにも関わらず、ゴシック体で表示されてしまっています。

その他のWEBメールに期待を寄せて、、結果はさらに残念な事に↓↓(T T)
GmailもOutlookメール(旧hotmail)も全滅となりました。

■Webメール
yahoo outlook.com
(旧hotmail)
gmail
IE9 chrome Firefox IE9 chrome Firefox IE9 chrome Firefox
画像に隙間 × × × × × × × × ×


往生際悪く、スマホでも同じメールを確認してみたところ、下記の通り散々な結果に。
■スマホ
yahoo
iPhone5 HTC(android) galaxy nexus(android) ARROWS(android)
画像に隙間 × × × ×
outlook.com
(旧hotmail)
iPhone5 HTC(android) galaxy nexus(android) ARROWS(android)
画像に隙間 × × × ×
gmail
iPhone5 HTC(android) galaxy nexus(android) ARROWS(android)
画像に隙間 × × × ×
しかし、スマホの場合は端末によって元々インストールされているフォントがまちまちで、Windows PCでは主流のメイリオやMSゴシックなどは使えるはずもない事に気づいたのは、この検証が終わった後の事でした。(T T)

そうすると、逆にスマホに合わせて何かしらのフォントを指定してもPCには入っていないという事が起きます。font-familyを使ってPCやスマホなど全てのデバイスでまったく同じように見せるというのは、ほぼ不可能と言えるでしょう。あちらを立てればこちらが立たず、といった感じですね。

ということで結果をまとめると、HTMLメールのフォントは、
「指定せずに、ユーザの環境に委ねましょう。」です。
いくらHTMLメール制作時に、お気に入りのフォントでレイアウトしてみても、結局のところ実際配信してみると、「違う!?」って事になっちゃいます。

HTMLメールを作成する場合は、フォントはユーザ環境によって文字間/行間は異なることを前提にデザインする事が大切です。 「どうしてもこのフォントじゃなきゃ嫌だ!」という場合は、画像をお使いください。

では、また次回♪ (こる博士)

<< 前の日記へ
前のページに戻る このページのトップへ
  • メルマガノウハウインタビュー
おすすめ記事

[インタビュー] 四季株式会社様 メールアドレス会員数は、他の施策と組み合わせることで、増やすことができる。

[インタビュー] トライコーン株式会社 ソーシャル一括投稿システム「コトシロ」より多くのメディアに情報を発信することで、情報の露出効果が上がります。

[インタビュー] 株式会社監査と分析様 メルマガの企画・編集は、PDCAサイクルを回すこと!

[インタビュー] 株式会社亀屋万年堂様 クーポンの利用率は9%まで上がる!

[インタビュー] 株式会社極楽湯様 クーポンの内容によってメールのクリック率は大きく違う!

[メルマガ担当者] メール配信結果の指標

[メルマガ担当者] PDCAを回せない10の理由と対策


人気コンテンツランキング

メールの署名(シグネチャ)

Coltaオリジナル署名集。

Thunderbird(サンダーバード)の便利なプラグイン・アドオン

サンダーバードの便利なアドオンを厳選して紹介。

ビジネスメールのテンプレート

ビジネスで使いたいメールのサンプルをご紹介します。
最近のColta日記

3/14 [HTMLメール]「コルミのFacebookページ運用メモ 第1回」

2/28 [HTMLメール]「HTMLメール、フォント(書体)の指定はできるコル?」

11/01 [HTMLメール]「文章(テキスト)の流し込みも要チェックこる。」

10/17 [HTMLメール]「<table>にはいろいろリセットが必要なんですっ。」

10/04[HTMLメール]「<img>にはborder="0"を。」

9/05 [HTMLメール]「background-color/imageを検証してみよう!」

8/30 [HTMLメール]「HTMLメールにCSSのheightは使えない?!」

Colta日記一覧はこちら>>

メール配信ASPのトライコーン株式会社 メール配信代行サービス「アイモス」 LMA マーケティングオートメーションはカンタンに! LOOPASS(ルーパス)が広げるビジネスの可能性 代理店様向け キャンペーン運営サービス「IMOSSS(アイモス)」 メールを依頼したい!”PDCA”を回したい方へ PDCAつき文章作成サービス「アイモス」 無料試用版もあります。Salesforceメールアプリ導入実績No.1 営業効率を最大限化させるPardot運用支援 インターネットサービスに関わる担当者のための情報を紹介するブログ「Web Persons」 メールマーケティング辞典 WEBマーケティング用顧客管理システム「クライゼル/KREISEL」
ソーシャルブックマーク