より良いHTMLメールの作り方

この記事は How to Create HTML Emails の抄訳です。

HTMLメールを作るために、必ずしもコーディングのスキルに長けている必要はありません。

HTMLメールを作成する際に、WYSIWYG（What You See Is What You Get = 見た通りに作成できる）エディタを使ったことがある人も多いでしょう。エディタ上でモジュールをドラッグ＆ドロップするだけでメールの全体構成を作成でき、見た目や動作を簡単に定義することができます。

では、HTMLの知識は全く必要ないのでしょうか？必ずしもそうとは限りません。

エディタでモジュールを配置することで大部分を作成できるのは事実ですが、細部の作り込みや調整を行うには限界があります。例えばaltテキストや罫線、余白、画像サイズといった要素を微調整するためには、HTMLの修正が必要です。

Twilio SendGridのエディタでは、モジュールのドラッグ＆ドロップによる編集に加え、HTMLコードを直接編集することも可能です。メールの印象を自在にコントロールできるため、全てのメッセージに一貫したブランドイメージを与えることができます。

HTMLメールの作成はそれほど難しいことではありません。この記事では、より良いメール制作のためのヒントと、役立つテンプレートをご紹介します。

HTMLメールを作成する際のポイント

HTMLメールのコーディングは比較的簡単ですが、受信環境によっては想定と違う動きをすることや、見え方が異なる場合があることに注意が必要です。次の5つのポイントに沿って、どんな受信環境でもメールをきれいに表示できるようにしましょう。

１．レスポンシブ対応をしよう

メールを読む環境は様々です。同じ内容のメールであっても、表示のされ方はOSや端末、画面サイズ、ブラウザやアプリケーションによって変わります。意図しない見え方を避けるため、個々の受信環境に適したデザインで表示させる「レスポンシブ対応」が必須です。注意点をいくつかご紹介します。

• CSSにメディアクエリを追加しましょう。デバイスのスクリーンサイズに応じて、どのスタイルを適用するかを指定できます。
• レイアウトは1カラムの構成にしましょう。2カラムでは、モバイルでメールを開いた際の表示密度が高くなり、読みにくい可能性があります。
• フォントサイズを大きくしましょう。13pt以上が推奨です。
• リンク同士の間隔を空けましょう。受信者が誤ってクリックし、顧客体験が低下することを回避できます。
• altタグを設定して、画像の読み込みに失敗しても画像の概要がわかるようにしましょう。

２．画像の使いすぎは避けよう

画像は視覚的に情報を伝えるうえで効果的ですが、多用には注意しましょう。メールの読み込みが遅くなったり、正しくレンダリングされない可能性があります。画像サイズを小さくし、メール全体を画像で占めないようにすることが重要です。

３．シンプルにしよう

メールの作成に没頭すると、独自性やデザイン性を追求するあまり、本来の目的を忘れてしまうことがあります。どのマーケターも、ウェブサイトへの訪問や商品購入、イベントへの申込みといった行動を促すために、メールを送信しているはずです。読者へのメッセージが明確に伝わるよう、メールの内容はシンプルにすることを心がけましょう。

メールは、受信者にとって価値あるコンテンツの魅力を伝え、次のアクションに導くための手段です。「目的達成のために本当に必要なのか」を常に考え、不要な要素はメールに含めないことが大切です。

４．テンプレートを有効活用しよう

一からHTMLを書くのが大変であれば、既成のメールテンプレートを使うのも有効です。Twilio SendGridが提供するテンプレートは、見栄えの良さとレスポンシブ性を兼ね備えています。

もし100%満足できるテンプレートがなくても、理想に近いテンプレートをベースに必要な箇所だけ編集する方法があります。HTMLのコーディングに慣れてない人におすすめの方法です。

５．テスト送信しよう

テストせずに一斉送信することは避けましょう。受信者の環境によってどのように見えるのか、あらかじめ確認しておくことが重要です。

よくあるテスト方法として、実際にメールを送信し、様々な環境でメールを開いてみるといったものがあります。手間はかかりますが、確実な方法です。

他には、外部ツールを使って送信前に受信環境ごとの表示を確認する方法もあります。こちらでは「Litmus」というツールを使ったテスト方法をご紹介していますので、ぜひご覧ください。

Twilio SendGridのテンプレートを活用しよう！

Twilio SendGridでは、ニュースレター、リマインドメールなど、様々なシーンで使えるテンプレートを無料で提供しています。ギャラリーページから用途に合うものを探してみましょう。もちろんレスポンシブ対応しているので、すぐに利用できます。

使い方は簡単です。気に入ったテンプレートを選択しダウンロードを実行すると、HTMLコードをメールで受け取ることができます。SendGridのデザインエディタにインポートして、ご自身のイメージに合わせて調整してください。

他にも、テンプレートの提供サイトをこちらでご紹介しています。

今回ご説明した5つのポイントを意識して、より良いHTMLメールを作成しましょう！