5log

日々の仕事の備忘録

「Litmus」を使ったHTMLメールマガジンの表示確認の手順

今年はメルマガに絡む案件業務が何度かあったのですが、メルマガ案件で一番悩ましいのが様々なメールクライアントでの検証です。OS×メールクライアントで無数の組み合わせがあるため、それらの環境を社内で用意するのはまず無理でしょう。

そんな折、業務でメルマガ検証用ツールの「Litmus」というツールを使用したメルマガの表示検証を行なったので、その手順について記録していこうと思います。

Litmusとは?

litmus.com

Litmusとは、HTMLメールを様々なOS・メールクライアントで確認できるサービスです。残念ながら日本語に対応していませんが、ツールの操作はシンプルなので、私のように英語がわからない人でも問題なく使用できると思います。

f:id:K3105:20181215182903p:plain

事前準備:Litmusを契約する

ここで残念なお知らせですが、Litmusは有料のツールとなります。体験版やフリープランもないので、メルマガを利用する際は事前にツールの料金を検証費用分として確保しておきましょう。

Litmusの契約はトップ画面右上の「Start your free tour」から始めます。最初に色々説明が出てきますが、それらはスキップしていきます。

費用は「Monthly(月額)」と「Annual(年間)」の2つのプランがあります。年間プランの方が1ヶ月あたりの料金は安くなるので、ツールの利用が一時的なものか継続して使うものかで判断してください。今回は単発の案件での利用だったのですが、最短で1ヶ月のみ、の契約も問題なくできました。あと、海外製ツールのため、料金はドル換算になるのでそこも注意が必要です。

f:id:K3105:20181215183842p:plain

今回は一番安いBasicプランの月額を契約したいと思うので、金額の下にある「Buy now」ボタンをクリックします。

f:id:K3105:20181215185424p:plain

ユーザー登録の画面になったので、情報(メールアドレス、名前、パスワード)を入力していきます。最後の質問は答えなくても先に進めたので、わからなければスキップでよいと思います。

f:id:K3105:20181215185728p:plain

その後はクレジットカードの登録画面になるので、情報を登録すれば、アカウントが登録されて、利用が開始できると思います。(仕事で使って契約面は他の人に任せていたので、完了時にどんな画面が出てくるのか知りませんが。。)

1. Litmusでメールの受信設定をする

まずはHTMLメールを確認するための設定を行ないます。登録・ログインした後、下記のようなダッシュボード画面が表示されるかと思いますが、そこの右上に表示されている自分の名前テキストをクリックすると、メニューが出てくるので、その中の「Setting」をクリック。

f:id:K3105:20181215191801p:plain

その後に出てきたページの左に、メニューが色々出てくるので、その中から「Account」をクリックします。すると色々な設定項目が出てくるので、その中の「Checklist」を確認します。

f:id:K3105:20181215191812p:plain

@litmustest.comの前にテキスト入力欄があるので、好きなアドレス名を入力します。ここで入れたメールアドレスが、Litmusで表示確認を行う際のメールアドレスになります。

2. Litmusで確認するOS・メールクライアントを選択する

続いて、左メニュー内から「Email Clients」を選択します。すると、メールクライアントの選択画面になり、様々なOS・メールクライアントのチェックリストが出てくるので、チェックが必要な項目に印をつけていきます。

f:id:K3105:20181215192417p:plain

ここで「全部やればいいのでは?」と思う方もいるかもしれませんが、Litmusには契約プランによって確認できる数に限りがあります。(Basicプランだと1000回まで)1クライアントにつき1回消費となるので、例えば30クライアントで確認を行い、その際2回修正+配信やり直しが発生した場合「30(メールクライアント数)×3(初回~3回目の確認まで)=90回」を消費してしまいます。そのため無駄にクライアントを増やすのは止めておくのが無難です。

現在の確認回数の消費量や上限は、左メニュー内の「Usage」から確認することができます。

3. Litmusにメールを送る

これで設定が完了したので、HTMLメールを1で設定したLitmusのメールアドレスに送ります。送信後、TOPページに戻り左のメニュー内にある「Checklist」をクリックして、送信したメールが届いていれば確認の準備は完了です。

それを開くと、先程選択したメールクライアントが一覧で表示されるので、そこからどれか一つを選んでクリックすると、実際の大きさの画面キャプチャを確認することができます。

f:id:K3105:20181215194212p:plain

注意点として、このツールでは各クライアントに届いたメールを「画面キャプチャ」しているだけなので、GIFアニメなどHTMLメール内で動いている要素などの確認はできないので注意が必要です。

LitmusによるHTMLメールの確認手順は以上となります。

まとめ

最近はSNSやアプリなどが活発で、メルマガはやや微妙な立ち位置になりつつあるものの、やはり媒体として根強いのもまた事実。こうしたツールで確認を効率化することで、よりコンテンツ内容を面白くしていくことに時間を使っていきたいですね。