『メールを送った人たちに最後まで読んでもらいたい』
『せっかく作るなら、おしゃれで見栄えするメールを作りたい』
『HTMLメールを作ることになったけど、デザインが思いつかない』
そんな悩みを抱えていませんか？
ユーザーに直接お届けするメールマガジン、通称『メルマガ』。どれほど届いてほしい内容を記載しても、情報をテキストに並べるばかりではなかなか最後まで読んでもらえません。
そこで活用したいのが、文字の大きさや画像、リンクへ直接飛べるボタンなどを組み合わせて作成できる『HTMLメール』です。
本記事では、HTMLメールの基礎からレイアウトの種類、今からでも取り入れられるワンポイントなどを、わかりやすくご紹介していきます。
HTMLメールってなに？｜基本知識
HTMLメールとはメールマガジン（メルマガ）の一種です。
HTMLメールは一般的に利用されるテキストメールとは異なり、HTMLコードを用いることで色・画像・ボタンなどが配置された、デザイン性の高いおしゃれなメールを作成することができます。
例えば商品の画像や購入ページへのリンクを直接配置するなど、より直感的に情報を伝えることが可能です。
例えば販売催促のメールなら、商品の魅力を画像で直接紹介したり、「商品ページを見る」といったボタンを設置することで、webサイトへ誘導しやすくなります。
そのほかにも、レイアウトの工夫次第で様々な効果が期待できます。
一方でHTMLメールは、同じくHTMLコードを使用して作成するwebサイトと同じように作成できるわけではありません。メールソフトによって表示され方が異なる他、全体のレイアウトや画像の配置など、細かいところに配慮する必要があります。
HTMLメールを作るには何が必要？｜作り方紹介
HTMLメールの作り方は大きく分けて3つに分けられます。
- 『プログラムを１から打ち込んで自作する』
- 『テンプレートをダウンロードし、文字や画像を組み替えて作成する』
- 『メール配信システム等に内蔵されたエディタを使う』
『プログラムを１から打ち込んで作成する』
テキストエディタなどで直接HTMLタグやCSSを記述して作成する方法です。
専門知識が必要になるため、極めて難易度の高い方法といえるでしょう。
その代わり、テンプレートや様式に縛られない完全に自由なレイアウトと、オリジナリティあふれるデザインを反映することができます。
『テンプレートをダウンロードし、文字や画像を組み替えて作成する』
HTMLの知識だけで一から作成するのではなく、既存のテンプレートを活用する方法です。
ダウンロードしたテンプレートに直接テキストや画像を入れ込んで作成するため、一から入力することと比べれば難易度は低いものの、HTMLとCSSの基礎を押さえておく必要があります。
『メール配信システム等に内蔵されたエディタやツールを使う』
メール配信に特化したサイトや内蔵されているツールを使用して作成する方法です。
ツールにはメール配信に必要な『メールの作成』『配信』『データ収集』といったすべての機能がそろっていることも多いため、だれでも利用しやすいのが特徴です。HTMLに慣れていないという方は、まずこちらを使用して作成することをお勧めします。
HTMLメールのレイアウトとは？｜レスポンシブデザインについて
レスポンシブデザインとは、一つのHTMLでどんなデバイスからでも見やすく、使いやすいwebページレイアウトにする技術です。この技術をHTMLメールにも応用することで、メールを開封するデバイスごとに文字の大きさや画像配置を最適なものに変えることができます。
レスポンシブデザインには以下のような種類があり、それぞれに特徴があります。
- リキッドレイアウト
- スケーラブルレイアウト
- レスポンシブレイアウト
リキッドレイアウト
画面全体の幅を％で自動変更させるレイアウトです。
画面サイズに応じて最適化されるので、スマートフォン、パソコン、どちらからのアクセスにも対応が可能です。
細かい調整を行わない分製作・作成コストを大きく抑えることができますが、大きく縮小された際にレイアウトが崩れやすいという欠点があります。
『画像を多く使わない』『テキストが多い』『メールの配信頻度が高い』等の場合にオススメです。
例：月に１〜２回程配信する店舗の最新入荷情報の配信。
趣味で書いているまとめサイトの更新通知。
ワンポイント！
全体の文字数が多くなったときは、文字と文字の間、画像と画像の間に十分な余白があるかに気を配ってみてください。
文字と文字の間のゆとりや大きさが、読みやすさに大きく影響します。
文字はくっきり濃い色を使うとよいでしょう。背景の色とのバランスを意識すると読みやすさアップ！
スケーラブルレイアウト
一つのデザインをそのまま拡大・縮小するレイアウトです。
画面に応じて最適化するのではなく、全体をpx（ピクセル）で固定して管理するため全体のレイアウトが崩れません。開封するユーザー層や端末が明確な時に最も有効です。
動画や画像を多く張り付けるレイアウトデザインが可能ですが、pxで管理する設計上一定以上の大きさに拡大表示することができません。
『広告やポスターのような画面にしたい』『張りたい画像が沢山ある』『明確なターゲット層へアプローチしたい』等の場合にオススメです。
例：ネットゲームの新モードの紹介メール
ファンクラブ会員向けの最新情報告知や大規模イベント告知
ワンポイント！
たくさんの画像を張るからこそ、リンク先へ飛ぶボタンは大きくわかりやすく、文字サイズも大きめに。一つ一つの大きさに気を付けて、メリハリのついた一ページを心がけてみてください。
レスポンシブレイアウト
開封するデバイスに応じて、文字の大きさや画像サイズを自動で調整するレイアウトです。
端末に合わせてレイアウトを最適化するため、どんなデバイスでも読みやすく、リッチなメールを作成することができます。
最も自由度が高く、様々なデザインを作成することができますが、多くの場合テンプレートやツールを使わずに打ち込むことになるため、要求される知識が多く、高いコストがかかります。
『HTMLとCSSの知識に自信がある』『受け取った後の効果を最大化したい』『よりデザイン性の高いメールを届けたい』などの場合にオススメです。
例：大規模なイベントの開催予告、公式サイト誘導に
月ごとのスケジュール公開と配信予告に
ワンポイント！
制作ツールのプレビューなどでは、実際の表示との差に気づけないことが多くあります。必ず複数の端末にテスト送信をして、実際の見え方を確認しましょう。細かく調整できるからこそ、最終確認は丁寧に。
まとめ
本記事ではHTMLメールとは何か、基礎的な特徴とレイアウトの種類について取り上げましたが、いかがでしたか？
おしゃれなデザインや、読みやすい構成、そのほかにも細やかな工夫次第で、読んでもらったその先の効果も期待できること間違いなしです。
webサイトのようにユーザーが自分で探すのではなく、私たち自らが送るからこそ、デザインや読みやすさにはとことんこだわりたいもの。しかし、実際に読んでもらいやすいメルマガを作るにはおしゃれなデザインだけではなく、誰に何を届けるのかを考えて製作することも大切でしょう。この記事があなたのお役に立てたらうれしいです。
講師と１対１で学べる資格・PCスキル講座のソフトキャンパス！
リスキリングでお得に資格取得を目指すならマンツーマンレッスン！
分からないところだけをちょっとだけ聞きたい、そんなあなたに！
