プリヘッダーとは?HTMLメールにプリヘッダーテキストを設定する方法

 この記事では、HTMLメールの「プリヘッダーテキスト」の設定方法について詳しく解説しています。記事の後半では、コピーしてご利用いただけるプリヘッダー設定用のソースコードもご紹介しています。

 「プリヘッダーテキストについて学びたい」、「メールにプリヘッダーテキストを設定したい」と思っている方に、本記事は参考になると思います。ぜひ最後まで読んでみてください。

プリヘッダーテキストとは何か

 プリヘッダーテキストとは、受信トレイのメール一覧で「差出人」「件名」に続いて表示される、メール本文内のテキストのことです。以下プリヘッダーテキストの表示例になります。

デスクトップメールクライアントでの表示例

デスクトップ受信トレイの図説

モバイルメールクライアントでの表示例

モバイル受信トレイの図説

 メールクライアントがプリヘッダーテキストを表示する仕組みは、メール本文の冒頭部分のテキストを自動取得して、それを受信トレイの一覧にプレビューとして表示しています。

本文テキストを自動取得している図

 この仕組みと、HTMLメールのソースコードを工夫することにより、『受信トレイの一覧には表示し、メール本文には表示しない』という非表示設定のプリヘッダーテキストを設定することができます。

受信トレイとメール本文の比較

 主要なメールクライアントの多くがプリヘッダーテキストの表示をサポートしているため、メール開封率に影響する一因として近年注目を集めています。

テキストメールでは利用できない

 テキストメールの場合も、メールクライアントは、メール本文の冒頭部分のテキストを自動取得して、受信トレイの一覧にプレビューとして表示してくれます。

テキストメールの冒頭部分が、受信トレイに表示されている図

 しかしながら、プレーンテキストで作成されたテキストメールは、HTMLやCSSのソースコードを埋め込むことができません。そのため、前章で紹介した『受信トレイの一覧には表示し、メール本文には表示しない』という非表示設定のプリヘッダーテキストを設定することはできません。

テキストメールはHTML/CSSが使えない図

 テキストメールの場合は、メール本文の1行目〜のテキストが受信トレイの一覧に表示されることを意識して、メール冒頭部分のテキストを工夫して書くと良いでしょう。以下、テキストメール冒頭部分の作成例を2つご紹介します。

冒頭部分のテキストを工夫しなかった例

特に意識してプリヘッダーテキストを書いていない場合

冒頭部分のテキストを工夫した例

工夫して書いた例

プリヘッダーテキストの役割

 プリヘッダーテキストは、読者が受信トレイで初めに目にする情報のひとつです。受信トレイに数多く並ぶメールの中で、読者は、「1.差出人名 + 2.件名 + 3.プリヘッダーテキスト」の3つのテキスト情報を見て、開封するか、開封しないかを判断しています。

その他多数のメールに埋もれるメール

 プリヘッダーテキストは、主に件名を補足する役割を担っています。適切なプリヘッダーテキストを設定することができれば、メールを目立たせ、読者の興味や期待を高めることができるでしょう。

 今まで件名だけに頼っていたメール担当者にとって、適切なプリヘッダーテキストの設定は、メール開封率を高めるための有効な施策のひとつになるでしょう。

プリヘッダーテキスト設定時と未設定時の比較

 適切なプリヘッダーテキストを設定した場合と、何も設定しなかった場合の違いを比較してみましょう。違いが分かりやすいようにモバイルメールクライアントを例に見ていきましょう。

○適切なプリヘッダーテキストが設定されている場合

 適切にプリヘッダーテキストの設定を行えば、受信トレイのメール一覧に意図した内容のプリヘッダーテキストを表示することができます。

適切なプリヘッダーテキスト設定時

×適切なプリヘッダーテキストが設定されていない場合

 プリヘッダーテキストを設定する意識がない場合、プリヘッダーに表示されるテキストは、毎回おまかせ状態になってしまいます。予期せぬテキストが表示されることがないように、プリヘッダーはきちんと管理しましょう。

×事例1:「HTMLメールが正しく表示されない場合はこちら…」が表示されている

 ブラウザ表示用のリンクテキストをヘッダー部分に表示している場合、このテキストがプリヘッダーテキストとして表示されてしまいます。

ブラウザ表示用のリンクテキストが表示されている例

×事例2:「メールの配信停止はこちら…」が表示されている

 ヘッダー部分に配信停止リンクがある場合や、画像のみでHTMLメールのコンテンツを作成している場合、フッターにある配信停止リンクのテキストが表示されてしまう場合があります。

配信停止リンクのテキストが表示されている例

×事例3:件名の繰り返しになっている

 プリヘッダーテキストが件名の繰り返しになってしまっている。せっかくの訴求スペースを有効活用できていない例です。

プリヘッダーテキストが件名の繰り返しになっている例

×事例4:ソースコードが表示されている

 プリヘッダーテキストにCSSのソースコードが表示されています。原因としては、CSSの記述方法に問題があり、メールクライアントがソースコードをテキストとして認識してしまっているためだと考えられます。

ソースコードが表示されている例

 未だに受信トレイで上記のようなメールを目にすることが多いことは、非常に残念でもったいないことだと思います。せっかく書いたメールも開封されなければ、苦労が水の泡です。適切なプリヘッダーテキストを設定して、少しでもメールの開封率を高められるように努めましょう。

メールクライアントによる表示の違い

 適切なプリヘッダーテキストを設定するためには、メールクライアントでどのようにプリヘッダーが表示されるのかを把握しておくことは重要です。自分の使っているメールクライアントとは表示が異なる場合がある、ということを頭の片隅に入れておいてください。

 デスクトップ、モバイル、Webメールごとに主要なメールクライアントを例に挙げて、プリヘッダーの表示方法や文字数の違いを見ていきましょう。

※2021年7月時点で調査した結果です。メールクライアントのアップデートなどにより表示が異なる場合があります。

薄い青色のハイライト部分がプリヘッダーテキストです。

プリヘッダーテキストの表示例

デスクトップ

Outlook(ver.2019 )

Outlook

 プリヘッダーテキストは、件名の下に1行表示されます。表示文字数はウィンドウの幅によって変化します。(推定表示文字数:全角25〜50文字前後)

 

Apple Mail(ver.12.4)

Apple Mail

 プリヘッダーテキストは、件名の下に2行表示されます。表示文字数はウィンドウの幅によって変化します。(推定表示文字数:全角50〜140文字前後)

 

Thunderbird(ver.78)

Thunderbird

 プリヘッダーテキストは、表示されません。

 

モバイル

Android Gmail

Android Gmail

 プリヘッダーテキストは、件名の下に1行表示されます。表示文字数はデバイス解像度や画面の縦横表示によって変化します。(推定表示文字数:全角18〜45文字前後)

 

Android Yahoo!メール

Android Yahoo Mail

 プリヘッダーテキストは、表示されません。
※iOS版のYahoo!メールについても、プリヘッダーは表示されません。

 

Android Outlook

Android Outlook

 プリヘッダーテキストは、件名の下に1行表示されます。表示文字数はデバイス解像度や画面の縦横表示によって変化します。(推定表示文字数:全角20〜50文字前後)

 

iOS Apple Mail

iOS Apple Mail

 プリヘッダーテキストは、件名の下に5行表示(デフォルト設定)されます。表示文字数はデバイス解像度や画面の縦横表示によって変化します。(推定表示文字数:全角115〜240文字前後)

 

iOS Gmail

iOS Gmail

 プリヘッダーテキストは、件名の下に1行表示されます。表示文字数はデバイス解像度や画面の縦横表示によって変化します。(推定表示文字数:全角18〜45文字前後)

 

iOS Outlook

iOS Outlook

 プリヘッダーテキストは、件名の下に2行表示されます。表示文字数はデバイス解像度や画面の縦横表示によって変化します。(推定表示文字数:全角45〜90文字前後)

 

Webメール

Gmail

Webメール Gmail

 プリヘッダーテキストは、件名の後に続けて表示されます。表示文字数はウィンドウの幅と件名の長さによって変化します。

 

Yahoo!メール

Webメール Yahoo!メール

 プリヘッダーテキストは、表示されません。

 

Outlook

Webメール Outlook

 プリヘッダーテキストは、件名の下に1行表示されます。表示文字数はウィンドウの幅によって、一定の範囲内で変化します。(推定表示文字数:全角21〜37文字)

 上記で紹介した以外にも、世の中には多数のメールクライアントが存在します。プリヘッダーテキストを全てのメールクライアントに最適化することは難しいので、ターゲットにするメールクライアントをいくつか決めて、プリヘッダーテキストを作成すると良いでしょう。

 

スマートフォンのプリヘッダーテキストが重要視される理由

 まず、画面サイズが大きいデスクトップ用のメールクライアントやWebメールは、受信トレイに一度に(1画面に)表示されるメール件数が多く(15〜25件程度)、画面内がテキスト情報で溢れているため、プリヘッダーテキストが目立ち難い状態だと言えます。

テキスト情報に埋もれる様子の例

 また、Gmail(Webメール)などは、件名の後に続けてプリヘッダーテキストが表示されるため、件名の長さによっては、プリヘッダーテキストがほとんど表示されない場合もあります。

件名に続けてプリヘッダーが表示される例

 一方、スマートフォン用のメールクライアント(メールアプリ)の場合は、一度に(1画面に)表示されるメールの件数が少ない(3〜7件程度)ため、プリヘッダーテキストが読者の目に止まりやすい状態だと言えます。

スマートフォンの受信トレイ5件表示の例

 さらに、件名の下にプリヘッダーテキストの表示エリアがきちんと確保されているメールクライアントが多いため、スマートフォンに表示されるプリヘッダーテキストは、メール開封率を上げるための重要な役割を果たしていると言われています。

プリヘッダーエリア

 プリヘッダーテキストは、スマートフォン用のメールクライアントでの表示を優先して、内容や文字数を設定することをおすすめします。

 また、配信リストのモバイルのメールアドレスの比率を一度確認しておくと良いでしょう。もしモバイルのメールアドレス比率が高いのであれば、プリヘッダーテキストの重要性がより高いと言えるでしょう。

プリヘッダーテキストに設定すべき文字数とは?

 受信トレイに表示されるプリヘッダーテキストの文字数は、メールクライアント、ウィンドウ幅、件名の長さなどによって変化するため、一概に何文字で書けば良いという正解はありません。

 それぞれターゲットとするメールクライアントを決めて、プリヘッダーテキストの文字数を決めておく必要があります。例えば、以下のようにターゲットを決めた場合について考えてみます。

  • スマートフォン用メールクライアントでの表示を優先する
  • スマートフォンデバイスの向き:縦向き表示(ポートレート表示)
  • モバイル版Gmailでの表示(推定表示文字数:全角18文字)
  • モバイル版Apple Mailでの表示(推定表示文字数:全角115文字)

 上記の条件から、設定文字数は「全角115文字以上」、重要なキーワードを「はじめの18文字以内に収める」という文字数のルールを決めることができます。

文字数が少ない場合の仕様
 設定したプリヘッダーテキストの文字数が、各メールクライアントの表示文字数より少ない場合、メール本文の冒頭部分のテキストが自動的に挿入されます。プリヘッダーテキストを短く設定しても、件名のように空白になるわけではないので注意しましょう。

本文テキストが挿入される

 この仕様は、ほとんどのメールクライアントで共通です。

HTMLメールにプリヘッダーテキストを追加する方法

 ここからは、実際にHTMLメールにプリヘッダーテキストのソースコードを追加する方法を解説していきます。

 HTMLメールの作成方法については、以下の記事を参考にしてください。

 

ソースコードの追加場所

 プリヘッダーテキストのソースコードは、bodyタグ直下のメール本文(テキストや画像)より前に追加します。

<html>
 <head>
 </head>
  <body>

   <!-- ○正しいソースコードの追加場所 -->

   <table>
    <tr>
     <td>メール本文テキスト</td>
    </tr>
   </table>
  </body>
</html>

 ソースコードをheadタグ内に追加したり、メール本文よりも後ろに入れてしまうと、正しくプリヘッダーテキストとして表示されないので注意してください。

×headタグ内に挿入した例

<html>
 <head>

  <!-- ×間違ったソースコードの追加場所 -->

 </head>
  <body>
   <table>
    <tr>
     <td>メール本文テキスト</td>
    </tr>
   </table>
  </body>
</html>

×本文テキストより後ろに挿入した例

<html>
 <head>
 </head>
  <body>
   <table>
    <tr>
     <td>メール本文テキスト</td>
    </tr>
   </table>

   <!-- ×間違ったソースコードの追加場所 -->

  </body>
</html>

 

追加ソースコード

 HTMLメールに追加するソースコードを、「手順1:HTMLを追加する」、「手順2:CSSを追加する」の2つの手順に分けて解説していきます。

手順1:HTMLを追加する

 まずは、HTMLのソースコードを追加します。作成したHTMLメールのコーディングに合わせて、divタグ、spanタグ、tableタグなどを使って追加します。以下、3パターンのソースコードと見え方を記載しておきます。

divタグを使ったパターン

<div class="preheader">
ここにプリヘッダーテキストを入力してください。
</div>

spanタグを使ったパターン

<span class="preheader">ここにプリヘッダーテキストを入力してください。</span>

tableタグを使ったパターン

<table>
 <tr>
  <td class="preheader">ここにプリヘッダーテキストを入力してください。</td>
 </tr>
</table>

 

 以下が、ソースコードを追加したHTMLメールのイメージになります。(実際の配信イメージを想定して、全角120文字でテキストを挿入した例になります。)

ソースコードを追加したHTMLメール

 このままでも良いのですが、手順1の段階で、テキストのサイズ、カラー、行揃えなど、最低限のデザイン設定を追加しておくことをおすすめします。

 先ほどのソースコードにデザイン設定を追加してみます。

divタグを使ったパターン

<div class="preheader" align="center">
 <font size="1" color="#666666">ここにプリヘッダーテキストを入力してください。</font>
</div>

spanタグを使ったパターン

<span class="preheader"><font size="1" color="#666666">ここにプリヘッダーテキストを入力してください。</font></span>

tableタグを使ったパターン

<table width="100%" bgcolor="#ededed">
 <tr>
  <td class="preheader" align="center"><font size="1" color="#666666">ここにプリヘッダーテキストを入力してください。</font></td>
 </tr>
</table>

 

 以下が、デザイン設定を追加したHTMLメールのイメージになります。だいぶすっきり見やすくなりました。

デザイン設定を追加したHTMLメール

 非表示にするプリヘッダーテキストに、わざわざデザイン設定を追加した理由は、メールクライアントが非表示設定のCSSをサポートしていなかった場合のリスク回避です。「もし見えてしまった場合…」も想定しておけば安心という訳です。

手順2:CSSを追加する

 手順1で追加したプリヘッダーテキストを非表示にするために、HTMLのソースコードに、インライン形式で以下のCSSプロパティを追加していきます。

 インライン形式のCSSプロパティ追加方法については、以下の記事を参考にしてください。

CSSプロパティ:値 スタイルの内容
display:none !important; 要素の表示形式を非表示、スタイル最優先指定
visibility:hidden; 要素の表示形式を非表示
height:0; 要素の高さを0
width:0; 要要素の幅を0
font-size:0; フォントサイズを0
color:transparent; テキストの不透明度を0
color:rgba(0,0,0,0) テキストの不透明度を0
opacity:0; テキストの不透明度を0
mso-hide:all; Outlookで要素を非表示

 同じ効果のCSSプロパティを重複指定している理由は、メールクライアントによってサポートしているCSSのプロパティと値がまちまちであるためです。出来るだけ多くのメールクライアントに対応するための対策として、CSSを重複指定しておくと安心です。

 以下、インライン形式で追記するCSSのソースコードです。

style="display:none !important; visibility:hidden; height:0; width:0; font-size:0; color:transparent; color:rgba(0,0,0,0); opacity:0; mso-hide:all;"

完成ソースコード

 以下が、手順1、手順2を合わせた完成ソースコードになります。

divタグを使ったパターン

<!-- preheader text -->
<div class="preheader" align="center" style="display:none !important; visibility:hidden; height:0; width:0; font-size:0; color:transparent; color:rgba(0,0,0,0); opacity:0; mso-hide:all;">
<font size="1" color="#666666">ここにプリヘッダーテキストを入力してください。</font>
</div>
<!-- /preheader text -->

spanタグを使ったパターン

<!-- preheader text -->
<span class="preheader" style="display:none !important; visibility:hidden; height:0; width:0; font-size:0; color:transparent; color:rgba(0,0,0,0); opacity:0; mso-hide:all;"><font size="1" color="#666666">ここにプリヘッダーテキストを入力してください。</font></span>
<!-- /preheader text -->

tableタグを使ったパターン

<!-- preheader text -->
<table width="100%" bgcolor="#ededed"><!--  ←背景色が不要な場合は、bgcolorを消してください -->
<tr>
<td class="preheader" align="center" style="display:none !important; visibility:hidden; height:0; width:0; font-size:0; color:transparent; color:rgba(0,0,0,0); opacity:0; mso-hide:all;"><font size="1" color="#666666">ここにプリヘッダーテキストを入力してください。</font></td>
</tr>
</table>
<!-- /preheader text -->

※上記で紹介した3つのソースコードをコピーして、再利用いただいても構いませんが、貴社のHTMLメールに合わせて、デザイン設定の調整が必要な場合があります。メール配信前に必ず表示テストを行ってください。

プリヘッダーテキストにどんな内容を書けばいいの?

 ここからは、プリヘッダーテキストに書くべき、代表的な3つのアイデアと例文テキストをご紹介します。「一体どんな内容を書けばいいの?」と悩んでしまう場合は、以下を参考にしながらプリヘッダーテキストの内容を考えてみてください。

1.メールの要約・件名の補足

 メール本文に何か書かれているのかを要約したテキストや、件名を補足するテキストを書くパターンです。メール開封前におおよその内容を示すことで、読者は安心してメールを開封することができます。単に件名の繰り返しにならないように、件名とプリヘッダーを上手く連携させましょう。

例文テキスト

【件名】
最新リノベーション事例を公開しました!

【プリヘッダーテキスト】
今回の事例は、築50年のヴィンテージマンションのフルリノベーションされた4人暮らしのご家族。ホームパーティーを楽しめる、明るく使い勝手の良いキッチンのデザインは、真似したくなるほど素敵です!

2.特別な提案

 読者に対して、キャンペーンや割引情報など特別な提案を書くパターンです。重要なキーワードは先頭部分に詰め込むようにしましょう。

例文テキスト

【件名】
最大50%OFF!サマーセール開催中!

【プリヘッダーテキスト】
セール価格から【さらに10%OFF】になるキャンペーン実施中(総額5000円以上購入)メール会員限定500円OFFクーポンも同時発行!欲しかったあの商品をGETするチャンス!お見逃しなく!

3.パーソナライズテキスト

 読者の名前など、パーソナライズテキストを入れるパターンです。件名のパーソナライズに続いて、プリヘッダーテキストのパーソナライズも注目され始めています。

例文テキスト

【件名】
夏の新作Tシャツやボトムスが続々登場!

【プリヘッダーテキスト】
山田太郎様におすすめの新作商品をご紹介します!8月が誕生日月の会員様に1000円クーポンを発行しています!現在ご利用可能なお買い物ポイントは【5900PT】

※件名、プリヘッダー、メール本文に、パーソナライズしたテキストを挿入するには、配信リストのデータベースと連携する必要があります。メール配信システムによって使用できない場合があります。詳しくはご利用中のメール配信システムをご確認ください。

【注意】プリヘッダーテキストの更新を忘れない!

 プリヘッダーテキストの注意点として、「更新し忘れ」があります。非表示設定のプリヘッダーテキストは表面上見えないため、テキストを更新するのを忘れやすいという盲点があります。特に過去のメールをコピーして使用する場合は注意が必要です。

プリヘッダーテキストの更新を忘れたイメージ

 更新し忘れの対策としては、「件名」と「プリヘッダー」を必ずセットにしてテキストを作成する癖をつけることです。テストメールを配信した際にも、「件名」と「プリヘッダー」の2箇所を必ずチェックするようにしましょう。

 メール配信のASPサービスの中には、プリヘッダー機能を搭載したものがいくつかあります。ASPサービスの多くは、件名とプリヘッダーを同じ画面で見比べながら設定することができるため非常に効率がよく、プリヘッダーテキストの更新し忘れも防ぐことができます。

ASPサービスの件名、プリヘッダー設定画面

プリヘッダーテキストハック

 最後に、おまけでプリヘッダーテキスト設定のテクニックを1つご紹介します。

空白スペースを入れる

 プリヘッダーテキストに空白スペース(&nbsp;)を複数回、ゼロ幅接合子(&zwnj;)で接合して挿入する裏技的なテクニックです。

ソースコード例

短いプリヘッダーテキスト&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;

 上記のソースコードをプリヘッダーテキストに設定した場合、受信トレイでは以下のような見た目になります。赤の点線部分が挿入した空白スペースになります。

受信トレイでの見え方

 テキスト情報が多く並ぶ受信トレイにおいて、空白スペースは視覚的に非常に目立ちます。また、意図的に短いプリヘッダーテキストを使いたい場合、プリヘッダーテキストに続けて本文テキストが自動的挿入されるのを防ぐ効果もあります。

Memo
キーボードのスペースキーによる空白スペースの挿入や、ノーブレークスペース(&nbsp;)の連続挿入(&nbsp;&nbsp;…)でも機能する場合がありますが、検証した結果、ゼロ幅接合子で空白スペースを接合する方法(&nbsp;&zwnj;…)が、正しく機能するメールクライアントが多く確実な方法でした。

使用上の注意点

・挿入した空白を無視するメールクライアントもあります。また、非表示設定のCSSが効かなかった場合は、大量の空白スペースが挿入されることになります。

・このテクニックについては、メールクライアントのバージョンアップ等により状況が変わる可能性があります。必ずしも万能な方法ではないことを踏まえた上で使用してください。

・メール配信ASPサービスのプリヘッダーテキスト機能には対応していない場合があります。(HTMLに対応していない入力フォームにソースコードを入力してもエラーになったり、テキスト情報として扱われます。)

まとめ

 いかがでしたでしょうか。プリヘッダーテキストの設定自体はそれほど難しいものではありません。難しいのは、どんなテキストをプリヘッダーに設定すべきかを考え、継続的に効果測定を繰り返していくことです。

 苦労して作成したメールは、常に受信トレイで多数のメールと競合しています。適切な件名とプリヘッダーテキストを設定し、少しでも開封率が上がるように努めることは、メールマーケティング担当者にとって重要な課題です。

 今後ますます、プリヘッダーテキストの重要性は高まるでしょう。今までプリヘッダーテキストを設定していなかったメールマーケティング担当者の方は、少しでも早くプリヘッダーテキストの活用に注力してみてください。

 当社が提供するメール配信システムWiLL Mailは、プリヘッダーテキストの作成機能を標準搭載しています。より簡単にプリヘッダーテキストの設定・管理を行うことが可能です。

著者
WiLL Cloudマーケティングチームのロゴ
WiLL Cloud マーケティングチーム ウェブマーケティングに関する情報をお届けするブログです。皆様に役に立つ情報、アップデート、イベントなど、様々なことを発信します。

メルマガ登録 »