メールマガジン用のHTMLテンプレート

ちょっとした連絡ならテキストメールで十分ですが、メールマガジン、キャンペーンのお知らせ、ウェルカムメールには、たいていもっと多くの要素が必要です。ロゴ、画像、わかりやすいボタン。これがHTMLメールです。小さなウェブページのように見えますが、メールソフトはブラウザよりずっと制約が多いため、まったく違うルールで作られます。ここでは、よいテンプレートの構成と準備のしかたを紹介します。

メールがウェブページと違う理由
Gmail、Outlook、Apple Mail、スマートフォンのアプリは、それぞれHTMLの表示が少しずつ異なり、その多くは最新のウェブのコードを無視します。そのため、メールは昔ながらの方法で作られます。
- レイアウトにはテーブルを使い、最新のウェブレイアウトは使わない。
- **スタイルは要素ごとに直接書く。**多くのメールソフトがstyleセクションを削除するからです。
- システムフォントを使う。独自のウェブフォントは読み込まれないことが多いからです。
- **スクリプト、フォーム、動画は使わない。**メールソフトでは動きません。代わりに、動画やフォームへ誘導する画像やボタンを使いましょう。
よいメールの構成要素
- **プリヘッダー:**受信トレイで件名の横に表示される短いテキスト。2つめの件名なので、「ブラウザで表示」でむだにしないようにしましょう。
- **ヘッダー:**ロゴを小さく、サイトへのリンク付きで。
- **見出しとメイン画像:**ひと目でメールの内容がわかるように。
- **短い本文:**多くても2〜3段落。
- メインボタンは1つ:「コレクションを見る」「席を予約する」など。リンクで作ったボタンはどの環境でも機能します。
- **フッター:**会社名、住所、連絡先、配信停止リンク。
幅とスマートフォン
標準的な幅は約600ピクセルで、パソコンの画面や多くのメールソフトの閲覧ウィンドウに収まります。スマートフォンでは1列のレイアウトに切り替わり、文字は読める大きさ、ボタンはタップしやすい大きさにします。メールの半分以上はスマートフォンで開かれるので、まずスマートフォン版を確認しましょう。
画像と代替テキスト
読み手が許可するまで画像をブロックするメールソフトもあります。すべての画像に代替テキストを書き、画像がなくても意味が通じるようにしましょう。重要な文字を画像の中だけに入れるのは避けます。使用する権利のある画像だけを使ってください。画像はメール配信サービスやご自身のサイトにアップロードし、メールからそのアドレスを参照します。
配信停止リンク
メール配信サービスや多くの国のルールでは、すべてのマーケティングメールに簡単な配信停止の方法を入れることが求められています。テンプレートには通常プレースホルダーが入っているので、ご利用の配信サービスの配信停止リンクやタグに置き換えます。
内容の準備のしかた
- メールの内容と、誰に送るのか。
- **事実:**価格、日付、クーポンコードを正確に。
- **各ボタンのリンク先:**ページの完全なアドレス。
- フッターの情報を、表示したいとおりに。
- **色やスタイル。**参考にしたいメールでもかまいません。
送信前にテストする
Gmail、Outlook、スマートフォンで自分宛てにメールを送ってみましょう。すべてのリンクとボタンをクリックし、プリヘッダーを確認し、画像をオフにした状態でも見てみます。
まとめ
よいHTMLメールは、テーブルとインラインスタイルで作られ、幅は約600ピクセル、スマートフォンでは1列になり、わかりやすいボタンが1つときちんとしたフッターがあります。自分で作る代わりに任せたいなら、HTMLメールを注文できます。メールの内容、オファー、ボタンのリンク先を伝えれば、完成したHTMLとそのメール用に描かれた画像が入ったアーカイブが届きます。Mailchimp、Brevoなどのメール配信サービスにインポートして使えます。お支払いは納品を承認した後にはじめて確定します。