HTMLメールの作り方1~通常のウェブページ制作との違い~

  • このエントリーをはてなブックマークに追加
【企業担当者が知っておきたいHTMLメールマガジン作成 第2回】

第2回は「HTMLメールの作り方」について説明をしていきたいと思います。

HTMLメールは、通常のウェブページ制作とは違い、気を付けないといけない点がいくつかあります。最も大きな違いとしては、メールはメーラー(Outlook等のメールを閲覧するソフト)やウェブメール(Gmail等)で閲覧するという点。それぞれのメーラーによって使えるCSSが異なり、通常のウェブページを作るよりも使える技術が制限されます。また表示検証も、確認すべきメールクライアントが多いという特長があります。今回は、企業のご担当者が知っておきたい必要最低限の情報をご紹介したいと思います。


最大の注意点=HTMLメールはメーラー毎にできることが違う

まずはCSSの説明を簡単に。

「CSS」とは簡単に言うと、ページのレイアウトや色、フォントなどのデザイン表現のための言語です。HTMLのソースの中に、「この見出しは、こんなデザインにするよ」というような指定を付け加えるようなイメージです。CSSには、背景色を指定するプロパティ、余白を指定するプロパティ、フォントサイズを指定するプロパティ・・・様々なプロパティがあります。例えば以下のページだと、「Support」という見出しは<h2>というHTMLタグで書かれていて、その<h2>タグには、"Oranienbaum"というフォントや、"center"という真ん中寄せの位置の指定が書かれています(下図参照)


CSSの説明


このCSSのプロパティで指定できることが、メーラー毎に異なります。以下のサイトでメーラー毎に使えるCSSを比較したものが掲載されていますが、これを見ただけでも「×」がたくさんあることがわかります。例えば、outlook.comでは「background-image(つまり背景画像)」が使えないとなっています。


■The Ultimate Guide to CSS

The Ultimate Guide to CSS


このように、メーラーはできることが制限されます。
つまり、『HTMLメールでは、CSSではなくテーブルでレイアウトし、装飾には幅広いメーラーで使えるCSSのみを使う。』というのがポイントになります。


※The Ultimate Guide to CSS
https://www.campaignmonitor.com/css/


どう作るか?テーブルレイアウトが基本

テーブルレイアウトとは・・・下のソースのように、<table>というタグでレイアウトを組んでいく方法です。<table>タグで箱の大きさを指定してレイアウトします。テーブルレイアウトで組まれたページは、CSSレイアウトのページとはソースの見た目が全然違うので一目瞭然です。


■テーブルレイアウトの例

テーブルレイアウトの例


■CSSレイアウトの例

CSSレイアウトの例


テーブルレイアウトは2000年代後半までウェブページの制作においても主流で使われていた技術です。いまではウェブページはCSSレイアウトで組むのが当たり前になっています。しかし、HTMLメールの制作現場ではいまだにテーブルレイアウトが使用されています。これは上記した通り、メールクライアントのCSS対応状況がまだブラウザーに比べ進んでいないためです。(ちなみに最近話題のレスポンシブメールも、なんとテーブルレイアウトを使います。)
テーブルレイアウトを使いながら、必要なところにはCSSを使用し、装飾を施していく、というイメージです。


CSSはインラインで

HTMLメールのCSSについては、基本的にインライン(HTMLのソースの中に直接記述)で書きます。これはメールクライアントによって外部のCSSを読み込み認識しないものがあるためです。
基本的にウェブページを制作するときは、CSSを外部ファイル化しておくことで、様々なページで共通に使用できるようにしますが、HTMLメールではできません。ここも通常のウェブページとHTMLメール制作で異なる点です。


検証はさまざまなメーラーで・・・

Outlook, Hotmail, Yahoo, Apple Mail, Thunderbird, Gmail・・・とさまざまなPC用メーラーに加え、いまはスマホ用のメーラーアプリなどもあるので、チェックが大変です。そこで、表示検証に使えるツールをご紹介します。以下のサービスは、30を超えるメーラーの表示確認が一発でできる優れものです。月額79$から使用可能です。


■Litmus

Litmus


※Litmus
https://litmus.com/


まとめ

現状はメーラーのCSS対応状況にばらつきがあるため、テーブルレイアウト+必要最低限のCSS、というのが基本です。最大公約数的な技術を使うことで、なるべく多くのメーラーで崩れが起きない(もしくは起きたとしてもそれほど見た目に影響がない)ように作っておく、という考え方ですね。今ではモバイルでのメール受信も増えてきているので、モバイルファーストで構成自体をシンプルに1カラムで作る、ということも検討しましょう。この辺りは第3回、第4回でも触れていきたいと思います。

角谷仁
株式会社TAMの東京事務所でディレクターチームのマネージャーとして勤務。大規模案件のプロマネから小規模案件の運用までさまざまな案件を対応しています。現在はTAMのモバイルファースト戦略を推進すべく、各メディアからの情報発信中。あと最近の趣味は、船でマグロやGTを釣りに行くことです。外房のヒラマサにもはまっています。
  • このエントリーをはてなブックマークに追加

ページの先頭へ