レスポンシブHTMLメール4つの落とし穴

  • このエントリーをはてなブックマークに追加

レスポンシブタイプのHTMLメールは、閲覧するデバイスによってレイアウトや表示サイズが可変する仕様になっています。
(例えば、同じHTMLメールでもPC上で閲覧した場合では3カラムだったレイアウトが、スマートフォンやタブレットなどのモバイルデバイスでは2カラムで表示されるなど。)

メール配信を行う側としては、メルマガ購読側がどのデバイスで受信するかを全て把握することは困難なため、 ソースコードが一つで済むレスポンシブタイプのHTMLメールを採用することは手っ取り早い方法の一つです。ただし、それなりの制作コストや検証期間を要します。

最近では海外のサイトやメール配信サービスによってはテンプレートが利用できたり、自分で作成できるツールも存在します。 コーディングに関する専門的な知識がなくても、自分で簡単にドラッグ&ドロップをしてレイアウトでき、ソースコードが生成されるので便利ですよね。

しかしながらメール文書として配信する場合、実際の運用には向かないこともあります。
今回は4つの落とし穴をご紹介します。


レスポンシブHTMLメール4つの落とし穴

1.ソースコードが長すぎる

レスポンシブタイプのソースコードは、どうしても長くなります。 ソースコードが長い、つまりメール文書自体の容量が大きくなります。

通常、レスポンシブデザインでは様々なデバイスに沿った表示をさせるために「表示領域が何ピクセル以内になったら、このサイズで表示する」といったパターンがソースコード内に記述されています。
PCサイトであれば外部に置いたCSSファイルを読み込み、動きをコントロールすることができますが、HTMLメール文書として配信する場合は外部のCSSを読み込まないメーラーが存在するため、基本的にはCSSにあたる指示もHTML内にインラインで記述することになります。

また、CSSにあたる指示も全てのデバイス・メーラーで反映される訳ではありません。そのためフォントサイズや色など、表現を一つ一つ記述する必要があります。 これらの理由により、ソースコードが長くなります。

特に、冒頭でお伝えしたような無料でレスポンシブデザインのメールを生成できるツールを利用すると、ソースコードがとんでもなく長い状態で生成される場合もあります。
ドラッグ&ドロップなどで誰でも簡単にレイアウトでき、一見便利ではありますが、その分、容量が大きすぎてしまう(テンプレートの状態でも100KB前後の容量)ため、重たいメールをユーザーへ送ることになり、メールマガジンの運用に向かない場合も出てきます。

そもそも、多くのメール配信システムではメール文書の容量に上限が設けられていますので、容量オーバーで配信自体ができなくなってしまう可能性も。
たとえ配信ができたとしても、容量が大きいことで一斉配信時に時間を無駄に要してしまうことは避けられません。


2.テキストボリュームの調整が必要

作成時に意外と認識が弱まってしまうのが、テキストのボリューム加減です。
PCとタブレットでは視認性に問題がなくても、スマホでは画面がまるごとテキストで埋まってしまうことも。

メール受信環境の中で最も表示領域が狭いスマホに合わせ、テキストのボリュームを思った以上に制限する必要があります。


3.PC以外の操作性の配慮が必要

メルマガを通して特定のサイトへ遷移させる場合、リンクにも配慮が必要です。

テキストリンクであれば、PC上ならマウスオーバーをすると下線が表示されたり色が変わることでリンクである事が認識できます。
一方タブレットやスマホでの受信者にとっては指を使ってタップするという特性上、テキストのみだと認識しづらく、タップもしづらい可能性も考えられます。
この場合はテキストリンクだけ色を通常のテキストと差別化したり、画像やボタンに置き換える必要があります。

4.全デバイスへの対応は困難

PC、タブレットだけでなく携帯端末も含めるとなると機種は無数に出回っています。

そのためデバイス/メーラー/ブラウザの組み合わせは幾千通りとなり、それら全てに対応するレスポンシブHTMLメールを制作することは、相当な労力を要します。

現状、多額のコストをかけてデザイン会社に依頼しても、全ユーザーの受信環境で同じように表現することは難易度が高いでしょう。 実際に大手企業がレスポンシブデザインに関して実績のあるデザイン会社に依頼しても結局実現に至らず、通常のHTMLメールでの妥協におさまったという話も耳にします。


では、それでも1つのソースコードで多くの受信環境で同じように表現したい場合、どうしたら良いのでしょうか?


どうしてもレスポンシブタイプで送りたい。解決策は?

メール文書として運用する視点での解決策としては、配信先のデバイスを限定しコーディングを合わせる、または制作/検証コストをかけてでも、多環境で崩れないコーディングを追及するしかありません。

もしくは、リキッドデザインタイプを採用する方法もあります。
混同されている方も多いと思いますが、リキッドデザインタイプは厳密にはレスポンシブデザインではありません。単に、横幅のサイズがデバイスのサイズ(可変幅)に合わせて伸縮されるだけです。

当社では、表示崩れのリスクが少ないリキッドデザインタイプのHTMLテンプレートを提供しています。


HTMLメールテンプレート【BtoC】
HTMLメールテンプレート【BtoB】

レスポンシブHTMLメールは、あくまで選択肢の一つです。 流行を追いかけて、メールマーケティング本来の目的を忘れないようにしてください。

  • このエントリーをはてなブックマークに追加

ページの先頭へ