(公開日2023年08月25日)
企業の営業・マーケティング担当者ならびに個人事業主の方を対象として記事を書いています。メルマガをスマホで読む人が増えているようです。それではスマホ向けのメルマガはどのようなものなのでしょうか？
この記事では、スマホに最適なメルマガのデザイン、メルマガをデザインする方法、デザインする際の注意点について解説します。これを読めば、スマホ向けのメルマガの特徴が分かるでしょう。そしてスマホユーザーの視覚に訴え、効果の高いメルマガを配信できるようになります。
以下のような特徴を備えたデザインです。
・スマートフォンの画面に合わせる
・HTMLメールを使う
・パソコンでも見られるようにする
2022年11月現在、販売シェアの高いスマートフォンの画面の横幅は、4.7〜6.7インチ（375～428px）です。横幅が狭く、文章は頻繁に改行され、縦に長いメールをスクロールして読みます。
文字が小さいと読みづらく、特に高齢者、子どもはその傾向が強くなるでしょう。スマホではパソコンと比べるとフォントが縮小されるため、フォントサイズが15pxくらいでないと読みにくいようです。
そもそもスマホそのものが文章を読むのに向いていません。ですからスマホ向けのメルマガを配信する際には、SNSのように短文を箇条書きにした形式のメルマガか、文章よりも画像で訴えるメルマガが好まれます。
参考記事：スマホに最適化したHTMLメールとは？作り方のコツと注意点を解説
メルマガに使えるメールにはテキストメールとHTMLメールがあります。テキストメールはシンプルなテキストのみのメールです。フォントの大きさを変えたり、改行したりして、多少はアレンジできますが、基本的に文章が主体のメルマガです。
HTMLメールは、文章を載せるだけでなく、文字の装飾、画像・動画を挿入できます。デザイン性に富んだメルマガを制作でき、読者の視覚に訴えて興味を湧かせることが可能です。
またリンクやCTAボタンを埋め込むことができますし、クリック率、コンバージョン率も測定できます。メルマガを使ったマーケティングに役立ちます。スマホに最適なメルマガはHTMLメールを使うほうがよいでしょう。
LINEによるインターネットの利用環境の定点調査2021年度版によると、ウェブサイトを閲覧するデバイスの割合は、スマホのみが52％、スマホとパソコンを併用が46％、パソコンのみが1％になっています。スマホの利用率が高くなっていることは間違いありません。
しかしメールマガジン購読状況調査 2021年度版によると、パソコンとスマホのどちらでメルマガを読むかという問いに対して「スマートフォンとパソコンの両方だが、パソコンが多い」という回答が1番多くみられました。
しかもビジネス用のメルマガは会社のパソコンで見ることが多いようです。ですからスマホに最適化したメルマガではなく、メルマガもスマホとパソコンの両方で見られるレスポンシブデザインが必要です。
参考記事：ビジネス向けメルマガデザインとは？チェックポイントと事例を紹介
以下のような3つの方法があります。
・テンプレートを利用する
・メール配信システムを利用する
・自前ででコーディングする
メルマガのテンプレートとは、メルマガのどこに何を配置するかを決めた「レイアウトのひな形」のことです。見本として配置してあるテキストや画像を変更して利用できます。ネット上で無料あるいは有料でテンプレートをダウンロードすれば入手が可能です。
ヘッダー、リード文、あいさつ、見出し、画像、CTAボタン、フッターなどの要素を含み、ほとんどのテンプレートがレスポンシブデザインでスマホにも対応しています。自分でコーディングできない人でも、HTMLメールを使えるのがメリットです。
ただしダウンロードしテキストや画像を変更して使おうとする際に、スタイルが崩れてしまうことがあります。この場合には自分で修正が必要ですが、専門的な知識がないとできません。
ネット上でHTMLメルマガの作成・配信ができるサービスがあります。会社によっては、テンプレートも用意されており、あらかじめ準備された編集画面でアレンジできるのが特徴です。専門的な知識がなくても、使い方の解説を読みながら編集できます。
また編集したメルマガは、さまざまな受信環境によって表示のされ方が変わります。受信環境によってどう表示されるのかを調べたり、表示されるときにレイアウトが崩れにくいテンプレートを準備してくれる会社もあります。
さらにマルチパート配信を利用すると、HTMLメールが見られないとき、テキストメールを表示できます。このシステムを使えば、最小限で必要な情報を漏らさず配信できるでしょう。
HTMLメールのオリジナル性を高めるなら、自前でコーディングするのが最善です。専門的なスキルが必要であるのは言うまでもありません。ただしHTMLメールのコーディングは、ウェブサイトのコーディングとは異なります。
メールクライアントは新旧さまざまな種類のものがあり、最新のHTML/CSSに対応していない場合が多く見られます。レイアウトの崩れを防ぐため、テーブルレイアウトを用いたコーディングを行うのが主流です。
CSSも埋め込み型あるいはインライン型CSSを用います。このやり方に慣れていないと、自前でコーディングするのは難しいでしょう。
参考記事：HTMLメールのコーディングのやり方！特徴・手順・注意点を解説
メルマガをデザインする際は以下の4点に注意してください
注意1：メルマガの容量は100kb以下にする
注意2：メルマガの横幅は600～700px
注意3：CTAボタンは四方に50pxの余白を設け複数箇所に配置
注意4：HTMLメルマガは見られないことがある
画像や動画が多すぎるとメルマガの容量が重くなります。受信するまでに時間がかかり、ユーザーはストレスを感じて途中でメルマガを閉じてしまうかもしれません。またメールクライアントによっては、画像をダウンロードできないことがあります。
たとえばスマホのGmailだと102kb以上のメールはクリッピングされてしまい、これ以上大きいと画像などが消去されて正しく表示されません。そうなるとせっかく作ったメルマガの内容が伝わらなくなります。メルマガの容量は100kb以下にしてください。
容量を減らすために、画像は圧縮してサイズを小さくするとよいでしょう。また動画よりもGIFアニメーションを使うと容量を節約できます。全体にコンパクトにまとめ、キャッチ画像などで目を引くようにしてください。
2022年11月現在に販売されているスマートフォンのCSSピクセルの横幅は375～428pxです。メルマガは、この横幅に合わせて縮小されます。元の横幅が大きいと縮小したときに小さくなりすぎて見づらいでしょう。逆にメルマガをパソコンで見る際には、横幅が小さすぎると見づらくなります。
したがってメルマガの横幅は600〜700pxにしておいて、レスポンシブデザインを使い、スマホでは横幅100％表示にしてください。このサイズなら、スマホで縮小しても61%〜71％くらいの大きさで表示されます。
ただしウェブサイトのコーディングに使う細かい設定のレスポンシブデザインは、HTMLメールでは使えません。スマホとその他のデバイスの2種類に分けるメディアクエリーを使います。
参考記事：デザイン性に優れたメルマガの横幅はどれくらい？最適解を教えます
スマホは画面が小さいため、CTAボタンを押すのも一苦労です。CTAボタンを目立たせ、クリックしやすくするために、ボタンの四方に50pxの余白を設けてください。リンクするURLが複数の場合は、リンクエリア間に20pxのすき間を置きましょう。
メルマガの最上部しか見ない読者がいるため、CTAボタンは上部にも配置します。またメルマガを最後まで読んでくれた人のために最下部に配置。さらにメルマガが長い場合は中部にも置くとよいでしょう。
スマホでHTMLメールを受信する際、キャリアメールやMMSで受信すると画像が表示されないことがあります。またメールクライアントにHTMLメールを除外するフィルターをかけてあると迷惑メールとして処理されて受信されません。
どの受信環境でも見られるHTMメルマガはないため、マルチパート配信を利用して、HTMLメールが表示されない場合はテキストメールを表示させるように設定するとよいでしょう。またメルマガと同じウェブサイトを作っておいて、リンク誘導するのもよい方法です。
株式会社B.A.Dのメルマガです。基本となるメルマガの横幅は700pxに設定されています。パソコンのメールクライアントでは、画面の中央にメールが表示されます。サービス内容を示す画像は2カラム表示です。
スマートフォンで見ると、縮小されてメルマガの横幅はデバイスの横幅サイズと同じになります。サービス内容を示す画像はレスポンシブデザインで1カラム表示です。この表示の仕方でパソコンでもスマホでもメルマガが読みやすくなっています。
よくあるQ&Aをご紹介します。
A：画像の埋め込みは、ウェブサイトと同じようにIMGタグを使います。HTMLメルマガに画像を埋め込むときの注意点は以下のとおりです。
1：画像のURLは絶対パスで指定
2：画像の横幅は100％に指定
スマホの横幅は狭いため、画像は画面いっぱいのサイズで表示してください。
3：ALT属性を設定
受信環境によって画像が表示されないときは代替テキストを表示します。
4：スタンダードな拡張子（JPEG・JPG・PNG・GIF）を使う
BMPなど特殊な拡張子の画像は表示されません。
A：4つのコツを紹介します。
1：ターゲットに合わせた画像を使う
性別・年齢・嗜好に合わせて画像を選定し、視覚に訴えて情報を提供
2：情報を左側に寄せる
読者の視線は左から右に向かって動くため、文を左側から始めてください
3：分かりやすさを重視
文字数を抑え、シンプルで要点を押さえた内容にする
4：CTAボタンを設置
メルマガの上部しか見ない読者がいるため、バナーにもCTAボタンを設置してください
A：メルマガを受信するメールクライアントは、大きな容量のデータを受け付けません。画像も100kb以下に抑えるとよいでしょう。画像サイズを縮小したり、圧縮したりして容量を減らしてください。
スマホに最適なメルマガのデザイン、メルマガをデザインする方法、デザインする際の注意点について解説しました。オリジナル性の高いHTMLメルマガをデザインするには、独自にコーディングするのが最善です。
ただしHTMLメルマガをコーディングするには専門的なスキルが必要です。企業の営業の方、個人事業主の方が本業の合間に手がけるには手間がかかり過ぎるでしょう。専門家に依頼してHTMLメールを作成してもらった方がよいかもしれません。
株式会社ビーエーディーはHTMLメール制作のスペシャリストです。HTMLメールのデザイン・コーディング・配信をすべてお任せください。
興味がある方は、以下のリンクページをご覧ください。
