takato（@n8takato）です！
HTNLメールの作り方を知りたい
この記事では上記の課題を解決します。
web制作の現場では、webサイト以外にHTMLメールも作成します。
HTMLメールはお客様がマーケティングとして活用しています。
この記事では、HTMLメールの作り方や注意点などを紹介します。
web制作に興味のある方は是非読んでみてください。
この記事でわかること
- HTMLメールの作り方
- HTMLメールを作るコツ
- HTMLメールを作る際の注意点
この記事を書いた人
この記事を書いた僕はこんな人です！
- 都内制作会社でwebデザイナーとして勤務
- webデザイナー歴2年目のひよっこ
- web制作現場で学んだことを発信している人
HTMLに関する他の記事はこちら
HTMLメールとは何か？
まずはHTMLメールについて説明します。
メールには2つの種類が存在します。
- テキストメール
- HTMLメール
テキストメール
文字のみで構成されたメール
HTMLメール
文字だけでなく画像やイラストも併せて作成されたメール
HTMLメールはwebサイトに近い形のメールです。
ここ数年でメルマガなどをHTMLメールで作成する企業が増えています。
HTMLメールの作り方
続いてHTMLメールの作り方を説明します。
HTMLメールは、サイトと同じくHTMLファイルで作成します。
HTMLファイルで作成する
HTMLメールはwebサイトと異なる作り方をします。
- HTMLメールはテーブルで設計する
テーブル設計とは？
テーブル設計とは、表などを作成する際に使用するコードのことです。
普段webサイトを作成する際、<section>や<article>、<div>といったタグを使用します。しかしHTMLメールでは<table>タグを使って作成します。
テーブルで作成する理由
様々なデバイスやメーラーで見ることを考えた時に、一番整合性の取れる作り方だから
デバイスやメーラーには多くのものが存在します。
使用するでデバイスやメーラーによっては、メールが上手く表示されない現象が起こります。
その中でも最も影響が受けにくい作り方がテーブル設計なのです。
テーブルで設計することで、デバイスやメーラーによる不具合を最大限回避することができます。
※デバイスやメーラーの組み合わせはかなり多く存在しており、全ての組み合わせに対応するのは不可能と言われております。
テーブル設計のコード
実際にテーブル設計で作成するコードを紹介します。
下記サンプルコード
<tr><td>
<table border="0" align="center" cellpadding="0" cellspacing="0" width="100%"><tr>
<td align='center'>
<img border='0' src='https:imagesample.jpg' />
</td>
</tr></table>
</td></tr>tr（表の行を表す部分）とtd（表のセルを表す部分）で全体を囲い、その中をtableで囲います。
cssはインラインで表記する
webサイトでは、外部のcssファイルを作成し読み込んでいました。
しかし、HTMLメールではcssはインラインで作成します。
cssのインラインとは？
インラインとは、HTMLに他の言語を直接記入することです。
cssを外部ファイルにで作成するのではなく、HTML内で作成します。
cssのインラインの書き方
cssをインラインで作成する場合、タグの中にstyle属性を記入します。
cssのインライン記入例
<img src='https://imagesample.jpg' style="margin-top: -15px;" />タグの中に「style=””」を追加することで、そのタグに装飾を付けることができます。
HTMLメールを使うメリットとは？
HTMLメールを使うメリットは主に2つあります。
HTMLメールを使うメリット
- 文字以外の方法で表現出来る
- 効果検証を行うことが出来る
文字以外の方法で表現出来る
先ほどの説明通り、HTMLメールは画像を使うことが出来ます。
そのためメールで表現出来る幅が一気に広がりました。
動画のアイキャッチ画像を表示してYouTubeにリンクすることも出来ます。
効果検証を行うことが出来る
HTMLメールでは検証結果を行うことも出来ます。
HTML内に検証タグを埋め込むことで様々な検証を行うことが出来ます。
- メールの開封率
- メールの滞在時間
- どこまでスクロールされたか など
テキストメールではこれらの検証は出来ませんが、HTMLメールでは可能です。
HTMLメールの納品までの流れ
HTMLメールの納品までの流れを紹介します。
HTMLメールの納品までの流れ
- デザインデータから画像を書き出す
- コーディングする
- テストメールでチェックする
- 使用した画像をクライアントのサーバーにアップしてもらう
- 画像リンクを共有してもらう
- 画像リンクを貼り替える
- 納品する
デザインデータから画像を書き出す
コーディングをする際に必要な画像を書き出します。
HTMKメールは多くの画像を使用します。
画像は一括で書き出すことで時間を短縮出来ますよ。
コーディングする
画像の書き出しを終えたら、コーディングに着手します。
コーディングはテーブル設計で行いcssはインラインで記入してください。
テストメールでチェックする
コーディングを終えたらテストメールでチェックします。
自分宛にテストメールを送る方法
テストメールをチェックするために、メールを自分に送る必要があります。
僕は「Litmus」というwebツールを使用しています。
「Litmus」は、指定したアドレスにHTMLメールを送ることの出来る無料ツールです。
HTMLコードを貼り付けて自分宛にメールを送りましょう。
テストメールでチェックする際の注意点
テストメールをチェックする際は、様々なデバイスとメーラーで確認する様にしてください。
デバイス
- iPhone
- Android
- MacBook
- Windows
メーラー
- Gメール
- outlook など
ちなみに、outlookはかなりの曲者です。
少しでも容量の重い画像は表示されませんし、cssが一部反映されなかったりします。
テストメールをチェックする際はoutlookを重点的に確認してください。
使用した画像をクライアントのサーバーにアップしてもらう
使用した画像をクライアントのサーバーにアップしてもらいます。
画像をサーバーにアップする理由
- 画像にリンクを作成する必要があるため
web制作の場合、別ファイルから画像を読み込むことが出来ます。
しかし、HTMLメールの場合はそれが出来ません。
HTMLメールの場合は、HTMLコードのみでメールを送信するため、HTMLコードで画像を表示させる必要があります。
そのため、画像にリンクを加えるためにサーバーにアップする必要があります。
テスト確認でOKもらったら納品前にこの作業を行います。
画像リンクを共有してもらう
クライアントにサーバーへ画像をアップして頂いたら、画像のリンクを共有してもらいます。
画像リンクを貼り替える
共有頂いた画像のリンクを貼り替えます。
納品する
画像リンクを貼り替えたら、コードデータを納品します。
これでHTMLメールの制作が終了です。
HTMLメールを作成するコツ
HTMLメールを作成する際のコツは2つあります。
HTMLメールを作成する2つのコツ
- 基本的には画像を貼り付けるでOK
- 画像内にあるボタンはクリッカブルマップで作成
基本的には画像を貼り付けるでOK
HTMLメールはボタンなどをコーディングで作成する必要がありません。
画像でOKな理由
- メーラーの影響を受けにくい
ボタンなどをコーディングで作成するとメーラーの影響を受けます。
メーラーによってはボタンが崩れたりしてしまいます。
画像で貼り付けることで、メーラーの影響を受けにくく出来ます。
画像内にあるボタンはクリッカブルマップで作成
HTMLメールは、ほとんどの要素を画像で貼り付けて作成します。
画像の一部にボタンがある場合は、クリッカブルマップを使用します。
クリッカブルマップとは？
画像の一部分だけにリンクを設定することの出来る機能です。
画像にリンクを設定する場合、画像全体にリンクが設定されてしまいます。クリックカブルマップ機能を使えば、画像の一部分だけにリンク設定が出来るのです。
クリッカブルマップの使い方については別の記事で説明しています。
「クリッカブルマップでレスポンシブ対応する方法をわかりやすく説明！」を読んでください。
HTMLメールを作成する際の注意点
HTMLメールを作成する際に注意点があります。
HTMLメールを作成する際の注意点
- ダークモードの対応を行う
ダークモードの対応を行う
メーラーにはダークモードという設定があります。
ダークモードを設定すると背景が黒になり文字が白になります。
ダークモード設定でも背景を白く表示したい場合は、対応する必要があります。
ダークモード設定でも背景を白にするコード
ダークモードに設定していても背景を白く表示する方法があります。
下記のコードをHTMLの<head></head>内に入力すると、対応出来ます。
<style type="text/css">
:root {
color-scheme: light dark;
supported-color-schemes: light dark;
}
@media (prefers-color-scheme: light) {
body {
background-color: #fcfcfc;
color: #020202;
}
}
@media (prefers-color-scheme: dark) {
body {
background-color: #fcfcfc !important;
color: #020202 !important;
}
}
</style>ダークモードの対応は必須ではないですが、クライアントによっては言われたりしますので、覚えておいてください。
【最後に】
この記事ではHTMLメールの作成方法を紹介しました。
下記はこの記事のまとめです。
HTMLメールの作成方法
- HTMLコードのテーブルで作成する
- cssはインラインで作成する
- 画像はサーバーにアップ後リンクで表示する
HTMLメールを作成する際のコツ
- 基本的に画像を貼り付けるでOK
- 画像内の一部にリンクを設定する場合は、クリッカブルマップを使用する
HTMLメールを作成する際の注意点
- ダークモードの対応を行う
HTMLメールは今でもマーケティングで活用されています。
コーディングに興味のある方は、是非実践してみてください。