HTMLメールの作り方を分かりやすく解説！

公開日:2025/03/11 　更新日:2025/03/18

HTMLメールの仕組み・構造について

HTMLメールの作り方を解説する前に、そもそもHTMLメールの仕組み・構造について理解する必要があります。

HTMLメールは、Hyper Text Markup Language略してHTMLと、CSSと呼ばれる言語を用いて作成します。この二つは、Webサイトを作成するときなどに使われる言語です。専門知識不要で作成できるHTMLエディター機能があるメール配信システムなどもありますが、結果的にはこの２つの言語に変換されることによって、Webサイトのようなメールを作成することができます。

HTMLメールのステップごとの作り方

HTMLメールを初めて作成する場合、レイアウト決め・デザイン決め・作成と一定の手間がかかります。作成してから作り直しがないよう、順番に進める必要があります。

下記の順番に進めていきましょう。

HTMLメールのターゲットと目的を明確にする
HTMLメールのレイアウトを決める
HTMLメールの組み込みを行う
HTMLメールをテスト送信して確認する

①HTMLメールのターゲットと目的を明確にする

HTMLメール作成する時には、レイアウトとデザインを考える必要があります。その際には、ターゲットや目的に合わせて考えることをオススメします。

例えば、比較的年齢層が高い方向けのメールであれば、読みやすくするために文字を大きくすることや、誤操作を防ぐためにボタンを分かりやすく大きく必要があります。10代・20代前半向けなどは流行に敏感である可能性もあるため、一定のデザイン性を上げることやブランドイメージに合わせた内容にする必要もあります。

誰に対して、どんな内容を通じてどんな行動をしてもらいたいかを考えましょう。

②メールのレイアウト・デザインを決める

まずは、どんなレイアウト・デザインのメールにするのか、ターゲットや目的と照らし合わせて考えましょう。レイアウトの検討段階では、メモ帳などに手書きで考えるレベルからで問題ありません。近しい業界のメルマガ参考にすることをオススメします。

また注意するべき点として、特定電子メール法に基づいて、購読停止を受け付ける項目など必要項目が抜けていないか確認しましょう。

③ HTMLメールの組み込みを行う

HTMLメールの作り方は、主に２種類の作り方があります。

HTML・CSSを直接記述する（コーディング）

本来のHTMLメールの作成方法として、HTML・CSSを直接記述して作成する方法があります。これにはHTMLとCSSを使える知識が必要であることに加え、メール特有の記述方法を理解する必要があります。

１から作成することになるため、自由に作成することができる一方、工数がかかります。また、各メーラーでの表示崩れが起きないかなど、確認するポイントが増えるデメリットがあります。

テンプレートの活用も
HTMLメールには、既にHTML・CSSの記述がされたテンプレートがネット上で公開されています。当社でもテンプレートを配布しています。

テンプレートの場合、コードの一部を変更するだけでメールを作成できます。また、テンプレートを元に自由に改変することもできます。どのHTMLメールにも共通する部分の記述は既にされているため、効率的にメール作成ができます。

HTMLメールエディタ搭載のメール配信システムを使用する

メール配信システムやMAツールなど一斉メールを送ることができるツールの多くで「HTMLメールエディタ」と呼ばれる機能が搭載されています。HTMLメールエディタでは、HTML・CSSの知識がなくとも作成できるようマウス＆ドラッグで作成できる機能です。

現在のメールマーケティングでは、HTMLメールエディタを使用するほうが主流でしょう。ただし、使用するツールによって使い方が異なり、使いやすさには差があります。これからメール配信システムの導入を考えられている場合には、無料トライアルなどを通じて実際に操作してみることをオススメします。

④HTMLメールをテスト送信して確認する

HTMLメールが作成できた場合には、テスト送信を行いましょう。自分のアドレスに送ることはもちろん、送付先で多いメーラーでのチェックも行いましょう。例えば、BtoCであれば、GmailやYahoo!メールが多いでしょう。ビジネスにおいては、Gmailに加えOutlookなどの使用も考えられます。

メーラーによって表示の差異があります。理想はすべての環境で確認することですが、非常に工数もかかるため、主要なメーラーは確認するようにしましょう。

特に確認すべきポイントは以下の通りです。

各メーラーでの表示確認
配信停止（オプトアウト）の設定
リンクのURLに誤りがないか確認
ファーストビューは伝えたい内容が見えているか
差出人設定は間違っていないか

HTMLメールのコードを書いて作成する方法

HTMLメールのコードを書いて作成する時は、以下の順番を元に作成していきましょう。

HTMLの基本構造を作成する
HTMLのコードを記述する

HTMLの基本構造を作成する

HTMLには、htmlタグ、bodyタグ、headタグなど下記の通り必要な記述があります。

DOCTYPE宣言をする
テーブルタグを使ってレイアウトする
要素を記述していく

DOCTYPE宣言をする

DOCTYPE宣言とは、HTMLを書く上で1行目に記載する内容です。HTMLのバージョン4.01と5では書き方が異なります。

HTML 4.01の場合

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >

HTML5の場合

<! DOCTYPE html>

HTML5が最新で、Webサイトを作成する時には主流のバージョンですが、メーラーによってはHTML5に対応していない可能性もあるため、より多くの人にリーチする必要がある時はHTML4.01のほうが良いでしょう。

metaタグを記述する

metaタグには、スマートフォンで閲覧した時にフィットした表示が出来るよう、initial-scaleの設定が必要です。また文字化けを起こさないように文字コードの指定をしましょう。

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/ >

HTMLのコードを記述する

実際にレイアウトを組むことや、文章など要素を組み込んでいきます。

テーブルタグでレイアウトする

HTMLメールの場合、通常のWEBサイトとは異なり、基本的にテーブルタグでレイアウトを組みます。なぜなら、HTMLメールの場合、さまざまなメーラー・デバイスに対応しなければならず、CSSのサポートにも差があるため、テーブルで調整することで表示の差異を最小限に抑えることができます。

文章など要素を組み込んでいく

各テーブル内に、ｐタグやimgタグなどを用いて、要素を組み込んでいきます。ＣＳＳで表現する際には、外部読み込みやstyleタグで囲ってまとめて記述する方法もありますが、インラインで記述することをオススメします。

なぜなら、インラインの記述方法は、多くのメーラーで対応していますが、外部読み込みやstyleタグを用いた記述方法は、対応してない場合があるためです。

HTMLメールをテスト送信して確認する

HTMLメールが完成したら、テスト送信を行いましょう。自分のアドレスと、送信する人が使用している可能性の高いメーラーを確認しましょう。特にGmail、Yahoo!メール、Outlookなど、主要なメールクライアントでの表示確認を行うことをオススメします。ただし、2回目以降レイアウトを変更しないという場合には、毎回すべてに対して確認する必要は高くはありません。

さいごに

ここまで、HTMLメールの作成方法をお伝えしました。コードを直接書いて作成する方法は、自由度が高い一方、気を付けるべき点が多くあるため、HTMLエディターのあるメール配信システムの活用をオススメします。

弊社が提供しているメール配信システム「Cuenote FC」は、使いやすいHTMLエディターが搭載されています。無料トライアルも提供しているため、ぜひお試しください。

　キューノートエフシー

メール配信システムCuenote FC（キューノートFC）は、会員管理やメール配信後の効果測定をグラフィカルに表示。システム連携用APIなども提供しており、一斉配信からメールマーケティングまで行えます。独自開発のMTA（配信エンジン）とノウハウで、月間のメール配信数81億通・時間1000万通以上(※)の高速配信を実現し、スマートフォンや携帯にもストレスなく高速・確実にメールを届けます。※クラウド型サービス（ASP・SaaS）の実績値

この記事の著者

福島竜司: 過去に介護・美容の資格情報メディアにて事業統括責任者としてBtoC・BtoB共にメールマーケティング含めた、マーケティング全般の業務に携わる。ユミルリンクではマーケターとして、メールマーケティングを中心に、メッセージングマーケティングの研究を行い、多くの記事の執筆・編集を行う。

この記事の運営企業

東証グロース上場のユミルリンク株式会社は、18年以上にわたり、メール配信システムをクラウドサービス・ソフトウェアとして提供し、メールに関する専門的な技術や運用ノウハウを蓄積してきました。
メール以外にも、SMS配信サービスや WEBアンケート・フォームシステムもクラウドサービスとして提供しています。

関連する記事