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

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

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

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

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

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

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

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

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

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

なぜプリヘッダーテキストが重要なのか

　前述した通り、プリヘッダーテキストは、メールの開封率に影響を及ぼす要因のひとつとして、近年注目を集めています。ただし、勘違いしないでください。プリヘッダーテキストは、メールの開封率だけを左右する要因ではありません。メール開封後のコンバージョン率にまで影響します。

　件名とプリヘッダーテキストを上手く活用することによって、メールを開封する前に、読者の期待値を高めることができます。期待値が高ければ、メールを開封してコンバージョンにまで至る可能性も高くなります。

　プリヘッダーテキストの具体的例については後述しますが、プリヘッダーテキストは、メール開封後のコンバージョンまでを意識して書くようにしましょう。開封率だけを追って書くべきではないことを知っておいてください。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

デスクトップ

Outlook（Microsoft365 Outlook 2021）

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

Apple Mail（ver.12.4）

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

Thunderbird（ver.102.1.1）

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

モバイル

Android Gmail（ver.2022.08.21）

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

Android Yahoo!メール（ver.5.0.4）

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

Android Outlook（ver.4.2）

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

iOS Apple Mail（ver.15.6.1）

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

iOS Gmail（ver.6.0）

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

iOS Outlook（ver.4.2）

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

Webメール

Gmail

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

Yahoo!メール

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

Outlook

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

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

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

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

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

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

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

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

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

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

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

　上記の条件から、設定文字数は「全角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文字でテキストを挿入した例になります。）

　このままでも良いのですが、手順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メールのイメージになります。だいぶすっきり見やすくなりました。

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

手順2：CSSを追加する

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

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

　同じ効果の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メールに合わせて、デザイン設定の調整が必要な場合があります。メール配信前に必ず表示テストを行ってください。

ノーコードでプリヘッダーテキストを追加する方法

　メール配信システムの中には、プリヘッダー機能を搭載したものがいくつかあります。前述したようなHTMLやCSSのコード作成が不要で、入力欄にテキストを入力するだけで、プリヘッダーテキストを設定することができます。

　また、件名とプリヘッダーテキストを同じ画面内で見比べながら設定することができるため、効率よく作業を進めることができます。プリヘッダーテキストを更新し忘れるといったミスも少なくなるでしょう。

　メールキャンペーンごとにプリヘッダーテキストを設定する作業は、忙しい担当者にとって意外と大きな負担となります。メール配信システムを利用すれば、無駄な手間を掛けずに、プリヘッダーテキストを簡単に設定することができます。

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

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

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

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

2.特別な提案

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

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

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

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

4.緊急性を持たせる

　件名作成の際にも有効な方法ですが、プリヘッダーテキストに緊急性を持たせるパターンです。「今すぐにメールの内容を確認したい」と思わせるような、限定感を盛り込んで、メールを早く開くことによって得られるメリットを強調します。

5.CTAを含める

　プリヘッダーテキストにCTAの内容を入れて行動を呼びかけるパターンです。このメールで何が得られるのかを明確にしましょう。CTAの内容は簡潔に短く、得られるメリットも含めて、簡単に行動できそうな書き方にすると良いでしょう。

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

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

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

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

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

空白スペースを入れる

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

ソースコード例

短いプリヘッダーテキスト ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ 

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

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

使用上の注意点

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

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

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

まとめ

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

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

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

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