制作ガイドライン - 日経マーケティングポータル...2019/04/17 · -2 Nikkei Inc. No reproduction without permission 1. レスポンシブデザイン対応HTMLメールについて-

Nikkei Inc. No reproduction without permission- 1 -

日経IDターゲティングメール（HTML版）制作ガイドライン

2019年4月

日本経済新聞社デジタル事業メディアビジネスユニット


1. レスポンシブデザイン対応HTMLメールについて- p3

2. HTMLメールの基本ルールについて p4

3. 制作見本-1 p5



6. 入稿時の注意 p8

7. 査閲確認 p9

8. ヘッダとフッタの選定 p10

目次

不具合ポイント編

1. Case1.黒の外枠が表示されない p11

2. Case2.画像が左寄せになる p12, p13

3. Case3.外枠が小さくなる p14

4. Case4.空白スペースが発生 p15

5. Case5.テキストの左右にスペースがなくなる p16

6. Case6.画像間に白いスペースが発生 p17, p18

7. Case7.背景色が機能していない p19, p20

8. Case8.不要なスペースが発生 p21, p22

基本編

お問い合わせ先 p23

§ Appendix

ヘッダとフッタの選定【事業系】 p24 , p25


1.レスポンシブデザイン対応メールについて

レスポンシブデザイン対応に関して

日経IDターゲティングメール（HTML版）では、【＠media】（Media Queries）を使いレスポンシブデザインに対応しています。その為、【＠media】に対応していないメーラーではレスポンシブデザインに対応することが出来ませんので、予めご了承ください。

また、【＠media】に対応していないメーラーの場合、ＰＣ環境でも意図せぬ表示不具合が発生する場合があります。実際にoutlook(office365)にて、ＰＣ環境で閲覧した際にスマホ閲覧時のレイアウトになってしまう現象を確認しております。他のメーラーでも同様の現象が発生する可能性がありますので予めご了承ください。

※【@media】は、メディアタイプならびに横幅・高さ・色などのメディア特性を用いて、スタイルシートの適用範囲を制御することを目的とする、レスポンシブデザインに対応するために必要な構文です。

基本編

日経IDターゲティングメール（HTML版）では、下記環境での表示確認テストを行っています。下記表示確認環境以外のメーラーで表示不具合が発生した場合の保証はいたしかねますのでご了承ください。また、PC環境のWebメールはInternet Explorer/Chrome/Firefoxの最新版での表示確認となります。

【PC環境】・Outlook(2016)・Outlook(office365)・Gmail・Thunderbird※Outlook(office365)に関しては、ＰＣ環境でもスマホ閲覧時のレイアウトになる現象が確認されています。

【スマートフォン環境】・Android Mail・iOS Mail ・Gmailアプリ（Android ＆ iOS）

表示確認メーラーについて


2.HTMLメールの基本ルールについて

HTMLメールの基本構成

HTMLメールを制作する際は、テーブルレイアウトで制作してください。通常、div要素等を用いて文章のまとまりを作る処理を行いますが、テーブルレイアウトでは下記３要素を中心に利用し、まとまりを作ります。

table要素 tr要素 td要素

※div要素を使用して制作することもできますが、メーラーによって崩れや不要なスペースが発生してしまう可能性が高いため、推奨しておりません。

スタイルの記述方法

Media Queriesに関するCSSはhead要素内の指定箇所へご記述いただき、原稿内のテキストなどの装飾関わるCSSはインラインでご記述ください。※ head要素内にstyle要素を書き込むと一部メーラーでは再現する事ができない為です。

なお、外部ファイル（CSSやJavaScript等）を読み込む方法は禁止となります。

インラインでのCSSの記述は、下記の【記入例】のように各要素内にstyle属性を書き込む形式となります。

【記入例】<td align="center" valign="top" style="border-bottom:1px solid #C7C7C7; padding-top: 2px;"></td>

※CSS3の記述は再現されるメーラーが少ないため、推奨しておりません。

テンプレートデータの基本情報

テンプレートは原稿規定に従い、PC表示で横幅640px固定となります。ご制作の際に使用する内部コンテンツや画像は、PC環境でのレイアウトは必ず横幅640px以内に収まるよう設定してください。※横幅640pxを超えてしまった場合、ヘッダとフッタの外へコンテンツがはみ出してしまいます。

レスポンシブデザインに対応する場合、テンプレートに設定されているブレークポイントの変更や追加は禁止となります。※640ピクセル以上でPC閲覧時のレイアウトに切り替わる様、ブレークポイントを設定しています。

基本編


3.制作見本-1

【該当箇所】<tr><td align="center" valign="top" style="background-color:#FFF;">

main area

</td></tr>

本番コンテンツデータの記入箇所について

ご制作いただく際は、必ずテンプレート内に記載している下記の【main area】箇所に記述してください。ヘッダの指定箇所、及びフッタへの原稿内容に関する記述はしないようお願いいたします。※指定箇所以外に記述されますと、テンプレートが崩れてしまいます。

基本編

CSSの記入箇所について

Media Queriesに関するCSSは、<head>内の指定箇所（下記赤枠内）へご記述ください（ ※上記以外の箇所は原稿のテンプレートに関する記述の為、変更しないようお願い致します）。原稿内のテキスト等の装飾に関するCSSは、テンプレート<body>タグ内の【main area】内へ記述する原稿の各内容に対してインラインで記述してください。

/* CLIENT-SPECIFIC STYLES */body, table, td, a{-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;} /* Prevent WebKit and Windows mobile changing default text sizes */

<!– mainarea CSS start-->

<!– mainarea CSS end-->

【記入例】

<td align="center" valign="top" style="border-bottom:1px solid #C7C7C7; padding-top: 2px;"></td>

【head】【main area】


4.制作見本-2

【記入例】<table border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse; ">

<tr><td></td>

</tr></table>

テーブルとセルの隙間をできる限り少なくする

メーラーによっては、テーブルとセルに余分な空白が付与されるという現象が発生いたします。そういった現象をできる限り回避するため、下記「記入例」をご参考のうえ、 table要素に属性を記述ください。

基本編

テーブルレイアウトの調整方法

tr要素とtd要素はmarginが効かないため、必ずpaddingを使用してご調整ください。また、メーラーによってはmargin : 0 auto;が再現できないものが存在するため、paddingを使用して中央揃えになるようご制作ください。

【該当箇所】<td style="padding-left: 30px; padding-right: 30px;">


5.制作見本-3

【記入例】<table border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse; ">

<tr><td></td>

</tr></table>

テーブルとセルの隙間をできる限り少なくする

メーラーによっては、テーブルとセルに余分な空白が付与されるという現象が発生いたします。そういった現象をできる限り回避するため、下記「記入例」をご参考のうえ、 table要素に属性を記述ください。

発生する隙間を消すには

上記のように記述した場合でも、メーラーによっては余分な空白が発生いたします。空白ができた際の対策として、table要素やtr要素に背景色が設定されている場合は、必ずtd要素の背景色をご設定ください。

※背景色が白色（無色）の場合は背景色の設定を行う必要はございません。

【該当箇所】<table width="552" bgcolor="#9e1a32" cellpadding="0" cellspacing="0" style="margin:0px 44px 0px 44px;">

<tr><td colspan="2" width="552" background-color="#9e1a32"><a href=“https://www.nikkei.co.jp/nikkei/f-pace/index.html” target="_blank"><imgsrc="https://ps.nikkei.co.jp/mail/20170317/btn_ftype.jpg" alt="詳細を見る" width="552" height="22" border="0" /></a></td>

</tr>

基本編


6.入稿時の注意

必ず入稿前に複数メーラーでの表示確認をお願いいたします。…ブラウザ確認の際には問題ない場合でも、メーラーではレイ

アウトが大きく崩れている場合が多々ございます。

ご入稿いただいたデータは、下記メーラーにて確認を行った後、問題がなければテスト配信へ進めております。

【受信確認】• Gmail• Outlook(2016)• Outlook(office365)※ＰＣ環境でもスマホ閲覧時のレイアウトになる現象が確認されています。

• Thunderbird• Android Mail• iOS10 Mail • Gmail App（ Android ＆ iOS）

※WebメールはInternet Explorer、Chrome、Firefoxの最新版での表示確認となります。

ご入稿の際にはコンテンツデータと入稿連絡書をあわせてご送付ください。…入稿連絡書は件名やリンク数を確認する際、必須となりま

すので忘れずにご送付ください。

確認する内容

ご入稿いただく前に、必ず下記項目をご確認ください。

基本編


7.査閲確認

① 文章内の日付や曜日に間違いがないか確認いたします。

② 広告内容とリンク先の内容が一致していることを確認した後に、事実関係に齟齬がある場合はご指摘いたします。

③ リンク先がデッドリンクになっていないか確認いたします。

④ 問い合わせ先として電話番号が記載されている場合は、「受付時間 ●：●●－■：■■、○○曜除く」という受付対応時間が記載されているか確認いたします。ない場合はご指摘いたします。

⑤ 「世界一（日本一）」「No.1」その他の最大・最小に関する表現については、リンク先にデータの出典、調査機関が表示されていることを確認いたします。

⑥ 不動産物件のJV（ジョイントベンチャー）以外は、広告主名が明記されていることを確認いたします。

⑦ 純広告の扱いのため、明らかな誤字・脱字、間違った言葉使いはご指摘いたします。

査閲する際に確認する内容

査閲では前述した原稿仕様に加え、下記項目を確認いたします。該当箇所がないか、必ず精査しご入稿ください。

基本編


8.ヘッダとフッタの選定

ヘッダ内にある下記赤字部分は配信日に置き換えてください。

<td><p style="font-size:11px; line-height:140%; color:#666; margin-bottom:5px;">メールが正しく表示されない場合はこちら <a href="https://ps.nikkei.co.jp/mail/YYYYMMDD/" target="_blank" style="color:#666;">https://ps.nikkei.co.jp/mail/YYYYMMDD/</a></p></td>

※2017年4月20日の場合は「20170420」

ヘッダの選択

ヘッダは3種類ございますので、下記の中からお選びください。

• tieup_black.html →

• tieup_blue.html →

• tieup_whit.html →

ヘッダ内の記述変更

基本編


1.Case1.黒の外枠が表示されない

【修正前】<table cellpadding="0" cellspacing="0" border="0" width="640">

【修正後】<table cellpadding="0" cellspacing="0" border="0" width="640" style="background-color: #000;">

事例内容

メーラーで表示した際に、画面中部から下部にかけての黒の外枠が表示されておりません。

対応方法

table要素の背景色が指定されていなかったため、右記のように背景色を指定いたしました。

※一番外側にあるtable要素の背景色を指定したとしても、内側にある要素の背景色も同じになるとは限らないため、必ずそれぞれの背景色を指定するようにしてください。

修正前修正後



2.Case2.画像が左寄せになる-1

【修正前】<table width="100%" border="0" cellspacing="0" cellpadding="0" style="color:#fff; background:#082749; font-size:12px; line-height:1.8;"><td style="vertical-align:top;font-family:'HGGothicM', 'HGSゴシックM', Arial;"><p><img src="img/img1.jpg" style="vertical-align:bottom;float:right;margin: 0 0 20px 20px;"><strong>日経自動車のイノベーション</strong><br>

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<br>

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p></td></table>

事例内容

「日経自動車のイノベーション・・・」部分は本来テキストが左寄せ、画像は右寄せになるはずですが、画像が左寄せになっております。

対応方法

テーブルレイアウトの手法を使わずテキストと画像を並べていたため、テーブルレイアウトへ構成を変更いたしました。

修正前



2.Case2.画像が左寄せになる-2

修正後

【修正後】<table width="100%" border="0" cellspacing="0" cellpadding="0" style="color:#fff; background:#082749; font-size:12px; line-height:1.8;"><tr><td style="vertical-align:top;font-family:'HGGothicM', 'HGSゴシックM', Arial;"><p><strong>日経自動車のイノベーション</strong><br>

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<br>

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p></td><td style="vertical-align:top;"><img src="https://ps.nikkei.co.jp/mail/20160819/img1.jpg" style="margin: 0 0 0 20px;"></td></tr></table>



3.Case3.外枠が小さくなる

【修正前】<td><p style="margin:0; width:130px;"><a href="https://www.nikkei.co.jp/nikkei/jp/ja/index/stay-in-touch/subscribe.html" target="_blank" style="display:block; color:#fff; background:#082749; padding:8px 20px; text-decoration:none; text-align:center;font-size:14px;">登録する</a></p></td>

事例内容

右下の「登録する」箇所について、紺色の外枠が小さくなっております。

対応方法

p要素に高さと横幅の指定をしていましたが、表現されていなかったため、table要素の構成に変更し高さと横幅を指定いたしました。テーブルレイアウトで範囲を指定したい場合は、必ずtable要素、tr要素、td要素のいずれかでご指定ください。

なお、リンクの付いているボタン等は可能な限り画像でご制作いただきますよう、お願いいたします。メーラーごとの仕様に左右されないため、不具合の発生が最小限に抑えられます。

【修正後】<table width="130" height="32" border="0" cellspacing="0" cellpadding="0" style="color:#fff; background:#082749;"><tr><td align="center"><a href="https://www.nikkei.co.jp/nikkei/jp/ja/index/stay-in-touch/subscribe.html" target="_blank" style="display:block; color:#fff; background:#082749; padding:8px 20px; text-decoration:none; text-align:center;font-size:14px;">登録する</a></td></tr></table>

修正前修正後



4.Case4.空白スペースが発生

【修正前】<td align="center"><a href="https://www.nikkei.co.jp/nikkei/jp/ja/index/shopping-tools/services/latest-campaign/20160704.html" target="_blank"><imgsrc="img/img_mv.jpg" style="vertical-align:bottom;width:100%;"></a></td>

事例内容

「今なら、新型車種が・・・」のテキストエリアについて、上部画像との間に空白スペースができております。

対応方法

td要素の背景色が指定されていなかったため、背景色を指定いたしました。

※一番外側にあるtable要素の背景色を指定したとしても、内側にある要素の背景色も同じになるとは限らないため、必ずそれぞれの背景色を指定するようお願いいたします。

【修正後】<td align="center" style="background:#082749;"><a href="https://www.nikkei.co.jp/nikkei/jp/ja/index/shopping-tools/services/latest-campaign/20160704.html" target="_blank"><imgsrc="https://ps.nikkei.co.jp/mail/20160819/img_mv.jpg" style="vertical-align:bottom;width:100%;"></a></td>

修正前修正後

白い帯状の部分が余分な空白です。



5. Case5.テキストの左右にスペースがなくなる

【修正前】<tr><td style="padding: 0 0 20px;"><p style="margin:0; font-size:12px">テキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p></td></tr>

事例内容

テキスト部分の左右にスペースが無い状態で表示されております。

対応方法

td要素内のstyle属性で指定しているpaddingが、外側のtable要素に効いているpaddingを打ち消してしまっていたため、必要なスペースのみpadding-bottomで指定いたしました。

※paddingによる不要なスペースの指定は行わないでください。

【修正後】<tr><td style="padding-bottom:20px;"><p style="margin:0; font-size:12px;font-family:'HGGothicM', 'HGSゴシックM', Arial;">テキストテキストテキストテキストテキストテキストテキストテキストテ

キストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p></td></tr>

修正前修正後



6.Case6.画像間に白いスペースが発生-1

【修正前】<div style="margin:0px auto 0px auto;padding:0px;background-color:#ffffff;vertical-align:bottom;width:600px;"><img src="./img01.jpg" style="width:600px;height:120px;" border="0" alt=""><br/><img src="./img02.jpg" style="width:600px;height:300px;" border="0" alt=""><br/>

︙<img src="./img11.jpg" style="width:600px;height:209px;" border="0" alt=""><br/></div>

事例内容

テーブルレイアウトを使わずに画像を配置しているため、画像間に隙間が発生しております。

対応方法

広い範囲をdiv要素で指定していたため、テーブルレイアウトの構成に変更して範囲を小分けにし、背景に黒色が必要な部分のみ背景色を指定することで画像間の隙間を修正いたしました。

※本件のように、テーブルレイアウトを使用していない状態で不具合が発生した場合、大元の構成自体を変えなければならなくなります。背景色を使うことが予想される箇所は、調整がおこなえるよう事前にテーブルレイアウトを使用してご制作ください。

修正前

白い帯状の部分が余分な空白です。



【修正後】<table style="width: 600px; margin: 0; padding: 0; border-collapse: collapse;"><tbody style="width: 600px; margin: 0; padding: 0; border-collapse: collapse; border-spacing: 0;"><tr><td style="background-color: #000; padding: 0;"><imgsrc="https://ps.nikkei.co.jp/mail/20160901/img01.jpg" style="width:600px;height:120px;" border="0" alt=""></td></tr><tr><td style="padding: 0;"><imgsrc="https://ps.nikkei.co.jp/mail/20160901/img02.jpg" style="width:600px;height:300px;" border="0" alt=""></td></tr></tbody></table><div style="margin:0px auto 0px auto;padding:0px;background-color:#ffffff;vertical-align:bottom;width:600px;"><img src="https://ps.nikkei.co.jp/mail/20160901/img03.jpg" style="width:600px;height:142px;" border="0" alt=""><br/>

︙<img src="https://ps.nikkei.co.jp/mail/20160901/img11.jpg" style="width:600px;height:209px;" border="0" alt=""><br/></div>

6.Case6.画像間に白いスペースが発生-2

修正後



7.Case7.背景色が機能していない-1

【修正前】<div style="text-align:center;background-color:#000;padding:10px; 0 0 0"><table border="0" cellpadding="0" cellspacing="0" width="300" style="text-align:center;margin:0 auto;"><tr><td><a href="https://www.nikkei.co.jp/" target="_blank"><imgsrc="dlogo1.gif" alt="" /></a></td><td><a href="https://www.nikkei.co.jp/" target="_blank"><imgsrc="dlogo2.gif" alt="" /></a></td></tr></table><p style="color:#fff;font-size:75%;">テキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p></div>

事例内容

ロゴ画像を配置している箇所の背景色が機能しておらず、その影響でテキスト部分も消えております。

対応方法

div要素を使用して背景色を指定していたため、テーブルレイアウトの構成へ変更し、td要素で背景色を指定いたしました。

※HTMLメールでは、div要素のstyle属性が効かない場合があるため推奨しておりません。

修正前



【修正後】<tr><td style="text-align:center;background-color:#000;padding:10px 0;"><table border="0" cellpadding="0" cellspacing="0" width="300" style="text-align:center;margin:0 auto;"><tr><td><a href="https://www.nikkei.co.jp/" target="_blank"><imgsrc="https://ps.nikkei.co.jp/mail/20161209/dlogo1.gif" alt="" style="border: 0px;display:block;" /></a></td><td><a href="https://www.nikkei.co.jp/" target="_blank"><img src="https://ps.nikkei.co.jp/mail/20161209/dlogo2.gif" alt="" style="border: 0px;display:block;" /></a></td></tr></table><p style="color:#fff;font-size:75%;">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p></td></tr>

7.Case7.背景色が機能していない-2

修正後



8.Case8.不要なスペースが発生-1

事例内容

赤いバナーのリンク箇所間に不要なスペースができております。

対応方法

こちらの修正は下記工程の順で行いました。

1. 画像間の隙間を調整する目的で設置されたspacer.gifが、余分な空白を発生させる原因となっていたため、記述を削除いたしました。2. Table要素の背景色をバナーと同じ赤色に設定いたしました。3. 本来白色であるべきスペースが赤色に変化してしまいました。4. 新たにtable要素を追加し、赤色になってしまった部分を白色へ戻しました。

【修正前】<table width="552" bgcolor="#ffffff" cellpadding="0" cellspacing="0" style="margin:0px 44px 0px 44px;"><tr><td colspan="2" width="552"><a href="https://www.nikkei.co.jp/nikkei/f-pace/index.html" target="_blank"><img src="btn_ftype.jpg" alt="詳細を見る" width="552" height="22" border="0" /></a></td></tr><tr><td colspan="2" width="552"><img src="spacer.gif" alt="" width="552" height="2" border="0" /></td></tr>

︙<tr><td colspan="2" width="552"><img src="spacer.gif" alt="" width="552" height="10" border="0" /></td></tr></table>

修正前



8.Case8.不要なスペースが発生-2

【修正後】<table width="552" bgcolor="#9e1a32" cellpadding="0" cellspacing="0" style="margin:0px 44px 0px 44px;"><tr><td colspan="2" width="552" background-color="#9e1a32"><a href="https://www.nikkei.co.jp/nikkei/f-pace/index.html" target="_blank"><imgsrc="https://ps.nikkei.co.jp/mail/20170317/btn_ftype.jpg" alt="詳細を見る" width="552" height="22" border="0" /></a></td></tr>

︙</table><table><tr><td colspan="2" width="552" background-color="#fff"><imgsrc="https://ps.nikkei.co.jp/mail/20170317/spacer.gif" alt="" width="552" height="10" border="0" /></td></tr></table>

削除

修正後



お問い合わせ先その他

メールでのお問い合わせ先について

E-mail: [email protected]

お電話でのお問い合わせについて

TEL：03-6866-5568（平日10時～18時、株式会社コミュニケーション・コンパス）

※コミュニケーション・コンパスは日本経済新聞社デジタル事業メディアビジネスユニットから業務委託を受けております。

技術的な問題が発生し、本書の対応策を実施しても不具合が解決されなかった場合は下記へご連絡ください。


ヘッダとフッタの選定【事業系】

§ Appendix


§ Appendix: ヘッダとフッタの選定

ヘッダとフッタのご制作について

事業系案件のヘッダとフッタはテンプレートをご参考のうえ、オリジナルでご制作いただいております。※横幅は必ず640pxでご制作ください。

制作例

基本編

Documents

制作ガイドライン - 日経マーケティングポータル...2019/04/17 · -2 Nikkei Inc. No reproduction without permission 1. レスポンシブデザイン対応HTMLメールについて-