【目次】
この記事では、HTMLメールの「プリヘッダーテキスト」の設定方法について詳しく解説しています。記事の後半では、コピーしてご利用いただけるプリヘッダー設定用のソースコードもご紹介しています。
「プリヘッダーテキストについて学びたい」、「メールにプリヘッダーテキストを設定したい」と思っている方に、本記事は参考になると思います。ぜひ最後まで読んでみてください。
プリヘッダーテキストもノーコードでかんたん設定! |
プリヘッダーテキストとは、受信トレイのメール一覧で「差出人」「件名」に続いて表示される、メール本文内のテキストのことです。以下プリヘッダーテキストの表示例になります。
デスクトップメールクライアントでの表示例
モバイルメールクライアントでの表示例
メールクライアントがプリヘッダーテキストを表示する仕組みは、メール本文の冒頭部分のテキストを自動取得して、それを受信トレイの一覧にプレビューとして表示しています。
この仕組みと、HTMLメールのソースコードを工夫することにより、『受信トレイの一覧には表示し、メール本文には表示しない』という非表示設定のプリヘッダーテキストを設定することができます。
主要なメールクライアントの多くがプリヘッダーテキストの表示をサポートしているため、メール開封率に影響する一因として近年注目を集めています。
前述した通り、プリヘッダーテキストは、メールの開封率に影響を及ぼす要因のひとつとして、近年注目を集めています。ただし、勘違いしないでください。プリヘッダーテキストは、メールの開封率だけを左右する要因ではありません。メール開封後のコンバージョン率にまで影響します。
件名とプリヘッダーテキストを上手く活用することによって、メールを開封する前に、読者の期待値を高めることができます。期待値が高ければ、メールを開封してコンバージョンにまで至る可能性も高くなります。
プリヘッダーテキストの具体的例については後述しますが、プリヘッダーテキストは、メール開封後のコンバージョンまでを意識して書くようにしましょう。開封率だけを追って書くべきではないことを知っておいてください。
テキストメールの場合も、メールクライアントは、メール本文の冒頭部分のテキストを自動取得して、受信トレイの一覧にプレビューとして表示してくれます。
しかしながら、プレーンテキストで作成されたテキストメールは、HTMLやCSSのソースコードを埋め込むことができません。そのため、前章で紹介した『受信トレイの一覧には表示し、メール本文には表示しない』という非表示設定のプリヘッダーテキストを設定することはできません。
テキストメールの場合は、メール本文の1行目〜のテキストが受信トレイの一覧に表示されることを意識して、メール冒頭部分のテキストを工夫して書くと良いでしょう。以下、テキストメール冒頭部分の作成例を2つご紹介します。
冒頭部分のテキストを工夫しなかった例
冒頭部分のテキストを工夫した例
プリヘッダーテキストは、読者が受信トレイで初めに目にする情報のひとつです。受信トレイに数多く並ぶメールの中で、読者は、「1.差出人名 + 2.件名 + 3.プリヘッダーテキスト」の3つのテキスト情報を見て、開封するか、開封しないかを判断しています。
プリヘッダーテキストは、主に件名を補足する役割を担っています。適切なプリヘッダーテキストを設定することができれば、メールを目立たせ、読者の興味や期待を高めることができるでしょう。
今まで件名だけに頼っていたメール担当者にとって、適切なプリヘッダーテキストの設定は、メール開封率を高めるための有効な施策のひとつになるでしょう。
適切なプリヘッダーテキストを設定した場合と、何も設定しなかった場合の違いを比較してみましょう。違いが分かりやすいようにモバイルメールクライアントを例に見ていきましょう。
適切にプリヘッダーテキストの設定を行えば、受信トレイのメール一覧に意図した内容のプリヘッダーテキストを表示することができます。
プリヘッダーテキストを設定する意識がない場合、プリヘッダーに表示されるテキストは、毎回おまかせ状態になってしまいます。予期せぬテキストが表示されることがないように、プリヘッダーはきちんと管理しましょう。
×事例1:「HTMLメールが正しく表示されない場合はこちら…」が表示されている
ブラウザ表示用のリンクテキストをヘッダー部分に表示している場合、このテキストがプリヘッダーテキストとして表示されてしまいます。
×事例2:「メールの配信停止はこちら…」が表示されている
ヘッダー部分に配信停止リンクがある場合や、画像のみでHTMLメールのコンテンツを作成している場合、フッターにある配信停止リンクのテキストが表示されてしまう場合があります。
×事例3:件名の繰り返しになっている
プリヘッダーテキストが件名の繰り返しになってしまっている。せっかくの訴求スペースを有効活用できていない例です。
×事例4:ソースコードが表示されている
プリヘッダーテキストに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文字前後)
Gmail
プリヘッダーテキストは、件名の後に続けて表示されます。表示文字数はウィンドウの幅と件名の長さによって変化します。
Yahoo!メール
プリヘッダーテキストは、表示されません。
Outlook
プリヘッダーテキストは、件名の下に1行表示されます。表示文字数はウィンドウの幅によって、一定の範囲内で変化します。(推定表示文字数:全角21〜37文字)
上記で紹介した以外にも、世の中には多数のメールクライアントが存在します。プリヘッダーテキストを全てのメールクライアントに最適化することは難しいので、ターゲットにするメールクライアントをいくつか決めて、プリヘッダーテキストを作成すると良いでしょう。 |
まず、画面サイズが大きいデスクトップ用のメールクライアントやWebメールは、受信トレイに一度に(1画面に)表示されるメール件数が多く(15〜25件程度)、画面内がテキスト情報で溢れているため、プリヘッダーテキストが目立ち難い状態だと言えます。
また、Gmail(Webメール)などは、件名の後に続けてプリヘッダーテキストが表示されるため、件名の長さによっては、プリヘッダーテキストがほとんど表示されない場合もあります。
一方、スマートフォン用のメールクライアント(メールアプリ)の場合は、一度に(1画面に)表示されるメールの件数が少ない(3〜7件程度)ため、プリヘッダーテキストが読者の目に止まりやすい状態だと言えます。
さらに、件名の下にプリヘッダーテキストの表示エリアがきちんと確保されているメールクライアントが多いため、スマートフォンに表示されるプリヘッダーテキストは、メール開封率を上げるための重要な役割を果たしていると言われています。
プリヘッダーテキストは、スマートフォン用のメールクライアントでの表示を優先して、内容や文字数を設定することをおすすめします。
また、配信リストのモバイルのメールアドレスの比率を一度確認しておくと良いでしょう。もしモバイルのメールアドレス比率が高いのであれば、プリヘッダーテキストの重要性がより高いと言えるでしょう。
受信トレイに表示されるプリヘッダーテキストの文字数は、メールクライアント、ウィンドウ幅、件名の長さなどによって変化するため、一概に何文字で書けば良いという正解はありません。
それぞれターゲットとするメールクライアントを決めて、プリヘッダーテキストの文字数を決めておく必要があります。例えば、以下のようにターゲットを決めた場合について考えてみます。
上記の条件から、設定文字数は「全角115文字以上」、重要なキーワードを「はじめの18文字以内に収める」という文字数のルールを決めることができます。
文字数が少ない場合の仕様 この仕様は、ほとんどのメールクライアントで共通です。 |
プリヘッダーテキストもノーコードでかんたん設定! |
ここからは、実際に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つの手順に分けて解説していきます。
まずは、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をサポートしていなかった場合のリスク回避です。「もし見えてしまった場合…」も想定しておけば安心という訳です。
手順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メールに合わせて、デザイン設定の調整が必要な場合があります。メール配信前に必ず表示テストを行ってください。
メール配信システムの中には、プリヘッダー機能を搭載したものがいくつかあります。前述したようなHTMLやCSSのコード作成が不要で、入力欄にテキストを入力するだけで、プリヘッダーテキストを設定することができます。
また、件名とプリヘッダーテキストを同じ画面内で見比べながら設定することができるため、効率よく作業を進めることができます。プリヘッダーテキストを更新し忘れるといったミスも少なくなるでしょう。
メールキャンペーンごとにプリヘッダーテキストを設定する作業は、忙しい担当者にとって意外と大きな負担となります。メール配信システムを利用すれば、無駄な手間を掛けずに、プリヘッダーテキストを簡単に設定することができます。
メール配信システムWiLL Mailは、 |
ここからは、プリヘッダーテキストに書くべき、代表的な3つのアイデアと例文テキストをご紹介します。「一体どんな内容を書けばいいの?」と悩んでしまう場合は、以下を参考にしながらプリヘッダーテキストの内容を考えてみてください。
メール本文に何か書かれているのかを要約したテキストや、件名を補足するテキストを書くパターンです。メール開封前におおよその内容を示すことで、読者は安心してメールを開封することができます。単に件名の繰り返しにならないように、件名とプリヘッダーを上手く連携させましょう。
例文テキスト 【件名】 【プリヘッダーテキスト】 |
読者に対して、キャンペーンや割引情報など特別な提案を書くパターンです。重要なキーワードは先頭部分に詰め込むようにしましょう。
例文テキスト 【件名】 【プリヘッダーテキスト】 |
読者の名前など、パーソナライズテキストを入れるパターンです。件名のパーソナライズに続いて、プリヘッダーテキストのパーソナライズも注目され始めています。
例文テキスト 【件名】 【プリヘッダーテキスト】 |
※件名、プリヘッダー、メール本文に、パーソナライズしたテキストを挿入するには、配信リストのデータベースと連携する必要があります。メール配信システムによって使用できない場合があります。詳しくはご利用中のメール配信システムをご確認ください。
件名作成の際にも有効な方法ですが、プリヘッダーテキストに緊急性を持たせるパターンです。「今すぐにメールの内容を確認したい」と思わせるような、限定感を盛り込んで、メールを早く開くことによって得られるメリットを強調します。
例文テキスト 【件名】 【プリヘッダーテキスト】 |
プリヘッダーテキストにCTAの内容を入れて行動を呼びかけるパターンです。このメールで何が得られるのかを明確にしましょう。CTAの内容は簡潔に短く、得られるメリットも含めて、簡単に行動できそうな書き方にすると良いでしょう。
例文テキスト 【件名】 【プリヘッダーテキスト】 |
プリヘッダーテキストの注意点として、「更新し忘れ」があります。非表示設定のプリヘッダーテキストは表面上見えないため、テキストを更新するのを忘れやすいという盲点があります。特に過去のメールをコピーして使用する場合は注意が必要です。
更新し忘れの対策としては、「件名」と「プリヘッダー」を必ずセットにしてテキストを作成する癖をつけることです。テストメールを配信した際にも、「件名」と「プリヘッダー」の2箇所を必ずチェックするようにしましょう。
最後に、おまけでプリヘッダーテキスト設定のテクニックを1つご紹介します。
プリヘッダーテキストに空白スペース(&nbsp;)を複数回、ゼロ幅接合子(&zwnj;)で接合して挿入する裏技的なテクニックです。
ソースコード例
短いプリヘッダーテキスト ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌
上記のソースコードをプリヘッダーテキストに設定した場合、受信トレイでは以下のような見た目になります。赤の点線部分が挿入した空白スペースになります。
テキスト情報が多く並ぶ受信トレイにおいて、空白スペースは視覚的に非常に目立ちます。また、意図的に短いプリヘッダーテキストを使いたい場合、プリヘッダーテキストに続けて本文テキストが自動的挿入されるのを防ぐ効果もあります。
Memo |
・挿入した空白を無視するメールクライアントもあります。また、非表示設定のCSSが効かなかった場合は、大量の空白スペースが挿入されることになります。
・このテクニックについては、メールクライアントのバージョンアップ等により状況が変わる可能性があります。必ずしも万能な方法ではないことを踏まえた上で使用してください。
・メール配信ASPサービスのプリヘッダーテキスト機能には対応していない場合があります。(HTMLに対応していない入力フォームにソースコードを入力してもエラーになったり、テキスト情報として扱われます。)
いかがでしたでしょうか。プリヘッダーテキストの設定自体はそれほど難しいものではありません。難しいのは、どんなテキストをプリヘッダーに設定すべきかを考え、継続的に効果測定を繰り返していくことです。
苦労して作成したメールは、常に受信トレイで多数のメールと競合しています。適切な件名とプリヘッダーテキストを設定し、少しでも開封率が上がるように努めることは、メールマーケティング担当者にとって重要な課題です。
今後ますます、プリヘッダーテキストの重要性は高まるでしょう。今までプリヘッダーテキストを設定していなかったメールマーケティング担当者の方は、少しでも早くプリヘッダーテキストの活用に注力してみてください。
当社が提供するメール配信システムWiLL Mailは、プリヘッダーテキストの作成機能を標準搭載しています。より簡単にプリヘッダーテキストの設定・管理を行うことが可能です。
プリヘッダーテキストもノーコードでかんたん設定! |