HTMLメールの表示確認ツール「Litmus(リトマス)」の使い方

HTMLメールの表示確認ツール「Litmus(リトマス)」の使い方

「HTMLメールを作ったけれど、確認方法がわからない」
「メールクライアントごとに実機での表示確認が大変」
こういった悩みをお持ちではありませんか?

この記事ではそんな悩みを解決するLitmus(リトマス)について使い方を解説しています。
HTMLメールの実装はメールクライアントごとにクセがあり制作者泣かせでもありますが、Litmusを使えば表示確認が一度にできるためメールマーケティングを行う場合に必須のツールと言っても過言ではありません。

高品質なHTMLメールを作成し、コンバージョンを高めていくためにもLitmusを活用していきましょう!

Litmus(リトマス)とは

LitmusはHTMLメールの表示確認ができるオンラインツールです。

Windows、Macなどの各OS、GmailやOutlookなどの各メールクライアントでそれぞれ表示確認が可能となります。
サムスンやtrello、Zendeskなど、海外有名企業でも導入されている実績があり10年以上の歴史があります。
残念ながら日本語には対応してませんが、操作自体は表示確認であればそこまで複雑ではないので問題なく利用できると思います。

料金は2021年8月現在、ベーシックプランが月99ドル、高機能のプラスプランが月199ドルとなっています。
それぞれ1週間の無料お試し期間があります。
有料なので予算と相談して導入を検討してみてください。

 

Litmusの使い方手順

 

それでは早速はじめましょう!
Litmusにログインしてみます。

 

HTMLメールを新規作成する

今回はHTMLメールが作成済の前提で進めます。
「HTMLメールを作ったことがない」という方は初心者向けの記事がありますのでこちらを参考にしてみてください。

 

ログインするとページ上部に「Build your email」とあるのでこちらの「Start building」をクリックします。

 

任意のタイトルを入力し、「Build」が選択されている状態で「Next: Pick a Template」をクリックします。

 

テンプレートを選択する

 

テンプレート一覧の選択画面に遷移します。

自作したHTMLメールを持っているのであれば、左上の「Blank email」を選択します。
もしこれからイチからHTMLを作るという方は他のテンプレートを利用するのも良いと思います。
各テンプレートはLitmusの開発陣が作成しているものなので、高品質なものが数多くあります。
コードを眺めるだけでも参考になるので一度目を通してみることをオススメします。

 

コードエディタで実装する

編集画面になるので編集に入ります。

WordPressのクラシックエディタのようにビジュアルエディタ、コードエディタと利用できます。
作成済のHTMLメールの表示確認を行うので、コードエディタを選択してコードをコピペで貼り付けます。
今回は試しにLitmusが用意してくれているテンプレートを拝借して実装してみます。

 

右側のビューに即時反映されました。
とりあえず見た目は問題なさそうですが、各メールクライアントで確認したいので上部にある「Email Previews」のタブを選択します。

 

プレビューで表示確認を行う

右側のビューが切り替わりました。

各メールクライアントが一覧で表示されています。
ダークモードもあるのが非常に有り難いですね。
サムネイルをクリックするとそれぞれ個別で表示確認できるので、気になるメールクライアントはしっかりチェックしましょう。
※余談ですがOutlookは特にクセが強く表示崩れを起こしやすいので要チェックです

 

ちなみに「Email Previews」の左にある「Choose clients」を選択するとどのメールクライアントで表示確認を行うかを個別で設定できます。
シェアの高いものや、表示確認を行わないものはこちらで取捨選択しましょう。

 

共有する

Saveをすると他の人でも表示確認できるようになります。
「Share」の「Get shareable link」から表示確認用URLを発行できます。

 

 

社内メンバーやクライアントに確認してもらいたい場合は便利な機能です。

こちらはURLにアクセスすると誰でも閲覧できてしまうため、メール配信前の機密情報や公開前情報などがあれば細心の注意を払ってください。
確認が完了したらチェックを外すと非公開に戻せます。

 

また、先程の画面からLitmus管理メンバーのメールアドレス宛にテスト配信を行うこともできます。
どちらの方法でも良いですが、各メールクライアントで確認できるURL発行のほうがオススメです。
用途に応じて使い分けてください。

 

まとめ

今回はHTMLメールの表示確認ができるオンラインツールのLitmusの使い方についてを説明しました。
実機での確認ももちろん必要ですが、それより前にLitmusを使って各メールクライアントで表示確認をしておけば効率は格段に上がります。

有料のツールではありますが、メリットが上回ると思いますので是非導入してみてください。

それでは、Litmusで快適なメールマーケティングを!

 

投稿者
カーズ
とある会社のWeb担当。GA / GSC / GTM / SEO界隈が好き。キュアコーラル→ジェントルー→キュアフィナーレ推し。

WebサービスCategory Articles