メルマガのデザインのコツは？知識ゼロでもオシャレなデザインを作る方法

オシャレなメルマガを作るのに欠かせないHTMLメール。優秀なデザインはメルマガの開封率にも大きく関係します。今回は知識ゼロでも簡単にオシャレなメルマガ作るためのポイントとともに、優秀なデザインのHTMLメールに共通する特徴を紹介していきます。

デザイン性の高いメルマガにはHTMLが必須

メルマガにはテキストメールとHTMLメールがあります。テキストメールは文字や簡単な絵文字などしか使えないのに対して、HTMLメールなら画像の表示から細かな配置、全体の配色、ボタンの種類など様々なデザインをすることができます。

テキストメールでも画像を送ることは可能ですが、メール本文に埋め込むのではなく別ファイルとして添付する形になってしまいます。視覚的な優位性がとても低く、基本的に書かれた文字を読まなければ内容が伝わりません。

なので、まだ自社に興味を持ってくれるか分からない新規開拓予定のユーザーに対しては
画像で一瞬で説明ができるHTMLメールがとても有用です。

HTMLメールのメリット

高度なデザインができる

HTMLメールはHTMLとCSSを使って高度なデザイン（コーディング）をすることができます。しかし、HTMLやCSSと聞くとある程度の専門的な知識が必要だと思う方もいるでしょう。

ところが現在は知識がない人でもHTMLメールを作成できる便利なメール配信システムが充実しています。メール配信システムを使えば初心者でも直感的な操作でHTMLメールが作成できるだけでなく、サイトによって数百種類のデザインのテンプレートも用意されています。

メルマガを始めるなら自分に合ったメール配信を探すところから始めるのもいいでしょう。

文字だけでは伝えづらい情報を伝えられる

視覚的な優位が高いHTMLメールを使う一番の理由は、文字では伝えにくい情報を簡単に伝えられることです。一般的に画像は文字に比べて7倍、動画は5000倍の情報伝達能力を持つと言われています。

この伝達能力の差はメルマガにおいてとても大きなもので、文字では一つの商品の説明に数行を費やすところを画像ならば一瞬で複数の商品をユーザーに提示・説明することができます。
これから新規で開拓するユーザーはメルマガを開封したとしても、まだ文章をしっかりと読んでくれる可能性は極めて低いです。しかし、その文章が画像に置き換わるだけで一瞬で情報を伝えて興味のある人を引き込むことができるようになります。

開封率を調べることができる

メルマガ配信の成果を測定する重要な指標の一つに「開封率」があります。これはユーザーに送ったメルマガの内、全体の何％が開封されているのかというデータです。この開封率のデータから次にメルマガのどこを改善していけばいいのかを分析していくことになります。

そして開封率を集計するためにはHTMLメールが使われます。メルマガ内に配置した画像に画像参照用のimageタグを記述することでメルマガ（画像）を開いた回数を記録して集計することが可能です。
またメール配信システムを利用していれば、もっと簡単に集計する方法もあるので配信システムを決める際のポイントの一つにしましょう。

メルマガのデザインで意識するポイント

テキスト量

メルマガのテキスト量はできるだけ少なくしましょう。前述したようにテキストは情報伝達能力が低いためほとんど読まれることはありません。

メルマガ全体をデザインや画像で構成しながら、どうしても文字ではないといけない場合にはチラシのように画像の中に「今だけ○○円！」「期間限定」など一番伝えたい単語を入れるようにしましょう。
メルマガはあくまでも自社サイトへの誘導をするためのものなので、詳細な商品の説明は誘導先のサイトすれば問題ありません。

CTAボタン配置

CTAボタン(call to action)ボタンの配置にも気を遣いましょう。CTAボタンとは「消費者へ向けた行動喚起」という意味で、メルマガにおける会員登録や資料請求のURLを刺します。

HTMLメールではただURLを記載することもできますが「資料請求はこちら」など一部の文字色を変えたり、画像にボタンの属性を持たせてクリックすることでURLに飛ぶこともできます。

そしてそのボタンの種類によって、ヘッダー・フッターなどどこに設置するのがいいか考えましょう。
また複数個所にボタンを配置することも可能ですが、多すぎると怪しさやしつこさを感じさせてしまうこともあるので気を付けましょう。

ターゲットの設定

HTMLは様々なデザインをすることができますが、ただ目立てばいいわけではありません。あくまでも高度なデザインを施すのはよりターゲットの興味を引くためです。
もしも自社のターゲットが高齢者だったり、提供するサービスが葬儀などの場合はあまり派手にするとかえって信頼を落としかねません。

そのためにも自分たちが狙うべきターゲットが誰なのかを見極め、どういったアプローチが必要なのか分析していきましょう。
まずはメルマガのイメージカラーを決めてヘッダーにその色を置いてから全体の雰囲気のバランスを取っていくのがおススメです。

デザインが崩れないようにする

HTMLメールで気を付けたいのが実際に表示したときにデザインが崩れてしまうことです。これはスマホが横幅600pxなのに対して、PCが横幅850pxという端末の表示限界の違いよって起きてしまいます。
これを避けるための手法を「レスポンシブルデザイン」と呼び、以下のような3つの種類があります。

レスポンシブルレイアウト

一つ目はレスポンシブルレイアウトです。これはスマホやPCなどユーザーが使っている画面の幅に応じてコンテンツの配置や表示・非表示を指定するCSSの内容が切り替わります。スマホとPCで表示が変わっても内容が伝わるような工夫が必要です。

リキッドレイアウト

二つ目はリキッドレイアウトです。こちらは画像やデザインのパーツ全体の大きさや配置をパーセンテージで指定するレイアウト方法になります。
それぞれのパーツがパーセンテージによって管理されているので端末の横幅によってデザインが崩れることがありません。しかし、大小で極端な大きさのパーツは見えなくなってしまったり、解像度が下がってしまうので注意しましょう。

フレキシブルレイアウト

三つ目のフレキシブルレイアウトも各パーツの配置と大きさをパーセンテージで指定するレイアウト方法です。
リキッドレイアウトとの違いはフレキシブルレイアウトではデザインの最大値と最小値を指定できることです。これによって『パーツが小さくなりすぎて見えにくい』、『画像が拡大されすぎて解像度が落ちる』といったことがなくなります。

最近はスマホの幅に合わせるのが主流になっており、PCやタブレットでは余白が増えてしまうのが難点です。