テスト配信は「無料」「カンタン」に行える！
HTMLメールは、メールクライントによって記述したスタイル通りに表示されないケースが多々発生します。そのため、事前にテスト配信をおこなって表示を確認し、不具合の修正を重ねていく必要があります。
その際どういう方法でテスト配信は行われるのでしょうか。
例えばHTMLメールの制作依頼を受けた際、クライアント側、制作側で以下の方法でテスト配信を行うと思います。
①クライアント側：契約しているメール配信システムを使う
②制作側：サードパーティのメール配信システムを使う（Litmas、Mailchimp）
制作側でクライアント側で契約しているメール配信システムへのアクセス権限を付与されていれば、問題ないのですが、テストはクライアントが行い、テスト結果をキャプチャ等で渡されるケースが大半ではないでしょうか。
そうなると、不具合の原因をどう特定していいのか見当もつかず、工数ばかりかさんでしまい、見積もり金額を誤ってしまった…という後悔がはじまりモチベーションは低下の一方です。
私も業務でHTMLメール制作の依頼を受けるたびに、この壁にぶち当たります。クライアント側と制作側で同一の環境のもと、テスト配信が行えない場合、どうすればよいのでしょうか。
そもそも同一の環境で行ったテストではないことをご承知いただき、独自の方法でテスト配信を行うしかないです。
その場合は前述の②にあるLitmas、Mailchimpを使わざるを得ないのですが、実際にトライしてみたところ、デメリットが先行してしまい利用するのをやめてしまいました。（無料では一部機能・サービスしか使いない、日本語非対応などが主な原因です）
代わりになる方法を探していた時に偶然見つけたのが「Thunderbird」です。
Thunderbirdはメール本文にHTMLのソースを挿入すると、HTMLメールが作成でき、送信アドレスを指定すれば複数のメールクライアントでテストすることができます。
Thunderbirdなら簡単にテスト配信が可能。しかも無料!
thunderbirdを利用してのテスト配信方法は以下の手順になります。
- メールを受信するデバイスを用意する
▼PC
Windows、Mac
▼スマホ
iOS、Android
PCはWindowsとMac、スマホはIOSとAndroidを用意できると、デバイス間での差異の有無も検証することができます。ご自身の手元になければ、友人知人のデバイスに送信して協力いただくことでも対応できます。 - 確認したいメールクライアントのアドレスを取得する
▼プロバイダから発行済みのメールアドレスもしくはGmailのアドレス
例
ｘｘｘ@ｘｘｘ.so-net.ne.jp
ｘｘｘ@ｘｘｘ.biglobe.ne.jp
ｘｘｘ@ｘｘｘ.ocn.ne.jp
ｘｘｘ@ｘｘｘ.plala.or.jp
ｘｘｘ@ｘｘｘ.gmail.comテストで送信したメールをどのメールクライアントで確認したいかで、必要となるメールアドレスが変わってきますが、プロバイダ契約時に発行済みのメールアドレスがあれば、PCメールのチェックはこれひとつでまかなえます。上記メールアドレスを持っていないのであれば、GmailのメールアドレスでもOKです。下記メールクライアントに対応させたい場合は、それぞれのメールアドレスの取得が必要になります。▼Webメール
yahooメール：ｘｘｘ@ｘｘｘ.yahoo.co.jp▼キャリアメール
Docomo：ｘｘｘ@ｘｘｘ.docomo.ne.jp
au：ｘｘｘ@ｘｘｘ.au.com など
SoftBank：ｘｘｘ@ｘｘｘ.yahoo.co.jp
Y!mobile：ｘｘｘ@ｘｘｘ.ymobile.ne.jp
Rakuten：ｘｘｘ@ｘｘｘ.rakuten.jp - hunderbirdのアカウントを取得する。
ダウンロード、使い方等の詳細は、下記ご参考ください。https://www.thunderbird.net/ja/
未完成の状態でも問題なし。なるべく早めにテストを！
「HTMLメールが完成していないうちにテスト配信を始めて、意味あるの？」と思われた方もいらっしゃると思いますが、もちろん理由があります。
完成形に近いレベルまで記述してしまうと、テスト配信のメールに表示不具合が発生した場合、原因の特定に時間を費やす場合もあるからです。
テスト配信→検証→修正という一連の作業に不慣れな私も、さっそくこのドツボにハマり…。
一番最初に作成したhtmlファイルは、インラインへのスタイル記述とheadのstyleタグへの記述の双方を行っていました。
この時、フォントの装飾に関するスタイルが効いていないメールクライアント、幅、高さが崩れるメールクライアントなどなど、複数の不具合が発生し、それぞれの原因を特定するのが難しくなり、ゼロから書き直すことに。
htmlメールの作成に不慣れな場合は、例えば以下の手順を参考にしていただければ効率良く進められます。
- インラインのみで「レイアウト」に関するスタイルを記述する
- テストメールを配信する。
- テストメールの不具合を検証→修正する
- インラインのみで「フォントの装飾」に関するスタイルを記述する
- テストメールの不具合を検証→修正する
headのstyleタグやメディアクエリ（@madia）など、一部のメールクライアントで非対応のスタイルを使用する際は、対応不要のメールクライアントであることを認識した上で使用することをおすすめします。
特にクライアント依頼案件の際は要注意です。事前に対応するメールクライアントを確認したつもりでも、後出しで追加される場合も想定しておきましょう。
インラインへのスタイル記述のみでの作成を想定しておけば、メールクライアントへの対応はある程度行えます。
下記あたりを特に気をつければ、精度はさらに高まります。
- margin、paddingが効かない場合は、trタグでwidth、height指定
- Gmailのスマホwebmailが厄介。その他メールクライアントでは生じない不具合が頻繁に発生
- Outlookでのフォント装飾は、fontタグに記述すると確実
コメント