});キレイなHTMLメールを作るコツ/Tips盛りだくさん!ECサイトはもちろん、企業サイトのニュースなど、いまなおプッシュ型の情報配信として支持されるメールマガジン。一時のフィードリーダーの盛り上がりもあり、以前に比べると落ち着きましたが、まだまだメールマガジンの効果は侮れません。いう人にとっては、HTML言語自体はそれほど難しくないと思います。そのHTML言語で書かれたHTMLメールになると、途端に話が変わります。Outlookなどメールを見るソフト)やWebメール(Yahoo!メールやGmailなど)が爆発的に増えてしまうからです。Webサイト制作時に求められる「クロスブラウザ対応」がかわいく思えるほどです。本稿では、よく使われているメーラー/Webメールを対象にハマりやすいポイントを紹介しながら、初心者の方でもとっつきやすいよう、ある程度問題のないHTMLメールを作る方法を紹介します。使われている手法から、ハマりやすい各種メーラー対応、Webメール対応などTipsを盛りだくさんでお送りします。HTMLメールって見てない人が多いんじゃないの?」と思った方もいるかもしれません。実は、自分もちょっと前まではそう思っていました。こんな調査結果があります。希望するメールマガジンの形式(出典:マクロミル)ぱっと見ると、「テキスト形式が望ましい」が24.0%でトップです。逆を返すと、「テキスト形式が望ましいと考えていない」人は76%もいるともいえます。「HTMLメールの方が良い」とするのは早計ですが、少なくとも「内容によって選択したい」という人も、内容が良ければHTMLメールでもしっかり見てくれる可能性があるわけです。この結果から、HTMLメールも許容されていると、見ることができます(なんせ、デコメもHTMLメールですからね)。いまでもテーブルレイアウトでガッチガチ!さて、データ以外にも目を向けてみると、アップルのような大企業もHTMLメールを使用しています。アップルからのメルマガまたドラマ化などで最近話題のTwitterも、メッセージ受信の通知や、自分がフォローされたときの通知にHTMLメールを使っています。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サイト制作とは違う点などを紹介していきます。