HTMLメールがiOSメールで明朝体になる

HTMLメールを作成していますが、iOSメールのみ、フォントが明朝体になってしまいます。
インラインcssで、sans-serifと指定してみてもだめです。
iphoneでもゴシックで表示させるにはどのようにすればよいでしょうか？
※Outlookでテスト送信して、上記のような現象になります。

HTML
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html>
3<head>
4<title></title>
5<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6
7<!--[if !mso]><!-->
8<meta http-equiv="X-UA-Compatible" content="IE=edge" />
9<!--<![endif]-->
10<meta name="viewport" content="width=device-width, initial-scale=1.0" />
11<style type="text/css">
12html {
13	-webkit-text-size-adjust: none;
14	-ms-text-size-adjust: 100%;
15}
16
17body {
18	margin: 0!important;
19	padding: 0;
20	background: #ffffff;
21	font-family:'Hiragino Kaku Gothic Pro', 'MS PGothic', Meiryo, sans-serif;
22	-webkit-text-size-adjust: none !important;
23	-webkit-font-smoothing: antialiased !important;
24	-ms-text-size-adjust: none !important;
25}
26
27table, tr, td {
28	border-spacing: 0;
29	border-collapse:collapse;
30	mso-table-lspace:0pt;
31	mso-table-rspace:0pt;
32	border-spacing: 0;
33	font-family:'Hiragino Kaku Gothic Pro', 'MS PGothic', Meiryo, sans-serif;
34}
35
36td {
37	word-break:break-all;
38}
39
40a:link, a:visited, a:hover, a:active {
41	color:#333333;
42}
43img {
44	border: 0;
45}
46div[style*="margin: 16px 0"] { 
47	margin:0 !important;
48}
49.wrapper {
50	width: 100%;
51	table-layout: fixed;
52	-webkit-text-size-adjust: 100%;
53	-ms-text-size-adjust: 100%;
54}
55.webkit {
56	max-width: 600px;
57	margin: 0 auto;
58}
59.outer {
60Margin: 0 auto;
61	width: 100%;
62	max-width: 600px;
63}
64</style>
65</head>
66<body bgcolor="#ffffff" style="	margin: 0!important;padding: 0;	background: #ffffff;font-family:'Hiragino Kaku Gothic Pro', 'MS PGothic', Meiryo, sans-serif;-webkit-text-size-adjust: none !important;-webkit-font-smoothing: antialiased !important;-ms-text-size-adjust: none !important;">
67<center class="wrapper" style="width:100%;table-layout:fixed;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;">
68
69<div class="webkit" style="max-width:600px;margin:0 auto;">
70
71<!--[if (gte mso 9)|(IE)]>
72<table width="600" align="center" cellspacing="0" cellpadding="0" border="0">
73<tr>
74<td>
75<![endif]-->
76<table class="outer" align="center" cellspacing="0" cellpadding="0" border="0" style="width:100%;max-width:600px;Margin:0 auto;mso-table-lspace:0pt;mso-table-rspace:0pt;">
77<tr>
78<td align="center" bgcolor="#ffffff" style="font-family:'Hiragino Kaku Gothic Pro', 'MS PGothic', Meiryo, sans-serif;">
79	<table width="100%" cellspacing="0" cellpadding="0" border="0">
80<!--ここから-->
81
82<!--ヘッダー-->
83	<tr>
84	<td height="10"></td>
85	</tr>
86	<tr>
87	<td width="*" align="left" valign="middle" style="font-weight:bold;font-family:'Hiragino Kaku Gothic Pro', 'MS PGothic', Meiryo, sans-serif;font-size:18px;">タイトルタイトルタイトル</td>	</tr>
88	<tr>
89	<td align="right" style="font-family:'Hiragino Kaku Gothic Pro', 'MS PGothic', Meiryo, sans-serif;font-size:13px;">2018/05/14</td>
90	</tr>
91	<tr>
92	<td height="20"></td>
93	</tr>
94<!--ヘッダー-->
95
96<!--本文-->
97	<tr>
98	<td height="50" align="center" valign="middle" bgcolor="#195aa9" style="color:#ffffff;font-family:'Hiragino Kaku Gothic Pro', 'MS PGothic', Meiryo, sans-serif;font-size:24px;">サブタイトル</td>
99	</tr>
100	<tr>
101	<td height="20"></td>
102	</tr>
103	<tr>
104	<td align="left">・<a href="#" style="font-family:'Hiragino Kaku Gothic Pro', 'MS PGothic', Meiryo, sans-serif;font-size:18px;">ダミーダミーダミー</a></td>
105	</tr>
106	<tr>
107	<td height="15"></td>
108	</tr>
109	<tr>
110	<td align="left">・<a href="#" style="font-family:'Hiragino Kaku Gothic Pro', 'MS PGothic', Meiryo, sans-serif;font-size:18px;">ダミーダミーダミー</a></td>
111	</tr>
112	<tr>
113	<td height="15"></td>
114	</tr>
115	<tr>
116	<td align="left">・<a href="#" style="font-family:'Hiragino Kaku Gothic Pro', 'MS PGothic', Meiryo, sans-serif;font-size:18px;">ダミーダミーダミー</a></td>
117	</tr>
118	<tr>
119	<td height="15"></td>
120	</tr>
121<!--本文-->
122
123<!-- フッター -->
124	<tr>
125	<td height="15"></td>
126	</tr>
127	<tr>
128	<td align="center" style="font-family:'Hiragino Kaku Gothic Pro', 'MS PGothic', Meiryo, sans-serif;font-size:12px;">
129	このメールはメルマガを受信設定しているメールアドレス宛にお送りしています。<br />
130	<a href="#" style="font-family:'Hiragino Kaku Gothic Pro', 'MS PGothic', Meiryo, sans-serif;font-size:12px;">配信停止</a>｜<a href="#" style="font-family:'Hiragino Kaku Gothic Pro', 'MS PGothic', Meiryo, sans-serif;font-size:12px;">メールアドレス変更</a>｜<a href="#" style="font-family:'Hiragino Kaku Gothic Pro', 'MS PGothic', Meiryo, sans-serif;font-size:12px;">お問い合わせ</a><br />
131	</td>
132	</tr>
133	<tr>
134	<td height="20"></td>
135	</tr>
136	<tr>
137	<td height="1" style="border-top:1px dashed #cccccc;"></td>
138	</tr>
139	<tr>
140	<td height="20"></td>
141	</tr>
142	<tr>
143	<td align="center" style="font-family:'Hiragino Kaku Gothic Pro', 'MS PGothic', Meiryo, sans-serif;font-size:12px;">
144	本メールに掲載された記事を、許可なく転載することを禁じます。<br />
145	</td>
146	</tr>
147	<tr>
148	<td height="100"></td>
149	</tr>
150<!-- フッター -->
151
152<!--ここまで-->
153	</table>
154</td>
155</tr>
156</table>
157<!--[if (gte mso 9)|(IE)]>
158</td>
159</tr>
160</table>
161<![endif]-->
162
163</div>
164
165</center>
166</body>
167</html>

yoshinavi

2018/05/31 06:10

iPhone端末での確認は複数台での確認でしょうか？

行動規範の内容に同意します

回答2件

同じ悩みを持っており、私もteratailで質問をしたのですが、自己解決をしましたのでシェアいたします。

問題はOutlookで送ること自体にあるようです。
送信画面でファイル＞保存（HTML形式）して、保存したファイルを見ると、元のコードから大きく変わっていると思います。

私はVBAを使って送る方法で解決しました。
よろしければ次のページをご覧ください。

VBAを使ったOutlook経由のHTMLメール送信方法

投稿2019/08/09 13:39

furumototatsuya

総合スコア10

eyiff

2019/08/13 02:23

ご回答ありがとうございます。Outlook自体が原因でしたか…VBAは詳しくなく、教えていただいた方法は思いつきませんでした。リンク先を参考に試してみたいと思います！

行動規範の内容に同意します

全体的なfont指定などがどうなっているのか解らないのでふわっとした回答になりますが…

■charsetはUTF8などを指定しているか？
■font-styleで下記のような指定をしているか？

CSS
1font-family:"メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

■lang指定をしていないか？

HTML
1<html lang="ja">

あたりが可能性がありそうです。
lang指定があるなら削除、charsetがないなら追加してみてください。

≪追記≫
HTMLを拝見した感じではインラインスタイルと
head内の記述が重複しているところが多かったので、
まずは整理をされた方が検証しやすいと思いました。

OutlookでのHTMLメールの作り方を解説しているサイトも
あるようですので、
よければそちらもご参考にされるといいかもしれません。

例えば、下記サイトでサンプルがDLできるようですので、
DLしてみてiPhoneで見てゴシックになっていれば、
同じ書き方をすれば解決できるかも…？
http://csspro.digitalskill.jp/%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB/css/html%E3%83%A1%E3%83%AB%E3%83%9E%E3%82%AC%E4%BD%9C%E6%88%90%E6%96%B9%E6%B3%95/

投稿2018/05/30 05:12

編集2018/05/31 03:27

yyyy.yyyy

総合スコア53

eyiff

2018/05/30 06:30

回答ありがとうございます。lang指定はしておらず、chartsetはUTF-8です。font-familyはsans-serifのみでしたが、ご指摘いただいたように変更して再度テストしてみましたが…やはり明朝になってしまいます。

yyyy.yyyy

2018/05/30 07:07

font-familyはもともと入ってなくて、入れても変わりなし、ということですね。 font-familyの指定が効いていないか、 synergyなどのツールを挟んでいてそっちに引きずられている可能性もあります。上記質問部分に、もし利用されているならそのツールと、全コード（テキストは「ダミー」に変えても大丈夫です）を掲載された方が解決につながるかもしれません。

eyiff

2018/05/30 07:36

ありがとうございます。 font-familyの指定が効いていないみたいです。。ツールは使用しておらず、outlookでテスト送信して確認しています。コードも追記しました。

yyyy.yyyy

2018/05/31 03:28 編集

私の所持しているiPhoneが、iOS10のため明確な回答ができずにすみません… 回答に追記として思いついたことを記載いたしました。お役に立てればいいのですが…。

行動規範の内容に同意します

あなたの回答