(公開日2023年08月16日)
企業の営業・マーケティング担当者ならびに個人事業主のために記事を書いています。メルマガの配信のためにHTMLメールを利用して、デザインテンプレートをお探しの方がいらっしゃるでしょう。
この記事では、弊社で制作したHTMLメールのデザインテンプレートをご紹介します。またソースコードを特別に公開して特徴を解説します。これを読めば、HTMLメールのデザインテンプレートの内容と使い方が分るでしょう。そして読者の視覚に訴えて、効果的なメルマガを配信する準備を整えられます。
以下の画像が公開するデザインテンプレートです。
もともとは弊社の事務所の引っ越し先案内用のHTMLメールです。バナーとして、引っ越しの風景を表示したGIFアニメーションを使用しています。また本文の下端にも、トラックが走るGIFアニメーションつきです。受信環境により見られない方は、ウェブサイトのリンクページで同じコンテンツが見られます。GIFアニメーションは動画より容量が少なくてすむのが特徴です。
HTMLメールの幅は、スマートフォンでは100％、他のデバイスでは700pxに固定して、画面中央に配置しました。2段階式のレスポンシブデザインですが、メールですから、簡単なレイアウト変更で十分に間に合うでしょう。
デザインテンプレートはこちら
ソースコードをご覧になると分かりますが、画面のレイアウトは、テーブルタグを使って表示しています。テーブルの配置は、添付した色分けされた画像をご覧ください。大まかなレイアウトのイメージがつかめると思います。
さらにテーブルレイアウトの概略を以下に示します。フォントカラーは画像の背景色と一致させていますので比較してください。またソースコードにも<!–1番外側のテーブル–>などを記載して、どの部分が該当するテープルかを分かりやすくしています。
<table><!–1番外側のテーブル–>
画面全体に広がるテーブルです。
<table><!–２層目の入れ子テーブル–>
メールの幅を指定するためのテーブルですが、画像には現れていません。
<table><!–３層目の入れ子テーブル–>
メールの本体を記述するテーブルです。
GIFバナーを見られない方はこちら
<table><!–4層目の入れ子テーブル(1)–>
ヘッダー
<img>
</table><!–/4層目の入れ子テーブル–>
<table><!–4層目の入れ子テーブル(2)–>
本文
</table><!–/4層目の入れ子テーブル–>
<table><!–4層目の入れ子テーブル(3)–>
<img>
<table><!–5層目の入れ子テーブル–>
リスト
</table><!–/5層目の入れ子テーブル–>
</table><!–/4層目の入れ子テーブル–>
<table><!–4層目の入れ子テーブル(4)–>
<img>
フッター
</table><!–/4層目の入れ子テーブル–>
</table><!–/3層目の入れ子テーブル–>
</table><!–/2層目の入れ子テーブル–>
</table><!–/1層目のテーブル–>
➀DOCTYPE宣言・言語の指定
②headの記述
③メディアクエリーの設定
④CSSプロパティの設定
⑤インライン形式CSS
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
DOCTYPEは「XHTML1.0」を指定しています。
<html lang=”ja”>
言語は日本語を指定しています。
<head>
<meta content=”text/html; charset=iso-2022-jp” http-equiv=”Content-Type”/>
文字コードは「iso-2022-jp」です。
<meta content=”width=device-width, user-scalable=no” name=”viewport”/>
viewportの横幅はデバイスの広さに合わせています。
<title></title>
タイトルはサンプルの「B.A.D」です。
<style type=”text/css”>
* {
margin: 0;
padding: 0;
}
body {
-webkit-text-size-adjust: none;
-ms-text-size-adjust: none;
margin: 0;
padding: 0;
font-family: “ヒラギノ角ゴ Pro”, “Hiragino Kaku Gothic Pro”, “游ゴシック”, YuGothic, “メイリオ”, “Meiryo”, sans-serif;
}
img {
display: block;
}
a {
text-decoration: none;
}
メールクライアントのmargin, padding, img, text-decorationなどのデフォルト条件をリセットして、font-familyを指定しています。
参考記事：スマホに最適化したHTMLメールとは？作り方のコツと注意点を解説
@media only screen and (max-width: 480px) { )
メディア特性はスクリーンに限定、ビューポートの幅は480pxを境界にして、表示を変換する設定です。
#design_area_result {
width: 100% !important;
}
スマートフォンでテーブルの幅を画面いっぱいまで広げる設定です。
.sp_hide {
display: none !important;
}
スマートフォンにおいて、部分的に表示を隠す設定です。
.img_100 {
width: 100% !important;
height: auto !important;
}
スマートフォンで画像の幅を100％に指定しています。
.fs12 {
font-size: 12px !important;
}
.pl10 {
padding-left: 10px !important;
}
などは、フォントサイズの指定ですが、HTMLタグ内に記載する際に命令文を短くする効果があります。
参考記事：HTMLメールをレスポンシブ対応で表示させたい時の対処法教えます
<table border=”0″ cellpadding=”0″ cellspacing=”0″ id=”design_area_result” width=”700″ >
メールクライアントのデフォルト条件をリセットするCSSです。
テーブルのwidthは700pxにしておいて、スマートフォンでは100%に変更します。
<td align=”right” class=”pr20″ style=”word-break: break-word; border-bottom: #4490cf 1px solid; padding: 5px 30px; font-size: 12px;font-family: ‘ヒラギノ角ゴ Pro’, ‘Hiragino Kaku Gothic Pro’, ‘游ゴシック’, YuGothic, ‘メイリオ’, ‘Meiryo’, sans-serif; “>
コンテンツのフォントを指定しています。
GIFバナーを見られない方は<a href=”https://edmimage.bad-corp.com/BAD/20210901/” style=”color: #000;text-decoration: underline;” target=”_blank”>こちら</a>
受信環境の都合でGIFアニメーションがみられない場合、あらかじめ用意したウェブサイトページをみてもらうようにリンクしています。
ヘッダーには2つの要素が横並びしており、align=”left”, align=”right”で振り分ける設定です。それぞれにimageが入っています。お好みの画像のURLへ変更してください。画像の縦横比によってサイズが崩れますので、heightの調節が必要です。
ヘッダーの下にGIFバナーが設置されています。このまま使っていただいてよろしいですが、お好みの画像に変更してもかまいません。URLを転記して、hightを調整してください。
<td align=”left” class=”pl10 pr10 pt40 pb40″ style=”padding: 50px 28px 50px 27px;”>
本文を入れるTDタグはpaddingを指定しています。フォントの大きさもclass=”pl10 pr10 pt40 pb40″で指定する形式です。テキストの部分は、お好みのコンテンツに変更してください。
住所のテキストには「‌」が挿入されていますが、******************
<img alt=”” border=”0″ class=”img_100″ height=”24″ src=”https://edmimage.bad-corp.com/BAD/20210901/images/line.gif” style=”display: block; border: 0;” width=”645″>
imageのスタイルもインライン形式で指定しています。このGIFアニメーションは面白いと思いますのでぜひこのまま使ってください。もちろん変更してもかまいません。
<span class=”sp_hide” style=”color: #4490cf; “>・</span>
５層目の入れ子テーブルに含まれるリストは、箇条書きになっています。ただしスマートフォンでは「・」を表示しないように設定しています。
参考記事：HTMLメールの作成時に使用できるタグの種類について
HTMLメールのデザインテンプレートを公開しました。GIFアニメーションを含み、動きが目を引くHTMLメールだと思います。しかもスマートフォンからパソコンまで、いろいろなデバイスのメールクライアントに対応済みです。メルマガのテンプレートとして最適ではないでしょうか？
MTMLメールは制作する際に制限が多く、うまくコーディングしないと表示が崩れてしまいます。今回公開したソースコードをご覧になって、面食らっている方も少なくないはずです。ウェブサイトのソースコードとは異なるため、カスタマイズするのは難しいでしょう。
オリジナルのHTMLメール制作をご希望の方は、専門家に依頼した方がよいかもしれません。株式会社ビーエーディーはHTMLメール制作のスペシャリストです。HTMLメールのデザイン・コーディング・配信をすべてお任せください。
興味がある方は、以下のリンクページをご覧ください。
