HOME
ブログ
マーケティングコラム
「WEBサイト制作」と「メール制作」の違い４つのポイント（前編）

「WEBサイト制作」と「メール制作」の違い４つのポイント（前編）

マーケティングコラム

2015.12.18

「WEBサイト制作」と「メール制作」、
どちらもWEBディレクターがプロジェクト推進・品質管理を行う仕事です。
ところが、いざ、実際にディレクションしてみると、
両者それぞれで制作の進め方・意識すべきポイントが、けっこう異なります。

今回は、特に「メール制作」のディレクションを行う上での注意点
「WEBサイト制作」と比較した時の違いをご紹介します。
※4つのポイントを、前・後編に分けて連載します。

＜前編＞
◎チャネル特性の違い
◎原稿の違い

＜後編＞
◎ブラウザとメーラーの違い
◎リリースの仕方の違い

後編はこちら＞「WEBサイト制作」と「メール制作」の違い４つのポイント（後編）

チャネル特性の違い

＜WEBサイトの場合＞
その掲載内容に関心を持ったユーザーにアクセスされます。ユーザーの関心が高い状態・タイミングで閲覧されるので、能動的な態度で内容を読んでもらえます。

＜メールの場合＞
メールの場合、一度、購読者登録をした後は、メールを受け取るタイミングは送り手次第です。購読者は、ただメールが届くのを待っています。

メールは情報の受け取り方が受動的です。
そのため、件名や内容でユーザーの興味・関心を引き起こすことがとても重要です。
興味・関心を起こせなければ、そもそもメールは開封もされませんし、
WEBサイトに載せている情報をメールですべて伝えようとすると、
わかりづらい印象を与え、読み途中でメールを閉じられてしまうおそれがあります。

メールはコンテンツへのフックと割り切り

　・メールはコンテンツのポイントをしぼって簡潔に
　・詳細はリンク先のWEBサイトで紹介

と、メールの役割にあった内容を意識して構成するのが基本です。

原稿の違い

WEBサイトの場合、各ページはHTMLで制作するのが基本です。
メールの場合、原稿の種類としては、HTMLとテキストの2種類があります。
それぞれにメリット・デメリットがあるので、
メールの目的やスケジュール、予算などに応じて、
どちらのメールを使うか検討してください。
※詳しくは過去記事「HTMLメールってどんなメール？」をどうぞ。

■HTMLメールの特性
HTMLメール用のHTMLには、WEBサイト用のHTMLとは異なる、
HTMLメール特有の作り方があります。

（１）テーブルレイアウトでコーディング
現在ではWEBサイトはCSSを使ってレイアウトするのが通常ですが
HTMLメールの場合は、テーブルレイアウトでコーディングするのが一般的です。

メールの場合、メーラーごとにCSSの解釈が異なることから、
メーラーの違いによる表示崩れが起きやすくなります。
テーブルレイアウトで、画像やスペースなどのサイズを厳密に指定することで
メーラーの違いによる表示崩れの発生を少なくすることができます。
※メーラーごとの特徴については
過去記事「メールの表示検証って、どうしたらいい？」でご紹介しています。

（２）外部CSSへの対応

WEBサイト制作の場合、サイト内で共通するスタイル設定には、
メンテナンス性を考慮して外部CSSファイルを読み込ませるケースが多くあります。
メールの場合、ほとんどのメーラーが外部CSSファイルを読み込めません。
そのため、CSSは、HTML内へインラインで記述します。

ただし、これには例外もあり、
スマートフォンの標準メールアプリは、外部CSSを読み込むことができます。
デバイス・環境ごとの外部CSSへの対応を簡単にまとめると、下記のようになります。