どうも！GLUTのレオです。
メルマガを作成する時はテキストで作る方法かHTMLで作る方法の二通りのパターンがあります。
テキストでメルマガを作成する時は特に注意点はないのですが、HTMLとCSSを使って作成する場合気をつけなくてはいけない点が山のようにあります。
つい先日ある企業の案件でメルマガの作成を依頼されたのですが、調べてみるとかなり制約があって「メルマガなんて簡単でしょ！」っと思って依頼を安請け合いしたのが失敗の始まりでした。
本当に大変です。。
この記事ではメルマガをHTMLで作成する場合の作成方法と注意点を解説していきます！
- この記事はこんな方におすすめ！
- 初めてメルマガをHTMLで作ろうかと思っている方
- 作成はしたけどテスト送信でレイアウトが崩れてしまって困っている方
目次
HTMLメルマガの作成の注意点
メルマガはWebサイトを作成する時と同様に作成してしまうとメーラーによってレイアウトが崩れしまったら最悪の場合は本文が表示されないなんてこともあるでしょう。
せっかく獲得できた見込み客に確実にメールが届くようにしっかり対策してメルマガを作成しましょう！
基本的にテーブルレイアウトで作成する
メルマガを作成する時はWebサイトを作成する時に使用するタグは使用しません。通常のタグはサポートされていないことが多いのでなるべく使用しないことが正しく表示させる近道になります。
テーブルタグでもcolspanなどはサポートしていないこともあるので使用には気をつけてください。
meta charsetはiso-2022-jpを使用する
meta charsetはiso-2022-jpを指定してあげるといいでしょう。
この指定方法はメーラーに使われているものなので、文字化けを回避する事ができます。まれにUTF-8だと文字化けする事があるので、まだ使用しない方が良さそうです。
CSSはインラインスタイルで装飾する
インラインスタイルとは下のコードのような直接タグにスタイルを指定する方法です
<table style="width: 600px;"></table>CSSを書くこときはSEOのことも考えてhead内にスタイルを書くか、スタイルシートを分けて書くことがありますがメルマガではタグに直接スタイルを指定するインラインスタイルを使用します。
head内や別のスタイルシートを使用してしまうと一部のメーラーで読み込むことができず表示崩れの原因になります。
またテーブルにサイズを指定する時はスタイルで指定すると同時にwidth要素を使って2つ指定するようにします。
<table width="600px" style="width: 600px;"></table>横幅は600pxがおすすめ
メルマガの横幅は600px指定することをおすすめします。世の中の企業などが作成しているメルマガはこのサイズで作成されています。
これには理由があってスマホで表示した時に綺麗に見えるのが600pxなので余程のことがない限り600pxで作成した方がいいでしょう。
拡張子はjpegで統一する
画像に使う拡張子は極力jpegで統一した方がいいそうです。
pngでも問題はないそうですが、jpegの方が読み込みが早く表示されるので極力jpegで作成した方が良さそです。
また一部のメーラーではpngが表示されない事象もあるそうです。
画像やリンクのパスは絶対パスで指定する
絶対リンクとは下記のようなhttps://から始まるパスの指定方法です。
https://glut.jp/画像やリンクのパスを指定する時は絶対パスで指定するようにしましょう。
相対パスなどで指定してしまうと画像が表示されない原因の元になるので気をつけましょう。
ボタンなどpaddingを指定する時は画像で作成する
ボタンなどでpaddingを指定するとメーラーによってはpaddingが表示されません。ボタンなどクリックしやすさを考慮してpaddingを設定したい場合には画像で作成してあげて、padding分も画像にするようにした方がいいです。
メーラーによってpaddingが表示されないのでpaddingをCSSで指定しまうとユーザーにとってクリックしづらいデザインになってしまう可能性があります。
デザインは作り込まない
positionなどはメーラーで正しく表示されない事がほとんどです。Webサイトの制作で簡単に実装できる事でもメルマガになると正しく表示されない事がほとんどですのでpositionなどのCSSが必要なデザインは極力避けるようにした方がいいですね。
background-colorとbgcolorも指定する。
background-colorだけだと正しく表示されない事象がありました。background-colorの指定が必要な箇所には同時にbgcolorもつけておくと正しく表示されます。
コーディングが終わったらテスト送信
コーディングが完了したら必ずテスト送信をしましょう。一つのメーラーで綺麗に見えてもOutlookなどのメーラーでは必ずと言っていいほど表示が崩れます。
メルマガを登録してくれたなるべく多くの人に正確に情報が届くようにしてあげる事がマーケティングの上でも重要です。
最後に
ここまで色々書きましたがメルマガをHTMLで作成する時には必ず問題が発生します。メルマガの作成は労力のかかる作業です。
この記事で紹介した手法以外にもまだまだ気をつけなければいけない点もあるので、この記事ではなく色々な記事を見て最高のメルマガを作り上げましょう！
また気づいた事があればどんどん追記していく予定です！
ではまた！
