主に企業がメールマーケティングで使うHTMLメール。ECサイトとかの会員になると大量に送られてくる画像付きのメールのことだ。
2018年現在、いや2025年くらいまではテーブルレイアウトという、1990年代～2000年代初期までに使われていた古い手法で制作するのが常識。一般的なWeb制作だと現在はテーブルレイアウトはタブーとされているので、ここ10年くらいでWebデザイナーになった人はそもそもテーブルレイアウト自体を知らないかもしれない。
テーブルレイアウトとは
読んでそのまま、表組みでページ全体のレイアウトをする。昔はCSSでレイアウトするのは一般的ではなかったので、個人でも企業のサイトでもテーブルレイアウトが一般的だった。
HTMLやCSSの記述を覚えることなく、ホームページビルダー的なソフトはもちろん、Dreamweaverのデザインモード(これは現役で存在する)で視覚的に表を作りながらレイアウトする。
しかし、透明なスペーサーGifというものを仕込んだり、これはこれはでノウハウが必要だったりもする。今だと検索しても情報量が少ないから、勉強するのも難しいのではないかな。
ちなみに、これはきちんと表として見せるテーブルとは別物。
なんでHTMLメールはテーブルレイアウトなのか?
端的にいうと、OUTLOOK系など多くのPC向けメールクライアントはもちろん、GmailなどのWebメールがまともにCSSに対応していないから。スマホアプリのメーラーは割りとCSSに対応していて頑張ればレスポンシブ的なものも作れるが、工数などもあるので、一般的にはPCもスマホも同じ1つのレイアウトで作成しないとならない。
「HTMLメールを作ってくれ」と頼まれたあなた、結構大変な仕事かもよ、という話。
HTMLメールのノウハウ
大体、HTMLメールを任命された人は樹海に迷うことになる。まともにHTMLメール作成を解説した書籍はないし、それ専門でやっているWebデザイナーというのもそうはいないから、聞ける人が少ない。
基本的には横幅600pxくらいの固定で、テーブルレイアウトをするのが間違いが少ない。メール配信システムを使うことが多いと思うが、文字コードが特殊だったり、画像はサーバーに上げて絶対パスで読み込ませるのが一般的。
シェアの高いGmailだと画像に隙間が出来るのでBlock要素にしたりとか、色々な工夫が必要になる。シンプルでこざっぱりした作りの方が、作り手も読み手もありがたい。そもそも、件名が酷かったりすると開封すらされないし、割り切りも必要かと。
DreamweaverならCS6とか古めがおすすめ
最新のCC以降だと、テーブルを視覚的にいじる機能は健在なものの、なぜか動作がもっさり・・・。プチフリーズと言ってもよいくらいで、ちょっと変更しただけで10秒くらい画面が固まったりする。
今時テーブルレイアウトする人が少ないからチューニングされていないのだろうが、古めのCS6あたりだと割りと軽快。コードビューし書体を変えたりカスタマイズすると重たくなる場合があるので、基本的に初期設定がいいと思う。
あまり知られていないかも知れないが、Creative Cloudを契約するとCS6など過去のバージョンもインストール、使用可能になる。今はDreamweaver以外にも色々なエディターがあるが、テーブルレイアウトに限ればDreamweaverが多分最高に使いやすいのではないかと思う。テーブルレイアウト時代からバリバリ活躍していたソフトなのでw
