連載インデックスへ
一撃デザインの種明かし一撃デザインの種明かし（12）

誰でも作れる！
“崩れない”HTMLメルマガ作成術

面白法人カヤック 意匠部 ME（マークアップエンジニア）課
比留間 和也
2010/7/14
よく使われているメーラーを対象に注意点やコツを紹介しながら、初心者でもある程度問題のないHTMLメールを作る方法を紹介します

キレイなHTMLメールを作るコツ/Tips盛りだくさん！

- PR -

　ECサイトはもちろん、企業サイトのニュースなど、いまなおプッシュ型の情報配信として支持されるメールマガジン。一時のフィードリーダーの盛り上がりもあり、以前に比べると落ち着きましたが、まだまだメールマガジンの効果は侮れません。

　今回は、そんなメールマガジンの中でも、表現力豊かなHTMLメルマガの作り方について、徹底解説します！

■ 「HTML」自体は、それほど難しくないが……

　「HTML」というマークアップ言語自体はプログラム言語に比べると手が出しやすいので、Webを仕事としていない方でも触れた経験をお持ちの方はいらっしゃるのではないでしょうか？ そういう人にとっては、HTML言語自体はそれほど難しくないと思います。

　しかし、そのHTML言語で書かれたHTMLメールになると、途端に話が変わります。

■ 「クロスブラウザ対応」が、まだかわいく思える

　なぜなら、通常のWebサイトの制作と違い、表示をチェックするメーラー（Micorosoft Outlookなどメールを見るソフト）やWebメール（Yahoo!メールやGmailなど）が爆発的に増えてしまうからです。Webサイト制作時に求められる「クロスブラウザ対応」がかわいく思えるほどです。

　本稿では、よく使われているメーラー/Webメールを対象にハマりやすいポイントを紹介しながら、初心者の方でもとっつきやすいよう、ある程度問題のないHTMLメールを作る方法を紹介します。よく使われている手法から、ハマりやすい各種メーラー対応、Webメール対応などTipsを盛りだくさんでお送りします。

え、ほんと？ HTMLメールはうざくない！

　作成術に入る前に、そもそも「え？ HTMLメールって見てない人が多いんじゃないの？」と思った方もいるかもしれません。実は、自分もちょっと前まではそう思っていました。ですが、こんな調査結果があります。

希望するメールマガジンの形式（出典：マクロミル）
希望するメールマガジンの形式（出典：マクロミル）

　ぱっと見ると、「テキスト形式が望ましい」が24.0％でトップです。しかし逆を返すと、「テキスト形式が望ましいと考えていない」人は76％もいるともいえます。

　だから「HTMLメールの方が良い」とするのは早計ですが、少なくとも「内容によって選択したい」という人も、内容が良ければHTMLメールでもしっかり見てくれる可能性があるわけです。

　この結果から、HTMLメールも許容されていると、見ることができます（なんせ、デコメもHTMLメールですからね）。

やっぱり、いまでもテーブルレイアウトでガッチガチ！

　さて、データ以外にも目を向けてみると、アップルのような大企業もHTMLメールを使用しています。

アップルからのメルマガ
アップルからのメルマガ

　またドラマ化などで最近話題のTwitterも、メッセージ受信の通知や、自分がフォローされたときの通知にHTMLメールを使っています。

もTwitterからのメッセージメール
Twitterからのメッセージメール

　ほかにもネットショッピングなど商品を見せることが購買につながるような場合には比較的HTMLメルマガが多いのではないでしょうか。

■ いまさら「テーブルレイアウト」かよ……

　こうして見てみると、HTMLメールを目にする機会は増えてきていると思います。そして、制作者の視点でそれらをよーく見てみると、実はけっこう多くのメルマガが「テーブルレイアウト」を行っているのです。

　テーブルレイアウト……。Webサイト制作に携わっている人であれば、一度は聞いたことがあるでしょう。一昔前、CSSが流行る前は、HTMLの<table>要素の中に、違う<table>要素を配置し、複雑なレイアウトを実現していました。

　いまではCSSでの制作が当たり前になり、テーブルレイアウトのサイトも減少してきています。

　中にはテーブルレイアウトと聞くと頭痛がする人もいるかもしれません（自分がそうですから……）。

■ 各メーラーのHTML解析に左右されないために

　しかし、冒頭でも書いたように対応しなければならないメーラーは膨大です。そして、クロスブラウザなどとは比べものにならないくらい、各メーラーのHTMLの解析結果はさまざまです。

　例えばGmailは、<head>要素内に書かれたCSSを認識しません。つまり、マウスオーバーによる視覚効果（hoverやvlink、active）など、「インラインで記述できないものは実現不可能」ということです（もちろん、Gmailで適用されないことを前提に、ほかのメーラーで動くようにしておくことは可能です。このような対応は、最近でいえば、「プログレッシブ・エンハンスメント」と呼べます）。

コラム　「プログレッシブ・エンハンスメント」とは
「プログレッシブ・エンハンスメント」とは、古いWebブラウザや最新のWebブラウザ、どのWebブラウザで見ても、情報がきちんと表示され、かつ、最新のWebブラウザで見たときは、新しいテクノロジを駆使したユーザー体験ができるように制作するという試みのことです。

　各メーラーのHTML解析に左右されないためには、HTMLメールの制作はWebデザインの一昔前に戻って、テーブルレイアウトやインラインCSSをふんだんに使いながらの制作が有効です。

　続いて、具体的にHTMLメールを作るうえで注意すべき点や通常のWebサイト制作とは違う点などを紹介していきます。

  1/4

　INDEX
一撃デザインの種明かし（12）　
誰でも作れる！ “崩れない”HTMLメルマガ作成術
Page1
キレイなHTMLメールを作るコツ/Tips盛りだくさん！
え、ほんと？ HTMLメールはうざくない！
やっぱり、いまでもテーブルレイアウトでガッチガチ！
  Page2
CSSは時期尚早。基本は<table>で組め！
テーブルレイアウト時の3つの注意点
  Page3
HTMLが持つパワーを最大限に引き出す、10のコツ
実際にHTMLメールをコーディングしてみよう！
  Page4
Outlook Expressでテストしてみよう！
最終的には中身で勝負！ メルマガを読んでもらう工夫を

一撃デザインの種明かし バックナンバー 連載インデックスへ»


「デザインハック」コーナーへ


TechTargetジャパン

リッチクライアント & 帳票 フォーラム 新着記事
  • コンテンツ政策ヲ転換セヨ！ （2012/2/10）
    mixiにしろTwitterにしろニコ動にしろ、ソーシャルサービスは伸びている。シロウトの個人が作るコンテンツで成り立つサービスだ
  • NFCやLTE対応予定のiPhoneと、先行するAndroid （2012/2/9）
    iPhoneとAndroid、そしてWindows Phoneという3つのOSの今後を占う。それぞれの通信規格とコンセプトは？
  • 家電のUIになるブラウザ （2012/2/3）
    未来の家電はインターネットに接続でき、ブラウザが内蔵されてくる。家電にブラウザが載ったらどうなるか？ 未来のホームネットワークを想像しよう
  • 「汎用のUI技術」として広がるHTML5 （2012/2/2）
    すさまじい勢いで成長しているHTML5を中心としたオープンなWebプラットフォーム。HTML5やAPI、Webブラウザのアップデート情報をお伝えする

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

RSSフィード

＠IT 新着記事

キャリアアップ

＠IT Sepcial
→ ＠IT Special ヘ

イベントカレンダー

PickUpイベント

- PR -
もっと見る

お勧め求人情報

ホワイトペーパー（TechTargetジャパン）

＠IT Sepcial
→ ＠IT Special ヘ
ソリューションFLASH