(公開日2023年08月25日)
企業の営業・マーケティング担当者ならびに個人事業主の方を対象に記事を書いています。メルマガを配信する際に、HTMLメルマガを利用することが増えてきました。それではメルマガをデザインする際にどのようなことに気をつけたらよいのでしょうか？
この記事では、メルマガの横幅はどのくらいがよいか、メルマガの文章で1行は何文字くらいがよいかについて解説します。これを読めば、デザイン性に優れたメルマガの横幅はどれくらいかが分るでしょう。そして読者が読みやすい最適なメルマガを配信できるようになります。
メルマガの最適な横幅は以下のような条件を満たすサイズです。
条件1：スマホ向けに最適化されている
条件2：さまざまなデバイスで見やすい
条件3：横幅に合わせて適切な文字数を表示できる
スマホの普及でメルマガをスマホで見る人が増えています。メールマガジン購読状況調査 2021年度版によると、パソコンとスマホのどちらでメルマガを読むかという問いに対して
「スマートフォンとパソコンの両方だが、パソコンが多い」という回答が1番多くみられました。
しかし年々スマホの利用率は増える一方です。LINEによるインターネットの利用環境の定点調査2021年度版によると、ウェブサイトを閲覧するデバイスの割合は、スマホのみが52％、スマホとパソコンを併用が46％、パソコンのみが1％になっています。スマホで見やすいメルマガが必須でしょう。
ウェブサイトのデザインで使われるレスポンシブデザインを、そのままHTMLメルマガに当てはめると、メーラーが対応できずデザインが崩れることが少なからずみられます。そのためHTMLメルマガはデザインの崩れを防ぐため、テーブルレイアウトでコーディングするのが鉄則です。
メルマガの横幅も、メーラーの幅に応じてフレキシブルに横幅が変化するのではなく、スマホとその他のデバイス向けに分けて２段階に調整します。ゆえにどちらでも見やすい横幅サイズが必要です。
スマホで見るにしても、パソコンで見るにしても、読みやすい文字数があります。たとえば1行の文字数は、スマホなら18文字前後、パソコンなら36字以内くらいでしょう。この範囲から外れると読みづらくなり、メルマガとして役に立ちません。
最近はメルマガをスマホで読む人が増えています。文の長さ、改行の仕方もスマホとその他のデバイスでは異なります。スマホは１行で表示できる文字数が少なく、１行の文字数が増えると改行が多くなり読みにくいです。
ですからメルマガは、スマホでならびにパソコンの両方で読みやすい文字数となるように、横幅やフォントの大きさを調節しなければなりません。
具体的にメルマガの最適な横幅サイズを示します。
・ヘッダーの横幅は700px前後
・画像の横幅は600px
・CTAボタンの横幅は500px
・メルマガの横幅は700px前後が最適
メルマガのヘッダーの横幅は600～800pxで作成されることが多いようです。大手3社のメルマガのヘッダーサイズを示します。
・NIKE：425：157（横幅640px）
・amazon：8：1（横幅640px）
・メルカリ：19：3（横幅760px）
他社のメルマガのヘッダーも、横幅は700px前後が多いようです。ただしスマホの場合は横幅100％に当てはまるように縮小されます。大抵ロゴの画像が張り付けられ、メニュー、CTAボタンが設置されています。
パソコンおよびスマホで見やすい画像の横幅は600pxくらいです。600px以上になるとスマホの画面に収まらず、横スクロールが必要になるからです。横スクロールして見るのは手間がかかりますし、デザイン上も見苦しいですね。またダウンロードに時間がかかるため、メルマガを閉じられてしまうリスクがあります。
画像が小さすぎるとパソコンで見る際に物足りないかもしれません。かといって拡大表示すると画質が非常に悪くなります。横幅が600pxの画像をそのままの大きさで表示させるとよいでしょう。
読者のクリックしやすいCTAボタンの横幅は500pxくらいです。このサイズをパソコンではそのまま表示させ、スマホでは横幅に合わせて表示させます。ただしボタンと認識させるために四方へ50pxの余白を確保してください。
複数のリンクを貼るときは、リンクエリア間に20pxのすき間を入れて、間違ってクリックするのを防ぎます。CTAボタンの大きさや見栄えはクリック率に影響します。背景色を明るくしたり、文字色を白や黒にしたりして視認性を高めるとよいでしょう。
テーブルレイアウトでデザインすると、テーブルの中にヘッダー、画像、CTAボタンが組み込まれ、どれも同じくらいの横幅になります。ですからメルマガの横幅は700px前後が最適でしょう。
スマホでメルマガを表示する際には、レスポンシブデザインでメルマガの横幅をスマホの横幅に合わせます。つまり全体が縮小されるわけであり、あまりサイズが大きすぎると、縮小され過ぎて読みにくいです。
逆に700pxより小さいと、パソコンで見る際にインパクトが弱すぎます。ですからメルマガの横幅は700pxくらいが最適でしょう。パソコンでメルマガを表示する際には、背景色をつけるとデザイン性が高まります。
HTMLメルマガの横幅だけでなく、横に並ぶ文字数や文の長さも大切な要素です。
・パソコンのメーラーは横36文字以内
・スマホのメーラーは横18文字前後
・ターゲットの世代に合わせて文の書き方を変える
メーラーで見られる最大値は横36文字のため、メルマガも横36文字以内に収めるとよいでしょう。これ以上長くなると複数行におよび読みづらいと思われます。ただし件名は30文字くらいが適切です。
さらに行間が狭いと読みづらいので、句点ごとに改行する場合が多く見られます。短文を箇条書きにした文章となりますが、SNSに慣れ親しんだ読者に向いています。ただし昔の文章に慣れた人には違和感があるかもしれません。その際には、句点ごとに改行せず、3行ごとに改行するとよいでしょう。
スマホは横幅が狭く、横18文字前後しか表示されません。さらに件名はAndroidのGmailアプリでは、15文字程度しか表示されません。これをこえると自動的に改行されますが、SNSを中心としたスマホ世代の人はなじめないようです。短文で、句点ごとに改行された箇条書きの文章が好まれます。
古い世代の読者からすれば、幼稚な文章にみえますが、これが時代の流れというものでしょう。メルマガのターゲットの世代に合わせて書き方を変えてください。
メルマガのターゲットの世代によってスマホの利用率が異なります。若い世代のB to Cはスマホが多く、年長者あるいはB to Bの場合はパソコンが増えるでしょう。ターゲットの世代に合わせて、どのデバイスを重視するか決めてください。それによってHTMLメルマガの1行の文字数、改行の仕方を変えるとよいでしょう。
スマホは横幅が狭く、全体の画面も小さめで、通常の文章はとても読みづらいです。句点ごとに改行して、余白を置くことが必要です。スマホに最適なのは、SNSで見られるような短文の箇条書きかもしれません。
その他のデバイスは、1文36文字以内でよいのですが、3行ごとに改行したほうがよいでしょう。長い文でひとかたまりの段落を形成した文章は、最近の若い世代には敬遠されます。逆にターゲットが年長者の場合は、改行を少なくした方がよいかもしれません。
株式会社B.A.Dのメルマガです。基本となるメルマガの横幅は700pxに設定されています。パソコンのメーラーでは、画面の中央にメールが表示されます。サービス内容を示す画像は2列表示です。
スマートフォンで見ると、縮小されてメルマガの横幅はデバイスの横幅サイズと同じです。サービス内容を示す画像はレスポンシブデザインで1列に表示されています。添付した画像では分かりにくいですが、この表示の仕方でパソコンでもスマホでもメルマガが読みやすくなっています。
よく見られるQ&Aをご紹介します。
Q：メルマガデザインのトレンド情報を知りたい
Q：ビジネス向けメルマガデザインとは？
Q：メルマガに画像を埋め込む方法は？
A：メルマガデザインの最新トレンドは以下の５つです。
トレンド1：洗練されたデザイン
トレンド2：多様性をもつ読者に対応
トレンド3：ユーザー生成コンテンツ（UGC）を利用
トレンド4：双方向コミュニケーションができる
トレンド5：レスポンシブデザインにする
配色・フォント形式・高画質画像に配慮した洗練されたデザインが必須です。さまざまな特性をもつ読者の意見を取り入れたインクルーシブデザインも取り入れられています。商品・サービスに対する肯定的なレビュー、SNS投稿などのUGC（User Generated Content）を紹介するメルマガが多くなりました。
メルマガを読むだけでなく、読者のほうからも情報を送り返す双方向性コミュニケーションがはやりです。多くの読者はメールをスマートフォンでみるため、レスポンシブデザインは必須でしょう。
参考記事：メルマガの最新トレンド情報！おしゃれなデザインにする方法をお届け
A：ビジネス向けのメルマガは以下のような条件を満たします。
1．デザインの配色を考慮
2．ターゲットの性別にデザインを合わせる
3．文字情報は少なめ、画像は多め
4．CTAボタンの配置に気をつける
3色配色「70:25:5」の法則に従いながら、見出し・背景などにブランドカラーを含めます。メルマガのターゲットの性別に合わせてデザインの内容を変えてください。女性には共感・イメージを重視し、男性には性能・商品情報を打ち出すとよいでしょう。
メルマガには一瞬で目を引き、直感的に興味をもつ要素が必要です。文章ではなく、画像を使って商品・サービスのイメージを伝えてください。一部の読者はメルマガの最上部しか見ませんから、メルマガの最初の部分にCTAボタンを設置するとよいでしょう。
参考記事：ビジネス向けメルマガデザインとは？チェックポイントと事例を紹介
A：HTMLメルマガに画像を埋め込む際には以下のポイントに気をつけてください。
・絶対パスで画像URLを指定
・スタンダードな画像拡張子を使う
・画像のALT属性を設定
画像の位置を示すためには以下のような絶対パスが必要です。
HTMLメルマガでは次のような相対パスは対応できません。
./images/logo.png
さまざまなメーラーで受信できるように、JPEG・JPG・PNGなどのスタンダードな画像拡張子を使ってください。また画像が表示されない場合に備えて、ALT属性を設置し、画像の代わりになるテキストを準備してください。
メルマガの横幅は700pxくらいがよいこと、メルマガの1行に含まれる文字数はパソコンのメーラーで横36文字以内、スマホのメーラーで横18文字前後がよいことを解説しました。レスポンシブデザインを用いて、さまざまなデバイスに対応できるHTMLメルマガをデザインすることが必要です。
HTMLメルマガをデザインするには専門的なスキルが必要であり、本業の合間に制作するには手間がかかり過ぎます。HTMLメールの専門家に依頼した方がよいかもしれません。
株式会社ビーエーディーはHTMLメール制作のスペシャリストです。HTMLメールのテキストデザイン・コーディング・配信をすべてお任せください。
興味がある方は、以下のリンクページをご覧ください。
