HTMLメールの作り方とコーディング注意点

先日、HTMLメールを初めて作成しました。通常のWebサイトのコーディングとは勝手が違うところがいくつかあったので、HTMLメールを初めて作る際に知っておきたい情報をまとめました。

HTMLメールとWebサイトのコーディングの違い

HTMLメールのコーディングには通常のWebサイトのコーディングと違い以下のような特徴があります。

HTMLメールの特徴
  • テーブルレイアウトで記述する
  • CSSをインラインで記述する

これらの特徴は、HTMLメールのコーディングでは使えるHTMLタグやCSSが大きく制限されることに起因します。

制限が多くなるのは、メーラーによって対応しているCSSプロパティに大きな差があることが原因です。

例えば、レイアウトによく使われる「flexbox」はGmailやOutlookなどの主要なメーラーでもサポートされていません。

メーラーによる対応状況は以下のサイトから確認することができます。

https://www.campaignmonitor.com/css/

それではそれぞれの特徴について詳しく解説していきます。

HTMLメールはテーブルレイアウトで作る

HTMLメールの1番の特徴はコンテンツをテーブルレイアウトで作成するということでしょう。

前述したとおり、メーラーによって対応しているCSSがまちまちなため、より多くのメーラーに対応するためのベターな選択肢としてテーブルレイアウトで組むことが推奨されています。

テーブルレイアウトとは

テーブルレイアウトはコンテンツ全体をtableタグの中に組んでいくレイアウトです。

sectionタグやarticleタグは使わずに全ての要素をテーブルのセルとして記述していきます。

以下のURLはHTMLメールの例です。ソースコードを見ると全ての要素がtableタグで組まれているのがわかります。

http://m2.adidas-news.adidas.com/nl/jsp/m.jsp?c=MBGNKDnZfKlPEOsfmQ1hBIx26CZsNqY9&cm_mmca4=29573858

テーブルレイアウトは2000年代によく使われていたWebサイトのレイアウト方法ですが、今は大半のWebサイトではCSSを使ってより柔軟なレイアウトをしています。

主要なメーラーもCSSに対応してきてはいますが、まだまだテーブルレイアウトが主流なようです。早くCSSレイアウトに対応してほしいものですね。

HTMLメールはCSSをインラインで書く

HTMLメールのもう一つの特徴として、CSSをインラインで書くということが挙げられます。

通常のWebサイトコーディングではCSSは外部ファイルとして読み込むことが多いですが、HTMLメールはHTMLタグの中に直接CSSを書くインライン方式で記述します。

これも、メーラーによってheadタグやstyleタグに対応していないものがあるからです。

しかし、最近のHTMLメールはレスポンシブデザインになっているものも多いため、その場合にはレスポンシブ用のCSSをheadタグ内に記述します。

HTMLメール作成の流れ

ここからはHTMLメールのコーディングの進め方を解説していきます。あくまでも僕のやり方なので他にもっといい方法があるかもしれません。

  • STEP.1
    コーディング

    コーディング方法については、これは通常のWebサイトのコーディングと変わりありません。

    テキストエディタで書いたコードをブラウザで確認しつつコーディングしていきます。

    HTMLメールはテーブルレイアウトで記述するため、HTMLの基本形は以下のコードのようになります。

  • STEP.2
    メーラーで確認

    コーディングができたら、実際にHTMLメールを送ってみて正しく表示されるかを確認しましょう。

    実際の運用ではメール配信サービスを使用してHTMLメールを送信することがほとんどだと思いますが、コーディング後の確認は通常のメーラーから送信して確認するのが簡単です。

    HTMLメールの送り方はメーラーによって様々ですが、一番簡単なGmailでの送り方を説明します。

    1. 通常のメール送信時と同じように新規メール作成画面を開きます。
    2. 右下の「⋮」をクリック、[プレーンテキストモード]にチェックがついていたら外します。
    3. 作成したHTMLをブラウザで開き、[Ctrl]+[a]ですべて選択しコピー。
    4. メール本文に貼り付け。
    5. 送信

    この方法で各種メーラーの自身のアドレスにHTMLメールを送り、送信されてきたメールが正しく表示されていればOKです。

まとめ

HTMLメールには

  • テーブルレイアウトで記述する
  • CSSをインラインで記述する

という特徴があります。

また、メーラーによって対応しているCSSに違いがあるため、下記のサイトで確認しながらコーディングをしましょう。

https://www.campaignmonitor.com/css/

HTMLメールを作る際にはこれらの特徴に気を付けて作ることになると思います。

以上、この記事がHTMLメールを作る際に参考になれば幸いです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です