はじめに
メール署名を HTML で美しく整えたい。
それ自体は珍しくない欲望だと思います。
しかし実際にやってみると次の現実に直面しました。
- Gmail Web では綺麗
- iOS Gmail では微妙にズレる
- macOS Mail では崩れる
- iOS Mail では別物になる
同じ HTML が、環境によって全く別の顔を見せる。
この記事は
自分の使う主要環境で“まず崩れない”HTML メール署名を作るまでの記録
です。
前提条件
今回のゴールは以下に絞りました。
- 対象クライアント
- Gmail（Web / iOS）
- Apple Mail（macOS / iOS）
- 画像なし
- table レイアウトなし
- CSS は すべてインライン
- 外部 CSS / class 指定なし
- 署名としてコピペ可能であること
- 特に HTML ではなくテキストとしてコピペしても形が崩れないこと
「理想的な HTML」ではなく「現実で壊れにくい HTML」 を優先します。
まず失敗したこと
1. HTML メールで “Web の常識” を使った
- flex
- margin / padding の細かい調整
- border / hr
- serif フォント切り替え
- letter-spacing 多用
👉 ほぼ全滅
メールクライアントはブラウザではありません。
HTML / CSS のサポートレベルが「時代も思想もバラバラ」です。
2. フォントにこだわりすぎた
Times / Garamond / 明朝体などを試しましたが
- 和文混在
- フォールバック順序
- クライアント依存
で事故率が急上昇。
👉 結論：サンセリフに寄せた方が安全
方針転換：「壊れない」を最優先する
途中で思想を切り替えました。
「美しさ」は後回し。まず「壊れない」ことを満たす。
ここから設計を極端にシンプルにします。
最終的に残した要素
- div / br / a のみ
- レイアウトは 縦方向のみ
- 罫線は unicode 文字（────）
- font-family は現実的なサンセリフスタック
- text-decoration を明示的に無効化
- display / position / float 一切なし
最終形（抜粋）
<div
style="
font-size: 12px;
font-weight: 400;
font-family: Helvetica, 'Helvetica Neue', Arial, Inter, 'Hiragino Sans',
'Segoe UI', Frutiger, 'Noto Sans CJK JP', 'Noto Sans JP', 'Noto Sans',
'Yu Gothic', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
"
>
<div>────────────────────</div>
<div style="padding-left: 0.25em">
<div style="font-size: 14px; font-weight: 500; letter-spacing: 1px">苗字 名前 ❘ Your Name</div>
<div>
<a
style="font-size: 12px; color: inherit; text-decoration: none; text-decoration-color: inherit"
href="mailto:your.name@example.com"
>your.name@example.com</a
>
</div>
<br style="line-height: 0.75em" />
<div>
<div style="font-size: 12px; font-weight: 500">株式会社 〇〇〇〇</div>
<div style="font-size: 12px">〇〇〇〇部 〇〇〇〇課</div>
</div>
<div style="font-size: 10px">〒000-0000 〇〇県〇〇市〇〇町0-0-0 〇〇ビル</div>
</div>
<div>────────────────────</div>
<br /><br />
</div>
これで Gmail / Apple Mail / iOS 含めて破綻なしになりました。
結論
- HTML メールは「仕様」ではなく「文化」
- Web の感覚を持ち込むと痛い目を見る
- 引き算こそが最大の互換性対策
そして最後に辿り着いた結論がこれです。
メールに HTML を使うのは人類にはまだ早い。
それでも使うなら 「HTML を書く」のではなく「HTML を諦める」ところから始める と意外と平和になります。
この記事は、別のプラットフォームにも同内容を掲載しています。