-
HTMLメールはどうやって作成するの？基本と特徴を徹底解説！【保存版】
-
メルマガは、顧客の受信箱に直接訴求できるため、2024年でもマーケティング施策の中で、最も高いROI（投資対効果）を誇ります。もちろんこれは正しく表示されるHTMLメール作成を行なってこそ得られる効果です。本記事ではきちんと顧客に届けるためのHTMLメール作成の基本を解説します。
今すぐ簡単にHTMLメール作成する方法をお探しの場合、
WiLL MailのHTMLメールエディタをお試しください。HTMLメールとは
HTMLメールとは、「HTMLで構成された電子メール」です。ウェブサイトのように本文に画像を挿入したり色を付けたりしたレイアウトを利用できるため、テキストメールよりも販促や物販に適した内容を送信できます。
HTMLメールが販促に適していることは調査結果でもわかっています。米国のHubSpot社が実施した調査によると、テキストメールを好むと答えた回答者が35％だったのに対して、65％が画像を含むHTMLメールを好むと回答しています。
また、米国のVero社が5,000以上のメルマガキャンペーンを分析した結果、画像のあるメルマガは、画像のないメルマガよりもクリック率が42％高いことがわかりました。
画像つきのリッチなメルマガを誰でも簡単に作成できる！
より多くの効果検証が行える
HTMLメールを送ることで、メールを読者が開いたかを確認する「開封数」、メール内のリンクをクリックした「クリック数」、ヒートマップツールによるメールコンテンツ内の「クリック比率」、メールを経由したウェブサイトでの「アクセス状況」や「コンバージョン率」など、より多くの評価指標を利用することができ、精度の高い効果検証が可能になります。
様々な評価指標によって、読者の興味と訴求内容の関連度を測ることができます。開封率の高いHTMLメールは、読者の興味と件名の親和性が高いことが伺えます。クリック率やコンバージョン率が高いHTMLメールは、読者にとって価値のあるコンテンツをメールやウェブサイトで提供できていることを示しています。このように、HTMLメールを配信することで、読者のアクションをより詳細に把握して、効果的なメールマガジンを送ることができるようになります。
“標準的なHTMLメール”は存在しない
世の中には「標準的なHTMLメール」という規格が存在しません。例えば、マイクロソフトが提供する『Outlook』のサポートチームは『Microsoft Word』を用いてHTMLメールを作成することを推奨していますが（※）、『Microsoft Word』で作成されたHTMLメールは、GmailやiOS、サンダーバードなど別のメールクライアントでは正しく機能しないこともあります。その逆もまた然りです。HTMLメールはこういった複雑な受信環境を前提のもとに作成する必要があります。
※この理由として「長年ユーザーにはそうしてもらっているし、セキュリティ上の観点からそうしている」という回答がサポートチームから得られたケースもあるようです。
HTMLメールを受け取る環境の組み合わせは100万以上存在する
スマートフォンが浸透したことにより、あらゆる環境でHTMLメールを閲覧することが可能になりました。その結果、様々なメールクライアントとデバイス、それらのバージョンの掛け合わせでの閲覧が想定されるようになりました。その組み合わせのパターンは、100万種類以上あると言われています。つまりどんな環境でも間違いなく閲覧できるHTMLメールを作ることは不可能と言っても良いでしょう。
ウェブのHTMLとは全く違う
通常のウェブ開発のような挙動をHTMLメールに期待することは避けた方が良いでしょう。既に記載したとおり標準的なサポートも存在しませんし、100万種類以上の閲覧環境が存在するうえ、divを使えないケースがあったり、マージンが完全にサポートされていないメールクライアント（主にOutlook）があったりするからです。一般的なHTMLや最新のCSSの仕様があまり役立たないということを認識しておくことも重要です。こうした細かい点を次の章からご紹介していきます。
HTMLメールの構造を理解しよう
HTMLメールがウェブとは異なる特別な仕様であることはご理解いただけたでしょうか。ここからは作成方法と主な注意点についてご紹介します。シンプルなHTMLメールを想定してご紹介します。
1.DOCTYPEを指定する
HTMLメール作成は、DOCTYPE宣言（文書型宣言）から始まります。DOCTYPE宣言とは、この文書がHTMLであることや、どのHTMLのバージョンか、HTMLタグとHTMLとCSSがどのルールに従った記述かをプログラムに知らせるコードです。
文書間の不具合や不一致が一般的に少なくなると言われている点を考慮し、ここではXHTML 1.0 Transitionalを使用した記述をご紹介します。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>WiLL Mailで効率的にメルマガ配信する10のヒント</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> </head>
続けて『head要素』について説明します。「title」タグは、Webブラウザでメールを表示した際のタイトルになります。HTMLメールが正しく表示されなかった場合のブラウザ表示用のHTMLを用意する場合は設定しておきましょう。
「Content-Type」タグは、テキストと特殊文字の処理方法をレンダリングエンジンに伝えるためのものです。
「viewport」タグは、コンテンツの表示可能領域をデバイスの横幅に、また、初期拡大率を「等倍」に設定します。これを指定することで、スマートフォンなどのデバイスで閲覧した際にテキストと画像が画面の端に収まるようになります。
2.基本的にテーブルレイアウトで構成する
HTMLメールは、基本的にtable要素で作成します。article要素やsection要素などは使用しない前提で作成する必要があります。なぜなら繰り返しになりますが、デスクトップ、モバイルなどあらゆる環境での閲覧を考慮するとテーブルレイアウトがベターな選択肢といえるからです。また、tableタグを組むときにcolspanやrowspan、どちらも適切にサポートされていないため、これらを使わずに組み立てる必要があります。
3.文章入力にも一般的なタグは使用しない方が良い
h1,h2,h3などの見出しタグの使用もあまりお勧めできません。やはり標準的なサポートがないことがその理由です。従って文章を入力する際は、テキストブロックを独自のセルに配置し、そのセルにインライン方式を適用することが最善の策の一つと言えます。
4.CSSは埋め込み形式が一般的になりつつある
リッチなHTMLメールには、CSS（カスケーディングスタイルシート）が含まれています。HTMLはメールのコンテンツとレイアウトを構成する役割を担い、CSSはコンテンツのスタイルや書式設定（リンクの色や見出しのフォントなど）をする役割を担います。
このCSSを用いる場合、外部読み込み形式、埋め込み形式、インライン形式のいずれか3つの方法がありますが、2024年時点では埋め込み形式が最も一般的であり推奨される方法といえます。
埋め込み形式がなぜ最適なのか
埋め込み形式とは、CSSをHTMLドキュメントのheadに配置する形式です。近年スマートフォンが浸透してレスポンシブ・デザイン需要が増えたことで人気が高まっている形式なのです。
一部の電子メールクライアントは、タグ内の埋め込まれたCSSの大半を取り除いてしまいます。特にGmailが長い間この問題を抱えていましたが、2016年の秋にようやくサポートに対応しました。これにより、埋め込み形式が最適な状況がようやく整いました。
インライン形式とは
インライン形式とは、HTMLに直接記述する形式です。このインライン形式が様々なメールクライアント間でのレンダリングの互換性を保証する最も安全な方法です。しかしインライン形式は、作成に時間がかかり、管理するのが難しい場合があるのが難点です。うまく機能せずコンテンツが表示されないといった問題も抱えています。
なお、外部読み込み形式は、メールデザインの場合、多くのWebメールクライアントが外部スタイルシートへのリンクをブロックしてしまうため、採用するケースはあまり見受けられません。
5.マージン（行間）が正しく動作しないこともある
マージンタグは、文章の行間を指定する機能を担っており、HTMLメールのレイアウト作成において大きな役割を果たします。ところが『Hotmail』や『Outlook』は2013年頃よりこのマージンタグのサポートを打ち切っています（もともと正しく動作していたわけでもないですが）。
「Outlookで閲覧したメールの行間は、他のメールクライアントよりも広くなる」と割り切ったレイアウトも考慮することがこの問題への最適な解決方法のひとつともいえます。
6.フォントの一括指定プロパティなどは使えない
サポートしているメールクライアントが少ないため、フォントサイズの一括指定プロパティ（例：style = “font：8px / 14px Arial、sans-serif;”など）の使用は避けた方が良いでしょう。
7.容量を大きくしすぎないように注意しよう
HTMLメールはなるべく小さいサイズで送るようにしましょう。100kb(キロバイト)以内に収めるのが理想的です。Gmailの場合、102kb以上の大きさのメールを勝手にクリッピングしてしまいます。つまりそれ以上の大きさに該当するコンテンツを勝手に隠してしまうのです。
また、容量が100kbを越えると到達率に悪影響があるとも言われていますので、詰め込みすぎず簡潔にわかりやすいコンテンツにするように心がけましょう。
HTMLメールの作り方
ここからは実際にHTMLメールの作成方法を解説していきます。最終的には簡単なHTMLメールのテンプレートを作成します。
コーディング時のポイントや注意点
まずは、HTMLメールをコーディングする上での基本的なポイントや注意点を確認しておきましょう。
HTML属性とCSSでコーディングする
HTMLメールをコーディングする際の最善の方法は、HTMLに属性が存在する場合は、まずはCSSの代わりにそれを使用することです。これは、HTML属性については、多くのメールクライアントが表示をサポートしている反面、CSSについては、サポートされていないプロパティが多数存在するためです。
例えば、テキストのサイズと色を指定する場合は、まずはFONTタグを使用して以下のように記述します。
<font size="2" color="#ffffff">テキスト</font>
そして、より多くの閲覧環境での表示をサポートする目的として、同じスタイルのCSSも記述しておきます。
<font size="2" color="#ffffff" style="font-size:14px;color:#ffffff;">テキスト</font>
上記のように、HTML属性とCSSを重複指定した場合、優先して適用されるのは、CSSで指定したスタイルになります。もしCSSが効かなかった場合に、HTML属性で指定したスタイルが適用されるという順番になります。
同様に、テーブルレイアウトの作成も、まずはTABLEタグの属性（width、height、border、alignなど）を使用し、足りない部分をCSSで補完しながらコーディングします。
また、補足として、カラーコードの指定については、 3文字の略記（例：#000）が全てのメールクライアントで機能するとは限らないため、6文字コード（例：#000000）で記述するようにしましょう。
DIVタグ、Pタグは極力使用しない
Webサイト制作において、ブロックや段落を表現する、DIVタグやPタグも極力使用せずにコーディングした方が安全です。これらのタグは、メールクライアントによって予想もしない表示崩れを起こす場合があります。
ブロックや段落は、TABLEタグ、TRタグ、BRタグなどを使用して表現した方が、安全だといえます。
HTMLメールの横幅
HTMLメールの横幅は、レスポンシブデザインに対応をするか、しないかによって決め方が異なります。まず、レスポンシブデザインに対応する場合については、PCとスマホで横幅は別々に考えます。
PC用の横幅は「600px」前後で任意に設定すれば良いでしょう。これは多くのPCメールクライアント、Webメールで快適に表示するための安全な横幅です。スマホ用の横幅については、画面の横幅に応じて拡大縮小するように100%指定で設定します。
※HTMLメールをレスポンシブデザインに対応させる方法については、後の章で詳しく解説します。
次に、レスポンシブデザインに対応しない場合については、PCとスマホで同じレイアウト、同じ横幅のHTMLメールを表示させることになります。
この場合は、画面が小さなスマホでの見え方を優先して、横幅を小さめに設定しましょう。横幅を大きくし過してしまうと、スマホでメールを見た時に、文字や画像が小さくて読みづらかったり、思わぬ表示崩れを起こす場合があります。
横幅は500px前後に設定し、画像やテキストを詰め込みすぎない、シンプルなシングルカラムレイアウトにするのがお勧めです。
画像の拡大縮小
メディアクエリーを使用したレスポンシブデザインに対応させることを前提にした場合、画像も画面の横幅に応じて自動で拡大縮小をさせたいので、imgタグに対して横幅100%を設定しておきます。
img { width: 100%; /* 画面サイズに応じて拡大縮小する */ }しかしながら、スマホ画面の横幅100%に画像を表示した場合に、PC用に作成した画像幅がスマホの横幅を下回り、画像が引き伸ばされて表示されてしまうことがあります。
これを防ぐためには、あらかじめモバイルファーストで画像の横幅サイズを決める必要があります。サポートする端末の解像度や、表示レイアウトなどを考慮しながら、最適な横幅の画像を用意しましょう。
もし、用意できる元画像が小さい場合や、画像を引き伸ばしたくない場合については、imgタグに対してmax-widthを設定しておきます。
img { width: 100%; /* 画面サイズに応じて拡大縮小する */ max-width: 100%; /* 元画像のサイズ以上には拡大しない */ }画像のATL属性
画像が表示されない場合、代替テキストととして表示されるのがALT属性です。HTMLメールを作成する場合、ALTは必ず設定すべき項目だと言えます。
なぜなら、多くのメールクライアントのデフォルト設定は、画像が表示されない仕様になっており、初めにメールクライアントに読み込まれるのは、ALTに設定したテキストだからです。
また、通信速度が遅いモバイル環境では、画像が読み込まれている間も、ALTに設定したテキストが表示されます。
ALTが未設定の場合
ALTを設定した場合
もしも、ファーストビューとして表示するメッセージがとても重要な場合は、画像のみのアイキャッチ画像ではなく、以下のイメージのようにテキストと画像を併用したデザインを使用すると良いでしょう。
ALTを装飾する
HTMLメールでは、ALTを装飾してテキストを目立たせる方法も有効なTipsのひとつです。設定方法は、装飾したい画像に対してCSSで文字のスタイルを設定します。
/* ロゴ画像のATL装飾 */ .logo a { color: #ffffff; /* 白い文字色 */ font-size: 18px; /* 文字サイズを18px */ } /* アイキャッチ画像のATL装飾 */ .img01 a { color: #f30000; /* 赤い文字色 */ font-size: 34px; /* 文字サイズを34px */ font-weight: bold; /* 文字を太字 */ }※メールクライアントによって、ALTの表示や装飾に対応していない場合があります。
絶対パス指定
画像のパスは、必ず絶対パス（http://、https://から始まるアドレス）で指定するようにしましょう。
<!-- 絶対パスによる画像URL指定の例--> <img src="https://www.sapana.co.jp/img/image.png">
WebサイトのHTMLファイルや画像ファイルは、同じサーバー上に置かれるため相対パス（../、../../などから始まるアドレス）で指定することができます。
<!-- 相対パスによる画像URL指定の例--> <img src="../img/image.png">
しかしながら、システムから配信されるHTMLメールは、ユーザーのメールクライアント側にHTMLファイルが送信されるため、相対パスでは画像を正しく読み込むことができません。同様に、リンク設定についても、絶対パスで指定しましょう。
使用可能なCSSスタイル
CSSで指定するスタイルについては、まだまだメールクライアントによってサポート状況が異なります。Webサイトでは当たり前に使用されているCSSプロパティが、HTMLメールでは使用できないケースが多くあります。
より多くの環境で正しくHTMLメールを表示するためには、多くのメールクライアントがサポートしているCSSだけを使用する必要があります。
以下の表は、HTMLメールで使用頻度の高いCSSプロパティと、代表的なPCメールクライアントの対応状況を示した参考データです。
○：対応 ×：非対応 ▲：部分的にバグあり （2022年1月時点）
PCメールクライアント Outlook 2007–16 Outlook Express Apple Mail 10 Thunderbird Windows 10 Mail head内のstyle指定 ○ ○ ○ ○ ○ @media × ○ ○ ○ × font-family ○ ▲ ○ ○ ○ font-size ○ ○ ○ ○ ○ font-weight ○ ○ ○ ○ ○ text-align ○ ○ ○ ○ ○ text-decoration ○ ○ ○ ○ ○ line-height ▲ ○ ○ ○ ▲ letter-spacing ○ ○ ○ ○ ○ vertical-align ▲ ○ ○ ○ ▲ background-color ▲ ○ ○ ○ ▲ background-image ▲ × ○ ○ × border ▲ ○ ○ ○ ▲ border-color ▲ ○ ○ ○ ▲ border-radius × × ○ ○ × border-collapse ○ ○ ○ ○ ○ border-spacing × × ○ ○ × height ▲ ○ ○ ○ ▲ width ▲ ○ ○ ○ ▲ max-width × × ○ ○ × margin ▲ ○ ○ ○ ▲ padding ▲ ○ ○ ○ ▲ display ▲ ▲ ○ ○ ▲ float × ○ ○ ○ × clear × ○ ○ ○ × :hover × ○ ○ ○ × PCメールクライアントについては、特にOutlookが多くの問題を抱えており、HTMLメールのコーディングを難しくさせています。これはOutlookがバージョン2007からHTMLを表示するレンダリングエンジンをIEからWordに変更したことが原因だと言われています。
モバイルメールクライアント（Android Mail、iOS Mail、Gmail Appなど）や、Webメール（Gmail、G Suite、Outlook.com、Yahooメールなど）については、PCメールクライアントに比べて、多くのCSSプロパティに対応しています。
例えば、Webメールの中で最もシェアの高いGmail（G Suite含む）に関して言えば、上記のCSSプロパティ全てに対応しています。より詳しい情報は、以下のサイトをご参照ください。
データ参照元：Campaign Monitor（https://www.campaignmonitor.com/css/）
HTMLメールのテンプレートを作成する
ここからは、簡単なHTMLメールのテンプレートを作成しながら解説を進めていきます。
テンプレートは、「ヘッダー」「大見出し」「アイキャッチ画像」「テキスト」「ボタン」「罫線」「中見出し」「画像2列」「フッター」の9つの要素で構成します。
レイアウトイメージ図
DOCTYPEの設定
まずは、DOCTYPEから記述していきます。DOCTYPEとは、HTML文書の型をブラウザやメールクライアントに対して宣言するためのものです。
HTMLメールを作成する場合は、テーブルレイアウトの使用が許容されていた「HTML 4.01 Transitional」や「XHTML 1.0 Transitional」を宣言します。
「HTML 4.01 Transitional」を宣言する場合
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
「XHTML 1.0 Transitional」を宣言する場合
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
文字コードの設定
次にMETAタグで文字コードを設定します。文字化けを防止するために必ず設定しましょう。HTMLメールの文字コードは「iso-2022-jp」が推奨されています。
<meta http-equiv="Content-Type" content="text/html; charset=iso-2022-jp" />
ただし、ローカル環境でのHTML制作中は、Webブラウザでの表示チェックを何度も行うと思います。文字コードが「iso-2022-jp」だと文字化けを起こす場合があリますので、その場合は「UTF-8」で作業し、配信前に「iso-2022-jp」に戻すと良いでしょう。
※最近は、ほとんどのメールクライアントが「UTF-8」にも対応しています。
あわせて、METAタグでスタイルシート言語と、コンテンツ言語も指定しておきます。
<meta http-equiv="content-style-type" content="text/css"> <meta http-equiv="content-language" content="ja">
ベースの枠組みを作成する
ベースとなる枠組みを作成していきます。今回は、「コンテンツの横幅を600px」、「全体にグレーの背景色」、「コンテンツ部分に白い背景色」を設定していきます。最終的にレスポンシブデザインに対応させることを想定しながら制作を進めます。
まずは、テーブルを3つ入れ子にします。
<html> <body> <table> <!-- テーブル1 --> <table> <!-- テーブル2 --> <table> <!-- テーブル3 --> </table> </table> </table> </body> </html>
3つのテーブルの役目は、1番外側のテーブルが「全体にグレーの背景色を設定するためのテーブル」、2番目のテーブルが「コンテンツの横幅を設定するためのテーブル」、3番目のテーブルが「コンテンツを記述するためのテーブル」です。
「全体にグレーの背景色を設定するためのテーブル」は、以下のように記述します。
<!-- 全体の背景色を指定するためのtable --> <table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#ededed" style="width:100%;height:100%;background-color:#ededed;"> <!-- 中略 --> </table>
背景色が画面全体を覆うように、width=”100%” bgcolor=”#ebebeb”を設定し、CSSでもスタイルを記述しました。
htmlとbodyタグにも以下のようにCSSを記述します。あわせて使用するフォントも指定しました。
<style type="text/css"> html {width:100%;height:100%;} body {font-family: Arial,Helvetica,sans-serif; } </style> </head> <body style="width:100%;height:100%;margin:0;padding:0;">次に、「コンテンツの横幅を設定するためのテーブル」は、以下のように記述します。
<td valign="top"> <!-- 横幅を指定するためのtable --> <table width="600" align="center" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff" style="width:600px;background-color:#ffffff;"> <!-- 中略 --> </table> </td>コンテンツの横幅をwidth=”600″、背景色をbgcolor=”#ffffff”、テーブル全体が画面中央揃えになるように、align=”center”を設定します。
また、TABLEタグを入れたTDタグに対して、valign=”top”を設定します。valign=”” は、縦方向の文字の表示位置を指定する属性で、初期値が「中央揃え」です。何も指定をしないと、コンテンツが画面中央から表示されてしまいます。
最後に、「コンテンツを記述するためのテーブル」は、以下のように記述します。
<!-- コンテンツを記述するためのtable --> <table width="100%" border="0" cellpadding="20" cellspacing="0"> <tr> <td valign="top" align="left"> コンテンツ </td> </tr> </table>テーブルセル内に適度な余白を作るために、TABLEタグにcellpadding=”20″を設定します。TDタグに対しては、valign=”top”（縦方向を上揃え）と、align=”left”（横方向を左寄せ）で文字の表示位置も指定しておきます。
以上で、ベースとなる枠組みが完成しました。ここまでの完成ソースは以下になります。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-2022-jp"/> <meta http-equiv="content-style-type" content="text/css"> <meta http-equiv="content-language" content="ja"> <title></title> <style type="text/css"> html {width:100%;height:100%;} body {font-family: Arial,Helvetica,sans-serif; } </style> </head> <body style="width: 100%;height:100%;margin:0;padding:0;"> <!-- 全体の背景色を指定するためのtable --> <table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#ededed" style="width:100%;height:100%;background-color:#ededed;"> <tr> <td valign="top"> <!-- 横幅を指定するためのtable --> <table width="600" align="center" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff" style="width:600px;background-color:#ffffff;"> <tr> <td> <!-- コンテンツを記述するためのtable --> <table width="100%" border="0" cellpadding="20" cellspacing="0"> <tr> <td valign="top" align="left"> コンテンツ </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </body> </html>ヘッダー・フッターエリアの追加
ここからは、テーブルの構造をわかりやすく説明するために、あえてボーダーをガイド線として表示しながら制作していきたいと思います。埋め込み形式のCSSで、以下ようにボーダースタイルを設定します。（このボーダースタイルは最後に消します。）
table { border:1px solid #999999; border-collapse:collapse; }コンテンツエリアのテーブルを2回複製して、ヘッダーエリアとフッターエリアのソースを追加します。各エリアの文字の位置を中央揃えや右寄せにしたい場合は、TDタグを align=”center”、 align=”right”に任意で変更してください。
また、後ほどレスポンシブデザインに対応させることを想定して、TD要素に、class=”responsive-td”のクラスを追加しておきます。
<!-- ヘッダーエリア --> <table width="100%" border="0" cellpadding="20" cellspacing="0"> <tr> <td class="responsive-td" valign="top" align="left"> ヘッダーエリア </td> </tr> </table> <!-- コンテンツエリア --> <table width="100%" border="0" cellpadding="20" cellspacing="0"> <tr> <td class="responsive-td" valign="top" align="left"> コンテンツ </td> </tr> </table> <!-- フッターエリア --> <table width="100%" border="0" cellpadding="20" cellspacing="0"> <tr> <td class="responsive-td" valign="top" align="left"> フッターエリア </td> </tr> </table>ヘッダーエリアには、黒の背景色を設定し、ロゴ画像を表示するデザインにしたいと思います。以下のように、背景色のCSSと画像タグを追加します。
<!-- ヘッダーエリア --> <table width="100%" border="0" cellpadding="20" cellspacing="0"> <tr> <td class="responsive-td" valign="top" align="left" style="background-color:#000000;"> <img src="https://www.sapana.co.jp/img/htmlmail/htmlmail_logo.png" alt="LOGO" width="262" height="38" style="max-width:100%;color:#ffffff;"> </td> </tr> </table>ロゴ画像は、元サイズ以上に画像が引き伸ばされないように、max-width:100%を設定しておきます。また、背景色が黒なので、ALTテキストを白色に装飾して視認性を確保しました。以上でヘッダーエリアは完成です。
フッターも同様に、黒の背景色を設定し、FONTタグとCSSを使用して以下のようにコーディングしました。
<!-- フッターエリア --> <table width="100%" border="0" cellpadding="20" cellspacing="0"> <tr> <td class="responsive-td" valign="top" align="left" style="background-color:#000000;"> <font size="2" color="#ffffff" style="font-size:14px;color:#ffffff;"> 発行：XXXXX<br> 住所：XXXXXXXXXXXX<br> 電話：<a href="tel:00-0000-0000" style="color:#ffffff;">00-0000-0000</a><br> <br> [配信停止]<br> メールの受信をご希望されない場合は、<a href="#" style="color:#ffffff;text-decoration:underline;"><font color="#ffffff">こちら</font></a>よりお手続きお願い致します。<br> <br> Copyright (C) XXXXXXX CO.,LTD. All rights reserved. </font> </td> </tr> </table>大見出しの追加
大見出し部分をコーディングしていきます。まずコンテンツエリアのテーブルを複製します。FONTタグとCSSで、フォントサイズ、色、2行以上になることを想定して、行間も指定しておきます。
<!-- 大見出しtable --> <table width="100%" border="0" cellpadding="20" cellspacing="0"> <tr> <td valign="top" align="left"> <font size="5" color="#000000" style="font-size: 24px;color:#000000;line-height:1.4;"> 大見出しのサンプルです！<br> 大見出しのサンプルです！ </font> </td> </tr> </table>アイキャッチ画像の追加
アイキャッチ画像部分をコーディングしていきます。コンテンツエリアのテーブルを複製します。コンテンツの横幅600pxいっぱいに画像を表示するため、 セル内の余白をcellpadding=”0″に戻します。画面の横幅に応じて画像を拡大縮小させるためCSSでwidth:100%を設定しておきます。
<!-- アイキャッチ画像table --> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td class="responsive-td" valign="top" align="left"> <img src="https://www.sapana.co.jp/img/htmlmail/htmlmail_img.png" alt="アイキャッチ画像" width="600" style="width:100%;"> </td> </tr> </table>テキストの追加
通常テキスト部分をコーディングしていきます。コンテンツエリアのテーブルを複製し、FONTタグとCSSで、フォントサイズ、色、行間を指定しておきます。また、段落はPタグは使用せずに、BRタグの連続使用で表現しました。
<!-- テキストtable --> <table width="100%" border="0" cellpadding="20" cellspacing="0"> <tr> <td class="responsive-td" valign="top" align="left"> <font size="3" color="#000000" style="font-size:16px;color:#000000;line-height:1.4;">テキストのサンプルです。・・・<br><br>テキストのサンプルです。・・・<br></font> </td> </tr> </table>
ボタンの追加
ボタン部分をコーディングしていきます。コンテンツエリアのテーブルを複製し、TDタグ内にボタン用のテーブルを入れ子でさらに追加します。
<!-- ボタンtable --> <table width="100%" border="0" cellpadding="20" cellspacing="0"> <tr> <td class="responsive-td" valign="top" align="left"> <!-- ボタン用のテーブル --> <table border="0" class="btn-table" cellpadding="10" cellspacing="0"> <tr> <td align="center" valign="middle" class="btn-td"><a target="_blank" href="#"><font class="btn-font" size="5" color="#ffffff">ボタンテキスト</font></a></td> </tr> </table> </td> </tr> </table>ボタンのデザインをCSSで調整していきます。説明を分かりやすくするために、埋め込み形式のCSSで解説します。
.btn-table { width:100%; /* ボタンの横幅 */ border-radius:45px; /* ボタンの角丸半径 */ background-color:#008eef; /* ボタンの色 */ } .btn-td { padding:10px; /* ボタン内側の余白 ＝ tableタグのcellpaddingにも"10"を指定 */ height:70px; /* ボタンの高さ */ } .btn-td a { color:#ffffff; /* ボタン文字色 */ text-decoration:none; /* リンクアンダーラインの有無 */ display:block; /* ボタンのリンク範囲を拡張 */ } .btn-font { font-size:24px; /* ボタン文字サイズ */ line-height:1.4; /* ボタン文字行間 */ }ボタンのデザインは、読者に行動を喚起させるための重要なポイントです。ボタンの大きさ、カラー、文字色、文言など、少しの変化でも結果に大きな影響を及ぼす場合があります。CSSでデザインを調整しながら効果検証をしてみてください、
※更新性を考慮して、実際のテンプレートには、埋め込み形式とインライン形式の両方にボタンデザインのCSSを記述し、!important指定で埋め込み形式のCSSが優先的に適用されるようにしています。デザインを調整する場合は、埋め込み形式のCSSを修正してください。
罫線の追加
罫線部分をコーディングしていきます。コンテンツエリアのテーブルを複製し、罫線用のテーブルを追加します。まず、横幅いっぱいに罫線を引きたいので、cellpaddingは0に戻しておきます。
罫線は、WebサイトではHRタグをCSSで装飾して使用しますが、HTMLメールの場合、メールクライアントによっては、HRタグに装飾したCSSスタイルが適用されない場合があります。今回は、HRタグの代わりに、TABLEタグのTDに対して、ボーダーを設定して罫線を表現します。
<!-- 罫線table --> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td class="responsive-td" valign="top" align="center" height="25" style="border-bottom:1px dotted #999999; font-size:1px;line-height:0;"> </td> </tr> <tr> <td class="responsive-td" valign="top" align="center" height="25" style="font-size:1px;line-height:0;"> </td> </tr> </table>
TR・TDタグを上下に2行分追加し、上の行のTDに、border-bottomで罫線スタイルを設定します。下の行のTDは、罫線の下の余白を設定するためのものです。TDの高さは heightで指定しています。
また、TD内に空白タグを入れているため、罫線の上下の余白設定が大きく狂わないように、font-sizeとline-heightも設定しています。
中見出しの追加
中見出し部分をコーディングしていきます。中見出しのデザインは、左側にライン＋背景色を設定したいので、コンテンツエリアのテーブルを複製し、さらに同じテーブルを入れ子で追加します。
内側のTABLEタグのcellpaddingと、TDタグのCSSを調整して中見出しのデザインを作成します。
<!-- 中見出しtable --> <table width="100%" border="0" cellpadding="20" cellspacing="0"> <tr> <td class="responsive-td" valign="top" align="left"> <table width="100%" border="0" cellpadding="12" cellspacing="0"> <tr> <td class="responsive-td" valign="top" align="left" style="border-left:15px solid #000000;background-color:#ebebeb;"> <font size="3" color="#000000" style="font-size:16px;color:#000000;line-height:1.4;">中見出しのサンプル</font> </td> </tr> </table> </td> </tr> </table>
画像2列の追加
画像2列の部分をコーディングしていきます。コンテンツエリアのテーブルを複製し、TDタグ部分をさらに複製して２つの画像ブロックを作成します。widthには50%を設定します。
<!-- 画像2列table --> <table width="100%" border="0" cellpadding="20" cellspacing="0"> <tr> <!-- 画像ブロック1 --> <td class="responsive-td" width="50%" valign="top" align="left" > コンテンツ </td> <!-- 画像ブロック2 --> <td class="responsive-td" width="50%" valign="top" align="left" > コンテンツ </td> </tr> </table>次に、それぞれの画像ブロックのTDタグ内に、「画像」「リンクテキスト」「テキスト」の3つの要素を以下のように追加しました。
<!-- 画像ブロック1 --> <td class="responsive-td" width="50%" valign="top" align="left"> <!-- 画像 --> <img src="https://www.sapana.co.jp/img/htmlmail/htmlmail_img2.png" alt="画像" width="260" style="max-width:100%;margin-bottom:10px;margin-top:0px;" vspace="6" hspace="0" class="responsive-img"><br> <!-- リンクテキスト --> <font size="3" style="font-size:16px;line-height:1.4;"> <a href="#" style="color:#008eef;text-decoration:underline;">リンクテキスト</a><br> </font> <!-- テキスト --> <font size="3" color="#000000" style="font-size:16px;color:#000000;line-height:1.4;"> テキストサンプル </font> </td> <!-- 画像ブロック2 --> <!-- 後略 -->画像とリンクテキストの間に少し余白を作りたかったので、CSSのmargin-bottomで設定しました。marginが効かないメールクライアント対策として、img要素のvspace（画像上下の余白指定）を入れて、最低限の表示確保をしておきます。
また、後ほどレスポンシブデザインに対応させることを想定して、img要素に、class=”responsive-img”のクラスを追加しておきます。
最後にコンテンツエリアのテーブルを流用して、フッターとの間に高さ40pxの空白テーブルを追加しました。
<!-- 空白table 高さ40px --> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td class="responsive-td" valign="top" align="left" height="40" style="font-size:1px;line-height:0;"> </td> </tr> </table>
以上で、テンプレートの外観デザインはひと通り完成です。ガイドとして表示していたボーダースタイルを削除しておきます。
Outlookの表示対策
OutlookでHTMLメールを表示させると、TABLE要素に対して意図しないスペースが挿入される場合があります。このスペースを取り除くため、IEの条件付きコメントを使用して、Outlookにだけ適用されるCSSを追加しておきます。
<!--[if mso]> <style type="text/css"> /* Outlook専用のcss */ table,td { border-collapse:collapse; mso-table-lspace:0; mso-table-rspace:0; } table tr td { line-height: 1.4; } </style> <![endif]-->上記のようにOutlook専用のスタイルを使用すれば、その他の表示に関する問題についても回避できる可能性があります。
Outlookのバージョンで条件分岐したい場合には、Microsoft Officeをターゲットにする「mso」の後に、以下のバージョン番号を付与してください。
- Outlook 2000：9
- Outlook 2002：10
- Outlook 2003：11
- Outlook 2007：12
- Outlook 2010：14
- Outlook 2013：15
- Outlook 2016：16
- Outlook 2019：16
- Office 365：16
例：Outlook 2007以降のバージョンを指定する場合
<!--[if gte mso 12 ]> <style type="text/css"> /* 適用したいスタイル */ </style> <![endif]-->
スマホ表示に対応させる方法
ここからは、スマホでの表示対応（レスポンシブデザイン化）の方法を解説していきます。まず、ここまで作成してきたHTMLメールをスマホで確認してみましょう。画面に対してコンテンツがかなり小さく表示されているのが分かると思います。
スマホでもコンテンツを見やすくするためには、端末の画面幅に応じてコンテンツの表示を最適化する必要があります。
viewportの設定
HEADタグ内に、METAタグのviewport設定を以下のように記述してください。
<head> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> </head>
viewport設定とは、コンテンツを表示する領域を、ブラウザやメールクライアントに宣言するためのものです。「width=device-width, initial-scale=1.0」と記述することで、「端末の横幅に合わせてコンテンツを表示しなさい」という意味になります。
viewportを設定したことにより、端末幅いっぱいにコンテンツが表示されるようになりました。しかしながら、端末やメールクライアントによっては、コンテンツが見切れてしまう場合があり、viewport設定だけではまだ不十分だと言えます。
メディアクエリーの設定
次にメディアクエリーを使用して、スマホでの表示をさらに調整していきます。600pxをブレイクポイントととして、TABLEタグと、事前に仕込んでおいた「responsive-td」「responsive-img」クラスに対して、以下のスタイルを追加します。
@media only screen and (max-width: 600px) { table { width:100% !important; min-width:100%; } .responsive-td { width:100% !important; padding-left:5px !important; padding-right:5px !important; display: block !important; box-sizing: border-box !important; } .responsive-img { width:100% !important; height:auto !important; } }画面から見切れていたコンテンツが端末の画面内に収まり、2列表示だった画像も1列で大きく表示されるようになりました。
ブラウザ表示用のHTMLを用意する
HTMLメールが正しく表示されない場合に備えて、ブラウザ表示用のHTMLファイルを用意して、自社サーバーなどにアップロードしておきましょう。
このHTMLファイルは、HTMLメールの先頭部分でよく見かける「メールが正しく表示されない方はこちら」などのリンクの飛び先になります。
基本的には、メール配信用に作成したHTMLファイルをそのままアップロードすれば大丈夫ですが、Webサイトととしてインターネットに公開されることになるため、いくつか調整が必要な場合があります。
文字コードを変更する
ブラウザ表示用のHTMLの文字コードは、Webページで標準的に使用されている「utf-8」に設定しておくのが安全です。
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
noindexを設定する
サーバーにアップロードしたブラウザ表示用のHTMLを、Googleの検索エンジンにインデックスさせたくない場合には、METAタグでnoindexの設定を追加しておきます。
<meta name="robots" content="noindex">
TITLEタグを設定する
メール配信用のファイルでは、TITLEタグは設定しなくても問題はありませんが、Webブラウザ表示用のファイルを用意する場合は、必ずTITLEタグは設定しておきましょう。ページ閲覧時にブラウザのタブなどに表示されます。
<title>タイトル</title>
HTMLメールからリンクを貼る
ブラウザ表示用のHTMLファイルをサーバーにアップロードしたら、HTMLメールからリンクを貼ります。ここまで作成してきたテンプレートの先頭部分に、リンク設定用のテーブルを追加してみましょう。
<table width="100%" border="0" cellpadding="5" cellspacing="0"> <tr> <td class="responsive-td" valign="top" align="right" style="background-color:#ededed;"> <font size="1" color="#000000" style="font-size:12px;color:#000000;line-height:1.4;">メールが正しく表示されない方は<a href="#" style="color:#008eef;text-decoration:underline;">こちら</a></font> </td> </tr> </table>また、マルチパート配信（HTMLメールとテキストメールを同時に送信する機能）に対応したメール配信システムであれば、HTMLメールが表示出来ないメールクライアントに対して、テキストメールからブラウザ表示用のHTMLに誘導を促すこともできます。
以上で、HTMLメールのテンプレートは完成です。
完成ソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="content-style-type" content="text/css"> <meta http-equiv="content-language" content="ja"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="robots" content="noindex"> <title>タイトル</title> <style type="text/css"> html {width:100%;height:100%;} body,body-class {font-family:Arial,Helvetica,sans-serif;} .btn-table { width:100% !important; /* ボタンの横幅 */ border-radius:45px !important; /* ボタンの角丸半径 */ background-color:#008eef !important; /* ボタンの色 */ } .btn-td { padding:10px !important; /* ボタン内側の余白 ＝ tableタグのcellpaddingにも"10"を指定 */ height:70px !important; /* ボタンの高さ */ } .btn-td a { color:#ffffff !important; /* ボタン文字色 */ text-decoration:none !important; /* リンクアンダーラインの有無 */ display:block !important; /* ボタンのリンク範囲を拡張 */ } .btn-font { font-size:24px !important; /* ボタン文字サイズ */ line-height:1.4 !important; /* ボタン文字行間 */ } @media only screen and (max-width: 600px) { table {width:100% !important; min-width:100% !important;} .responsive-td {width:100% !important; padding-left:5px !important; padding-right:5px !important;display:block !important; box-sizing: border-box !important;} .responsive-img {width:100% !important; height:auto !important;} } </style> <!--[if mso]> <style type="text/css"> /* Outlook専用のcss */ table,td {border-collapse:collapse; mso-table-lspace:0; mso-table-rspace:0;} table tr td {line-height: 1.4;} </style> <![endif]--> </head> <body style="width:100%;height:100%;margin:0;padding:0;"> <!-- 全体の背景色を指定するためのtable --> <table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#ededed" style="width:100%;height:100%;background-color:#ededed;"> <tr> <td valign="top"> <!-- 横幅を指定するためのtable --> <table width="600" align="center" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff" style="width:600px;background-color:#ffffff;"> <tr> <td> <!-- リンクtable --> <table width="100%" border="0" cellpadding="5" cellspacing="0"> <tr> <td class="responsive-td" valign="top" align="right" style="background-color:#ededed;"> <font size="1" color="#000000" style="font-size:12px;color:#000000;line-height:1.4;">メールが正しく表示されない方は<a href="#" style="color:#008eef;text-decoration:underline;">こちら</a></font> </td> </tr> </table> <!-- ヘッダーエリア --> <table width="100%" border="0" cellpadding="20" cellspacing="0"> <tr> <td class="responsive-td" valign="top" align="left" style="background-color:#000000;"> <img src="https://www.sapana.co.jp/img/htmlmail/htmlmail_logo.png" alt="ロゴ" width="262" style="max-width:100%;color:#ffffff;"> </td> </tr> </table> <!-- コンテンツエリア --> <!-- 大見出しtable --> <table width="100%" border="0" cellpadding="20" cellspacing="0"> <tr> <td class="responsive-td" valign="top" align="left"> <font size="5" color="#000000" style="font-size:24px;color:#000000;line-height:1.4;"> 大見出しのサンプルです！<br> 大見出しのサンプルです！ </font> </td> </tr> </table> <!-- アイキャッチ画像table --> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td class="responsive-td" valign="top" align="left"> <img src="https://www.sapana.co.jp/img/htmlmail/htmlmail_img.png" alt="アイキャッチ画像" width="600" style="width:100%;"> </td> </tr> </table> <!-- テキストtable --> <table width="100%" border="0" cellpadding="20" cellspacing="0"> <tr> <td class="responsive-td" valign="top" align="left"> <font size="3" color="#000000" style="font-size:16px;color:#000000;line-height:1.4;">テキストのサンプルです。テキストのサンプルです。テキストのサンプルです。テキストのサンプルです。テキストのサンプルです。テキストのサンプルです。テキストのサンプルです。<br><br>テキストのサンプルです。テキストのサンプルです。テキストのサンプルです。テキストのサンプルです。テキストのサンプルです。テキストのサンプルです。テキストのサンプルです。<br></font> </td> </tr> </table> <!-- ボタンtable --> <table width="100%" border="0" cellpadding="20" cellspacing="0"> <tr> <td class="responsive-td" valign="top" align="left"> <table border="0" class="btn-table" cellpadding="10" cellspacing="0" style="width:100%;border-radius:45px;background-color:#008eef;"> <tr> <td align="center" valign="middle" class="btn-td" style="height:70px;padding:10px;"><a style="color:#ffffff;text-decoration:none;display:block;" target="_blank" href="#"><font class="btn-font" size="5" color="#ffffff" style="font-size:24px;line-height:1.4;">ボタンテキスト</font></a></td> </tr> </table> </td> </tr> </table> <!-- 罫線table --> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td class="responsive-td" valign="top" align="center" height="25" style="border-bottom:1px dotted #999999;font-size:1px;line-height:0;"> </td> </tr> <tr> <td class="responsive-td" valign="top" align="center" height="25" style="font-size:1px;line-height:0;"> </td> </tr> </table> <!-- 中見出しtable --> <table width="100%" border="0" cellpadding="20" cellspacing="0"> <tr> <td class="responsive-td" valign="top" align="left"> <table width="100%" border="0" cellpadding="12" cellspacing="0"> <tr> <td class="responsive-td" valign="top" align="left" style="border-left: 15px solid #000000;background-color:#ebebeb;"> <font size="3" color="#000000" style="font-size:16px;color:#000000;line-height:1.4;">中見出しのサンプル</font> </td> </tr> </table> </td> </tr> </table> <!-- 画像2列table --> <table width="100%" border="0" cellpadding="20" cellspacing="0"> <tr> <!-- 画像ブロック1 --> <td class="responsive-td" width="50%" valign="top" align="left"> <img src="https://www.sapana.co.jp/img/htmlmail/htmlmail_img2.png" alt="画像" width="260" style="max-width:100%;margin-bottom:10px;margin-top:0px;" vspace="6" hspace="0" class="responsive-img"><br> <font size="3" style="font-size:16px;line-height:1.4;"> <a href="#" style="color:#008eef;text-decoration:underline;">リンクテキスト</a><br> </font> <font size="3" color="#000000" style="font-size:16px;color:#000000;line-height:1.4;"> テキストサンプル </font> </td> <!-- 画像ブロック2 --> <td class="responsive-td" width="50%" valign="top" align="left"> <img src="https://www.sapana.co.jp/img/htmlmail/htmlmail_img2.png" alt="画像" width="260" style="max-width:100%;margin-bottom:10px;margin-top:0px;" vspace="6" hspace="0" class="responsive-img"><br> <font size="3" style="font-size:16px;line-height:1.4;"> <a href="#" style="color:#008eef;text-decoration:underline;">リンクテキスト</a><br> </font> <font size="3" color="#000000" style="font-size:16px;color:#000000;line-height:1.4;"> テキストサンプル </font> </td> </tr> </table> <!-- 空白table 高さ40px --> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td class="responsive-td" valign="top" align="left" height="40" style="font-size:1px;line-height:0;"> </td> </tr> </table> <!-- フッターエリア --> <table width="100%" border="0" cellpadding="20" cellspacing="0"> <tr> <td class="responsive-td" valign="top" align="left" style="background-color:#000000;"> <font size="2" color="#ffffff" style="font-size:14px;color:#ffffff;"> 発行：XXXXX<br> 住所：XXXXXXXXXXXX<br> 電話：<a href="tel:00-0000-0000" style="color:#ffffff;">00-0000-0000</a><br> <br> [配信停止]<br> メールの受信をご希望されない場合は、<a href="#" style="color:#ffffff;text-decoration:underline;"><font color="#ffffff">こちら</font></a>よりお手続きお願い致します。<br> <br> Copyright (C) XXXXXXX CO.,LTD. All rights reserved. </font> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </body> </html>以下は、テンプレートを活用したHTMLメールの作例イメージです。
HTMLメール作成エディタを利用する方法
さて、ここまでご紹介してきた方法で、HTMLメールを作成するためには、HTMLやCSSの専門的な知識やスキルを持った人材や外注コストが必要になります。
しかしながら、「プログラムの知識は無いけれど、画像を入れたメールを送りたい」という、メルマガ担当者の方も多いのではないでしょうか。そんな方々にお勧めなのが『HTMLメール作成エディタ』を利用する方法です。
HTMLメール作成エディタとは？
HTMLメール作成エディタとは、HTMLやCSSの知識が無くても、ドラッグ＆ドロップなどの直感的なマウス操作で、HTMLメールを作成することができる専用ツールのことです。
ブログ記事やWord文書を作成するような感覚で、エディタ上でデザインを確認しながら、HTMLメールを作成することができるため、初心者の方や、忙しい担当者の方でも、無理なく気軽に利用することができます。
また、HTMLメール作成エディタの中には、スマートフォン表示に対応したレスポンシブデザインのHTMLメールを作成できるものや、フィーチャーフォン向けのデコメの作成ができるものもあります。
HTMLメール作成エディタは、さまざまなメールクライアントとデバイスで、正しくメールが表示されるように開発・日々アップデートされているため、メールが表示されない、レイアウトが崩れている、といった不具合発生のリスクも最小限に抑えることができます。
HTMLメール作成エディタを利用するメリット
HTMLメール作成エディタを利用することで、以下のようなメリットがあります。
- HTML/CSSの知識が無くても利用ができる
- メール作成時間とコストを大幅に短縮できる
- メールキャンペーンの企画作成に集中できる
- 外注していた業務を自社で行うことができる
- スマホ表示レスポンシブ対応が簡単にできる
- 表示崩れのリスクを小さくすることができる
- リンクパラメータの埋め込みを自動化できる
- 今すぐHTMLメールの配信を始めることができる
ただし、導入するエディタによっては、上記のようなメリットが得られない場合もあります。HTMLメール作成エディタを利用する場合は、導入前に使い勝手や必要な機能の有無などをしっかり確認するようにしましょう。
まとめ
HTMLメールの主な特徴と作成時のポイントや注意点を詳しくご紹介して来ましたが、いかがでしたでしょうか。標準的なウェブデザインの知識やスキルが使えないのがHTMLメールデザインなのだということをご理解いただけたかと思います。また、レスポンシブデザイン対応を行うとより複雑な構造になります。
しかし皆さんの本来の目的は、クセのあるHTMLメールデザインをゼロから学ぶことではなく、効果的なHTMLメールを配信することのはずです。手間の掛かる作業はクラウドサービスでどんどん効率化することをお勧めします。
当社のメール配信システムも『誰でも簡単に』をコンセプトに開発された、ノーコードHTMLメールエディタを搭載しています。ご興味がありましたらぜひお問い合わせください。
レスポンシブデザイン対応のHTMLメール作成が可能！
ノーコードのHTMLメールエディタをお試しください！最後までお読みいただきありがとうございました。
Category：
