HTMLメール作成時に知っておきたい｜デザインの12のポイント

　数えきれない量のHTMLメールが毎日行き交っています。キャンペーンの告知、ニューススレター、製品アップデート、限定セールの案内…内容は違えどいずれも目的は読者に読んでもらうこと。この記事では、読者が読んでくれるHTMLメールのデザインのポイントをいくつかご紹介します。

1.ストーリーを作る

　件名、見出し、コンテンツそれぞれがひとつの説得力のあるストーリーになっているのが理想的です。前後の文脈が途切れることなく、次の内容が前の内容を捕捉するような流れを意識しましょう。こうした一連の流れを作ることで、皆さんが伝えたいメッセージが読者の記憶に残るようになります。

2.HTMLメールの幅は600ピクセル程度で作成する

　作成時においてベースとなるのがメール幅。この幅を広くしすぎると、環境によっては読者が左右にスクロールしてしまう可能性が出てきます。左右のスクロールが発生しない仮定でいろいろと設定する必要があるため、必要以上に広くすることはありません。

3.明確で適切なサイズのCTAボタンを設置しよう

　HTMLメールに含む全ての要素は、読者の行動を引き起こすために存在しなければなりません。その最終アクションを行わせるのがCTAボタンです。よって、わかりやすく見やすいサイズで設置する必要があります。

　ここで注意したいのが、モバイルでのサイズ感。スマートフォンで閲覧した際に最適な大きさかどうかをテストメールなどで確認しましょう。成人の平均的な指の大きさはおよそ9mm。これをピクセル数に直すと48ピクセル程度です。この値を参考にしてみるのも確実です。

4.CTAボタンの配置に気を配る

　メルマガ読者の多くは、メッセージの最上部のみしか閲覧しない可能性があります。自分が興味のある内容かをざっと読んで判断するためです。期間の限られたキャンペーンの告知などを行う場合は、CTAボタンを読者がすぐに行動できる場所、つまり上部に設置してあげるようにしましょう。

　さらに、読み進めてくれた読者にスクロールさせ直す必要がないよう、HTMLメール内に複数のCTAボタンを設置しましょう。2つもしくは3つのCTAボタンが目安と言われています。特にメール文末の締めとして設置するのは、最後まで読んでくれた読者に次のアクションを促すのに効果的です。

5.画像が非表示だった場合のレイアウトも想定しておく

　主要なメールクライアントの大部分は、ユーザーが表示することを許可しない限り、デフォルトでメッセージ内の画像をブロックする仕様になっています。HTMLメールで画像以外の要素はテキストです。そのテキストが魅力的でなければ、画像を表示しようと読者は思わないでしょう。

　画像に伝えたいこと全ての要素を詰め込まないようにしましょう。HTMLメールの見出しと本文の役割は、画像非表示の状態で内容を説明できる役割を持っています。

　そして、画像に対しても非表示時に表示されるALTテキストも設定しておけば完璧です。

6.HTMLメールの送信元を明確に

　読者が、自分自身が登録希望したメルマガであることを思い出してもらえるように身元を明らかにしましょう。見知らぬ人からのメールはなかなか開いてもらえないからです。 また、送信元だけでなく、HTMLメールも自社ブロンドのロゴを上部の目立つ部分に表示しましょう。メール全体の配色がブランドカラーなどと関連づいているとなお良いです。

7.メールの配色は戦略的に

　メールを戦略的に配色することで、ブランドとメッセージを目立たせることができます。色の選択肢は数限りなくありますが、以下のようなルールを設けてメッセージを統一しましょう。

8.HTMLメールをウェブサイトの一部だと考えよう

　多くの皆さんがHTMLメールを送る目的は、自社サイトへ送客することだと思います。そのために、どれだけ早く離脱させられるかも重要な要素です。つまり、キャンペーン用のHTMLメールにおいては、過渡に複雑なレイアウトや長い文章など、メール滞在時間を長引かせるような要素はなるべく排除すべきです。

　明確でシンプルなメッセージのみを優先して作成しましょう。

9.HTMLメールのカラムは最大で3列までが理想

　冒頭に記載したとおり、HTMLメールの幅はできる限り狭めて作成しましょう。そして、600ピクセル程度の幅を考慮すると、カラムの数も必然的に数が限られてきます。一般的には3カラム程度が理想的といわれています。

10. Fパターンのレイアウトを試してみよう

　ウェブユーザビリティ研究の第一人者のひとりであるジェイコブ・ニールセンの調査によると、ウェブのユーザーは、重要ではないと感じたコンテンツをスキップして、アルファベットの”F”字型にコンテンツ全体をスキャンすることがわかっています。

引用元：https://media.nngroup.com/media/reports/free/How_to_Conduct_Eyetracking_Studies.pdf

　この傾向をHTMLメールにも取り込んでみましょう。具体的には、最上部には一番重要な伝えたいメッセージを画像や見出しで記載し、その次の段落に小見出しとして関連するワードを用いて、その次の段落も重要なワードから始めてみます。

　こうして全体を読まない読者に対して、このメールが何を言っているのかをF字にスキャンして認識してもらいます。

11.HTMLメールに盛り込むメッセージの焦点を絞る

　メールはウェブのようでウェブとは少し異なる環境です。ブラウザで開くウェブメールの場合でも、気軽にどこか別のウェブサイトに遷移しづらい、少し孤立した状況といえます。 読者がこの環境に滞在している貴重な時間を多くのことに割くことは難しいため、メッセージを少なくとも3つ程度に絞って、素早く自社サイトに誘導させましょう。

12.背景画像は使わないのが無難

　自社のブランド性を高めるために、背景画像を用いるケースも見受けられます。しかし現状もいくつかのメールクライアントでは背景画像が取り除かれてる可能性があることを考えると、使わないことが無難と言えます。

まとめ

　HTMLメール作成時に気をつけたいデザインのポイントをご紹介しました。レイアウトにおける注意点の前に、HTMLメールはコーディングを行う際に気をつけるべき注意点、通常のウェブとは異なるルールがいくつも存在します。

　当社が提供するWiLL MailのHTMLメールエディタは、プログラムの知識不要で、ノーコードでHTMLメールの作成が可能です。ドラッグ＆ドロップなどの直感的な操作でレスポンシブ（スマホ最適化）のメルマガを作れるため、レイアウト作成に集中できます。無料トライアルで操作をお試しいただけますので、ご興味があればぜひお声がけくださいね。

　最後までお読みいただきありがとうございました。