(公開日2023年08月25日)
企業の営業・マーケティング担当者ならびに個人事業主の方に向けて記事を書いています。顧客に情報を提供するため、メルマガやHTMLメールを配信されている方は多くいるでしょう。そしておしゃれにデザインされたレイアウトをご希望の方は少なくないはずです。
この記事では、マルチデバイスに対応するメルマガのレイアウト、レイアウトをおしゃれにデザインするコツを解説します。またおしゃれにレイアウトされたメルマガテンプレートを2つご紹介します。メルマガを配信する際に役立ててみてください。
メルマガはさまざまなデバイスで受信されるため、それに対応できるレイアウトが必要です。そこで以下の4種類のレイアウトをおすすめします。
・テーブルレイアウト
・レスポンシブレイアウト
・リキッドレイアウト
・フレキシブルレイアウト
テーブルレイアウトは、基本的なテーブル（表）の中にさらにテーブルを入れ、その隣に他のテーブルを入れるといった、テーブルを入れ子状態にするレイアウトです。テーブルの列幅を固定でき、高さは自動計算されます。
列幅を固定（fixed）にしておけば、HTMLだけで基本構造が決まり、ブラウザ表示モードによる影響をあまり受けません。レイアウトが崩れることが少なく、さまざまな受信環境で表示されるメルマガのデザインに最適です。
以下のCSSでスタイルを指定します。
.style {
table-layout: fixed;
}
・fixed：テーブルの列幅を固定
・auto：テーブルの列幅を自動計算
デバイスの横幅に応じてCSSを切り替えるレイアウトです。ブレイクポイントを境にレイアウトが変わります。たとえば画面の幅が〜480pxの場合はこのレイアウト、480px〜の場合はこのレイアウトと指定する具合です。
ブレイクポイントを480pxに設定しておけば、スマートフォン対応のCSSと、それ以外のデバイス対応のCSSを使い分けられます。たとえば以下のようなCSSです。
@media only screen and (max-width: 480px) {
.sp_hide {
display: none !important;
}
}
スマートフォンで見る際には、sp_hideの要素が表示されない設定です。
メールクライアントの画面サイズに応じて、メルマガの横幅を自動的に変えるレイアウトです。HTML要素を%で表示します。たとえばスマートフォンを対象として、メルマガの横幅を100%に設定すれば、どのようなスマートフォンであれ、常に画面幅にフィットしたメルマガが表示される仕組みです。
CSSの事例を示します。
@media only screen and (max-width: 480px) {
#design_area_result {
width: 100% !important;
}
}
HTMLではdesign_area_resultの要素が幅700pxに指定されていますが、スマートフォンでは100%表示されます。
リキッドレイアウトと同様にHTML要素を%で表示しますが、さらに最小幅と最大幅を指定する方法です。たとえばパソコンのメールクライアントを対象として、メルマガの横幅を100%、最大横幅を700pxにすると、画面が広くなってもメルマガの横幅は700pxを超えることはありません。700pxを超えた範囲は余白で表示されます。
事例を示します。
.cm-left {
width: 100%;
max-width: 700px;
)
ただしこのレイアウトに対応していないメールクライアントがあるため、多用しないほうがよいでしょう。
以下の4つのコツを守ってレイアウトをデザインしてください。
・テーブルレイアウトを基本にする
・モバイルフレンドリーなデザインにする
・空白を十分にとる
・必要な画像のみを挿入する
・全体のボリュームは少なめに
メールクライアントとデバイスの組み合わせは何百種類もあります。機能もさまざまで、最新のHTML/CSSに適応していないケースが多く、レイアウトが崩れることが少なくありません。特に画像を横並びにすると、ちゃんと表示されないことがあります。
対策として表示モードの影響を受けにくいテーブルレイアウトを基本にコーディングするとよいでしょう。何行何列のテーブルかを決め、列幅を指定すれば、まず崩れることはありません。
<html>
<body>
<table>
<tr>
<td>A</td>
<td>D</td>
<td>G</td>
</tr>
<tr>
<td>B</td>
<td>E</td>
<td>H</td>
</tr>
<tr>
<td>C</td>
<td>F</td>
<td>I</td>
</tr>
</table>
</body>
</html>
これを表示したのが以下の画像です。
テーブルレイアウトを基本にして、レスポンシブレイアウト、リキッドレイアウト、フレキシブルレイアウトを補助的に用いるとよいでしょう。
最近ではメルマガをスマートフォンで受信するユーザーが増えています。そのためスマートフォンで見るのに向いた（モバイルフレンドリーな）デザインにするのが主流です。デベロッパーツールなどを使い、スマートフォンで見た時のデザインを確認しながらデザインしてください。
ただしテーブルレイアウトは、パソコンの画面でないとコーディングできません。まずパソコン向けのデザインをコーディングしてコーディングした後で、モバイル向けにレイアウトをアレンジしてください。
メールコンテンツのセクションの間に空白（余白）を十分にとることは大切です。白色はデザインの背景色として重要な色であり、見せたい要素を強調します。余白があるとメルマガが整理されているように見えて読みやすいのもメリットです。
画像引用元：photoAC – カラフルなアイスクリーム
読者の目を引き、情報を伝えるのに画像は効果的です。ただし枚数が増えて容量が大きくなると、表示できなくなる点に注意してください。きちんとした高画質の画像を厳選して載せるとよいでしょう。ユーモアのある動きで目を引きつけるGIFアニメーションがおすすめです。
メール全体が長すぎると読者が読みづらくなります。ですから3スクロール以内で読み切れるボリュームにするとよいでしょう。メルマガのテーマを2〜3個に絞り、ボリュームを少なくして読みやすいメルマガにしてください。
・レイアウトが崩れないようにする
・テストメールをチェックする
HTMLメールを使ったメルマガは、受信環境によっては表示が崩れることがあります。表がズレたり、画像・動画が正しく表示されないなどです。最新のHTML/CSSを使ったflexboxレイアウトなどは全く活用できません。
表示の崩れを防ぐために、テーブルレイアウトを用いるのが基本です。しかもコーディングする際に、埋め込み型CSS、インラインCSSといった特殊なスキルが必要です。HTMLメールのコーディングはウェブサイトのコーディングとは別物とみなされます。
HTMLメールを使ったメルマガが正しく表示されるかどうか、さまざまなデバイス・メールクライアントを対象にメールを送りテストすることが必要です。とはいえデバイスにはiPhone、Android、iPad、パソコンなどがあり、バージョンや含まれるメールクライアントも多種多様です。手動でテストメールをチェックするのは不可能でしょう。
HTMLメールの表示確認をするオンラインツールがありますから利用してください。
・Email on Acid
・Litmus
・MailChimp
メルマガのテンプレートを２つご紹介します。
・2カラムのレスポンシブレイアウト
・GIFアニメーションのついたテンプレート
メルマガの本文は桜の画像を背景としたものです。本文の下にサービス内容を示すバナーが並んでいます。バナーの部分は、480pxを境に1カラムと2カラムの表示にデザインが変わります。
スマートフォンで見ると1カラムで表示され、スクロールするにつれてヘッダー、本文、サービス内容、フッターの順に見られます。スマートフォンの場合は、画面の横幅が小さいため、1カラム表示が最適です。
タブレットやパソコンで見ると2カラムで表示され、サービス内容の部分は2カラムで表示されます。画面が広いため、バナーを2列で表示したほうがスッキリしたデザインになりますし、スクロールの距離も短くてすみます。
キャッチ画像に前段落で提示したGIFアニメーションを用いたテンプレートです。引っ越しの風景画像が一つずつ増えていくアニメーションが読者の目を引きます。また本文の終わりにもGIFアニメーションのラインが設置され、引っ越しのトラックが右から左へと移動する仕組みです。2つのGIFアニメーションのデザインがとても面白く、読者が興味をもってくれるでしょう。
レイアウトはシンプルな１カラムですが、メルマガの横幅をスマートフォンでは100％表示、他のデバイスでは700pxで表示しています。レスポンシブレイアウトとリキッドレイアウトの組み合わせの事例です。
このテンプレートは以下のリンクページからソースをダウンロードできます。
よくあるQ&Aをご紹介します。
A：以下のような条件を満たすデザインがおすすめです。
・デザインの配色を考慮
・ターゲットの性別にデザインを合わせる
・文字情報は少なめ、画像は多め
・CTAボタンの配置に気をつける
詳しくは以下のリンクページをご覧ください。
参考記事：ビジネス向けメルマガデザインとは？チェックすべき3つのポイント
A：バナーの横幅は600px以下がよいでしょう。
600pxを超えると、スマートフォンで表示する際に画面内に収まらず、横スクロールが必要になることがあります。画像は適度に高画質なものを圧縮して、容量を100kbくらいに抑えてください。
詳しくは以下のリンクページをご覧ください。
参考記事：メルマガ・htmlメールに最適なバナーのサイズは？最適解を教えます
A：3つのテキストデザインの仕方があります。
・HTMLで直接コーディングする
・メールテンプレートを利用する
・メール配信サービスを活用する
詳しくは以下のリンクページをご覧ください。
参考記事：メルマガのテキストデザインを良くしたいなら、htmlメールを活用すべき
メルマガ・htmlメールをおしゃれにデザインするためには、テーブルレイアウト、レスポンシブレイアウトなどを用いることが必要です。空白を十分にとり、必要な画像のみを挿入して、全体のボリュームは少なめにすることも重要です。
HTMLメールのデザインは、専門的なコーディングスキルが必要であり、本業の合間にHTMLメールを制作するには、手間がかかり過ぎるのではないでしょうか？専門としている業者に依頼したほうがよいかもしれません。
株式会社ビーエーディーはHTMLメール制作のスペシャリストです。HTMLメールのデザイン・コーディング・配信をすべてお任せください。
HTMLメール制作会社に興味がある方は、以下のリンクページをご覧ください。
