メールのフォーマットについて

@Daisuke Shishido さん、こんにちは

>>一部の環境でメールが崩れて表示されてしまいます。

メールのHTMLは、実はWebのHTMLと別物**なので、Webの感覚で編集してしまうと落とし穴に陥ります。

参考として、少し細かいですが背景を説明しておきます。

"別物**"の説明ですが、より正確には、メールでは利用できるHTMLの文法が限定されます。大雑把にいうと、今どきのHTML5な書き方では通用せず、HTML4時代（あまりHTML4という言い方はしないですけど）のルールに沿って記述する必要があります。一般にWebページは、HTML + CSS + Java Scriptの３つのソースの組み合わせによって成立していますが、メールはHTML(しかも古い文法のHTML)と、一部のCSS（しかも古い文法＆インラインが原則）しか使えません。JavaScriptは使うべきではありません。なお、JavaScriptが入ると、動作検証も難しいし、SPAMとして扱われやすいという別の問題がでてきます）。

なので、たとえば現在書店で市販されている「HTML＋CSSを勉強しよう！」みたいな書籍を参考にしてHTMLを直接編集してはなりません。。。。メールのHTMLとしては、全くもって使えません。（そして、残念ながらメールのHTMLを解説した和書は、そもそも新しい本がありません。もはや消滅してしまいました・・・・。一応１冊現役で使える本がありますが、ちょっと古いのも否めず。）

マルケトのEmail Templateは、そのあたりを考慮して作られています。なので、Email Templateをもとにして、その編集範囲で正しく編集している限りは、そこまで大きく壊れてしまうことは発生しないハズです。

その問題あるメールのHTMLソースを貼り付けてくれれば、直接「ここがおかしいですね」ということもコメントできると思います。

また、ソースの前に、編集時の操作として気をつけたほうがよいのは下記の点です。

１：メール編集画面に、「文章」をコピー＆ペースト（貼り付け）したい場合、ブラウザで「Paste as Plain Text」などのコマンドを使う（WindowsでChromeなら、CTRL + Vではなくて、CTRL + SHIFT + Vで貼り付ける）。

２：前述の１：でもイマイチなときは、一度「テキストエディタ」に貼って、それを再び貼る。

３：画像や文字の位置調整、改行は、マルケトのエディタの「普通の使い方」に沿って行う。ようするにメニューにある画像サイズの指定部分を使ったりする。ということです。

４：どうしてもHTMLを直接編集したい場合は。。。。。。。。。「メール用のHTMLを学ぶ。」なのですが、うーん、前述したとおり体系的に学ぶのが難しいという困難な状況。ただ、「レイアウト」を考えるときは、基本的に「Table Layout」の手法を用いる。というのが大原則です。ようは<table>を使ってレイアウトを調整するというHTMLの書き方で、いまから10年～15年前によく利用されたHTMLの書き方ですね。

（余談：そのさらに前は、frameというのを使ってWeb作ってましたね。もはや、知らない人も多いと思いますが・・・・。私も昔、frameを使ってWebページ書いてました。懐かしい・・・・。iframeは今でも現役ですが、iframeの誤植ではないですよ。frameです。そして、さらにその前は、HTMLでもない時代ですね。横半角80文字x縦20文字に合わせてテキスト文字の組み合わせで工夫してましたね。これもまた懐かしいですが・・・。昔話はこのくらいで）。

具体的に利用したEmail Templateや操作手順（どのように編集したのか）。さらにはHTMLソースをコメントしてもらえれば、具体的に対処をご案内できるかと思います

以上、ご参考までに。

-Yamada

メーラーによってレイアウトがくずれてしまうというのは、共通の問題なのですが、

どんなメーラーでも、比較的、同じ表示をしてくれる「おまじない」があります。

それは、

画像の幅を％で指定するやりかたです。

HTMLメールのテンプレートには、外枠だったり、内枠だったり、

テキストの枠だったり、レイアウトの横幅をどこかで指定しています。

PCとスマホでレイアウトを変化させるレスポンシブのテンプレは、

PCとスマホの画面のサイズに合わせてメールの幅を変化させています。

そのお約束を利用して、画像の幅を○○％って指定しておくと、その画像の

置かれている場所の最大横幅の○○％で表示しろということになります。

大体の場合は、これでいけます。

画像の設定方法

この場合、このテキストの枠の幅がテンプレートで設定されて決まっていましたので、

その幅の100％という指定をしたことになっています。

なので、90％にすると少し余白ができます。

マルケトでプレビューするとこんなふうに見えます。

マルケトのプレビューは参考程度で、

本当の見え方を知るには、Litmusを使うのがおすすめです。

メーラーごとの表示の違いは、Litmusというツールを使ってみるのがおすすめです。

Litmus: Email Marketing, Email Design & Email Testing Tools