[html]HTMLメールの組み方についてのメモとか

必要に駆られたのが不要になったけど念の為まとめる。

SNSが普及してなかった頃、メルマガにまだ力があった頃、ちょろっと触る機会があった。
ただのテキストだと味気がないからHTMLメールで構築して装飾してた。
だけどそんなに作ることもなく何年も経って、案件で久しぶりに作りそうになった。それは流れたんだけど、そういえばどんな感じでやってんだろうってことで調べた。

サンプルはそんなに無いんだけど共通点が結構あったんで、そこを抑えたらいいんでないかな。

基本的な考え方

サイズは全て実数値で指定する。%も使えるんだろうけど、全部pxで決めちゃったほうが無難。
スマホで閲覧しても耐えられることを前提にして幅を決めて、それに合わせたフォントサイズやら画像サイズを決めていく感じ。レスポンシブ前提で作るのはめんどくさいしね。

<table>で組む。colspanとかを頑張るんじゃなくて、tableにtableを突っ込む力技系。2000年代くらいのLPが近いかもしれない。

<style>は使わない。各HTMLタグそれぞれにある設定と、タグ自体にstyleを埋め込んで装飾する。だから文字数がとんでもないことになるんで混乱しないように注意が必要。

画像はよくわからないんだけど、多分普通に挿入してるんだと思う。とりあえずで挿入するんじゃなくて、原寸で埋め込むことを前提にしてるっぽい。解像度の云々は無視。
background-imageも使ってる。枠になる要素の縦横を定めて、background-size: cover;を使えば上手いこと枠にあった状態で表示できる。

色指定は6桁全部記入する。#eeeじゃなくて#eeeeeeにする感じで、省略しない。大文字小文字は基にしなくていい。

「マルチパートメール」とやらにしたほうがいい。HMTLメールとテキストメールのニコイチだから、両環境に対応できる。

構築について

コンテンツをいきなり書くんじゃなくて、一番外側に枠を用意する。
背景色をつけたいなら必須だけど、そうじゃなくてもとりあえず仕込んでおけばいいって感じ。作法だと割り切るのがいいかも。

<table cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="background-color: #eeeeee;"><tbody><tr><td>

<!-- コンテンツ -->

</td></tr></tbody></table>

画像に文字を入れて読ませたいなら大味にしたほうがいい。gmailアプリでしか確認してないけど、幅が画面に合った状態を100%として固定されてて、拡大したら文字も画像もボケる。WEBブラウザとはそこが違うんで注意したほうがいい。

とか色々書こうと思ったんだけど、どうなんでしょうね。
ネックは、凝りすぎると表示がおかしくなるってとこよね。

エディタあるっぽいからそれ使うのがいいのかもしれないような、でも実務的にそこまで求めるもんはないような。

HTMLメール配信システム Benchmark Email (ベンチマークイーメール)
HTMLメール配信が無料で毎月250通まで可能。高機能メール配信システムなら「Benchmark Email」。HTMLメールエディター、顧客管理やリアルタイムレポートなど豊富な機能で効果的なメールマーケティングを実現します。

便利だけど持て余しそうね。

参考

知らないと損!?HTMLメールを作るときに知っておくべきデザインやサイズ、フォントについて
デザイン性の高いHTMLメール。テキストメールと違い、画像や動きを入れることで、マーケティング効果を高めることができます。昔よりもツールが増えたことで、専門知識がなくても作りやすくなっているようです。ただし、スマホでストレスなく情報を見るためには、注意するべきデザインやサイズ、フォントもあることを覚えておきましょう。
『HTMLメール』vs『テキストメール』効果が高いのは?無料で使えるテンプレート4選
HTMLメールとテキストメール。メールマーケティングにおいてどちらが効果的なのか、両者はどう違うのか。メリットとデメリットを徹底的に比較して、目的別の使い道について解説します。メールマーケティングを組み立てる際に是非参考にしてみてください。

コメント

タイトルとURLをコピーしました