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

UI/UXデザイン 2015.04.30

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

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

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

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

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

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

 

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

少し技術的なはなしになりますが、htmlメールはtableタグを使って構成します。
文字コードはJIS(ISO-2022-JP)が標準です。(送信するASPなどによって指定が異なる場合もあります)
CSSは基本的にインラインで記述します。
現在の、CSSでレイアウトしてサイトを作成する方法でコーディングは行いません。
なぜならメールクライントによってサポートしているCSSが様々だからです。
広くカバーするためにも限られたプロパティを使うことでレイアウト崩れを防ぎます。
主流なメールクライアントにおけるCSSサポート状況は、下記サイトが大変参考になります。
チェックしてみてください。

【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メールの制作において最も大切なのは実際にいろんなメールクライアントへテスト配信し、確認することです。想定通りの挙動をしないことも多々ありますので、テストと調整を繰り返してつくっていきましょう。

パンタグラフブログとは?

パンタグラフブログは、社内のメンバーがデジタルマーケティングに関する情報を積極的に配信するためのブログです。トレンドやノウハウ、成功事例やリサーチ情報を定期的に配信しています。このブログがきっかけでお問い合わせいただくこともあります。気になる方は、パンタグラフ通信(メルマガ)へのご登録をお願いいたします。

最新トレンドやWebマーケティングに関するお役立ち情報を随時配信中
自社サービスの成長やマーケティングのネタにお役立てください。

メールアドレスを入力してください

メールアドレスを正しく入力してください