Zenn
🗂

HTMLメールの実装に入る前にこれだけは確認しとけ！と思ったもの

2022/09/29に公開
CSS
Outlook
htmlメール
tech

確認すべき4選

SPサイズの対応方法について

  • PCサイズと全く同じデザイン・横幅で実装するのか？
  • PCサイズを縮小したデザインで実装するのか？
    • これが一番実装コストがかからずコスパがいいと思う
  • PCとSP全く別のデザインで実装するのか？
    • ただし、下記の通りメディアクエリは使用しない方がいいのでこの方法はおすすめしない

ブラウザはどこまで対応するのか？

運営中のwebサービスと同じにするのが吉だと思います。
MacであればChrome、Safari、Firefox、windowsChrome、edge、Firefoxまで確認できるとよし。

メールソフトはどこまで対応するのか？

  • 全部のメールソフトに対応するのは不可能なのでどこかで足切りが必要
  • 自分の場合はGmail、Yahooメール、Outlookはデザイン崩れしないようにした
  • SPの場合、メールソフトのアプリで見た場合とwebブラウザで見た場合の2通りがあるので注意！
  • windowsに搭載されているOutlook200X、201Xがよくデザイン崩れを発生するので注意!

使用する画像について

  • 上記で書いた通り、PCとSPを一緒のデザインにするのであればPCサイズを縮小したデザインで実装する場合、画像が縮小される可能性がある
  • メールソフトによってはcssのpositionが使えないため画像の中に画像を入れるのは避けたほうがいい。2つの画像が合体した1つの画像を使う形にした方がいい。例えば下記の場合はお城の背景とネズミの画像を一体化した方がいい

cssコーティングについて

cssのコーティングはclassでなくHTMLに直接書く

iOSでブラウザでGmailを開いた時など、一部の状況でcssが全く効かなくなるため　。
そのためメディアクエリなどのブレークポイントは使えないのでSP専用のデザインは用意せず、PCサイズのものをそのまま縮小できるデザインの方がいい

<p style="font-weight: 700; font-size: 20px; color: #000;">
ユーザー招待が届きました
</p>

要注意cssプロパティ

下記のサイトを参考にcssプロパティを使う。ほぼ100%対応しているcssプロパティは存在しない
https://www.campaignmonitor.com/css/

flexプロパティ

横並びはtableタグで実装する

padding/margin

Outlook 2007–16で不具合が発生する可能性がある。
余白を定義する場合は以下のような感じにする

<table height="32px">
  <tr>
    <td></td>
  </tr>
</table>

max-width

レスポンシブ対応するために全体のレイアウトの幅を定義する時だけ使用。
Outlook 2007–16が対応してないことがあるが、横幅が広がるだけなのでデザイン崩れなどは発生しない。

border-radius

Outlook 2007–16が対応してない。

white-space

改行した文字列を改行として扱うように定義。
主にoutlook全般で対応していない。

word-wrap

主にYahooメールで対応していない。
URL発行系のメールをYahooメール(SP)で見た時に横スクロールできてしまうので、URLをそのまま表示させない等の対応が必要かも

position

上記で挙げた画像の重なりとかは実装できないと思った方がいい。

Discussion