Go to Qiita Advent Calendar 2024 Top
LoginSignup
195
173

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@ta-ke-no-bu

HTMLメール作成で調べたことまとめ

Last updated at Posted at 2017-11-02

HTMLメールのお仕事がきて調べたことまとめ

htmlメールを作成してお客様にhtmlファイルを納品するところまでの調査。

注意点

  • 基本的にテーブルコーディング
  • CSSはインライン
  • 全体のサイズは600pxで作る
  • 画像はサーバーにアップして絶対パスで入れる。読み込みを早くするために画像圧縮必須
  • pngではなくgifやjpgを使用する
  • 画像読み込みもhtmlサイズも容量が大きいと重いしスパム扱いされるといやだしなるべく軽くする
  • 文字の自動調整をしないようにbodyにsize-adjust必須（noneじゃなく100%で）
  • viewportにinitial-scale=1をいれるとAndroidで解釈がおかしくなる
  • レイアウトで段組やカラム分けしたいときはtableの入れ子で作る
  • メーラーによってはキャッシュが根強いので配信後に修正を送り直しても「画像が変わらないよー」って言われるので厳密にするなら画像にクエリストリングでバージョンとか付与してあげて再送する

メールクライアント個別注意点

共通

  • cssのコーディングによってはメールクライアントごとに見えかたが違うのでCSS対応状況を確認しながら実装する

Gmail編

  • Gmail（Web）で画像の使い回しをすると2度目以降が表示されない。spacer.gifみたいなのも使いたい場合はリネームして使うかtdのheightとか調整する。
  • Gmail（Web）をスマホで開くとGmailの枠からhtmlメールの内容がはみ出る。崩れはしない。他社のhtmlメールでこれに対応しているサンプルが見つからなかったので今後お客様に突っ込まれたら再検証
  • Gmailはposition:absoluteやネガティブマージンは使えない
  • Android版Gmail（app）でline-heightを指定しても行間がぎゅっとつまることがある（OSかappのバージョンによる？）line-height: 100!important;を該当箇所にいれて、行間調整用のhtight付きtdをbr代わりに入れて対応した。参考 → Email Line-height - Android Gmail Not working

Mac標準メール（デフォルトで入ってるアレ）編

  • Mac標準メールで画像が実サイズで表示されるのを防ぐには、インラインCSSでサイズを記述

iOSの標準メーラー編

  • iOSの標準メーラーだと親要素を%指定すると、画像が外枠からはみ出るので枠は固定幅入れた方がいい ← ハマったやつ

Outlook編

  • Outlook（2007／2010／2013）がfloatやbackground-imageなど未対応。vmlを使うと背景画像を入れれるらしい？ 未検証 → HTMLメールコーディングの鬼門、outlook2007へ背景画像を。
  • Outlook2010が固定幅でレスポンシブ非対応なのでリキッドレイアウトを意識した固定幅で作成する。レイアウト用にマルチクラスでスタイル作っておくと便利だった
  • Outlook2010はpaddingに不具合があるのでなるべくmarginやheight指定で間隔をいれる。ベストはtdのheigh指定
  • Outlookはレンダリングがwordと同じ。Outlook2007はアニメーションGIFは自動で動かず、一番最初のフレームの静止画になる。なぜかOutlook2003では動くらしい
  • Outlook2007でアニメを動かすには
    「表示」 → 「プレビューとプロパティ」を押す。または「メッセージ」→「その他のアクション」→「ブラウザで表示」をやらないと動かない。

備考

  • [if gte mso ○]のような感じでIEの条件付きコメントがoutlookのみ使える。（今回は使わなかったけど）
  • 参考
    Outlook Conditional CSS
  • メディアクエリは使える。スマホアプリだとoutlookでも正常にメディアクエリを読んでくれた。なので作るときはPC基準でスマホ用にクエリをつける。2016年9月からGmailもサポートしたそうだけどweb版でうまくいかなかった

ヘッダー情報・メタ情報

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01
または

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0

HTML 4.01が一般的

<meta http-equiv="content-type" content="text/html; charset=iso-2022-jp">

文字コードはiso-2022-jpが一般的にメーラーで使われてるもの
iso-2022-jpで書き出したものをブラウザで開くと文字化けするので、確認用などでhtmlを書き出すときはcharsetをUTF-8で編集してメール用に忘れないようにiso-2022-jpに戻すといい

各メールクライアントのhtml送信方法（調べたものだけ）

お客様にメール送信方法を聞かれた時の参考

  • AirMail Betaはメール作成画面を開いてhtmlモードで貼り付けるだけ
  • 背景画像や背景色ががなければ書き出したhtmlをブラウザで開き、全て選択してコピーするとbody以下のスタイルを保持してクリップボードにコピーされるのでhtmlモードの状態で貼り付ければ使える
  • 例えばPCのgmail（web）の場合、作成 → 右下の三角 → プレーンテキストモードのチェックを外す → 本文に貼り付ける

参考になったもの
Thunderbird での HTML メール作成方法
ＨＴＭＬメルマガのお試し送信を Microsoft Outlook 2010 でしてみた

メールのテストについて

今回は片っ端からメールクライアントを落として協力依頼して検証したので使わなかったが、 litmus というやつで表示テストができるらしい（有料 / お試し無料期間7日間）
Litmusを使用してHTMLメールのテストを行う

メール対応用のデフォルトスタイルテンプレ

いろいろなところを参考にさせていただきました。

/* =========================================================
　メール対応用デフォルトスタイル
========================================================= */

body {
  width: 100% !important;
  min-width: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  margin: 0;
  padding: 0;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
}

td {
  word-wrap: break-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
  border-collapse: collapse !important;
}

table, tr,
  td {
  padding: 0;
  vertical-align: top;
  text-align: left;
}

img {
  outline: none;
  text-decoration: none;
  -ms-interpolation-mode: bicubic;
  width: auto;
  clear: both;
  display: block;
}
a {
  img {
    outline: none;
    text-decoration: none;
    -ms-interpolation-mode: bicubic;
    width: auto;
    clear: both;
    display: block;
    border: none;
  }
}

/* =========================================================
 outlook対策
========================================================= */

#outlook a {
  padding: 0;
}

body.outlook p {
  display: inline !important;
}

/* =========================================================
 ホットメールで画面いっぱいに表示ようにする
========================================================= */

.ReadMsgBody {
  width: 100%;
}
.ExternalClass{
  width:100%;
}

.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div{
  line-height: 100%;
}

#backgroundTable {
  margin: 0;
  Margin: 0;
  padding: 0;
  width: 100% !important;
  line-height: 100% !important;
}

メール対応用のhtmlテンプレート

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html  xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-2022-jp">
  <meta name="viewport" content="width=device-width" />
  <title>Title</title>
  <link rel="stylesheet" href="css/style.css" />
</head>

<body>
  <table class="body">
    <tr>
      <td align="center" valign="top">
        <center>
          <!-- ここからガチガチにテーブルで内容を入れていく -->



           <!-- ここまで -->
        </center>
      </td>
    </tr>
  </table>
</body>
</html>

おすすめgulpプラグイン

  • gulp-inline-css
  • 通常のwebのように外部CSSで作成したものをインラインCSSに書き出してくれる
  • gulp-htmlmin
  • htmlのminifyして容量をおさえる
  • gulp-imagemin
  • 画像圧縮

おまけ。おすすめgulpプラグインの設定サンプル

gulpfile.js
var inlineCss = require('gulp-inline-css'),
  htmlmin = require('gulp-htmlmin'),
  imagemin = require("gulp-imagemin"),
  jpegtran = require('imagemin-jpegtran');

  SRC = './src/',// 作業ファイル
  PUBLIC = './public/';//　dist


/**
 * インラインCSS
 */
gulp.task('inlineCss', function() {
    return gulp.src(PUBLIC + '*.html')//SRCで書き出したものがPUBLICに書き出されてからの実行
        .pipe(inlineCss({
          applyStyleTags: false,
          removeStyleTags: false
        }))
        .pipe(gulp.dest('PUBLIC'));
});



/**
 * htmlのminify
 */
gulp.task('htmlmin', function() {
    return gulp.src(PUBLIC + '*.html')// inlineCSSの後に実行
        .pipe(htmlmin({
          removeComments: true,
          collapseWhitespace: true
        }))
        .pipe(gulp.dest('PUBLIC'));
});

/**
 * 画像の最適化
 */
gulp.task('imagemin', function(){
  return gulp.src([SRC + 'image_temp/*.{jpg,gif}'])
    .pipe(imagemin([
       imagemin.jpegtran({
         quality:85,
         progressive: true
       }),
       imagemin.gifsicle()
     ]
  ))
  .pipe(gulp.dest(PUBLIC + 'img/'))
});

おまけ2上記gulp設定のメーラーでテストする時と納品する時のタスク

htmlとscssを外部スタイルでコーディングし終わったら

html確認用にcharsetをUTF-8にしていたら
メーラー検証用はcharsetをiso-2022-jpにする。

一度gulpを終了させてから、

imageminした画像をサーバーにあげて

スタイルをインライン化するタスクを実行

$gulp  inlineCss

htmlをminifyするタスクを実行
※管理画面からhtmlメールを送る場合、CMSの仕様によっては1行の長さに制限がかかっている場合があるのでその場合はminifyしない

$gulp  htmlmin

これで完成するようにした。

195
173
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
195
173

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?