HTMLメールの作り方とは？ 2つの方法や作成時の注意点を解説

HTMLメールとは？

HTMLメールとは、文字装飾やレイアウト、画像の組み込みなどを行って作成したHTML形式のメールのことです。主にWebページの構築に使われる「HTML」というマークアップ言語を用いることで、見出しを強調したり画像やリンクを挿入したりと、まさにWebページをデザインするように自由度の高い構成を実現できます。

HTMLメールはシンプルな文字情報のみで構築するテキストメールと比べ、視認性が高く、目を引くなデザインにできるのが利点です。訴求力を高めやすく、メールマガジンや販促メールといったメールマーケティング施策において広く活用されています。また、メールの開封率やリンクのクリック率などの測定ができる点も、ビジネスの場で重宝される理由の一つです。

「HTMLメール」については、こちらの記事で詳しく解説しています。

HTMLメールの作り方｜2つの作成方法を紹介

HTMLメールの作成方法は、主に次の2種類に分けられます。

• 自分でコードを書く
• テンプレート・ツールを利用する

HTMLタグを使ってコードを記述することでレイアウトを構築するのがHTMLメールの基本的な仕組みですが、コーディングに関する専門知識が必要です。しかし現在では、ツールやテンプレートを活用することで、コードを自分で記述しなくてもHTMLメールを作成できるサービスも登場しています。それぞれにメリット・デメリットがあるため、目的やスキルに合った作り方を選ぶことが大切です。

ここでは、2つの作成方法の特徴について説明します。

自分でコードを書く

自分でコードを書いてHTMLメールを作成する場合、HTMLやCSSといったコンピューターに構造を伝えるための言語を直接記述する「コーディング」を行います。テンプレートに頼らずまっさらな状態からレイアウトを考えて指示するため、オリジナリティーの高いメールを作成できるのがメリットです。

一方で、ゼロからデザインやコーディングを行うため専門知識が求められることや、コーディング自体に手間がかかる点には注意が必要です。具体的な手順については、後の項目で詳しく解説します。

テンプレート・ツールを利用する

MA（マーケティングオートメーション）ツールやメール配信ツールの中には、メール作成を容易に行えるようサポートするエディターやテンプレートがついているものがあります。これらを使えばゼロからデザインを考える必要がなく、コーディングの知識がなくても、ドラッグ&ドロップなどの直感的な操作でHTMLメールを作成できます。

自分でコードを書く場合と比べ、デザインの自由度に制限があるという注意点はありますが、時間的・経済的コストを抑えながらも一定の品質を確保できるのが利点です。

自分でコードを書いてHTMLメールを作成する流れ

自分でコードを書く場合、次のような手順でHTMLメールを作成します。

• 基本となる枠組みを用意する
• テーブルレイアウトで骨組みを作る
• インラインCSSでデザイン・装飾を指定する
• 画像は絶対パスで指定する

作成の際は、ただ上記の手順どおりに進めるのではなく、HTMLメール特有のポイントを押さえておくことが重要です。Gmail・Outlookといった使用するツールの違いや、閲覧するデバイスの違いによって、実際の表示に差が生まれるケースがあるためです。

複雑なレイアウトにしてしまうと、「一部の受信環境でタグが無効になり、意図どおりに表示されない」などの問題が発生しかねません。ここでは、表示崩れを防ぐためのポイントも押さえながら、各手順について解説します。

1．基本となる枠組みを用意する

テキストエディタを開き、次の各要素を記述して基本の枠組みを作ります。

• DOCTYPE宣言<!DOCTYPE html>から始まる、「このメールがどのバージョンのHTMLで書かれているか」をメールソフトウェアに伝える指示を冒頭に記述します。
• <html>タグ：後述する<head>や<body>をこのタグの中に格納します。
• <head>タグ：画面上に直接表示されない、文書に関するメタ情報をまとめるタグです。文字化けを防ぐための文字コード（UTF-8）の指定や、スマートフォン表示を最適化するための表示領域指定（viewport）などはここに記述します。
• <body>タグ：後に画面上へ表示させるコンテンツを記述する部分を囲むタグです。

また、<title>タグを使ったタイトル指定は一部の受信環境で機能しないため必須ではないものの、機能する場合もあることやWebページとして保存する際に役立つことから、記述しておくことが推奨されます。

2．テーブルレイアウトで骨組みを作る

次に、<body>タグで囲った領域内に本文レイアウトの骨組みを作ります。メールソフトに使われている表示エンジンでは、<div>を使ったレイアウトは表示崩れを起こしやすいため、<table>タグを使用して表組みで要素を配置する「テーブルレイアウト」で作成するのがポイントです。

<table>タグの内側に<tr>（行）を、さらにその内側に<td>（セル）を置き、<td>（セル）の内部に各コンテンツを配置することでデザインを構築します。本文コンテンツの横幅は、約600pxが環境を問わず崩れにくい推奨サイズです。

加えて、「余白をゼロに」「枠線をゼロに」といった不要なものの指定まで徹底することで、意図しない表示を防止します。

3．インラインCSSでデザイン・装飾を指定する

構築したレイアウトどおりにテキストや画像を配置したら、CSS（スタイルシート言語）を使って色やフォントサイズ、背景色といった装飾の指定を行います。

CSSは記述場所によって装飾の対象とする範囲が変化しますが、外部CSSや内部CSSで記述すると機能しないメールソフトもあります。そのため、style属性を使って各HTMLタグ内に直接スタイルを記述する「インラインCSS」を採用するのが堅実です。

また、指示内容についてもソフトによっては非対応のCSSプロパティが多数存在するため、なるべくシンプルに設計する方が表示不備のリスクを減らせます。

4．画像は絶対パスで指定する

HTMLメールでは、画像データを直接本文に埋め込むのでなく、メール開封時にサーバーから画像を読み込んで表示させます。そのため次のような、https://から始まりすべての階層を記載する「絶対パス」の形で画像の読み込み元を指定する必要があります。

https://○○○.com/images/header.jpg

加えて、受信側の設定や通信の重さから表示エラーが起きる場合に備え、画像の内容を伝える「alt属性（代替テキスト）」を設定しておくことや、画像ばかりに頼り過ぎない構成にすることも大切です。

HTMLメール作成・配信時の注意点

HTMLメールを作成・配信する時には、作成中に意識するポイントに加えて、次の点を押さえておくことが重要です。

• テスト送信で表示を確認する
• 画像容量を最適化する
• レスポンシブ対応にする
• マルチパート配信を設定する

これらのポイントを意識せずにHTMLメールの作成・配信を進めてしまうと、表示崩れが起きるリスクだけでなく、そもそもメールが顧客に届かないといった事態を招く恐れもあります。効果的なHTMLメールを配信するためには、作成開始前からこれらの点について把握しておくことが必要です。

ここでは、それぞれのポイントについて詳しく解説します。

テスト送信で表示を確認する

HTMLメールは、受け取り手が使用するメールソフトやデバイスの種類によって、大きく表示が異なる場合があります。そのため、HTMLメールの作成後は本番配信を行う前に表示テストを行います。PCやスマートフォンでどのように表示されるか、ダークモードを含めて確認するほか、GmailやOutlookなど主要なツールでもテストします。

さらに、表示を確認するだけでなく実際にテスト送信を行い、スパム判定による未着が発生しないかもチェックしておきます。

画像容量を最適化する

HTMLメールは画像や文字装飾で視認性を高められる反面、テキストメールよりも容量が大きくなりやすいという課題があります。画像を多用していたり画像自体の容量が大きかったりすると、読み込み速度の低下や配信サーバー・受信サーバーへの負荷、スパム判定リスクの増加、容量制限による表示の省略などが起こります。そうなれば、メールそのものの不着や開封率の低下を招きかねません。

そのため、画像は圧縮ツールなどを活用して軽量化してから使用します。また、画像を多用し過ぎず、テキストとのバランスが取れた構成を意識することも大切です。

レスポンシブ対応にする

画面サイズの異なるさまざまなデバイスに対応したデザインのことを「レスポンシブデザイン」といいます。スマートフォンの利用者が多い昨今、HTMLメールにおいてもレスポンシブ対応が欠かせません。

スマートフォンの画面は横幅が狭いため、縦一列で構成する1カラムのレイアウトを基本にすることで、縮小表示や横スクロールの発生を防いで見やすさを確保できます。また、画像や文字のサイズもスマートフォンの画面サイズでも見やすい設定にすることが推奨されます。

マルチパート配信を設定する

「マルチパート配信」とは、複数の形式のメールを1つのメールとして同時送信し、受信環境に合った形式で表示させる配信方法のことです。

一部の古い端末や、セキュリティ対策でHTMLをブロックしている環境にHTMLメールを送信した場合、そのままでは不着や文字化けが起きるリスクがあります。そこでマルチパート配信を設定し、HTMLメールとテキストメールを同時送信するようにしておけば、対応外の環境で受信した場合のみ、代替のテキストメール版を表示させることができます。

HTMLメールを効率化するツールの選び方

HTMLメールの作成に利用できるツールの代表例には、自動でメールの大量配信や一斉配信を行える「メール配信システム」や、マーケティング活動の自動化に役立つ「MAツール」などが挙げられます。メール作成だけでなく配信・効果測定まで対応しているものが多いため、自社の目的に適したものを導入することで、メールによるマーケティングを包括的にカバーできます。

ツールに付属する「メール作成支援機能」には、ドラッグ&ドロップなどの視覚的・直感的な操作のみでデザインを構築できるエディタや、テンプレートが用意されているものが多くあります。コーディングの知識がなくてもHTMLメールを作成できます。

名刺情報から顧客管理を行うなら「SKYPCE」

法人向け営業名刺管理サービス「SKYPCE（スカイピース）」は、登録された名刺情報を活用した「一斉メール配信」機能を備えており、HTMLメールの作成にも対応しています。目的を選べば必要な設定やテンプレートを自動で登録できます。入れたい要素をドラッグ&ドロップで編集できるため、ノーコードでデザイン性の高いメール作成を実現します。

ただ名刺情報を集約するだけではなく、営業活動記録の管理・共有からメール配信対象の絞り込み、メール文内のURLクリック率の集計まで可能です。HTMLメール作成と併せて、豊富な機能を備えたツールをお探しの際は、ぜひSKYPCEの導入をご検討ください。

「SKYPCE（スカイピース）」の導入事例

SKYPCEの導入事例として、「SKYPCE」をご利用いただいているユーザー様に、導入を検討された経緯や導入後に得られた効果などについてお話を伺った記事を公開しています。ここでは、その中から3件の事例をピックアップして、記事の内容を一部抜粋してご紹介します。

【導入事例】株式会社堀通信 様

導入前の課題

従来、当社では名刺を紙のままファイリングして個人で管理してきました。しかし、昨今たびたび報じられている情報流出などの事例を受け、お客様や取引先の情報をより安全に管理できるよう、名刺管理サービスの導入を検討することにしました。

導入後の効果

名刺交換をしたらすぐにスマートフォンで名刺を撮影し、「SKYPCE」に登録。データが反映されたら打ち合わせや商談のお礼メールを送信しています。また、「イベントメール配信」機能の活用も一部で始めています。当社では2024年から紙の年賀状を廃止しました。そこで、代わりに「SKYPCE」から年賀メールを配信してみたところ、配信から約1時間で多数の返信が。宛先選択や本文の編集、配信予約まで「SKYPCE」上で完結して手間も少ないため、今後この取り組みを全社に広げていくことも検討しています。

【導入事例】ウェブスペース株式会社 様

導入前の課題

当社では従来、主に飛び込み営業や既存のお客様からのご紹介で新規顧客の開拓を行ってきました。しかし、DXが進む現代において継続的な売り上げ増加を目指すには、メール配信などを活用したデジタルマーケティングの強化は不可欠だと考えています。そこで、社内プロジェクトを立ち上げ、新しいツールの導入も含めてさまざまな施策に取り組んでいくことになりました。

導入後の効果

「SKYPCE」導入後は、展示会でいただいた名刺をまとめてスキャンし、名刺データを活用して「SKYPCE」からご来場御礼メールを配信しています。御礼メールには当社が取り扱う商材を紹介する動画やコーポレートサイトに誘導するURLを記載し、その開封率やクリック率を「SKYPCE」上で確認。どのお客様がどのURLを何回クリックしたかがわかるので、展示会でご紹介した商材とは異なる商材のURLをクリックされている場合には、「この商材もご興味を持たれているかもしれない」と考え、お客様にお伝えしきれていない情報をご提供するよう努めています。

【導入事例】株式会社PKUTECH 様

導入前の課題

当社が「SKYPCE」を選んだ最大の理由は、UIのわかりやすさです。導入時には、同様の機能を備えた5社の名刺管理サービスを比較検討し、中でも機能やコストの面で要件を満たした2社のサービスをトライアル。直感的な操作性はもちろん、ロードマップに記載された拡張性にも期待し、「SKYPCE」の導入を決定しました。

導入後の効果

当社ではこれまで、お客様に年始のごあいさつとして紙の年賀状を送っていましたが、「SKYPCE」を導入したタイミングでメール配信に切り替えることにしました。毎年、手入力で送付先をリストアップし、外部に印刷を発注するなど対応に手間が掛かっていましたが、「SKYPCE」なら送付先の選定から配信までワンストップで対応できます。配信にあたっては「年賀メール2024年」といったタグを作成し、送付したいお客様に付与。次の年にまた年始のごあいさつメールをお送りする際、タグが付与された宛先を抽出して精査すれば、送付リストの更新が効率化できます。