固定ページ

企業に人気 メルマガ HTMLメールの作成方法!HTMLメールとはどんなものなのか?

皆さん、HTMLメールってご存知でしょうか?

HTMLメールとは、普通のメールと違って、インターネットのサイトの様に、色や画像を入れレイアウトされたメールです。

普通の文章だけのメールと違って、HTMLメールは読みやすくわかりやすいので、宣伝、広告用で企業などが好んで使っています。

メールマガジンの見やすさ、分かりやすさ

の他に、

読者がそのメールを開いて観たのかという事が、数字として分かります。

例えば、30通のメルマガを配信したとして、
何通開封され読まれたのかという事が、数で表されるので、
それを見て、少なければ内容を改善していく、
多ければそのスタイルで合っているとわかるので、

HTMLメールを使えば、
効率よく、広告、宣伝効果を出すことが出来ます。

HTMLメールの欠点

HTMLメールは、受け取る側のデバイスや、メーラー、設定などで、
正しく表示されない場合があります。

出来るだけ、色々なデバイスやメーラーでも正しく表示されるように、

HTMLの「DOCTYPE宣言」は、「XHTML1.0 Transitional」を宣言してコードを打ちこんでいった方が良いでしょう。

HTMLメールのレイアウトは、テーブルレイアウトで

HTMLメールは、tableタグを使っての制作が基本となります。
レイアウト崩れや、各所の横幅の不揃いなどを防ぐために、
テーブル形式でデータや文章をはめ込んで制作しましょう。

CSS、スタイルシートは埋め込み式が推奨。

埋め込み形式とは、HTML文書のheadの部分にCSSを記述していく方法です。

CSSの「font-size」「margin」設定は、正しく表示しないメーラーもある。

メーラーソフトによって、サポートしてないものもあるので、
文字の大きさが変わらなかったり、行間が広くなったり、狭くなったりという不具合が出る場合がある。

HTMLメールは、100kb以内に収める方が不具合が出ない。

容量が大きすぎると、内容が全て表示されなかったり、不具合が出たりする為、
なるべく容量が小さめ、最大でも100kbに収める方が良い。

文字コード:iso-2022-jp が推奨されています。

カラーコード:6文字コードで入力(#333333)

文章の段落:DIVタグ、Pタグは使わない。tableタグ、TRタグ、BRタグを使う。

HTMLメールの横幅設定。

レスポンシブ対応にする場合は、
PC:600px
スマホ:100%

標準設定する場合は、
PC:500pxぐらい(スマホ画面幅に合わせる)
スマホ:500px最適な横幅に設定

使用する画像設定

横幅に合わせて縮小させたいので、
imgタグに横幅(width)を100%にする。img{width:100%}

※スマホで横幅を100%にした場合に、PCで表示した時、画像が引き延ばされて綺麗に表示されない場合があります。

そういう時は、元の画像のサイズ以上にしないという設定が必要です。
img{widh:100% max-width:100%;}

HTMLメールは色々と表示されない不具合の可能性がある為、ALT属性でなんの画像なのか分かりやすくしておきましょう!

画像パスは絶対パスで指定。


http://、https://、から始まるのアドレスで画像を指定しましょう。

HTMLメールの基本レイアウト例

・ヘッダー

・タイトル、ロゴ、画像

・コンテンツ、ボタン、文書

・中見出し

・フッター、企業情報

HTMLメールは、テーブルレイアウトで組みます。
テーブルを入れ子にして、どんどん自分の作りたい形に作り上げていきましょう!

自分でコードを書いて作るのも手ですが、

HTMLメールは、フリーのテンプレートがweb上にいくつもあるので、

それを使って作成すると簡単に上手く作成することが出来るのでおすすめの方法です。

初心者用、HTML,CSS学習方法の情報はこちらで載せています!((((oノ´3`)ノ