HTMLコーディングでよくある間違い

テンプレート&メールエディタ 更新日 10月 12, 2020

HTMLメールの配信は上手く編集ができれば抜群に見栄えが良くなります。しかし、画像、フォント、CSSファイルの問題により購読者側でレイアウトが崩れたり、まったく表示されないこともあります。 Microsoft PublisherやDreamweaver、FrontpageなどのHTML編集ソフトで作成する場合、ウェブページの編集ではなくメールの作成を行っていることを忘れないようにしましょう。ウェブページと同じ要領でメールを作成してしまうと、購読者が受信するものと全く違うメールが配信されてしまうことがあります。

以下の点に気を付けてメールのコード作成を行ってください。

1. CSSファイルの外部参照は一切不可

多くのメールクライアントは独自のCSSをすでに設定しているため、外部ファイルの参照を受け付けていません。そのためCSSの設定を行う際は、インライン形式の編集を行ってください。配信を行う前に、メール設定のミスなど矛盾部分の確認するために主要なメーラーでのチェックを行ってください。

i) 外部CSSの参照は利用ができません

ii) メールのヘッダー部にCSSを記述し、それをボディ内のコードに参照することができません

1. メール全体が画像となってしまう程、大きい画像の使用は出来ません. メーラー側のデフォルト設定によってこのようなサイズの画像はブロックされます。そのため購読者には空欄で表示されてしまいます。画像だけのHTMLメールの配信は、迷惑メールと認識されてしまうなどの問題があるため、Benchmark Emailでは推奨しておりません。
2. メールの幅を容量内に収めてください. メーラーで表示できる範囲でメールのレイアウトを行って下さい。 適切な表示が行われる理想的な大きさは650pxとなっています。 もし疑問点が浮かんだら、Yahoo!もしくはGmailなどに無料アカウントを作成し、メールのテスト配信を行い、どのような表示が行われているか確認してください。
3. HTML内の無駄なジャンクコードを削除しましょう. FrontpageやMicrosoft Word、Microsoft Publisherでメールを作成している場合はテンプレート内にレイアウトを崩したり、不具合を引き起こすジャンクコードが含まれていることを注意してください。 最悪の場合、このコードが原因でスパム（迷惑メール）と認識されてしまう可能性もあります。 配信を行う前に、無駄なコードや必要のない属性編集、内部コメントなどの記述はなるべく削除しましょう。 以下の例をご参照くださいませ:

   <span class="fs12"><v:shape> <o:column> <b:Xl> ![endif]></span>

4. Flash,Javascript,ActiveX、動画、音声ファイルの埋め込みは利用ができません.これらの利用が出来るときっとメールはより見栄えが良くなるかもしれません。 しかしセキュリティソフトによって上記のファイルはブロックされてしまいます。 動画や音声ファイルなどはランディングページやメールのリンク先に使うようにしましょう。
5. 画像のリンク先URLの入力を確認しましょう. 画像のリンク先に問題があるケースが多いようです。 これまでカスタマーサポートに寄せられたご相談には、画像のリンク先をご自分のパソコンのハードディスクと設定してしまっているケースが多々ありました相対URL（ご利用いただけません）:
   <a href="lastpage.htm"> </a>

   ご自分のパソコンのローカルサイトへリンクが設定されている、もしくはウェブサイト上の相対位置へのリンクはご利用になれません

   絶対URL（ご利用いただけます）:

   <a href="http://www.microsoft.com/"> </a>

   ワールドワイドウェブ上の稼働中のウェブページへのリンク。 この形式は有効となります

6. 少なくともYahoo!、Gmail、Hotmail等３～４つのメーラーでの表示を確認しましょう,メールのレイアウトがミスなく表示されていないかを確認するためです。 必ずテストメールを、作成した無料メールアカウントへ送信し、画像の表示、リンクが機能しているか、色の変更は見込み通りかどうかを確かめましょう。
7. メーラーによって無効となってしまうFormコードの使用を避けましょう メーラーの対応外のインラインフレームの運用は控えましょう

＞＞「メール作成：編集操作」のまとめページに戻る

FAQの情報は役に立ちましたか？