執筆 Alkan Balkaya · 最終更新: 2026-09-27

HTMLメールの作り方 初心者でもできる基本手順

HTMLメールは、テーブルレイアウトを土台にした専用のHTMLを用意し、文字と画像とボタンを組み合わせて作ります。基本の流れは、目的とレイアウトを決める、HTMLの骨組みを書く、インラインで装飾する、複数の環境で表示を確認する、そして配信する、の5ステップです。専用ツールを使えばコードを書かずに同じ工程を進められます。

この記事では、はじめてHTMLメールを作る方に向けて、つまずきやすいポイントを避けながら1通を完成させるための手順を順番に解説します。手書きのコードと配信ツールの両方の作り方を扱うので、自分に合った方法を選んでください。

専門用語には触れますが、その都度かみくだいて説明します。まずは全体像をつかんでから、細かい調整に進みましょう。

基礎から知りたい方は、Mailsoftly日本語ブログのガイドをご覧ください。そのあとでこの記事に戻ってきてください。

要点: Mailsoftlyは明確な料金、無料の移行サポート、担当者による人のサポートを提供します。500件の連絡先と月2,000通のメールまで無料、クレジットカード不要です。
Mailsoftlyを無料で始める →

HTMLメールとテキストメールは何が違うのですか

HTMLメールは、画像、色、ボタン、レイアウトを自由に組み込めるメールです。文字だけのテキストメールと違い、ブランドの世界観を伝えたり、クリックしてほしい場所を目立たせたりできます。商品の紹介やキャンペーン、メルマガ配信など、視覚的な訴求が必要な場面で使われます。

一方で、テキストメールにも利点があります。ファイルサイズが軽く、どのメールソフトでも同じように表示され、到達率の面でも安定しやすいという特徴です。実務では、HTMLメールにテキスト版を併せて用意する「マルチパート」の形が推奨されます。受信側の環境に応じて適切な方が表示されるためです。

内容は十分でしたか。500件の連絡先と月2,000通まで、クレジットカード不要でMailsoftlyを無料でお試しください。Mailsoftlyを無料で始める →

HTMLメールを作る基本の手順は何ですか

HTMLメールは、次の5つのステップで作ります。順番どおりに進めれば、初心者でも表示崩れの少ない1通を完成させられます。まずは全体の流れをつかんでから、各工程に取りかかりましょう。

このあとの見出しで、それぞれの工程を掘り下げていきます。特に第2ステップの構造づくりと第4ステップの表示確認が、仕上がりを大きく左右します。

HTMLメールの構造はどう組み立てますか

HTMLメールの構造は、Webページのようなdivではなく、tableタグで組むのが基本です。多くのメールソフトが古いHTMLの解釈をするため、テーブルで枠を作る方が意図どおりに表示されます。まず外側に横幅を決める1つのテーブルを置き、その中に行を重ねていく形が扱いやすいです。

本文の横幅は600pxを目安にします。パソコンでもスマートフォンでも読みやすく、多くのテンプレートがこの幅を採用しています。ヘッダー、本文、フッターという3つのブロックに分けて考えると、構成が整理しやすくなります。

<table width="600" cellpadding="0" cellspacing="0">
  <tr>
    <td style="padding:24px;">
      ヘッダー(ロゴなど)
    </td>
  </tr>
  <tr>
    <td style="padding:24px;">
      本文とボタン
    </td>
  </tr>
  <tr>
    <td style="padding:24px;">
      フッターと配信停止リンク
    </td>
  </tr>
</table>

フッターには、送信者の情報と配信停止リンクを必ず入れます。これは後述する特定電子メール法の要件でもあります。骨組みができたら、各セルに文字や画像を流し込んでいきます。

装飾はどこに書けば崩れませんか

装飾は、各タグのstyle属性に直接書く「インラインCSS」で指定します。Webページのようにhead内にまとめて書く方法は、一部のメールソフトで無視されるためです。手間はかかりますが、要素ごとに色や余白を書くことで、環境による崩れをぐっと減らせます。

フォントは、環境に依存しない一般的な種類を指定します。凝ったWebフォントは反映されないことが多いためです。文字色と背景色のコントラストを十分に取り、本文のサイズは14pxから16pxを目安にすると読みやすくなります。以下は、装飾で押さえておきたい基本のルールです。

• スタイルはインラインで書く: style属性に直接指定し、外部CSSに頼りません。
• 画像には代替テキストを付ける: 画像が表示されない環境でも内容が伝わります。
• ボタンはテーブルで作る: 背景色を付けたセルの中にリンクを置くと安定します。
• 余白はpaddingで取る: marginは効かない環境があるため、セルのpaddingで調整します。
• 横幅は固定しすぎない: 画像はwidthを100%にし、はみ出しを防ぎます。

画像だけで内容を伝える構成は避けます。多くのメールソフトは初期状態で画像を表示しないため、文字情報も併せて入れておくことが大切です。

表示崩れを防ぐにはどう確認しますか

表示崩れを防ぐには、送信前に複数の環境でプレビューを確認することが最も効果的です。メールソフトごとにHTMLの解釈が異なるため、1つの環境で問題がなくても、別の環境で崩れることがよくあります。特にパソコンとスマートフォンの両方で確認してください。

確認の際は、自分宛てにテスト送信し、実際の受信画面で見るのが確実です。主要なメールソフトとスマートフォンのメールアプリを一通り見て、レイアウト、文字サイズ、画像、リンクの動作をチェックします。次のリストを目安にしてください。

手作業での確認に加えて、配信ツールにはプレビュー機能が備わっているものが多く、複数環境の見え方をまとめて確認できます。こうした機能を活用すると、確認の手間を大きく減らせます。

コードを書かずに作る方法はありますか

あります。メール配信システムのテンプレートやドラッグ操作の編集画面を使えば、コードを書かずに同じ品質のHTMLメールを作れます。ブロックを並べて文字や画像を入れるだけで、テーブルレイアウトやインラインCSSは自動で処理されます。初心者や、作成時間を短くしたい方に向いた方法です。

ツールを使う利点は、表示確認、配信リストの管理、一斉送信、効果測定までを1か所で行える点です。到達率を保つための仕組みや、配信停止の処理も組み込まれています。Mailsoftlyは無料プランから始められ、料金は次のとおりです(2026-09-07時点)。

手書きのコードで細かく調整したい場合と、ツールで手早く仕上げたい場合、どちらも正解です。まずはツールで感覚をつかみ、必要に応じてコードに踏み込む進め方もおすすめです。

送信時に守るべき法律はありますか

あります。広告や宣伝を目的とするメールを送る場合、日本では特定電子メール法を守る必要があります。原則として、あらかじめ受信者の同意(オプトイン)を得た相手にのみ送信できます。作成の段階から、この点を前提に配信リストを整えておきましょう。

メール本文には、送信者の氏名または名称、問い合わせ先、そして配信停止の方法を明記する義務があります。フッターにこれらをまとめて記載するのが一般的です。また、取得した個人情報の取り扱いは個人情報保護法にも従う必要があります。以下の点を押さえておいてください。

• 送信前に受信者の同意を得ている
• 送信者の情報と問い合わせ先を本文に記載している
• 配信停止の手続きをわかりやすく用意している
• 取得した個人情報を目的の範囲内で適切に管理している

これらは信頼を守るための基本でもあります。要件を満たした配信は、受信者との良い関係を保ち、結果として到達率の安定にもつながります。詳細な条文は総務省など公的機関の情報を確認してください。

その他のガイドはMailsoftly日本語ブログでご覧いただけます。

よくある質問

HTMLメールの横幅は何pxが良いですか

本文の横幅は600pxが目安です。パソコンとスマートフォンの両方で読みやすく、多くのテンプレートもこの幅を採用しています。画像はwidthを100%に指定し、狭い画面ではみ出さないようにしておくと安心です。

CSSはなぜインラインで書くのですか

一部のメールソフトが、head内にまとめて書いたCSSを無視するためです。各タグのstyle属性に直接スタイルを書くインラインCSSなら、環境による表示崩れを大きく減らせます。手間はかかりますが、仕上がりの安定につながります。

画像が表示されないのはなぜですか

多くのメールソフトが、初期状態で画像を自動表示しない設定になっているためです。画像には必ず代替テキストを付け、文字情報だけでも内容が伝わる構成にしておきましょう。画像だけで要点を伝える作り方は避けてください。

コードが書けなくてもHTMLメールは作れますか

作れます。メール配信システムのテンプレートやドラッグ操作の編集画面を使えば、コードを書かずに完成させられます。テーブルレイアウトやインラインCSSは自動で処理され、表示確認や一斉送信までまとめて行えます。

送信前に必ず確認すべきことは何ですか

パソコンとスマートフォンの両方で表示を確認し、リンクの動作と配信停止リンクが機能するかを確かめてください。あわせて、受信者のオプトインを得ているか、送信者情報を記載しているかも確認します。自分宛てのテスト送信が確実です。

メール配信をもっとシンプルにMailsoftlyを無料で始める →
500件の連絡先、月2,000通。無料の移行サポート。クレジットカード不要。

Alkan Balkaya

Founder & CEO at Mailsoftly

Alkan is the founder and CEO of Mailsoftly, building AI-powered email marketing tools for businesses of all sizes. He writes about email marketing strategy, deliverability, and the future of marketing automation.