HTMLメールを作成するときのガイドライン

HTMLメールはメール作成画面で、
「メール形式」の項目で「HTML」
選択することで送ることができます。

また、2020年8月20日のシステムアップデートより、
HTMLエディタがバージョンアップしたことで
簡単にHTMLメールを作成することができるようになりました。

使い方につきましては、こちらをご覧ください。

HTMLメールを作成する際の注意事項

HTMLエディタの「ビジュアルモード」でHTMLメールを作成する場合は、
とくに問題ありませんが、
「コードエディタ」でご自身でHTMLを書いていく場合の注意事項となります。

・タブ文字は空白に置き換える
※Tab文字を入れてしまうと、メールソフトによっては
解釈エラーで崩れてしまうことがあります

・headのmetaタグの文字コードはutf-8を指定
※マイスピーで、HTMLメールの本文に使用する日本語のエンコーディングが
UTF-8を使用しているため

・テーブルレイアウトを使用する
※CSS3には非対応のメールソフトが多いため
※tableのほか、p,div,spanなどの基本的なタグを中心に組みます。iframeやHTML5系のタグは非推奨です。

・インラインCSS(各タグにstyle属性で指定)を使う
※インラインCSSは横に長すぎると送信時にレイアウトが崩れてしまう恐れがあります。
そのため、適宜改行を用いるようにしてください。
※外部CSSファイルを指定する方法は、非対応のメールソフトが多いです。

・画像は、外部サイトにアップしてURL参照する形にするか、
URLに埋め込む方式(URLスキームでBASE64エンコード)で行います。
※添付ファイルに付けるだけでは参照出来ません

・JavaScriptやJQueryも使わない
 ※基本的に動かないケースが多いです。

・メール内のURLにはリンクタグを利用する
リンクタグを利用していないURLは、
閲覧側のメールソフトによっては自動的にハイパーリンクにならないことがあります。
クリックさせたいURLにはリンクタグの使用を推奨します。

関連:テキスト形式メールで送ったメールを受信して見たら、メール本文中のURLがハイパーリンク(自動的にクリック状態)になっていないのですが、どうしてでしょうか?

HTMLメールの利用方法

マイスピーでは、メールを送るだけでなく
HTML形式にすることで利用できる機能があります。

詳細な設定方法につきましては、
別途マニュアルをご用意しておりますので
それぞれご参考にしてください。

画像付きのメール送信は可能でしょうか?
マイスピーで配信したメールが開封されたかを簡単に確認(開封率の測定)することはできますか

HTMLメールのサンプルデータ

公式メルマガ MyASP(マイスピー)通信が、
とても綺麗でシンプルなHTMLデザインでぜひ使いたいのですが
こちらの雛形などは、どちらかに公開されてますでしょうか?

HTMLメールのサンプルとして、
MyASP通信のデザインテンプレートを配布しています。
ご利用の際には、下記の使い方・注意事項をご一読ください。

サンプルデータのダウンロード

サンプルデータは下記リンクよりダウンロードできます。
サンプルHTMLメールのテンプレート

サンプルデータの使い方

サンプルのデザインをMyASPに取り込む方法
  1. メール作成画面を開き、メール形式では、「テキスト」を選択します。
  2. ダウンロードしたSapmple.htmlをテキストエディタで開きます。
  3. サンプルhtmlコードをそのまま本文へ貼り付けます。
  4. メール形式を「テキスト」から「HTML」へ切り替えます。
    HTMLに切り替えた際に表示される警告メッセージは「そのまま」をクリックします。
  5. 「プレビュー」からデザインが反映されていることを確認します。
画像の取り込み方法

imgタグの「src=”https://(画像ファイル)”」と表記されているURL(https://から)部分を、ご自身で用意した画像ファイルのURLに書き換えることで、画像を埋め込むことができます。
※「分析オプション」>「短縮URL(クリック分析)を使用する」にチェックを入れると、メール内の「https://」で始まるURLがリストアップされますので、「遷移先URL」に画像のファイルのURLを書き換えると便利です。

画像に指定するURLは必ず「絶対パス」で指定してください。
HTMLメールで画像を挿入する場合、基本、マイスピー上にアップロードすることができません。
FTPソフトや外部サイト(ブログなどをお持ちでしたらそのサイト)などに画像をアップロードしていただき、そのURLを取得してご利用ください。

使用上の注意点

  • HTMLメール内に画像を大量に使用した場合、表示速度が遅くなります。
    画像の使用枚数が多くなる場合は、画像の容量を圧縮して使用することを推奨します。
  • 配布しているサンプルデータは参考用となります。
    加工せずそのまま使用するのはお控えください。
  • サンプルデータを使用してHTMLメールを作成する際にデザインを変更したい場合は、ビジュアルエディタではなくコードエディタをご利用ください。

サブコンテンツ

このページの先頭へ