【初級編】HTMLメールを作る方法

HTMLメールで出来ること

まずは、HTMLメールで出来ることをご紹介します。
HTMLメールは通常のテキストメールとは違い以下のようなことが可能です。
・違い画像を本文内に表示さる
・文字の大きさや太さ色を変更することができる
・リンクを設定することができる

下のようなメールを作成することができます。

HTMLってなに？

HTMLとはタグという記述方法でWEBページ上に表示するものです。
タグには色々な種類があります。
※タグについては後ほどご紹介します。

まずは実際にHTMLをコピーして作ってみる

全てを理解するよりもそのままソースコードをコピーしてみて実際に自分で貼り付けてみて実験するのが使えるようになるには早いと思います。

<img src=”https://marketing.infact1.co.jp/media-091/wp-content/uploads/2018/12/header-image.jpg”  alt=””>

<p style=”font-size:26px;color:#07a8a6;text-align:center;font-weight:bold;”>
こんなことでお困りではありませんか？
</p>

<p>自由診療の患者が思うように集まらない</p>
<p>自由診療の患者が増えていかない・・・</p>
<p>インビザラインの価値が伝わらない</p>
<p>保険治療ばかりでスタッフが疲弊</p>
<p>PPC（ネット）広告の成果が見込めない</p>
<p>芋づる式の口コミで自由診療を増やしたい</p>
<p>インビザライン専用の集患ができていない</p>
<p>インプラントなどの自由診療も広めたい</p>

<p style=”font-size:26px;color:#07a8a6;text-align:center;font-weight:bold;”>
こんなお悩みに<br>「インビザライン集患サポートプラン」
</p>

<p style=”font-size:18px;color:#000;text-align:center;font-weight:bold;”>
まずはサイト診断と個別相談にお申し込みいただき、<br>
お互い納得した上でお申し込みいただけたらと思います。
</p>

<a href=”https://marketing.infact1.co.jp/invisalign/#simpleform”>
サイト診断と相談に申し込む
</a>

先ほど作成したHTMLメールのタグの解説

画像の挿入方法

画像を挿入するには<img>というタグを記述します。

<img src=”https://marketing.infact1.co.jp/media-091/wp-content/uploads/2018/12/header-image.jpg”  alt=””>

黄色の部分にサーバー上にアップロードしている画像のソースを貼り付けます。
※HTMLメールを利用するサービスによっては、画像をアップロードすると自動で<img>タグが記述されることもあります。

文字の装飾

文字を装飾するには、テキストを表示させる<p></p>タグの中でstyleという記述をします。

<p style=”font-size:26px;color:#07a8a6;text-align:center;font-weight:bold;”>
こんなことでお困りではありませんか？
</p>

styleは、style=”このなか“に記述します。
文字の大きさ　　font-size:26px; 
文字の色　　color:#07a8a6;
文字の中央揃え　　text-align:center;
文字の太さ　　font-weight:bold;

それぞれこのような意味を持っています。

リンクの設定

リンクを設定するにはテキストを<a></a>タグで過去みます。

<a href=”https://marketing.infact1.co.jp/invisalign/#simpleform“>
サイト診断と相談に申し込む
</a>

<a href=”ここ“></a>
黄色の箇所に飛ばしたい先のリンクを設定します。

まとめ

今回はHTMLメールを作成する初級編をお届けしました。
HTMLメールを作成する上で最低限覚えて置きたいHTMLのタグをご紹介しました。
HTMLを全て理解することは難しいと思うので、まずは今回ご紹介したタグを使えるようにしてみてください。