レスポンシブhtmlメールの作り方と3つの注意点

UI／UXデザイン 2015.04.30

スマートフォンの一般化に伴いメールをスマートフォンから閲覧する機会も増えてきました。

140414-pic_03

【引用】Directus Inc.　2014年　企業から配信されるメールのスマートフォンにおける受信状況アンケート調査報告
全体の約3割の人がメールの閲覧において「スマートフォンファースト」であることが分かりました。主にPCで見ている人も加えると9割以上の人がメールをPCとスマホの両方で見ています。一方で「パソコンのみで見ている」と答えた人の割合も増加しました。
いずれにしても企業がPC向けメールを配信する際には、PC・スマホ両方で閲覧されることを想定することはもはや当たり前の状況と言えそうです。

『パソコンでもスマートフォンでもどちらでも見やすく表示させたいけど、パソコン用のメールとスマートフォン用のメールを2本制作し続けることは運用コスト的に難しい。』という時には「レスポンシブhtmlメール」がひとつの対策としてオススメです。弊社でも昨今制作の依頼が増加しているレスポンシブhtmlメールについて、基本的な作り方と注意点をまとめました。

htmlメールをレスポンシブ対応することのメリット

レスポンシブhtmlメールはスマートフォンやタブレットなどのデバイスにあわせてレイアウトを組んだhtmlメールのことです。

レスポンシブ対応をしていると、例えば同じhtmlメールでもPCから見た時とスマートフォンから見た時でレイアウトが変わります。

そのため、スマートフォンからみたときに文字が小さかったりタップしづらかったといった問題を解決します。

レスポンシブhtmlメールの作り方

まずhtmlメールは、現在の一般的なサイトのコーディング方法とは異なります。

そこで、簡単にですがレスポンシブhtmlメールの作り方と注意点を3つのポイントとしてまとめました。

【1】PCの一般的なメーラーでみたときにレイアウトが崩れないhtmlメールをつくる
【2】CSSを使って、スマートフォンなどの画面幅が狭くなったときのレイアウトを記述
【3】レスポンシブ時のレイアウトを意識

それではポイントひとつひとつを解説していきます。

【1】 PCの一般的なメーラーでみたときにレイアウトが崩れないhtmlメールをつくる

少し技術的なはなしになりますが、htmlメールはtableタグを使って構成します。

文字コードはJIS(ISO-2022-JP)が標準です。(送信するASPなどによって指定が異なる場合もあります)

CSSは基本的にインラインで記述します。

現在の、CSSでレイアウトしてサイトを作成する方法でコーディングは行いません。

なぜならメールクライントによってサポートしているCSSが様々だからです。

広くカバーするためにも限られたプロパティを使うことでレイアウト崩れを防ぎます。

主流なメールクライアントにおけるCSSサポート状況は、下記サイトが大変参考になります。

チェックしてみてください。

Guide to CSS support in email

【2】 CSSを使って、スマートフォンなどの画面幅が狭くなったときのレイアウトを記述

レイアウト変更したい要素にクラス名を付け、Media Queriesを使ってスマートフォン用レイアウトのCSSを記述します。

<head>
@media screen and (max-width: 480px){
// ここに記述
}
</head>

これで、画面の横幅が480pxより小さくなったとき（例えばスマートフォンで閲覧した場合など）media screenに記述したレイアウトが適応されます。

【3】レスポンシブメールを作成する上での注意点

「【1】一般的なメーラーでみたときにレイアウトが崩れないhtmlメールをつくる」の項目にも関連しますが、<body>内にはスマートフォン用の具体的なコードはかかないようにしましょう。

例えばレスポンシブサイトを作るときは、PC閲覧用は要素Aを表示・要素Bは非表示、スマートフォン閲覧用は要素Bを表示・要素Aは非表示にするといった対応が可能ですが、メールの場合は「display:none;」のプロパティが効かないメールクライアントがあるため想定していた通りの表示にならないことがあります。

以上、基本中の基本解説となります。レスポンシブhtmlメールの制作において最も大切なのは実際にいろんなメールクライアントへテスト配信し、確認することです。想定通りの挙動をしないことも多々ありますので、テストと調整を繰り返してつくっていきましょう。