レスポンシブ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メールの制作において最も大切なのは実際にいろんなメールクライアントへテスト配信し、確認することです。想定通りの挙動をしないことも多々ありますので、テストと調整を繰り返してつくっていきましょう。
関連する記事
#トレンド
#用語解説
#PWA
#自社事例
#モバイル
#事例集
#Webサイト改善
#マーケティングオートメーション
#ツール紹介
#メールマーケティング
#SNS
#プロモーション
#コンテンツマーケティング
#SEO
#CMS
#インフルエンサーマーケティング
#入力フォーム
#チャット
#オウンドメディア
#インタビュー
#AMP
#Webストーリー
#マーケティング
#目標設定
#Webマーケティング
#Web＆デジタルマーケティングEXPO
#7trap-site
#MEO
#公式LINE
#GA4
#Googleアナリティクス
#YMYL
#gtm
#UI/UX
#ウェビナー
#リライト
#ヒューリスティック分析
#CVR