メール配信の記事

ARTICLE
メール配信

HTMLメールの送信テスト方法は?作成時のポイントとともに紹介

掲載日:2019年1月18日更新日:2024年2月21日

HTMLメールは、画像などを使って具体的なイメージを伝えやすいメール配信方法ですが、デザインの崩れがなく正しい状態で配信するためには、テスト送信が必要です。HTMLメールの作成やテスト送信のポイントを知り、効率的な配信に活かしましょう。

HTMLメールのメリット

HTMLメールのメリット

HTMLメールには、画像の設置や効果測定ができるメリットがあります。画像の設置によってイメージを伝えやすくなるほか、効果測定によって読者の傾向を把握し、より効果的なメール配信ができるのです。

イメージを伝えやすく理解度が高まる

HTMLメールならメール内に画像を設置できます。文章では伝わりにくいイメージも、より具体的に伝わりやすくなると言えるでしょう。

ユーザーが魅力を感じ、商品やサービスの詳細を知りたいと思った場合、メール内のURLをクリックします。HTMLメールなら、リンクをボタンやバナーで表示できるので、よりユーザーがアクションを起こしやすくなるというメリットもあります。

開封率の測定から改善に活かしやすい

どんなメールだと開封率が高いのか、または低いのかを知ることで、それに合わせた改善策を打てます。
開封率が低いのには、タイトルに魅力を感じてもらえていなかったり、配信時間が適切ではなかったりといった原因が考えられます。いくらHTMLメールを使用していても、読まれなければ意味がありません。

どんな時にどんな情報が欲しいのか、ユーザー目線に立ってメールを送るようにしましょう。

HTMLメールの配信は効果的?メリット・デメリット、流れを解説

HTMLメール作成時のポイント

HTMLメール作成時のポイント

HTMLメールを作るときには、受信したユーザー全員が表示できるHTMLメールを目指しましょう。そのために最適な方法を紹介します。

インラインスタイル

まず注意するべきことは、レイアウトのポイントです。HTMLメールはインラインスタイルで作成しましょう。
インラインスタイルというのは、HTMLのデザインを指定するCSSの適用方法の1つで、HTMLの各要素にstyle属性を追加したコードの執筆方法です。具体的には『<要素名 style=”~”>』と記述します。

インラインスタイルを使ったHTMLメールなら、さまざまなメーラーで問題なく表示されます。配信したメールをユーザーに確実に見てもらえるのです。

やや専門的な知識を必要とするため、初心者の方はテンプレートを使用することをおすすめします。無料で配布しているものも多いため活用してみてください。

画像関連

HTMLメールは画像を入れられるのがメリットです。しかし、画像を入れるときには、4点注意しましょう。

  • 絶対パスを使用する
  • imgタグのスタイルにdisplay: block;を入れる
  • 背景画像にしない
  • 画像を圧縮する

絶対パスは、URLで情報がどこにあるかを指定する方法です。HTMLメールでは、絶対パスを使わないと画像が表示されませんので注意しましょう。

また、画像の上下に隙間ができる場合には、imgのタグのスタイルに『display:block;』を入れることで解決できます。

メールクライアントや設定によっては、背景画像が表示されないものも存在します。背景画像が希望通りに表示されないとレイアウトが崩れ、可視性が低下しかねません。そのため、最初から背景画像は使用しないように注意しましょう。

画像を圧縮して軽量化することも大切です。スマホやタブレットでHTMLメールを見ることが増えているので、画像を軽量化して読者の負担を減らすよう心がけましょう。

テーブルレイアウトと表示確認

HTMLメールを、多くのメールクライアントで表示させるには、『table』というタグでレイアウトを構築するのが一般的な手法です。テーブルレイアウトなら、CSSレイアウトと比較してデザインが崩れにくいというメリットがあります。

しかし、テーブルレイアウトには、視覚障がい者用の読み上げソフトに対応しにくいなどのデメリットも存在しています。状況に応じて選択しましょう。

HTMLメールは送信前にテストを!

デバイスや環境によって表示が異なります。メール配信時にはかならずテストを実行しましょう。

あらゆるメーラーでの表示を確認すること

せっかくつくったHTMLメールですから受信者側のメーラー環境によって不達、見えないという事態は避けましょう。ユーザーの満足度も低下してしまうリスクもあります。そのため様々なメーラーで表示テストをしましょう。PCの環境だけではなく、スマホ等デバイスごとに異なる環境もふまえておくことが大事です。

表示確認ツールを使う

ひとつひとつ行っていくのは、手間もかかりますし確認漏れが発生するリスクもあります。そこで表示確認ツールの活用も検討しましょう。
表示確認ツールは、組み上げたHTMLのソースを入力することで各メーラーでの見え方を再現してくれるツールです。
いろんな種類がありますので自社が必要な機能を網羅しているところを確認しましょう。

HTMLメールの作成方法とツールの機能を紹介!効率的なメルマガ運用を

主なメーラーでの送信テストの方法

主なメーラーでの送信テストの方法

HTMLメールを作成したら、配信する前に送信テストをしましょう。送信テストでデザインの崩れをチェックし、修正してから配信することで、多くのユーザーに正しいデザインのメールを配信できます。

Outlook

Outlookは、HTMLメールのデザインの崩れが起きやすいと言われています。そのため、配信前の送信テストが欠かせません。ただし、単に送信テストをするだけでは、修正作業の手間が大きくなってしまいます。そこで活用したいのがWordです。

作成したHTMLメールをWordで開くと、デザインの崩れをチェックできます。Wordで修正箇所のあたりをつけておくと、スムーズに修正して配信できるのです。

Mozilla Thunderbird

Mozillaが提供している無料メールクライアント『Mozilla Thunderbird』を、送信テストに利用することもできます。テストの手順は下記の通りです。

  1. 『HTML形式でメッセージを編集する』をチェックする
  2. 『HTMLメールを作成する』で、作成したHTMLメールを挿入する
  3. 『オプション』→『送信形式』→『HTMLのみ』か『テキストとHTML』を選択していることを確認し、自分宛にメールを送信
  4. 受信したメールを確認

HTMLメールは送信テストをして、正しく表示されることを確認しましょう。

HTMLメールの送信方法は?Gmailなど各メーラー別に解説

まとめ

HTMLメールは、画像を使えるので、ユーザーに魅力を伝えやすいメリットがあります。また、開封率が測定できるのも大きなメリットです。これにより、メール配信の効果を高めたり、メールマーケティングに活用したりできます。

ただし、HTMLメールは、メールクライアントによって正しく表示されないことがあるので注意が必要です。多くのメールクライアントで表示されるようにするなら、インラインやテーブルレイアウトで作ること、画像の設置方法に気をつけることを意識してください。

作成したHTMLメールは、送信テストをすることも大切です。配信前にテストをして、正しく表示されることを確認します。HTMLメールは作成のポイント押さえ、スムーズに配信しましょう。

また、メール配信から運営・分析まで全てをワンストップで効率化していきたい方には弊社のメール配信サービス「SPIRAL®」もおすすめです。問い合わせ・資料請求は無料ですので、まずはお気軽にお問い合わせください。

SPIRAL®のお問い合わせ・資料請求はこちら

資料ダウンロード

1万社導入の高機能メール配信/SPIRAL® Mail