catch-img

HTMLメール制作・配信の初心者向け知っておきたい5つのポイント

写真やイラスト、アニメーションなどを利用して、幅広い表現が可能なHTMLメール。 文字だけではなく、写真やイラストを使用することで、より具体的なイメージを読者に与えられるため、非常に効果的なメールマーケティング手法のひとつです。 ここではHTMメール制作の初心者の方に向けてHTMLメールの作り方、流れの基礎をご紹介していきます。 HTMLメールを制作するには、HTMタグなどの知識をある程度知っておく必要があります。 本記事では、HTMLメールを制作するうえで、最低限抑えておきたいいくつかの知識を紹介していきます。

目次[非表示]

  1. 1.HTMLメール制作の前に知っておきたい5つのポイント
    1. 1.1.テキストメールとHTMLメールの違いを理解する
      1. 1.1.1.テキストメール
      2. 1.1.2.HTMLメール
    2. 1.2.基本的なHTMLタグを理解する
    3. 1.3.文章、画像などの要素を理解する
    4. 1.4.CSSのルールを理解する
    5. 1.5.メーラーによってHTMLの解釈に差があることを理解する
  2. 2.HTMLメールの制作の際に知っておきたい5つの流れ
    1. 2.1.基本構造となるHTMLを記述する
    2. 2.2.メールは要素単位に分割して構成する
    3. 2.3.装飾はインラインスタイルで行うようにする
    4. 2.4.CSSで文字サイズや色を装飾する
    5. 2.5.PCとスマートフォン向けで表示崩れが起きないようスマホ用CSSを作成する
  3. 3.HTMLメール制作についてまとめ

HTMLメール制作の前に知っておきたい5つのポイント

テキストメールとHTMLメールの違いを理解する

メール配信の形式には、HTMLメールの他に「テキストメール」があります。

テキストメール

内容が文字のみで構成されたメールです。日常的に使われるメールと同じ形式のため専門的な知識・ツールがなくても制作は可能です。 その一方で、テキストのみの表現となるため、視覚的な訴求がしにくいというデメリットも存在します。

HTMLメール

HTMLというWebページ制作等に用いられるマークアップ言語を用いることで、文字サイズや色の変更や、画像の表示など、 自由度高いレイアウトが可能なメール形式です。 テキストメールに比べ視覚に訴えることで、受信者に具体的なイメージを伝えることができます。

基本的なHTMLタグを理解する

HTMLメールを制作するためには、HTMLの記述やタグの種類を理解しておく必要があります。 まずHTMLは、文書型を宣言する「DOCTYPE宣言」を先頭に記述します。 これにより、続く文書がHTMLであること、また、HTMLのバージョンなどの情報をWebブラウザに知らせます。 次にHTML文章は、<html>、 <head>、 <body>という3つのタグで構成することを理解しておく必要があります。

文章、画像などの要素を理解する

HTMLメールを記述する際には、<table>タグを使い、文書全体を構造化しながら進めていきます。 これをテーブルレイアウトと呼びます。 <tr>タグで行を作り、表示したい文章をタグでセルを作り、 そのセルの中にテキストなどの各要素を入れてデータを定義していきます。 また、画像データを使う場合は<img>タグで画像のリンクをくくることで、メール本文に差し入れることが可能です。

CSSのルールを理解する

フォントのサイズなどテキストの装飾を変更したい場合、CSSを用いて指定します。 CSSを使うと通常のテキストでは表現できない、色合いや装飾が可能になります。

メーラーによってHTMLの解釈に差があることを理解する

HTMLメールは受信者のメーラーの種類やバージョン・設定によって、表示結果が異なることが度々おこるため、注意が必要です。

HTMLメールの制作の際に知っておきたい5つの流れ

基本構造となるHTMLを記述する

HTMLメール制作の工程は大きく分けると、文書や画像などを記述する「マークアップ」と、 文章をCSSで装飾する「スタイリング」の2つが主な工程です。 マークアップは、主にタグなどを使ってメール全体の骨格を定義し、構造化する作業です。 これに対してスタイリングは、主にマークアップに対して装飾の情報を与えていく作業となります。

メールは要素単位に分割して構成する

HTMLメールを制作する際は、メールの「本文」、大見出しや中見出しなどの「見出し」、 「画像」などの要素単位に分解して構成を考えていきます。 この流れを主にコンポーネント化と呼びます。コンポーネントの内容を適宜編集して組み合わせ、積み上げていくことにより、全体に統一感のあるメールを効率よく作成できます。

装飾はインラインスタイルで行うようにする

HTMLには見出しをつけるための<h1>、<h2>タグや、フォントの大きさを変えるための<font size>タグなど、装飾用のタグが多数存在します。 しかし、HTMLメールではこれらのタグは使用せず、代わりにテーブルレイアウト方式で記述したテキストブロックに CSSによるインラインスタイルでまとめて装飾していく方式が主流です。

CSSで文字サイズや色を装飾する

CSSの代表的なタグには、フォントの大きさを指定する<font-size>や、文字の太さを指定する、<font-weight>、 文字色を決める<color>などが存在します。値を設定することで、任意のレイアウトを実現できます。
このほかにも、テーブルセル内の余白サイズを指定する<cellpadding>、セルの間隔を決める<cellspacing>、 枠線の太さを指定する<boder>などもあります。 ただし、これらはHTMLメールの場合には必要がないケースが多いため、いずれの値も0を指定するのがオススメです。

PCとスマートフォン向けで表示崩れが起きないようスマホ用CSSを作成する

現在はメールをスマートフォンなどで閲覧することが多くなってきています。 このため、小さな画面でも快適に読めるようにするため、画面サイズに合わせてレイアウトを変化させる「レスポンシブメール」を作成することをおすすめします。 レスポンシブメールを作成するには、CSSの機能である「Media Queries(メディアクエリ)」を用います。 これによって、たとえば画面幅が一定のサイズ以下のデバイスでは、そのサイズに対応したレイアウトが適応されます。

HTMLメール制作についてまとめ

HTMLメールを上手に活用することで、テキストメールでは実現できない、デザイン性の高いメールを制作することができます。
テキストメールに比べ表現力が飛躍的に向上するため、より効果的な商品・サービスのアピールが可能となります。

SHOHE URA

SHOHE URA

マーケター/広報担当。 当サイトの運営およびブログ記事の執筆を担当。

よく読まれる記事

タグ一覧

ページトップへ戻る