最終更新日:2020年1月8日メールマーケティングメルマガは、顧客の受信箱に直接訴求できるため、2018年でもマーケティング施策の中で、最も高いROI(投資対効果)を誇ります。これは正しく表示されるHTMLメール作成を行なってこそ得られる効果です。本記事ではきちんと顧客に届けるためのHTMLメール作成の基本を解説します。MailのHTMLメールエディタをお試しください。まとめHTMLメールとはHTMLメールとは、「HTMLで構成された電子メール」です。ウェブサイトのように本文に画像を挿入したり色を付けたりしたレイアウトを利用できるため、テキストメールよりも販促や物販に適した内容を送信できます。HTMLメールが販促に適していることは調査結果でもわかっています。米国のHubSpot社が実施した調査によると、テキストメールを好むと答えた回答者が35%だったのに対して、65%が画像を含むHTMLメールを好むと回答しています。米国のVero社が5,000以上のメルマガキャンペーンを分析した結果、画像のあるメルマガは、画像のないメルマガよりもクリック率が42%高いことがわかりました。Mailの14日間無料トライアルを申込むより多くの効果検証が行える上述のクリック数以外にも、HTMLメールを送ることでメールを読者が開いたかを確認する「開封数」を取得できるようになります。開封数は、HTMLメール内の画像の読み込まれた回数としてカウントされます。この数値を取得することで、メール配信した件数から開封率を算出し、効果改善の指標に利用することが出来ます。この開封率によって読者の興味と訴求内容の関連度を測ることができます。開封率高いHTMLメールは、読者の興味と件名の親和性が高いことが伺えます。一方で開封率は高いもののクリック率が低い場合は、件名とメールのコンテンツにかい離があることが考えられます。このように、HTMLメールを配信することで、クリック率だけでは見えづらかった読者のアクションを把握し、より精度の高いメールマガジンを送ることができるようになるのです。メルマガの効果測定は出来ていますか?大事な指標7個をまずチェック!メルマガ配信の目的が売上の増加である場合、メルマガ配信後の効果測定は欠かせません。今回はメルマガの効果測定に欠かせない7つの指標をご紹介します。これらの指標を用いて、効果的なコンテンツが何か、誰が優良顧客なのかをきちんと把握しましょう。・メルマガ...willcloud.jp“標準的なHTMLメール”は存在しない世の中には「標準的なHTMLメール」という規格が存在しません。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がどのルールに従った記述かをプログラムに知らせるコードです。Transitionalを使用した記述をご紹介します。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つの方法がありますが、2018年時点では埋め込み形式が最も一般的であり推奨される方法といえます。埋め込み形式がなぜ最適なのか埋め込み形式とは、CSSをHTMLドキュメントのheadに配置する形式です。近年スマートフォンが浸透してレスポンシブ・デザイン需要が増えたことで人気が高まっている形式なのです。一部の電子メールクライアントは、タグ内の埋め込まれたCSSの大半を取り除いてしまいます。Gmailが長い間この問題を抱えていましたが、2016年の秋にようやくサポートに対応しました。これにより、埋め込み形式が最適な状況がようやく整いました。インライン形式とはインライン形式とは、HTMLに直接記述する形式です。このインライン形式が様々なメールクライアント間でのレンダリングの互換性を保証する最も安全な方法です。インライン形式は、作成に時間がかかり、管理するのが難しい場合があるのが難点です。うまく機能せずコンテンツが表示されないといった問題も抱えています。外部読み込み形式は、メールデザインの場合、多くのWebメールクライアントが外部スタイルシートへのリンクをブロックしてしまうため、採用するケースはあまり見受けられません。5.マージン(行間)が正しく動作しないこともあるマージンタグは、文章の行間を指定する機能を担っており、HTMLメールのレイアウト作成において大きな役割を果たします。ところが『Hotmail』や『Outlook』は2013年頃よりこのマージンタグのサポートを打ち切っています(もともと正しく動作していたわけでもないですが)。「Outlookで閲覧したメールの行間は、他のメールクライアントよりも広くなる」と割り切ったレイアウトも考慮することがこの問題への最適な解決方法のひとつともいえます。Arial、sans-serif;”など)の使用は避けた方が良いでしょう。7.容量を大きくしすぎないように注意しようHTMLメールはなるべく小さいサイズで送るようにしましょう。100kb(キロバイト)以内に収めるのが理想的です。Gmailの場合、102kb以上の大きさのメールを勝手にクリッピングしてしまいます。それ以上の大きさに該当するコンテンツを勝手に隠してしまうのです。容量が100kbを越えると到達率に悪影響があるとも言われていますので、詰め込みすぎず簡潔にわかりやすいコンテンツにするように心がけましょう。改善するための6つのポイントメルマガ配信にとって最も大事なことは、きちんと相手に届くことですよね。この「メルマガが相手に届く」という言葉には『到達率』と『配信成功率』という2つの定義が含まれます。今回はそれぞれの定義の違いと、どうすれば『到達率』が向上するかをご紹介します。...willcloud.jpHTMLメールの作り方ここからは実際にHTMLメールの作成方法を解説していきます。最終的には簡単なHTMLメールのテンプレートを作成します。コーディング時のポイントや注意点まずは、HTMLメールをコーディングする上での基本的なポイントや注意点を確認しておきましょう。HTML属性とCSSでコーディングするHTMLメールをコーディングする際の最善の方法は、HTMLに属性が存在する場合は、まずはCSSの代わりにそれを使用することです。これは、HTML属性については、多くのメールクライアントが表示をサポートしている反面、CSSについては、サポートされていないプロパティが多数存在するためです。テキストのサイズと色を指定する場合は、まずはFONTタグを使用して以下のように記述します。多くの閲覧環境での表示をサポートする目的として、同じスタイルのCSSも記述しておきます。上記のように、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%を設定しておきます。*/}しかしながら、スマホ画面の横幅100%に画像を表示した場合に、PC用に作成した画像幅がスマホの横幅を下回り、画像が引き伸ばされて表示されてしまうことがあります。これを防ぐためには、あらかじめモバイルファーストで画像の横幅サイズを決める必要があります。サポートする端末の解像度や、表示レイアウトなどを考慮しながら、最適な横幅の画像を用意しましょう。用意できる元画像が小さい場合や、画像を引き伸ばしたくない場合については、imgタグに対してmax-widthを設定しておきます。画像が表示されない場合、代替テキストととして表示されるのがALT属性です。HTMLメールを作成する場合、ALTは必ず設定すべき項目だと言えます。多くのメールクライアントのデフォルト設定は、画像が表示されない仕様になっており、初めにメールクライアントに読み込まれるのは、ALTに設定したテキストだからです。通信速度が遅いモバイル環境では、画像が読み込まれている間も、ALTに設定したテキストが表示されます。ALTが未設定の場合ALTを設定した場合もしも、ファーストビューとして表示するメッセージがとても重要な場合は、画像のみのアイキャッチ画像ではなく、以下のイメージのようにテキストと画像を併用したデザインを使用すると良いでしょう。ALTを装飾するHTMLメールでは、ALTを装飾してテキストを目立たせる方法も有効なTipsのひとつです。設定方法は、装飾したい画像に対してCSSで文字のスタイルを設定します。*/}※メールクライアントによって、ALTの表示や装飾に対応していない場合があります。画像のパスは、必ず絶対パス(http://、https://から始まるアドレス)で指定するようにしましょう。WebサイトのHTMLファイルや画像ファイルは、同じサーバー上に置かれるため相対パス(../、../../などから始まるアドレス)で指定することができます。システムから配信されるHTMLメールは、ユーザーのメールクライアント側にHTMLファイルが送信されるため、相対パスでは画像を正しく読み込むことができません。同様に、リンク設定についても、絶対パスで指定しましょう。使用可能なCSSスタイルCSSで指定するスタイルについては、まだまだメールクライアントによってサポート状況が異なります。Webサイトでは当たり前に使用されているCSSプロパティが、HTMLメールでは使用できないケースが多くあります。多くの環境で正しくHTMLメールを表示するためには、多くのメールクライアントがサポートしているCSSだけを使用する必要があります。以下の表は、HTMLメールで使用頻度の高いCSSプロパティと、代表的なPCメールクライアントの対応状況を示した参考データです。×PCメールクライアントについては、特にOutlookが多くの問題を抱えており、HTMLメールのコーディングを難しくさせています。これはOutlookがバージョン2007からHTMLを表示するレンダリングエンジンをIEからWordに変更したことが原因だと言われています。Suite、Outlook.com、Yahooメールなど)については、PCメールクライアントに比べて、多くのCSSプロパティに対応しています。Suite含む)に関して言えば、上記のCSSプロパティ全てに対応しています。詳しい情報は、以下のサイトをご参照ください。Monitor(https://www.campaignmonitor.com/css/)HTMLメールのテンプレートを作成するここからは、簡単なHTMLメールのテンプレートを作成しながら解説を進めていきます。し」「画像2列」「フッター」の9つの要素で構成します。レイアウトイメージ図DOCTYPEの設定まずは、DOCTYPEから記述していきます。DOCTYPEとは、HTML文書の型をブラウザやメールクライアントに対して宣言するためのものです。Transitional」を宣言します。次にMETAタグで文字コードを設定します。文字化けを防止するために必ず設定しましょう。HTMLメールの文字コードは「iso-2022-jp」が推奨されています。ローカル環境でのHTML制作中は、Webブラウザでの表示チェックを何度も行うと思います。文字コードが「iso-2022-jp」だと文字化けを起こす場合があリますので、その場合は「UTF-8」で作業し、配信前に「iso-2022-jp」に戻すと良いでしょう。※最近は、ほとんどのメールクライアントが「UTF-8」にも対応しています。あわせて、METAタグでスタイルシート言語と、コンテンツ言語も指定しておきます。ベースの枠組みを作成するベースとなる枠組みを作成していきます。今回は、「コンテンツの横幅を600px」、「全体にグレーの背景色」、「コンテンツ部分に白い背景色」を設定していきます。最終的にレスポンシブデザインに対応させることを想定しながら制作を進めます。テーブルを3つ入れ子にします。</table></table></body></html>3つのテーブルの役目は、1番外側のテーブルが「全体にグレーの背景色を設定するためのテーブル」、2番目のテーブルが「コンテンツの横幅を設定するためのテーブル」、3番目のテーブルが「コンテンツを記述するためのテーブル」です。「全体にグレーの背景色を設定するためのテーブル」は、以下のように記述します。bgcolor=”#ebebeb”を設定し、CSSでもスタイルを記述しました。htmlとbodyタグにも以下のようにCSSを記述します。あわせて使用するフォントも指定しました。style="width:100%;height:100%;margin:0;padding:0;">次に、「コンテンツの横幅を設定するためのテーブル」は、以下のように記述します。</table></td>コンテンツの横幅をwidth=”600′′、背景色をbgcolor=”#ffffff”、テーブル全体が画面中央揃えになるように、align=”center”を設定します。TABLEタグを入れたTDタグに対して、valign=”top”を設定します。縦方向の文字の表示位置を指定する属性で、初期値が「中央揃え」です。何も指定をしないと、コンテンツが画面中央から表示されてしまいます。最後に、「コンテンツを記述するためのテーブル」は、以下のように記述します。</tr></table>テーブルセル内に適度な余白を作るために、TABLEタグにcellpadding=”20′′を設定します。TDタグに対しては、valign=”top”(縦方向を上揃え)と、align=”left”(横方向を左寄せ)で文字の表示位置も指定しておきます。以上で、ベースとなる枠組みが完成しました。ここまでの完成ソースは以下になります。</body></html>ヘッダー・フッターエリアの追加ここからは、テーブルの構造をわかりやすく説明するために、あえてボーダーをガイド線として表示しながら制作していきたいと思います。埋め込み形式のCSSで、以下ようにボーダースタイルを設定します。(このボーダースタイルは最後に消します。#999999;border-collapse:collapse;}コンテンツエリアのテーブルを2回複製して、ヘッダーエリアとフッターエリアのソースを追加します。align=”right”に任意で変更してください。後ほどレスポンシブデザインに対応させることを想定して、TD要素に、class=”responsive-td”のクラスを追加しておきます。</tr></table>ヘッダーエリアには、黒の背景色を設定し、ロゴ画像を表示するデザインにしたいと思います。以下のように、背景色のCSSと画像タグを追加します。</tr></table>ロゴ画像は、元サイズ以上に画像が引き伸ばされないように、max-width:100%を設定しておきます。背景色が黒なので、ALTテキストを白色に装飾して視認性を確保しました。以上でヘッダーエリアは完成です。フッターも同様に、黒の背景色を設定し、FONTタグとCSSを使用して以下のようにコーディングしました。color="#ffffff">こちら</font></a>よりお手続きお願い致します。大見出し部分をコーディングしていきます。コンテンツエリアのテーブルを複製します。FONTタグとCSSで、フォントサイズ、色、2行以上になることを想定して、行間も指定しておきます。</tr></table>アイキャッチ画像の追加アイキャッチ画像部分をコーディングしていきます。コンテンツエリアのテーブルを複製します。セル内の余白をcellpadding=”0′′に戻します。画面の横幅に応じて画像を拡大縮小させるためCSSでwidth:100%を設定しておきます。通常テキスト部分をコーディングしていきます。コンテンツエリアのテーブルを複製し、FONTタグとCSSで、フォントサイズ、色、行間を指定しておきます。段落はPタグは使用せずに、BRタグの連続使用で表現しました。style="font-size:16px;color:#000000;line-height:1.4;">テキストのサンプルです。・・・<br><br>テキストのサンプルです。</td></tr></table>ボタンの追加ボタン部分をコーディングしていきます。コンテンツエリアのテーブルを複製し、TDタグ内にボタン用のテーブルを入れ子でさらに追加します。</tr></table>ボタンのデザインをCSSで調整していきます。説明を分かりやすくするために、埋め込み形式のCSSで解説します。*/}ボタンのデザインは、読者に行動を喚起させるための重要なポイントです。ボタンの大きさ、カラー、文字色、文言など、少しの変化でも結果に大きな影響を及ぼす場合があります。※更新性を考慮して、実際のテンプレートには、埋め込み形式とインライン形式の両方にボタンデザインのCSSを記述し、!important指定で埋め込み形式のCSSが優先的に適用されるようにしています。デザインを調整する場合は、埋め込み形式のCSSを修正してください。罫線部分をコーディングしていきます。コンテンツエリアのテーブルを複製し、罫線用のテーブルを追加します。横幅いっぱいに罫線を引きたいので、cellpaddingは0に戻しておきます。罫線は、WebサイトではHRタグをCSSで装飾して使用しますが、HTMLメールの場合、メールクライアントによっては、HRタグに装飾したCSSスタイルが適用されない場合があります。今回は、HRタグの代わりに、TABLEタグのTDに対して、ボーダーを設定して罫線を表現します。</td></tr></table>TR・TDタグを上下に2行分追加し、上の行のTDに、border-bottomで罫線スタイルを設定します。下の行のTDは、罫線の下の余白を設定するためのものです。heightで指定しています。TD内に空白タグを入れているため、罫線の上下の余白設定が大きく狂わないように、font-sizeとline-heightも設定しています。中見出し部分をコーディングしていきます。中見出しのデザインは、左側にライン+背景色を設定したいので、コンテンツエリアのテーブルを複製し、さらに同じテーブルを入れ子で追加します。内側のTABLEタグのcellpaddingと、TDタグのCSSを調整して中見出しのデザインを作成します。画像2列の部分をコーディングしていきます。コンテンツエリアのテーブルを複製し、TDタグ部分をさらに複製して2つの画像ブロックを作成します。widthには50%を設定します。</td></tr></table>次に、それぞれの画像ブロックのTDタグ内に、「画像」「リンクテキスト」「テキスト」の3つの要素を以下のように追加しました。-->画像とリンクテキストの間に少し余白を作りたかったので、CSSのmargin-bottomで設定しました。marginが効かないメールクライアント対策として、img要素のvspace(画像上下の余白指定)を入れて、最低限の表示確保をしておきます。後ほどレスポンシブデザインに対応させることを想定して、img要素に、class=”responsive-img”のクラスを追加しておきます。最後にコンテンツエリアのテーブルを流用して、フッターとの間に高さ40pxの空白テーブルを追加しました。</td></tr></table>以上で、テンプレートの外観デザインはひと通り完成です。ガイドとして表示していたボーダースタイルを削除しておきます。Outlookの表示対策OutlookでHTMLメールを表示させると、TABLE要素に対して意図しないスペースが挿入される場合があります。このスペースを取り除くため、IEの条件付きコメントを使用して、Outlookにだけ適用されるCSSを追加しておきます。</style><![endif]-->上記のようにOutlook専用のスタイルを使用すれば、その他の表示に関する問題についても回避できる可能性があります。Officeをターゲットにする「mso」の後に、以下のバージョン番号を付与してください。*/</style><![endif]-->スマホ表示に対応させる方法ここからは、スマホでの表示対応(レスポンシブデザイン化)の方法を解説していきます。ここまで作成してきたHTMLメールをスマホで確認してみましょう。画面に対してコンテンツがかなり小さく表示されているのが分かると思います。スマホでもコンテンツを見やすくするためには、端末の画面幅に応じてコンテンツの表示を最適化する必要があります。viewportの設定HEADタグ内に、METAタグのviewport設定を以下のように記述してください。initial-scale=1.0"/></head>viewport設定とは、コンテンツを表示する領域を、ブラウザやメールクライアントに宣言するためのものです。initial-scale=1.0」と記述することで、「端末の横幅に合わせてコンテンツを表示しなさい」という意味になります。viewportを設定したことにより、端末幅いっぱいにコンテンツが表示されるようになりました。端末やメールクライアントによっては、コンテンツが見切れてしまう場合があり、viewport設定だけではまだ不十分だと言えます。次にメディアクエリーを使用して、スマホでの表示をさらに調整していきます。600pxをブレイクポイントととして、TABLEタグと、事前に仕込んでおいた「responsive-td」「responsive-img」クラスに対して、以下のスタイルを追加します。!important;}}画面から見切れていたコンテンツが端末の画面内に収まり、2列表示だった画像も1列で大きく表示されるようになりました。レスポンシブHTMLメールとは?特徴や長所・短所を紹介ウェブのトレンドがスマートフォンに移行し、メルマガ配信もスマートフォン対策が欠かせなくなりました。したスマホ対策の定番として『レスポンシブ・デザインを採用したHTMLメール』が挙げられます。今回は『レスポンシブ・デザインHTMLメール』の特徴、長所...willcloud.jpブラウザ表示用のHTMLを用意するHTMLメールが正しく表示されない場合に備えて、ブラウザ表示用のHTMLファイルを用意して、自社サーバーなどにアップロードしておきましょう。このHTMLファイルは、HTMLメールの先頭部分でよく見かける「メールが正しく表示されない方はこちら」などのリンクの飛び先になります。基本的には、メール配信用に作成したHTMLファイルをそのままアップロードすれば大丈夫ですが、Webサイトととしてインターネットに公開されることになるため、いくつか調整が必要な場合があります。文字コードを変更するブラウザ表示用のHTMLの文字コードは、Webページで標準的に使用されている「utf-8」に設定しておくのが安全です。noindexを設定するサーバーにアップロードしたブラウザ表示用のHTMLを、Googleの検索エンジンにインデックスさせたくない場合には、METAタグでnoindexの設定を追加しておきます。TITLEタグを設定するメール配信用のファイルでは、TITLEタグは設定しなくても問題はありませんが、Webブラウザ表示用のファイルを用意する場合は、必ずTITLEタグは設定しておきましょう。ページ閲覧時にブラウザのタブなどに表示されます。HTMLメールからリンクを貼るブラウザ表示用のHTMLファイルをサーバーにアップロードしたら、HTMLメールからリンクを貼ります。ここまで作成してきたテンプレートの先頭部分に、リンク設定用のテーブルを追加してみましょう。</tr></table>また、マルチパート配信(HTMLメールとテキストメールを同時に送信する機能)に対応したメール配信システムであれば、HTMLメールが表示出来ないメールクライアントに対して、テキストメールからブラウザ表示用のHTMLに誘導を促すこともできます。以上で、HTMLメールのテンプレートは完成です。style="font-size:16px;color:#000000;line-height:1.4;">テキストのサンプルです。テキストのサンプルです。テキストのサンプルです。テキストのサンプルです。テキストのサンプルです。テキストのサンプルです。テキストのサンプルです。<br><br>テキストのサンプルです。テキストのサンプルです。テキストのサンプルです。テキストのサンプルです。テキストのサンプルです。テキストのサンプルです。テキストのサンプルです。color="#ffffff">こちら</font></a>よりお手続きお願い致します。</body></html>以下は、テンプレートを活用したHTMLメールの作例イメージです。まとめいかがでしたでしょうか。主な特徴と作成時の注意点をざっとご紹介しました。ややこしく、標準的なウェブデザインで学んだことが使えないのがHTMLメールデザインなのだということをご理解いただけたと思います。ご覧の様に『レスポンシブ・デザイン』対応を行うと、より複雑な構造になります。皆さんの本来の目的はクセのあるHTMLメールデザインをゼロから学ぶことではなく、効果的なHTMLメールを配信することのはずです。手間の掛かる作業はクラウドサービスでどんどん効率化していきましょう。当社のメール配信システムも「誰でも簡単に」をコンセプトに開発されたHTMLメールエディタを搭載しています。ご興味がありましたらぜひお問い合わせくださいね。Mailの14日間無料トライアルを申込む最後までお読みいただきありがとうございました。マーケティングチームウェブマーケティングに関する情報をお届けするブログです。皆様に役に立つ情報、アップデート、イベントなど、様々なことを発信します。»おすすめ人気記事HTMLメールはどうやって作成するの?基本と特徴を徹底解説!【保存版】スマホでHTMLメールの画像が表示されない!どうしたら防げるの?メール配信システムを使うメリットとは?選定のポイントとともに解説ソーシャルからスローへ。