【初心者向け】HTMLメールの作り方｜HTMLメールの基本と注意点を分かりやすく解説！

メールマーケティングメール配信基礎

メ－ルマーケティングによく活用される「HTMLメール」。画像や装飾された文字、レイアウトを活かすことで、読者の興味を引き、クリック率やコンバージョン率の向上が期待できます。単なるテキストメールでは埋もれがちな新商品やキャンペーン情報も、HTMLメールなら目を引くデザインでアピールできるため、多くの企業がメールマガジンに取り入れています。一方で、HTMLメールはWebページと同じように作れるわけではなく、メールならではの制約や注意点があります。

本記事では、HTMLメールの基本的な構造から、よくある間違いや注意点までご紹介します。さらに、HTMLやCSSの知識がなくても簡単にHTMLメールを作成できるメール配信サービス「アララ メッセージ」もあわせてご紹介します。これからHTMLメールでのメルマガ配信を始めたい方はもちろん、すでに運用されている方の見直しにもぜひお役立てください。



目次[非表示]

  1. 1.HTMLメール作成前に知っておきたいこと
  2. 2.HTMLメールの基本構造と書き方
    1. 2.1.HTMLの記述方法
      1. 2.1.1.基本ルール：tableレイアウトを使用する
      2. 2.1.2.なぜtableを使うのか？
        1. 2.1.2.1.注意点
    2. 2.2.CSSの記述方法
      1. 2.2.1.基本ルール：インラインスタイルを使用する
      2. 2.2.2.注意点
  3. 3.HTMLメールのデザイン
    1. 3.1.基本ルール
      1. 3.1.1.注意点
  4. 4.デバイスやメーラーによる違いへの対応
  5. 5.ノーコードで始められる！HTMLメール作成なら、アララメッセージ
    1. 5.1.アララ メッセージの特長
  6. 6.アララ メッセージを使ったHTMLメール作成方法
    1. 6.1.メール本文作成
      1. 6.1.1.差し込みの設定
      2. 6.1.2.クリックカウントの設定
      3. 6.1.3.開封確認の設定
    2. 6.2.テスト配信
    3. 6.3.仮設定から配信へ
  7. 7.HTMLメールを作ろう

HTMLメール作成前に知っておきたいこと

HTMLメールは見た目はWebページに似ていますが、「表示方法」は大きく異なります。Google ChromeやSafariといったブラウザと違い、メール受信者が使用しているメールソフト（Outlook、Gmailなど）によってHTMLやCSSの解釈にばらつきがあります。そのため、同じHTMLメールを配信した場合でもメーラーによって見え方が微妙に変わることがあります。さらに、セキュリティや迷惑メール対策の影響で、HTMLメールの表示には多くの制限がかかっている場合もあります。

すべての環境でまったく同じ表示を実現するのは難しいですが、「どのメーラーでメールを受け取っても似たような見た目になる書き方」を知っておくことで、安定したHTMLメール作成が可能になります。


  HTMLメールとテキストメールの違いとは？HTMLメールのメリット・デメリットや実例をご紹介 HTMLとはWebページを作成するために開発された言語です。一方、テキストメールとは、テキスト形式で作成されたメールのことです。 アララ メッセージ


HTMLメールの基本構造と書き方

ここからは実際にHTMLメールの作成方法について説明していきます。


HTMLの記述方法

HTMLでの記述において対応可能なタグは非常に限られています。そのため、基本的には各メーラーで似た挙動となるHTMLタグでコンテンツを作成することが理想的です。


基本ルール：tableレイアウトを使用する

Web制作では <div> や <section> などのブロック要素でレイアウトを組むのが一般的ですが、HTMLメールでは使えない場合がほとんどです。代わりに、<table>を使ってレイアウトを組みます。


なぜtableを使うのか？

  • 各メーラーがtableの表示には比較的安定して対応している
  • 複雑な入れ子構造にも対応しやすく、段組みしやすい
  • デバイスの幅に応じたレイアウト調整がしやすい
    （例えば、PCで2列に表示されていたものが、スマホでは自動的に1列に並び替わるように設定しやすいため、様々なデバイスで見やすく調整しやすいメリットがあります。）


アララが提供しているこのようなHTMLメールのテンプレートの場合、以下のようなレイアウトをtable要素で構成しています。

＜例＞


<center>
<!-- 表示枠全体をtableで -->
<table border="0" cellpadding="0" cellspacing="0" width="800" border-spacing: 0; background-color: #1C283B;"><tbody>
    <!-- コンテンツの縦に並ぶパートごとにtr -->
    <tr valign="top"><td>
        <table border="0" cellpadding="0" cellspacing="0" width="768"
            style="border-collapse: collapse; border-spacing: 0; table-layout: fixed;
                width:768; padding: 0; margin:0;">
            <tbody><tr valign="top">
                <td><div>
                    <img width="768" alt=“LUXURY” src="https://example.com/images/logo-1.png">
                </div></td>
            </tr></tbody>
        </table>
    </td></tr>
    <!-- 省略：コンテンツの縦に並ぶパートごとにtr -->
    <tr valign="top"><td>
        <table border="0" cellpadding="0" cellspacing="0" width="768"
            style="border-collapse: collapse; border-spacing: 0; table-layout: fixed;
                width:768; padding: 0; margin:0;">
            <tbody>
                <tr valign="top">
                    <!-- コンテンツの横に並ぶパートごとにtd -->
                    <td style="width:226; background-color: rgb(255, 255, 255);"><div>
                        <h2
                            style="color:rgb(15, 23, 36); margin:0px; display:table-cell;
                                padding:1.2em 2% 0.7em; font-size:2.2em; letter-spacing:0.05em;
                                background-color:rgb(255, 255, 255);">
                            <p style="text-align: center;">
                                <strong>Product NameA</strong>
                            </p>
                        </h2>
                    </div></td>
                    <td style="width:226; background-color: rgb(255, 255, 255);">
                        <!-- 省略：コンテンツの横に並ぶtdパート -->
                    </td>
                </tr>
            </tbody>
        </table>
    </td></tr>
</tbody></table>
</center>




注意点
  • <div> やHTML5のタグ（例：<header>, <footer>）での段組みは避ける
  • 画像がブロックされたときの代替テキストとして、画像には必ずalt属性を指定する

なお、以下のサイトよりHTMLタグやCSSプロパティの対応状況をメーラーごとに確認できます。
参考サイト：https://www.caniemail.com/clients/


CSSの記述方法

基本ルール：インラインスタイルを使用する

HTMLメールでは、Webサイトのように外部CSSを使うことはできません。多くのメールソフトが外部CSSや<style>タグ内のCSSを無視する傾向にあるため、確実にスタイルを適用させるためには、タグの中で直接style属性を指定する「インラインCSS」が最も確実な方法となります。

＜例＞

<td style="color: #333333; font-size: 14px; padding: 10px;">
  テキストコンテンツ
</td>

注意点

  • <head> 内にスタイルを書くと、一部のメーラーでは無視される可能性がある
  • <style> タグによる一括指定も無効な場合がある
  • セレクタによる継承が効かないメーラーもあるため、冗長でも各要素に直接指定する
  • marginやpaddingの解釈が異なるメーラーもあるため、tableのセル間隔で調整する
  • Webフォントはほとんどのメーラーでサポートされていないため、端末に標準で搭載されているフォントを使用する

    ＜例＞
font-family: "Helvetica", "Arial", "メイリオ", sans-serif;

※日本語と英数字のどちらにも対応したフォントを並べることをおすすめします。


HTMLメールのデザイン

昨今、メールはPCのみならずスマートフォンでの閲覧も増えています。そのため、HTMLメールもPC・スマートフォンどちらで見られても良いようにデザインすることが大切です。


  メルマガのデザインにチャレンジ！HTMLで読まれやすいメールに 読まれるメールマガジンにするために、重要なポイントとなるのがメールのデザインと言われています。今回はこのHTMLメールを用いて読者様に読まれやすいデザインにする方法について詳しくご紹介したいと思います。 アララ メッセージ


基本ルール

  • 横幅は600px～800px程度がベスト（PC・スマートフォンどちらにも対応）
  • コンテンツは縦長にレイアウトする（縦スクロールがしやすい）
  • 視認性の高い文字サイズで設定する（14px～16px程度）
  • ボタンなどクリック可能な要素はタップしやすい大きさ（高さ40px以上がおすすめ）


注意点

Webサイトのレスポンシブデザインでよく用いられる「メディアクエリ」（画面の幅や向き、解像度などに応じて表示スタイルを変えられるCSS機能）が多くのメーラーで機能しない、あるいは不安定となるケースが多いです。そのため、最初からどの端末で問題なくメールの内容が読めるよう設計することが重要です。


デバイスやメーラーによる違いへの対応

HTMLメールは、どの端末・どのメーラーで開くかによって表示結果が異なります。そのため、以下の点を意識しましょう。

  • 複雑なブロック構造よりも、tableベースで段組みをするよう心がける
  • 要素の入れ子を深くしすぎない
  • 特定端末やOSでしか表示できない機能・フォントは使わない
  • 「表示されなかったときにどう見えるか」を必ず考慮する
  • サーバ側でのコンテンツ切り替えは避ける（1パターンでどの端末でも見られるように設計する）




ノーコードで始められる！HTMLメール作成なら、アララメッセージ


「HTMLメールを手書きするのはハードルが高い…」「デザインセンスがないから無理かも…」そんな風に諦めていませんか？アララ メッセージなら、そんな心配は一切無用です。


アララ メッセージの特長

  • HTML/CSSの知識ゼロでも使える「HTMLメール簡単モード」を標準搭載
  • 150種類以上のメールデザインテンプレートから好きなデザインを選ぶだけで視認性の高いHTMLメールが作成可能
  • PC・スマートフォンどちらにも対応のHTMLメールを作成できる
  • 画像のアップロード・文字装飾も直感的に操作可能
  • メルマガ配信後の効果測定（開封率・クリック率）も一目で確認できる

マーケティング担当者や営業担当者など、非エンジニアの方でも安心して使える設計になっています。


「HTML簡単モード」以外にも、セグメント配信や効果測定、ステップメールまでマーケティングメールに必要な機能が揃って月額9,500円から利用できます。国内の携帯キャリア各社やISP事業者が抱える配信ロジックに対応し、システムでの問題からメール配信のコツまで幅広くサポートします。

マーケティングご担当者様の工数削減に貢献する「アララ メッセージ」を、ぜひ検討してみてはいかがでしょうか。


アララ メッセージを使ったHTMLメール作成方法

メール本文作成

「アララ メッセージ」を起動し、メール作成画面右側に表示される「HTML簡単モード」をクリックします。



差し込みの設定

差し込み機能とは、メール件名やメール本文に「名前」「会社名」「誕生日」などユーザー個別の情報を差し込むことができる機能です。HTML簡単モードの場合は、以下のステップで設定します。

  1. 本文要素を選択し、差し込みたいところにカーソルをあわせる
  2. 上部に表示されるタブの中から右から2つ目の「差し込み」ボタンをクリック
  3. 差し込みの種類が表示されるので、必要なものを選択


テキストメールの場合は、メール作成画面の右のタブより上から3つ目の「差し込み」ボタンをクリックします。


クリックカウントの設定

クリックカウントとは、HTMLメールやテキストメールに埋め込まれたURLがどの程度クリックされたかを測定することができる機能です。アララ メッセージのクリックカウントは、HTML簡単モードを一旦終了し、通常モードから設定します。


開封確認の設定

「配信したメールがどの程度閲覧されているか」気になりますよね？開封確認機能を使えば、配信したメールがどの程度開封されたかを確認することができます。ボタン1つで設定できるので、ラクチンです！
※HTMLメール及びPCアドレス向けにのみご利用いただけます。


テスト配信

思い通りの本文が作成できているか、本番配信前に大事なテスト配信。PCやスマートフォンなどデバイスに応じて、適切に表示されるか確認されていると思います。「アララ メッセージ」なら、わざわざテスト配信を送らずに、QRコードを読み取るだけで、スマホから簡単に確認が可能です。



仮設定から配信へ

メール配信は、文面はもちろん配信先や配信のタイミングなど配信前に確認すべき点が多いです。そこで「アララ メッセージ」ではメール配信を複数人体制で運用されることを想定し、作成者がメール作成後にダブルチェックのための設定をおこない、管理者が最終確認をおこなった上で配信できる仮設定の機能を設けています。

人為的な誤配信などの防止につながる仮設定の機能は多くのユーザ様に使われているためこの機会に紹介します。

▼ 配信までのステップ

  1. 作成　：　本番配信の権限を持たないアカウントでメール作成の作業を行う
  2. 確認　：　テスト配信やQRコードからの確認により責任者は配信内容を確認
  3. 承認　：　責任者はアララ メッセージ上から配信を承認する
  4. 完了　：　メール配信が完了


HTMLメールを作ろう

いかがでしたでしょうか。プログラミングコードを記述するとなるとハードルが高いように感じますが、全体の構造やテンプレートなどを使えば、初心者でもHTMLメールを簡単に作ることができます。視覚的な訴求ができるHTMLメールを作ってみませんか。



  お役立ちコラム 執筆者情報 アララ メッセージのお役立ちコラムの執筆者を紹介いたします。アララ メッセージは、15年以上にわたり「国内開発・自社サポート」で提供している、純日本製のメール配信サービスです。画面操作による一斉配信はもちろん、システム連携によるAPI配信にも標準対応しています。 また、総務省後援「ASPICクラウドアワード2024」支援業務系ASP・SaaS部門にて「DX貢献賞」を受賞しています。 アララ メッセージ



導入事例はこちら

  お客様の声|株式会社東京海上日動パートナーズ|メール配信サービス アララ メッセージ 【アララ メッセージの導入で作業時間が98%減】東京海上日動パートナーズTOKIOでは、管理職向けに毎週オンラインセミナーを実施しています。これまで、セミナーのご案内を一通一通送っていたため、配信作業に20時間を要していました。しかし、「アララ メッセージ」の導入で作業時間が98%減少。さらに、効果測定機能でお客様の興味が目に見えてわかるようになりました。 アララ メッセージ
  お客様の声|センターゲート株式会社|メール配信サービス アララ メッセージ 【費用面・工数面を考えて、始めやすいメールマーケティングからチャレンジ！】センターゲート株式会社では、週1回程度メルマガを配信されています。開封率は約30%！本格運用開始から1か月ほどでメルマガからの流入によるお問い合わせがあり、効果を実感しています。 アララ メッセージ


関連コラム

  HTMLメールの作り方は？誰でも簡単に作成できるツール 「HTMLメールを作成したい」、「テンプレートを用いてデザイン性の高い」、「HTMLメールを作成したい」方必見！アララ メッセージのHTML簡単モードを紹介します。 アララ メッセージ


  メルマガ配信～基本の作り方～ ユーザにリーチしやすい、かつコストパフォーマンスの高いマーケティングツールとして、アツイ注目を浴びているメルマガ配信。「これからメルマガ配信を始めたいです！」という企業様向けに、メルマガ配信を始めるにあたっての基本をお伝えいたします。 アララ メッセージ


  メルマガのデザインにチャレンジ！HTMLで読まれやすいメールに 読まれるメールマガジンにするために、重要なポイントとなるのがメールのデザインと言われています。今回はこのHTMLメールを用いて読者様に読まれやすいデザインにする方法について詳しくご紹介したいと思います。 アララ メッセージ


  HTMLメールのハンズオンセミナーレポート！ アララ メッセージを導入いただいているお客様へHTMLメールのハンズオンセミナーを実施しました。本セミナーは、導入企業様だけでなく、導入前のお客様も対象です。是非ご一読ください。 アララ メッセージ
 

前の記事

prev-article-image

【BtoB】新規リード（見込み）獲得｜オンライン・オフライン別の施策8選

次の記事

next-article-image

メルマガ装飾の目的と効果的な使い方とは？装飾する場所の使用例や注意点も解説

メール配信サービスのお役立ち資料一覧

アララ メッセージ製品情報

資料ダウンロード

アララ メッセージ導入事例集

資料ダウンロード

成果に差が出る！「メルマガにおける目的設定」ガイド

資料ダウンロード

安定配信を実現する！「メール配信API」選定のコツ

資料ダウンロード

メール配信サービスのお役立ち資料一覧

メール配信API

豊富なAPIを使い簡単にシステム連携が可能。
詳細はこちら

メールマーケティング

メールマーケティングに必要な機能をラインナップ。
詳細はこちら
CONTACT
お電話でのお問い合わせはこちら
03-5414-3611
平日10:00~18:00（日本時間）
ご不明な点はお気軽に
お問い合わせください
お問い合わせ
メール配信システムの
お役立ち資料はこちら
資料ダウンロード

サービス詳細

人気記事ランキング

関連記事

サービス詳細

メールマーケティング
メール配信API
arara message

アララ株式会社は、皆様からお預かりした個人情報はお客様の大切な財産であることを尊重し、お客様との信頼関係を損なうことのないよう、「 プライバシーポリシー 」に従って適切な個人情報の保護に努めています。

アララロゴ

アララ株式会社

東京都港区南青山2丁目24番15号 青山タワービル
TEL：03-5414-3611

キャッシュレス
valuedesign

メール配信サービス
arara message

データセキュリティ P-Pointer

AR ​AR Service

QR code®　関連サービス クルクル QRコードリーダー

QR code®　関連サービスクルクル マネージャー

デジタルサイネージ
Cloudpoint

PAGE TOP

©2021 arara inc. All Rights Reserved.