マイスピー通信のHTMLメルマガテンプレートを解説してみた
こんにちは、マイスピーマーケティング部のごっちんです。
先日、週刊発行のマイスピー通信が200号を迎え、
メルマガデザインをリニューアルしました！
これまでよりも感覚的に分かりやすく、
マイスピーのブランドイメージを意識したデザインになりました。
今回は、新しいメルマガ（HTMLメール）のデザインについて解説していきます。
なお、この記事で解説しているHTMLメールの内容は
テンプレートとして使えるように配布していますので、アレンジしてご利用いただいて大丈夫です。
まずは、マイスピー通信のデザイン解説に入る前に、
テキストメールとHTMLメールの違いから
お話していきますね。
テキストメールとHTMLメールの違い
メールの配信形式には「テキストメール」と「HTMLメール」の2種類があります。
それぞれにメリット・デメリットがあるので、簡単に解説していきます。
テキストメールとは？
決められた文字や記号のみで構成された一般的なメールのことです。
メルマガでは文字だけで情報を伝えなければいけないため、飾り文字や記号、段落分けなどを工夫して作成することで本文が読みやすくなります。
テキストメールのメリット
- 専門知識なしで手軽に作成できる
- すべてのメールソフトで閲覧可能
- 容量が軽い
テキストメールのデメリット
- メールの開封率を測定できない
- テキストだけなので視覚的な訴求が弱い
HTMLメールとは？
HTML（Webページを作るための言語）形式で作成されたメールのことです。
HTMLメールではWebページのように文字の色や大きさ、文章の間に画像や動画を入れるなど、表現力が豊富な訴求力の高いメールを作ることができます。
また、改善活動に必要な開封率を取得できるのも大きなメリットです。
HTMLメールのメリット
- 開封率を計測することができる
- 商品の画像や動画で視覚的な訴求ができる
- ブランドイメージを表現しやすいため、読者に覚えてもらえやすい
HTMLメールのデメリット
- HTMLやCSS等の専門的知識が必要
- 受信者側の閲覧環境によっては、正しく表示されない可能性がある
- テキストメールに比べ、容量が重くなる可能性が高い
HTML形式の利用が徐々に増加
一般社団法人日本ビジネスメール協会が行った「ビジネスメール実態調査2020」によると、HTML形式のメールマーケティングを行っている企業が徐々に増えているという結果が出ています。
（出典：一般社団法人日本ビジネスメール協会「ビジネスメール実態調査2020」）
数年前までは、「HTMLメールは避けるべき！」と言われていましたが、近年では、スマートフォンが爆発的に普及にしたことで、HTMLメールを読めない人が大幅に減り、視覚効果の高いHTMLメールが好まれているという調査結果も出ているようです。
HTMLメールを使うことで、視覚的に分かりやすい情報を届けることができ、企業のイメージ＝ブランディング効果を高められるため利用価値のある配信形式であることが伺えます。
ただ、専門的知識…それもWebページを作るのに使えるHTML5が使えなかったりと制限の多いHTMLメールには、敷居の高さを感じる方も多いかと思います。
今回紹介するサンプルテンプレートでは、
- どこからどこまでに文章を入れるか、タイトル、画像などのパーツごとに説明付き
- 配信停止やバックナンバーなどの置き換え文字を組み込み済み
となっておりますので、専門的知識が無い方もご利用いただけるかと思います！
具体的にどのように作るかを詳しく説明していきますので、
配布しているサンプルテンプレートを使ってHTMLメールを作成してみましょう。
マイスピー通信で使っているHTMLメールのデザイン解説
HTMLメールを作成する前に、まずは全体のデザインを解説していきます。
マイスピー公式HPをイメージして、ブランドカラーの青をアクセントに
従来のメルマガのように視線が上から下へ流れるようなシンプルなレイアウトで
設計しました。
PCとスマホでの表示はこんなかんじです
今回はリキッドレイアウトを採用してブラウザの幅に応じて本文の外側と画像幅が可変する仕組みになっています。
※リキッドレイアウトとは：デバイスの画面幅に合わせてコンテンツの幅が変化するようにする手法です。デバイスの画面幅に合わせてCSSを変化させるレスポンシブデザインとは似て非なるものです。
本文の白い部分は最大600px、PCなどの横幅の広い画面で見る場合は水色背景が付きます。
コンテンツの幅や写真などの画像幅は変化しますが文字サイズやボタン位置などのレイアウトは変わりません。
Tips：「スマホで見ると文字が小さくなってしまう」
先日、このようなお問い合わせをいただきました。
挿入する画像をスマホの画面幅（375px前後）よりも大きい数値のpxで指定すると、
画像は横幅ぴったりになりますが文字が小さくなってしまいます。
この場合、画像の横幅をwidth:100%にすると解消されます。
ダークモード対応について
ダークモードとは
画面の背景やメインカラーを黒基調にして、テキストやアイコンなどを
白基調にしたデザインに変更する機能です。
通常のライトモードよりまぶしさが軽減されるため、
眼の負担が軽くなるという特長があります。
スマホの設定をダークモード表示に設定している人にはこのような表示になります。
従来の明るい色が反転するため、白文字が黒に、青や水色は補正されてくすみます。
また、マイスピーのロゴは黒を起用しています。
透過画像のロゴを使用すると黒背景になり、ロゴが見えなくなってしまうため
白背景ごと画像にしています。
サンプルテンプレートのダウンロードと注意点
サンプルテンプレートはこちらよりダウンロード可能です。
ZIPファイルをダウンロードする
マイスピー通信で使用している全体の色のバランスは、マイスピーのイメージをより印象に残るような配色にしています。
このサンプルテンプレートはそのまま使用することもできますが、
利用シーンに応じて、色などをアレンジして使いたいですよね？
そこで、アレンジ方法について、本章で解説していきます。
サンプルテンプレートをマイスピーに取り込んで配信する方法は、下記マニュアルにてご紹介しています。
サンプルテンプレートの編集方法
サンプルテンプレートでは、文章やタイトル、画像などの区切りごとに説明書きを入れています。
専門的知識が無くてもご利用いただける、と述べましたが
1点だけプログラム用語を覚えていただきたいです。
区切りごとに説明書きするために「コメントアウト」を使っています。
コメントアウトとは
プログラムのソースコード上で「実行させない部分」のことです。
プログラム後部分をコメントタグで囲んで無効化することを
「コメントアウトする」といいます。
コメントアウトは以下のように書きます。
<!-- この部分はブラウザに反映されません -->
<!-- --と--の間にテキスト入力したものは
ブラウザに反映されないため
このように複数行を囲うこともできます
-->
<!-- ほげ -->
ふが
<!-- ぴよ -->
とした場合、「ふが」のみ表示されます。
コメントアウトを使って区切りごとの範囲を説明したものがこちらです。
本文を書き換える場合
このコメントアウトの
<!-- 文章の編集ここから --> <!-- 文章の編集ここまで -->の間に文章を入れてください。
改行する場合は<br>タグを使用してください。
ボタンリンクを使いたい場合
このコメントアウトの
<!-- ボタンリンク ここから --> <!-- ボタンリンク ここまで -->をコピーして、
ボタン名は
<a herf="*******">リンク1</a>のリンク1の部分を書き換えてください。
サンプルテンプレートのアレンジ方法
色を変えたい場合、の部分を変えたいカラーコードに置換してください。
カラーコードとは
Webページ上で表現される色を指定するための文字列のことを指します。
#（シャープ）に続く6桁の値を16進数（0～9,A～Fの組み合わせ）で表します。
（例）黒 → #000000;
本文と本文外の背景色、ラインの色を変える
- 本文の白背景#fafafaを好きな色(例.ベージュ#eee9e6)に置換
- 本文外の水色背景（PCのみ）#E1EDFAを好きな色(例.濃いベージュ#beaba0)に置換
- 青のライン#217fc4を好きな色(例.茶色#cc6a4b)に置換
ボタンの色を変える
- 紺ボタン#2C3E54を好きな色(例.オレンジ#e75c30)に置換
新デザインのテンプレート追加予定です
今回はマイスピー通信のリニューアルデザインのサンプルテンプレートをご紹介しましたが、
近い将来、自由にお使いいただけるデザインテンプレートを追加リリースする予定です！
デザインは一昨年のデザインコンテスト2019で入選された
こちらの3種類のデザインを基に制作予定です。
鋭意制作中につき、リリースまで今しばらくお待ちください^^
まとめ
今回の記事はいかがでしたか？
HTMLメールの作成についてご紹介しましたが、
「テキストメールとHTMLメールの違い」の章でもご紹介したように
どちらも一長一短の特徴があります。
また、目的によって効果に差が出る場合もありますので
手段の一つとして今回の記事が参考になれば幸いです。
