こんにちは。バナナデスクです。
講座の案内メールを開いたのに、最初に見えるのは大きな写真と三つのバナー。参加日を知りたい読者は、どこまでスクロールすればよいのでしょうか。
メルマガのデザインは、飾りを増やす作業より、読む順番を決める作業です。写真、見出し、本文、ボタンがそれぞれ目立とうとすると、一番知ってほしい条件が後ろへ押し出されます。
この記事では、架空の撮影講座の案内を、情報を詰め込んだ案と、一つの講座へ絞った案に作り分けます。ここで示すのは文章と構成の制作見本で、配信ツールへ取り込んだり、実際の受信箱で表示を確認したりしたメールではありません。スマホや画像が表示されない場面でも必要な判断材料が残るよう、何を本文に置き、送信前にどこを確かめるかを考えましょう。
最初に決めるのは、読み終えた人にしてほしいこと
今回の仮メールの目的は「11月22日の撮影講座の内容と参加条件を確認してもらうこと」です。新商品の購入、過去動画の視聴、SNSのフォローも同じ強さで並べると、何の案内かが弱くなります。
そこで、主なボタンは講座の詳細へ一つ。ほかの知らせは別便へ分けるか、今回必要な補足だけを本文へ入れます。配信停止や問い合わせといった必要なリンクまで消すという意味ではありません。
| 要素 | 情報過多の案 | 整理した案 |
|---|---|---|
| 最初の見出し | 11月のお知らせを一挙紹介 | 撮影前の準備で迷う方へ。11月22日の実践講座 |
| 先頭の画像 | 大きなイメージ画像に日程と料金をまとめる | 写真の役割は内容の補助。日程と料金は本文に記載 |
| 案内の数 | 講座・商品・動画を同列に紹介 | 今回の講座に必要な対象・内容・条件を説明 |
| ボタン | 三つとも「詳しくはこちら」 | 「講座の内容と参加条件を見る」 |
見た目の好みだけでなく、読者が知りたいことを探す手間で比べます。日程を探すために画像を開き直す必要があるなら、本文の置き方から直せます。
見出しの下に、対象と具体的な内容を置く
整理した案の本文は、次のようにします。これは架空の講座で、募集や配信の実績ではありません。
撮影前の準備で迷う方へ。11月22日の実践講座
商品を撮り始める前に、背景、置く向き、光を一つずつ整える60分です。机の上に置いた小物を使い、撮影条件を一度に変えすぎない進め方を実演します。
対象は、スマートフォンで小物の商品写真を撮りたい方です。高価なカメラや専用照明は使いません。人物撮影、画像加工ソフトの詳しい操作は今回の範囲に含みません。
日時：11月22日10〜11時、日本時間。オンライン開催。参加費：3,300円（税込）。準備物：スマートフォン、手のひらほどの小物、白い紙。
講座の内容と参加条件を見る。
この順なら、写真が表示されなくても、誰に向いていて、何を扱い、いつ参加するのかが残ります。日程だけを先頭へ置く方法もありますが、読者がまだ講座を知らないなら、何のための時間かを短く説明してから条件へ進みます。
スマホでは、狭い幅で「行き先が分かるか」を見る
今回の制作見本は一段の構成にし、本文を16px、行間を1.8、左右に余白を取る初期設計です。文字を細かくしてパソコンと同じ一画面へ収めるのではなく、縦に読めるようにします。
Mailchimpの公式資料は、メールクライアントがWebと同じHTML要素に対応するわけではないと説明し、単純な構造と表示テストを勧めています。凝った背景や独自フォントに頼るほど、未対応時の見え方も確認が必要です。HTMLメールの表示上の制約
ボタンは、周囲の本文リンクと間隔を空け、何を開くかが一目で分かる文にします。複数のリンクを密集させると、押し間違いだけでなく、選ぶ前の迷いも増えます。
色を変えるだけで重要度を伝えず、「日時」「対象」「準備物」の見出しや言葉も使います。黄色い背景の上へ白い細字を置くような、明るさの近い組合せは避け、実際の表示で読めるかを確認しましょう。
画像が表示されないときも、案内を完結させる
画像は雰囲気や実演の内容を補うために使い、日時、金額、対象、必要な行動は本文にも置きます。画像の文字を大きくしただけでは、画像自体が読み込まれない場面に対応できません。
たとえば写真の代替テキストは「白い紙を背景に、机上の小物を撮影するイメージ」とします。写真を見なくても分かる本文があるなら、画像の代替テキストへ講座説明の全文を詰め込む必要はありません。
「画像を消して文章だけを読む」「スマホ幅で最後まで読む」を、デザインの途中で行います。条件が残っているか、どこを開けば詳しい説明があるかが分かれば、装飾に依存しない案内になります。
配信エディタのプレビューと、実際の受信箱で点検する
| 場面 | 見る箇所 | 直す例 |
|---|---|---|
| エディタのスマホ表示 | 見出しの改行、本文の横はみ出し | 長い見出しを短くし、横並びを一段へ |
| 画像を非表示にした状態 | 日程・料金・リンクが残るか | 画像だけの情報を本文へ移す |
| 受信箱の件名と冒頭 | 何の案内かが分かるか | 管理用の名前や不要な冒頭文字を見直す |
| 実受信した本文 | 背景、画像、ボタン、配信停止欄 | 意図しない崩れを利用ツール内で修正して再送信 |
ブラウザで作った見本がきれいでも、Gmail、Outlook、スマートフォンのメールアプリすべてで同じ表示になるとは限りません。対象読者が使う代表的な環境へ、許可されたテスト宛先で確認します。確認したアプリ、端末、日付を残し、未確認の環境まで対応済みとしないようにします。
比較見本の狙いは、クリック率が上がったと証明することではありません。読者が必要な条件を見つけ、目的のページへ進める案内に整えることです。送信後に確かめる場合も、クリックと申込みを別に数え、デザイン変更以外の条件を揃えて判断しましょう。