HTMLメールの作り方2~効果の上がる画面構成~

  • このエントリーをはてなブックマークに追加
【企業担当者が知っておきたいHTMLメールマガジン作成 第3回】

第3回は「効果的なHTMLメールの構成」について解説していきます。
今やさまざまな企業や店舗でHTMLメールが使われるようになり、以前では考えられなかった美しいレイアウトや、目を惹く画像を使ったメルマガを見かけるようになりました。海外ではHTMLメールが特に盛んで、さまざまな実証レポートやメール技術の"お作法"が作られていたりします。

今回は若干テクニカル寄りの話になりますが、より高い効果を目指すために是非知っておきたい、HTMLメールならではのノウハウを紹介していきたいと思います。


第一印象で読みたくなる工夫を

購読者はパッと見であなたのメールを「読むか、読まざるべきか」を判断します。
さまざまなHTMLメール成功例で共通することは、最初の見た目でグッと引き込まれる、ハッキリとしたメッセージがうたわれていること。

何を伝えたいのかを明確にしつつ、HTMLメールの特権を活かした高クオリティの画像を使ったり、大胆なフォントサイズでボディコピーを強調したりして、好印象を持ってもらえるような工夫をしましょう。


■インパクトがあり、伝えたいメッセージが明確

インパクトがあり、伝えたいメッセージが明確


画像・文字のレイアウトやサイズを工夫しよう

画像はできるだけクオリティの高いものを使うようにさまざまなガイドラインで推奨されていますが、横幅は最大でも600px以内に留めるようにしましょう。(これは画像だけでなくあらゆる要素で言えることですが)横スクロールさせないといけないレイアウトはユーザーの関心を著しく削ぐ結果になってしまいます。
また、横幅が600pxの場合、日本語では少なくとも15pt以上の文字を利用するのがおススメ。重要なボディコピーは画面上部に配置し、3行程度にまとめるように心がけましょう。


<画像や文字の扱いについてのTips>

  • ・ロゴを必ず上部に配置する(送信者をきちんと明記する)
  • ・キャッチーな画像とコピーを上部に配置
  • ・ボディコピーは3行以内で
  • ・ユニークなフォント(タイポグラフィ)も効果的
  • ・トピックは3つまでに絞る
  • ・あらゆる要素は基本的に横幅600px以内に抑える
  • ・文字サイズは(横幅600pxの場合)15pt以上
  • ・画像は2~3カラム(列)までを基本にする
  • ・「画像は左に、文字は右に」が基本
  • ・背景画像は主要なメーラーでは閲覧不可なので、使わない
  • ・意外に動画(アニメーションGIF)再生は幅広いメーラーで対応可

そのメールで、何をして欲しいのか?

せっかく素敵な画像やコピーを使っても、ユーザーを目的地に誘導出来なければ勿体ないですよね。WEBサイトのランディングページでも同じことが言えますが、「購入」「申し込み」「WEBサイトへの誘導」などのコールトゥアクションは、できるだけ上部に、ハッキリ見分けがつくように気をつけましょう。


■画面の上部に、目立つようにボタンを配置

画面の上部に、目立つようにボタンを配置

<コールトゥアクションのTips>

  • ・大きくクリックしやすいボタンやリンク
  • ・何をして欲しいメールなのかが分かるように、できるだけ上部にボタンを配置
  • ・ホバーしなくてもクリックできることが分かるように(矢印をつけるなど)

また、メールが長くなってしまう場合は、わざわざスクロールしなくてもいいように、適切な位置でボタンを繰り返し、目的地に導いてあげるようにしましょう。


さまざまな環境で見られることを忘れずに

お客様は必ずしもあなたと同じ環境でメールを見ているとは限りません。
お客様はスマートフォンやタブレットでメールを見ているかもしれませんし、メーラーの設定でHTMLをオフにしている可能性もあります。
さまざまな場面を想定してメールを見てもらえるように、次のような配慮を忘れないようにしましょう(※注)。


<HTMLメールをOFFにしている場合の対応例>

  • ・メール内容と同じWEBページを作成し、「ブラウザで見る」などのリンクを設置する。
  • ・画像にはAltタグを入れて、何の画像か文字で理解できるようにする。
  • ・ボディコピーなどの重要な要素はできるだけ画像の中に入れない。

<さまざまなデバイスやメーラーへの対応例>

  • ・モバイル対応のレイアウトを採用する
  • ・HTMLメールのテンプレートを利用する
  • ・実機で検証するか、検証ツールを使って実際に見てみる

※注:モバイル対応については、次回(第4回)で詳しく解説する予定です。


HTMLメールのテンプレート例

現在、さまざまなメールテンプレートが各社で販売されるようになりました。
これらのテンプレートを使うことで、簡単に効果的なHTMLメールを作れるようになっています。

各社のWEBサイトでは、実際のHTMLメールのサンプルが公開されている場合も多いので、一度覗いてみてはいかがでしょうか。



まとめ

今回は若干テクニカルな部分で効果的なHTMLメールの作り方を紹介しました。
さまざまな検証結果から、HTMLメールの「お手本」が生まれていますが、まずは「誰に、どんなメッセージを送りたいのか」をハッキリさせることが一番大事。作り始める前に、キャンペーンやニュースレターの内容を十分考えて、ぜひ、お客様の心に刺さるメッセージを作ってください!


参考文献・引用元

角谷仁
株式会社TAMの東京事務所でディレクターチームのマネージャーとして勤務。大規模案件のプロマネから小規模案件の運用までさまざまな案件を対応しています。現在はTAMのモバイルファースト戦略を推進すべく、各メディアからの情報発信中。あと最近の趣味は、船でマグロやGTを釣りに行くことです。外房のヒラマサにもはまっています。
  • このエントリーをはてなブックマークに追加

ページの先頭へ