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

1分で読めます

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

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

メールがウェブページと違う理由

Gmail、Outlook、Apple Mail、スマートフォンのアプリは、それぞれHTMLの表示が少しずつ異なり、その多くは最新のウェブのコードを無視します。そのため、メールは昔ながらの方法で作られます。

  • レイアウトにはテーブルを使い、最新のウェブレイアウトは使わない。
  • **スタイルは要素ごとに直接書く。**多くのメールソフトがstyleセクションを削除するからです。
  • システムフォントを使う。独自のウェブフォントは読み込まれないことが多いからです。
  • **スクリプト、フォーム、動画は使わない。**メールソフトでは動きません。代わりに、動画やフォームへ誘導する画像やボタンを使いましょう。

よいメールの構成要素

  • **プリヘッダー:**受信トレイで件名の横に表示される短いテキスト。2つめの件名なので、「ブラウザで表示」でむだにしないようにしましょう。
  • **ヘッダー:**ロゴを小さく、サイトへのリンク付きで。
  • **見出しとメイン画像:**ひと目でメールの内容がわかるように。
  • **短い本文:**多くても2〜3段落。
  • メインボタンは1つ:「コレクションを見る」「席を予約する」など。リンクで作ったボタンはどの環境でも機能します。
  • **フッター:**会社名、住所、連絡先、配信停止リンク。

幅とスマートフォン

標準的な幅は約600ピクセルで、パソコンの画面や多くのメールソフトの閲覧ウィンドウに収まります。スマートフォンでは1列のレイアウトに切り替わり、文字は読める大きさ、ボタンはタップしやすい大きさにします。メールの半分以上はスマートフォンで開かれるので、まずスマートフォン版を確認しましょう。

画像と代替テキスト

読み手が許可するまで画像をブロックするメールソフトもあります。すべての画像に代替テキストを書き、画像がなくても意味が通じるようにしましょう。重要な文字を画像の中だけに入れるのは避けます。使用する権利のある画像だけを使ってください。画像はメール配信サービスやご自身のサイトにアップロードし、メールからそのアドレスを参照します。

配信停止リンク

メール配信サービスや多くの国のルールでは、すべてのマーケティングメールに簡単な配信停止の方法を入れることが求められています。テンプレートには通常プレースホルダーが入っているので、ご利用の配信サービスの配信停止リンクやタグに置き換えます。

内容の準備のしかた

  • メールの内容と、誰に送るのか。
  • **事実:**価格、日付、クーポンコードを正確に。
  • **各ボタンのリンク先:**ページの完全なアドレス。
  • フッターの情報を、表示したいとおりに。
  • **色やスタイル。**参考にしたいメールでもかまいません。

送信前にテストする

Gmail、Outlook、スマートフォンで自分宛てにメールを送ってみましょう。すべてのリンクとボタンをクリックし、プリヘッダーを確認し、画像をオフにした状態でも見てみます。

まとめ

よいHTMLメールは、テーブルとインラインスタイルで作られ、幅は約600ピクセル、スマートフォンでは1列になり、わかりやすいボタンが1つときちんとしたフッターがあります。自分で作る代わりに任せたいなら、HTMLメールを注文できます。メールの内容、オファー、ボタンのリンク先を伝えれば、完成したHTMLとそのメール用に描かれた画像が入ったアーカイブが届きます。Mailchimp、Brevoなどのメール配信サービスにインポートして使えます。お支払いは納品を承認した後にはじめて確定します。