メール配信の記事
ARTICLEHTMLメール送信の注意点は？各メーラーでのテスト方法を紹介
普段からテキストメールを利用している人の中には、HTMLメールの送信方法がわからない人も多いのではないでしょうか。HTMLメールの活用は、コンバージョン率の向上にもつながります。本記事では基礎的な知識から送信方法まで、詳しく解説します。
HTMLメールの特徴をおさらい！
HTMLメールとは、HTML言語を使用して作成されたメールのことです。テキストメールとは違い、HTMLメールでは、文字のフォントや色、大きさを変えることができ、テキスト内に画像や動画を入れて自由にレイアウトすることが可能です。
HTMLメールを配信することで、文章だけでは伝わりにくいイメージをわかりやすく明示できるため、より顧客に伝わりやすくなります。
HTMLメールの配信は効果的？メリット・デメリット、流れを解説
特徴１．ユーザーの理解度・満足度が向上する
Webサイト上で一部の文字が大きく表示されていたり、画像やグラフでわかりやすい説明がされていたりするのを見たことはあるでしょう。
メールにもHTMLを使うことで、同じことができるようになります。テキストだけでは伝わりにくい文章も、HTMLメールならしっかりと相手に伝えることができます。
通常のテキストメールは文章のみのためインパクトが少なく、スマートフォンなどの小さな画面でメールを見る機会が多くなっているため、ユーザーが飽きることなく、文字だけで商品やサービスの魅力を伝えるのは難しくなってきています。
そこでHTMLメールを使えば、小さな画面でも簡単に商品やサービスのPRを行うことができるようになるのです。
読みやすいコンテンツを配信していると、ユーザーのサービス理解度や満足度が高まる可能性があります。
特徴２．具体的なイメージを伝えられる
HTMLメールを利用することで、テキストだけでは伝えきれない自社製品の魅力やオファーをしっかりと訴求できます。
リンクをクリックしなければ商品画像を見られないような状況では、多くの読者はアクションを起こしてくれないことが多いです。しかし、商品画像をメール内に表示することで、読者に手間をかけることなく商品の画像を見てもらえます。
ECサイトを運営している人や、新商品を素早く認知させたい企業にとっても非常に有効といえます。新商品の特徴について文字で長々と書かれているより、画像や実際に使ってる動画を見られるようにした方が早く簡単に魅力が伝わるでしょう。
そこから、商品サイトや自社の他サービスへ誘導するリンクの設定もHTMLメールで行うことができます。
特徴３．開封率の測定から改善に活かしやすい
HTMLメールに掲載した画像やリンクに計測用URLを挿入しておくことで、メールの開封率の測定が容易になります。
挿入したURLがクリックされることで、詳細のデータがサーバーに送信され、管理人は以下のような情報を受け取ることが可能です。
- メールの開封率
- リンクのクリック率
- 開封された場所
- 利用している端末
- ユーザーの属性
これらの情報を分析することで、今後の改善にもつながります。
例えば、メールの開封率やリンクのクリック率が高いのに、コンバーション率（成約率）が低い場合は、リンク先で読者が知りたい製品情報が掲載されていなかったり、保証制度に不安があったりするといった可能性が考えられます。
このように、HTMLメールを利用すれば、現状のメールの何が問題で、どういった改善を行えば良いかが簡単にわかるようになるのです。
HTMLメールを送信する際の注意点
HTMLメールは、Webサイトのような装飾が可能です。しかし、HTMLメール作成も閲覧も、メーラーやWebメールを利用するので、気をつけたい点がいくつかあります。
１．HTMLメール表示はメーラー毎で異なる
HTMLメールには「CSS」という言語も使用します。CSSをHTMLのソースの中に組み込むことで、レイアウトやカラー、フォントといったデザインを指定できるのです。
ただしCSSは、レイアウトやフォントの指定する方法がメーラーごとに異なるという特徴があります。そのため、送信先の端末できちんと表示されるかどうかをあらかじめ確認をとっておかなければなりません。
２．CSSよりもテーブルレイアウトが主流
テーブルレイアウトとは、tableというタグを使ってレイアウトを作成していく方法です。本来は表を作成するためのタグで、これを利用して構造を作り上げていきます。
Webページの作成では、デザインにCSSを用いるのが一般的ですが、HTMLメールの作成においてはこのテーブルレイアウトに用いるのが主流です。Webページと比較してメール環境のCSS対応が進んでいないためです。
今後、どうなるかわかりませんが、少なくとも現在においては、HTMLメールを作成にはテーブルレイアウトを用いた方が、他ソフトとの互換性などの観点からもスムーズな作成が行えます。
３．CSSならインライン設定で行う
CSSを使用して装飾する方法には、主に以下の3種類があります。
- インライン（HTMLのタグに直接装飾の情報を記述する）
- 埋め込みスタイルシート（<head>セクションの中で情報を記述する）
- 外部スタイルシート（あらかじめ情報を記述した専用ファイルを読み込む）
メールクライアントによっては、外部のCSSファイルを読み込まない可能性があるため、HTMLメールでは直接情報を入力する「インライン」を採用しましょう。
HTMLメールの作成方法とツールの機能を紹介！効率的なメルマガ運用を
HTMLメールの送信テストの方法
HTMLメールを送信する前に、相手のメーラーで想定した通りに表示されるかを確認しておきましょう。この項目ではHTMLメールの表示テストをする際のポイントを紹介します。
方法１．各メーラーから行う
各メーラーによっては想定した通りに表示されない不具合が発生する可能性があるため、様々なメーラーで表示テストを行う必要があります。
OutlookやApple Mail、GmailなどのPC用メーラーに加え、スマートフォン用のメーラーアプリでも検証しましょう。
これを怠るとレイアウトが崩れるだけではなく、受信者が利用しているメーラーによっては計測用リンクの構造がユーザーに見えてしまうこともあります。
方法２．表示確認ツールを使う
数多くのメーラーをひとつひとつ検証するのは非常に時間と手間がかかります。ここで活用したいのが、表示確認ツールです。
表示確認ツールは、組み上げたHTMLのソースを入力することで各メーラーでの見え方を再現してくれるツールです。サービスにもよりますが、30種類を超えるメーラーの表示確認を同時に行うことができます。
HTMLメールの送信方法は？Gmailなど各メーラー別に解説
各メーラーの表示上の注意点
各メーラーの表示上の、主な注意点を解説します。あらかじめ想定されるトラブルを把握しておくことで、表示テストをした際にうまく反映されていない部分をすぐに修正できるようになるでしょう。
【Outlook】
Outlookでは文字の種類をメイリオに指定すると、line-height(文字列の高さ設定)が反映されないことがあります。その場合はメイリオを指定したテキストを囲っているタグに対してpx指定のline-heightと『mso-line-height-rule: exactly;』を入力するようにしましょう。
また、Outlookは背景画像やグラデーションが使えず、使用できるカラーは単色のみという点もあらかじめ考慮しておきましょう
【Gmail】
Gmailでは、外部スタイルシートが反映されません。Gmailはセキュリティが他のメーラよりも厳しいという特徴があります。これは多くの場面でメリットなのですが、CSSやJavaScriptといった要素やタグも排除してしまうことがあるのです。
さらに、Gmailでは<style>タグを自動的に削除します。これらも、サーバーの脆弱性をついた外部の攻撃からデータを守るための措置なので、今後のバージョンアップでも取り除かれることはないでしょう。
そのためGmailでCSSを使う場合は、インラインCSSでソース内に直接記述するようにしましょう。
【iOS】
iOSでは電話番号を入れると、その電話番号が自動的にリンク化されてしまいます。また、この設定を取り除くことは、メールソフト上では難しいようです。
このような場合は、自動改行を行うための実体参照を数字の後に記述するとうまくいくケースが多いです。
また、iOS10へのアップデートによって、HTMLメールのレイアウトが崩れるという現象があるようです。この場合は調節文字の大きさを数値で指定するのではなく、%指定にすることで解決できます。
【Android】
Androidのデフォルトメールソフトでは、テキストを折り返してくれないことがあります。この場合は『word-break:break-all;』を記述するとうまく反映されます。
Android内のGmailアプリを使用すると、時々メールデザインが崩れてしまう不具合が発生することがあります。そのような場合はメニューを表示して「自動サイズ変更」を操作することで解決することもあるようです。
各メーラーからの送信方法
利用者が多いOutlook・Gmail・MacからHTMLメールを送信する方法を解説します。同じメールサービスでも送信方法が複数ある場合もあるので、それぞれ確認しておきましょう。
Outlookからのメール送信
まずは『Outlook Express』でHTMLメールを送信する方法を解説します。以下の手順で行います。
- HTMLメールに使うHTMLファイルを用意して、Outlook Expressを起動する
- ツールを選択し、オプションを開く
- ウインドウのタブから『作成』を選択する
- ひな形にあるメールのチェックボックスを選択する
- 右端にある『選択…』をクリックし、あらかじめ用意していたHTMLファイルを選択して、OKをクリックする
- オプションに戻り、適用をクリックしてOKボタンをクリック。ウィンドウを閉じる
- メールの作成を選択し、新規メールを作成する
Gmailからのメール送信
GmailからHTMLメールを送信する場合は、以下のような手順で行います。
- メールの新規作成画面を表示する
- 右下の『⋮』をクリックする
- プレーンテキストモードメニューの前にチェックが入っているか確認する（入っていない場合はリッチテキストモード）
- チェックが入っている場合は、クリックしてチェックを外す
- 書式を設定する
GmailはリッチテキストモードにするとHTMLメールを送信することができます。Gmailのデフォルト設定は元からリッチテキストモードになっていますが、あえて利用する際には念のため設定を確認しておきましょう。
送信したメールのソースを確認したい場合は、確認したいメール画面の右上にある『⋮』をクリックし、『メッセージのソースを表示』を選択することで確認できます。
Macからのメール送信
MacではAppleというメーラーがデフォルトで導入されています。AppleからHTMLメールを送信する場合は、通常のメーラーから送信する方法とテンプレートを使って送信する方法の2種類から選ぶことが可能です。
それぞれの方法について見ていきましょう。
通常のメーラーから送信
通常のメーラーからHTMLメールを送信する場合は、以下のような手順で行います。
- あらかじめ用意していたHTMLファイル一式をサーバーにアップロードする
- ツールバーにあるファイルを選択し、『このページの内容をメールで送信』をクリックする
- HTMLが本文中に挿入された新規メールが立ち上がるので、そのまま宛先や件名などの必要事項を記入して送信する
このように非常に簡単ですので、試してみてください。
テンプレートを使って送信
メールソフト内にあるテンプレートを使ってHTMLメールを送信する場合は、以下のような手順で行います。
- 新規メッセージをクリックする
- 右上に表示されている『ひな形を表示する』をクリックする
- テンプレートが表示されるので、使いたいものをクリックする使えるようになる
- デフォルトで記入されている英文をクリックして文章を打ち込む
- デフォルトで表示されている写真を、必要に応じてドラッグ&ドロップで張り替える
元からあるテンプレートを利用することで、自分で作成にかかる手間は大幅に短縮されます。テンプレートはデフォルトであるもの以外にもインターネット上で様々なものが公開されているので、探してみるのも良いかもしれません。
HTMLメールの送信テスト方法は？作成時のポイントとともに紹介
PHPでのメール送信
PHPはHTMLに埋め込んで利用することができる、スクリプト言語のことです。PHPは、Webサイトでは、カレンダー機能や訪問者カウンターなどの便利機能を追加するために用いられます。
PHP自体でもメールを送信することは可能です。関数を使った送信方法について解説します。
Mail関数
Mail関数とは、メールを使用する際に用いる関数のことです。主に『mail』と『mb_send_mail』の2種類がありますので、それぞれの特徴を見ていきましょう。
mailの場合は、以下のような記述を行います。
mail(送信先,タイトル,本文,追加ヘッダ,追加コマンドラインパラメータ)
Mail関数を使用してメールを送信すると、日本語の文書が文字化けする場合があります。そのような時は以下のようなmb_send_mail関数を用いると解決します。
mb_send_mail(送信先,タイトル,本文,追加ヘッダ,追加コマンドラインパラメータ)
そして、mb_send_mail関数を用いて日本語のメールを送信する場合は、最初に以下の2行を入力しましょう。
mb_language(“Japanese”);
mb_internal_encoding(“UTF-8”);
送信方法
メールにはテキスト形式とHTML形式の2種類の形式があります。
HTML形式でメールを送信するためには、H第四引数『$追加ヘッダ』にContent-typeヘッダを追加し、『text/html』を指定します。
$headersというタグはヘッダーについての指定を行うタグです。複数のヘッダを追加するにはCRLF（rn）を使用する必要があります。
それぞれのファイルの内容を、送りたいメールのデザインや機能によって作成していきましょう。最後に相手のアドレスを入力して送信します。
CCやBCC、STMP経由で送信するためにも、$headersからそれぞれの機能を追加する必要があるようです。
ライブラリー
ライブラリーとは、汎用性の高いプログラムのテンプレートをまとめてあるプログラム集のようなものです。
必要な機能があるたびにプログラムを1つ1つダウンロードするという方法もありますが、ライブラリーを使うことでその時間は大幅に短縮されます。
始めからプログラムを構築するのではなく、あらかじめライブラリーにあるプログラムを使用することで、業務効率の向上に役に立つでしょう。
まとめ
HTMLメールは装飾に優れ、他の単調なテキストメールと大きな差をつけることができます。読みやすく要点をしっかりまとめることで、顧客やクライアントへのアプローチの幅が大きく広がります。
テキストメールに比べると少々手間はかかりますが、その分、コンバーション率の向上などのリターンが期待できるでしょう。
ただし、HTMLメールは対応されていないメーラーが多く、送信先でデザインが崩れてしまうこともあるようです。そうならないために、しっかり表示されるかテストを行ってから送信するといった事前準備が大切となります。
また、メール配信から運営・分析まで全てをワンストップで効率化していきたい方には弊社のメール配信サービス「SPIRAL®」もおすすめです。問い合わせ・資料請求は無料ですので、まずはお気軽にお問い合わせください。
