HTMLメルマガをスマホ対応するときの注意点

2016.05.10　Posted by Kitamura

モバイル・スマートフォン

Webサイトの制作において、PC版とスマホ版の同時制作はもはや外せないタスクになってきているのではないでしょうか。

マーケティング担当のみなさん！メールマガジンは活用していますか？
テキストのみ？HTMLメール？
メルマガは大きく分けて2種類ありますが、HTMLメールを使っている方は特に気を付けなければならないことが一つあります。

それはスマホ対応です。
Webサイトのスマートフォン対応は今や当たり前ですが、最近ではメールマガジンのスマホ対応にも注目が集まり始めています。

キレイに開けなければゴミ扱い

スマホに対応しないHTMLメールを送った場合。
ユーザーがせっかく開いてくれたHTMLメールも、その内容がキチンと表示されない可能性が出てきます。
開封率は依然と変わらないけど、ユーザーからのレスポンスが減っている、なんてことありませんか？
そうしたケースの一因がこれです。

ほかにもこんなデバイス間の特長が邪魔をします。
・初期の状態では画像表示が無効
・デバイスの幅に表示が左右される

ここで恐ろしい話をしますね。
とある調査のお話です。

ユーザーは、自分のモバイルデバイスできれいに表示されないデータがあった場合、そのうちの80%の人がHTMLメールを消してしまうというリサーチ結果が存在するのです。

それはHTMLメールでも同じです。だからこそ最適化する必要があります。
「苦労して時間をかけて作ったメルマガが読まれないなんて…」
と、嘆く前にユーザーの閲覧環境に対応することが必要になってきます。

HTMLメールの前提

ここでおさらいです。
HTMLメールは、読者のメール閲覧環境やメールソフトによって表示に違いが出るため、複数の受信環境でチェックする作業が欠かせません。
ではどのように対応したらよいでしょうか。

まず、HTMLメールを作成する際に以下に気をつけなければなりません。

○テーブルレイアウトでのコーディング
コーディングには<table>タグを使って、HTML内でレイアウトや見栄えなどを制御するテーブルレイアウトと、CSSで見栄えをコントロールするフルCSSレイアウト方式の2つがあります。

テーブルレイアウトを利用することで、メルマガが表示される際のレイアウト崩れを防ぐことができます。特にOutlookの2007／2010／2013ではfloatタグが未対応なため、Outlookを利用するユーザーのためにテーブルレイアウトが推奨されます。

○CSSはインラインで記述する
インラインで記述しておかないと、<head>内のCSSを読み込まないメールソフトに対応できません。Google Gmail（アプリ、Webメール）、Windows Live メールなどがそれに該当します。

○画像は絶対パスで指定する
メルマガ自体に画像ファイルを添付することができないため、まずWEBサーバー上に画像ファイルをアップし、その画像URLを以下の記述します。
<img src=http://xxx.xxx.xx.xx/xxx/gazou.gif>
これで画像表示が確実にされるようになります。

○各メーラー独自の実装を吸収する
先ほども書きましたが、Outlookではcssのfloatに対応していないためテーブルレイアウトを使わなければなりません。また、Gmailでは、styleタグの中に記述したcssを読み込みませんので、スタイルはインラインの記述が必要となります。
そのほかにも、各メーラー独自の仕様があります。そういった多様な背景に対応するための方法として、テンプレートの活用があります。

たとえばこちらのInkでは、メーラーごとの仕様を吸収できるスタイル、グリッド、パネルなどの構成要素が定義されています。これらを上手に活用しつつ、独自の実装を施して、まずがPCのメーラーを吸収したHTMLメールをデザインしましょう。

スマートフォンへの対応

スマホ向けのHTMLメールを作る際も、まずはPC向けのHTMLメールを用意します。styleタグ内のCSS読み込みとMedia Queriesに対応しているiOSの場合は、Webサイトの制作と同様に、@mediaルールを使ってメールを作成します。

Gmailアプリの場合は、PCに対応したHTMLを自動的にスマホサイズに調整する機能があります。こちらにうまく嵌れば良いのですが、なかなかそうはいきません。スマホ版に作ったつもりが、勝手に調整されてレイアウトが崩れてしまうなんてケースもあり得るからです。

結局のところ、受信環境によって表示が異なるのでWEB上にランディングページとしてメルマガのデータを用意しておき、「見えない方はこちら」で飛ばすやり方が、一般的な解決策とも言えますね。

PCユーザーとスマートフォンユーザーのすべてに最適な表示を提供することは現状難しく、どこかで割りきらなければいけません。
結局のところ、どのようなコンテンツをどのようなターゲットに向けて配信するか、メインユーザー層がどこかということを把握し、ユーザーごとに内容や配信を工夫していくことが重要になりますね

関連記事こちらの記事も合わせてどうぞ。