ターゲティングメール制作マニュアル

Size: px

Start display at page:

Download "ターゲティングメール制作マニュアル"

ああすやなぎしま
5 years ago
Views:

1 日経 ID ターゲティングメール (HTML 版 ) 制作ガイドライン 2019 年 4 月日本経済新聞社デジタル事業メディアビジネスユニット - 1 -

2 目次基本編 1. レスポンシブデザイン対応 HTMLメールについて- p3 2. HTMLメールの基本ルールについて p4 3. 制作見本 -1 p5 4. 制作見本 -2 p6 5. 制作見本 -3 p7 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-2 -

3 1. レスポンシブデザイン対応メールについて基本編レスポンシブデザイン対応に関して日経 ID ターゲティングメール (HTML 版 ) (Media Queries) を使いレスポンシブデザインに対応していますに対応していないメーラーではレスポンシブデザインに対応することが出来ませんので予めご了承くださいに対応していないメーラーの場合 PC 環境でも意図せぬ表示不具合が発生する場合があります実際に outlook(office365) にて PC 環境で閲覧した際にスマホ閲覧時のレイアウトになってしまう現象を確認しておりますはメディアタイプならびに横幅高さ色などのメディア特性を用いてスタイルシートの適用範囲を制御することを目的とするレスポンシブデザインに対応するために必要な構文です表示確認メーラーについて日経 ID ターゲティングメール (HTML 版 ) では下記環境での表示確認テストを行っています下記表示確認環境以外のメーラーで表示不具合が発生した場合の保証はいたしかねますのでご了承くださいまた PC 環境の Web メールは Internet Explorer/Chrome/Firefox の最新版での表示確認となります PC 環境スマートフォン環境 Outlook(2016) Android Mail Outlook(office365) ios Mail Gmail Gmailアプリ(Android & ios) Thunderbird Outlook(office365) に関しては PC 環境でもスマホ閲覧時のレイアウトになる現象が確認されています - 3 -

4 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閲覧時のレイアウトに切り替わる様ブレークポイントを設定しています -4-

5 基本編 3.制作見本-1 本番コンテンツデータの記入箇所についてご制作いただく際は必ずテンプレート内に記載している下記の main area 箇所に記述してくださいヘッダの指定箇所及びフッタへの原稿内容に関する記述はしないようお願いいたします指定箇所以外に記述されますとテンプレートが崩れてしまいます該当箇所 <td align="center" valign="top" style="background-color:#fff;"> main area </td> CSSの記入箇所について Media Queriesに関するCSSは <head>内の指定箇所下記赤枠内へご記述ください上記以外の箇所は原稿のテンプレートに関する記述の為変更しないようお願い致します原稿内のテキスト等の装飾に関するCSSはテンプレート<body>タグ内の main area 内へ記述する原稿の各内容に対してインラインで記述してください main area head  /* 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 */  記入例 <td align="center" valign="top" style="border-bottom:1px solid #C7C7C7; padding-top: 2px;"></td> <! mainarea CSS start--> <! mainarea CSS end--> -5-

6 基本編 4.制作見本-2 テーブルレイアウトの調整方法 tr要素とtd要素はmarginが効かないため必ずpaddingを使用してご調整くださいまたメーラーによってはmargin : 0 auto;が再現できないものが存在するため paddingを使用して中央揃えになるようご制作ください該当箇所 <td style="padding-left: 30px; padding-right: 30px;"> テーブルとセルの隙間をできる限り少なくするメーラーによってはテーブルとセルに余分な空白が付与されるという現象が発生いたしますそういった現象をできる限り回避するため下記記入例をご参考のうえ table要素に属性を記述ください記入例 <table border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse; "> <td></td> </table> -6-

7 基本編 5.制作見本-3 テーブルとセルの隙間をできる限り少なくするメーラーによってはテーブルとセルに余分な空白が付与されるという現象が発生いたしますそういった現象をできる限り回避するため下記記入例をご参考のうえ table要素に属性を記述ください記入例 <table border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse; "> <td></td> </table> 発生する隙間を消すには上記のように記述した場合でもメーラーによっては余分な空白が発生いたします空白ができた際の対策として table要素やtr要素に背景色が設定されている場合は必ずtd要素の背景色をご設定ください背景色が白色無色の場合は背景色の設定を行う必要はございません該当箇所 <table width="552" bgcolor="#9e1a32" cellpadding="0" cellspacing="0" style="margin:0px 44px 0px 44px;"> <td colspan="2" width="552" background-color="#9e1a32"><a href= target="_blank"><img src=" alt="詳細を見る" width="552" height="22" border="0" /></a></td> -7-

アウトが大きく崩れている場合が多々ございますご入稿いただいたデータは下記メーラーにて確認を行った後問題がなければテスト配信へ進めております受信確認 Gmail Outlook(2016)

8 基本編 6.入稿時の注意確認する内容ご入稿いただく前に必ず下記項目をご確認ください必ず入稿前に複数メーラーでの表示確認をお願いいたしますブラウザ確認の際には問題ない場合でもメーラーではレイアウトが大きく崩れている場合が多々ございますご入稿いただいたデータは下記メーラーにて確認を行った後問題がなければテスト配信へ進めております受信確認 Gmail Outlook(2016) Outlook(office365) ＰＣ環境でもスマホ閲覧時のレイアウトになる現象が確認されています Thunderbird Android Mail ios10 Mail Gmail App Android ios WebメールはInternet Explorer Chrome Firefoxの最新版での表示確認となりますご入稿の際にはコンテンツデータと入稿連絡書をあわせてご送付ください入稿連絡書は件名やリンク数を確認する際必須となりますので忘れずにご送付ください -8-

9 7. 査閲確認基本編査閲する際に確認する内容査閲では前述した原稿仕様に加え下記項目を確認いたします該当箇所がないか必ず精査しご入稿ください 1 文章内の日付や曜日に間違いがないか確認いたします 2 広告内容とリンク先の内容が一致していることを確認した後に事実関係に齟齬がある場合はご指摘いたします 3 リンク先がデッドリンクになっていないか確認いたします 4 問い合わせ先として電話番号が記載されている場合は受付時間 : - : 曜除くという受付対応時間が記載されているか確認いたしますない場合はご指摘いたします 5 世界一 ( 日本一 ) No.1 その他の最大最小に関する表現についてはリンク先にデータの出典調査機関が表示されていることを確認いたします 6 不動産物件の JV( ジョイントベンチャー ) 以外は広告主名が明記されていることを確認いたします 7 純広告の扱いのため明らかな誤字脱字間違った言葉使いはご指摘いたします - 9 -

10 基本編 8.ヘッダとフッタの選定ヘッダの選択ヘッダは3種類ございますので下記の中からお選びください tieup_black.html tieup_blue.html tieup_whit.html ヘッダ内の記述変更ヘッダ内にある下記赤字部分は配信日に置き換えてください <td><p style="font-size:11px; line-height:140%; color:#666; margin-bottom:5px;">メールが正しく表示されない場合はこちら <a href=" target="_blank" style="color:#666;"> 2017年4月20日の場合は

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

11 1.Case1.黒の外枠が表示されない事例内容メーラーで表示した際に画面中部から下部にかけての黒の外枠が表示されておりません対応方法 table要素の背景色が指定されていなかったため右記のように背景色を指定いたしました一番外側にあるtable要素の背景色を指定したとしても内側にある要素の背景色も同じになるとは限らないため必ずそれぞれの背景色を指定するようにしてください修正前 <table cellpadding="0" cellspacing="0" border="0" width="640"> 修正後 <table cellpadding="0" cellspacing="0" border="0" width="640" style="background-color: #000;"> 修正後修正前

12 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="verticalalign:bottom;float:right;margin: px 20px;"><strong>日経自動車のイノベーション</strong><br> テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<br> テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </td> </table>

13 2.Case2.画像が左寄せになる-2 修正後 <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><strong>日経自動車のイノベーション</strong><br> テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<br> テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </td> <td style="vertical-align:top;"> <img src=" style="margin: px;"> </td> </table> 修正後

14 3.Case3.外枠が小さくなる事例内容右下の登録する箇所について紺色の外枠が小さくなっております対応方法 p要素に高さと横幅の指定をしていましたが表現されていなかったため table要素の構成に変更し高さと横幅を指定いたしましたテーブルレイアウトで範囲を指定したい場合は必ずtable要素 tr要素 td要素のいずれかでご指定くださいなおリンクの付いているボタン等は可能な限り画像でご制作いただきますようお願いいたしますメーラーごとの仕様に左右されないため不具合の発生が最小限に抑えられます修正前 <td> <p style="margin:0; width:130px;"> <a href=" target="_blank" style="display:block; color:#fff; background:#082749; padding:8px 20px; text-decoration:none; textalign:center;font-size:14px;">登録する</a> </p> </td> 修正後 <table width="130" height="32" border="0" cellspacing="0" cellpadding="0" style="color:#fff; background:#082749;"> <td align="center"> <a href=" target="_blank" style="display:block; color:#fff; background:#082749; padding:8px 20px; text-decoration:none; textalign:center;font-size:14px;">登録する</a></td> </table> 修正前修正後

15 4.Case4.空白スペースが発生事例内容今なら新型車種がのテキストエリアについて上部画像との間に空白スペースができております対応方法 td要素の背景色が指定されていなかったため背景色を指定いたしました一番外側にあるtable要素の背景色を指定したとしても内側にある要素の背景色も同じになるとは限らないため必ずそれぞれの背景色を指定するようお願いいたします修正前 <td align="center"> <a href=" target="_blank"><img src="img/img_mv.jpg" style="vertical-align:bottom;width:100%;"></a> </td> 修正後 <td align="center" style="background:#082749;"> <a href=" target="_blank"><img src=" style="verticalalign:bottom;width:100%;"></a> </td> 修正前修正後白い帯状の部分が余分な空白です

16 5. Case5.テキストの左右にスペースがなくなる事例内容テキスト部分の左右にスペースが無い状態で表示されております対応方法 td要素内のstyle属性で指定しているpaddingが外側のtable要素に効いているpaddingを打ち消してしまっていたため必要なスペースのみpaddingbottomで指定いたしました paddingによる不要なスペースの指定は行わないでください修正前 <td style="padding: px;"> <p style="margin:0; font-size:12px">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </td> 修正後 <td style="padding-bottom:20px;"> <p style="margin:0; font-size:12px;font-family:'hggothicm', 'HGSゴシックM', Arial;">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </td> 修正前修正後

17 6.Case6.画像間に白いスペースが発生-1 事例内容テーブルレイアウトを使わずに画像を配置しているため画像間に隙間が発生しております対応方法広い範囲をdiv要素で指定していたためテーブルレイアウトの構成に変更して範囲を小分けにし背景に黒色が必要な部分のみ背景色を指定することで画像間の隙間を修正いたしました本件のようにテーブルレイアウトを使用していない状態で不具合が発生した場合大元の構成自体を変えなければならなくなります背景色を使うことが予想される箇所は調整がおこなえるよう事前にテーブルレイアウトを使用してご制作ください修正前修正前 <div style="margin:0px auto 0px auto;padding:0px;backgroundcolor:#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> 白い帯状の部分が余分な空白です

18 6.Case6.画像間に白いスペースが発生-2 修正後 <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;"> <td style="background-color: #000; padding: 0;"><img src=" style="width:600px;height:120px;" border="0" alt=""></td> <td style="padding: 0;"><img src=" style="width:600px;height:300px;" border="0" alt=""></td> </tbody> </table> <div style="margin:0px auto 0px auto;padding:0px;backgroundcolor:#ffffff;vertical-align:bottom;width:600px;"> <img src=" style="width:600px;height:142px;" border="0" alt=""><br/> <img src=" style="width:600px;height:209px;" border="0" alt=""><br/> </div> 修正後

19 7.Case7.背景色が機能していない-1 事例内容ロゴ画像を配置している箇所の背景色が機能しておらずその影響でテキスト部分も消えております対応方法 div要素を使用して背景色を指定していたためテーブルレイアウトの構成へ変更し td要素で背景色を指定いたしました HTMLメールでは div要素のstyle属性が効かない場合があるため推奨しておりません修正前 <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;"> <td><a href=" target="_blank"><img src="dlogo1.gif" alt="" /></a></td><td><a href=" target="_blank"><img src="dlogo2.gif" alt="" /></a></td> </table> <p style="color:#fff;font-size:75%;">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </div> 修正前

20 7.Case7.背景色が機能していない-2 修正後 <td style="text-align:center;background-color:#000;padding:10px 0;"> <table border="0" cellpadding="0" cellspacing="0" width="300" style="textalign:center;margin:0 auto;"> <td> <a href=" target="_blank"><img src=" alt="" style="border: 0px;display:block;" /></a></td><td><a href=" target="_blank"><img src=" alt="" style="border: 0px;display:block;" /></a> </td> </table> <p style="color:#fff;font-size:75%;">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </td> 修正後

8.Case8.不要なスペースが発生-1 事例内容赤いバナーのリンク箇所間に不要なスペースができております対応方法こちらの修正は下記工程の順で行いました 1. 2. 3. 4. 画像間の隙間を調整する目的で設置されたspacer.

21 8.Case8.不要なスペースが発生-1 事例内容赤いバナーのリンク箇所間に不要なスペースができております対応方法こちらの修正は下記工程の順で行いました画像間の隙間を調整する目的で設置されたspacer.gifが余分な空白を発生させる原因となっていたため記述を削除いたしました Table要素の背景色をバナーと同じ赤色に設定いたしました本来白色であるべきスペースが赤色に変化してしまいました新たにtable要素を追加し赤色になってしまった部分を白色へ戻しました修正前 <table width="552" bgcolor="#ffffff" cellpadding="0" cellspacing="0" style="margin:0px 44px 0px 44px;"> <td colspan="2" width="552"><a href=" target="_blank"><img src="btn_ftype.jpg" alt="詳細を見る" width="552" height="22" border="0" /></a></td> <td colspan="2" width="552"><img src="spacer.gif" alt="" width="552" height="2" border="0" /></td> <td colspan="2" width="552"><img src="spacer.gif" alt="" width="552" height="10" border="0" /></td> </table> 修正前

22 8.Case8.不要なスペースが発生-2 修正後 <table width="552" bgcolor="#9e1a32" cellpadding="0" cellspacing="0" style="margin:0px 44px 0px 44px;"> <td colspan="2" width="552" background-color="#9e1a32"><a href=" target="_blank"><img src=" alt="詳細を見る" width="552" height="22" border="0" /></a></td> 修正後削除 </table> <table> <td colspan="2" width="552" background-color="#fff"><img src=" alt="" width="552" height="10" border="0" /></td> </table>

23 お問い合わせ先その他技術的な問題が発生し本書の対応策を実施しても不具合が解決されなかった場合は下記へご連絡くださいメールでのお問い合わせ先についてお電話でのお問い合わせについて TEL: ( 平日 10 時 ~18 時株式会社コミュニケーションコンパス ) コミュニケーションコンパスは日本経済新聞社デジタル事業メディアビジネスユニットから業務委託を受けております

24 Appendix ヘッダとフッタの選定事業系

25 Appendix: ヘッダとフッタの選定基本編ヘッダとフッタのご制作について事業系案件のヘッダとフッタはテンプレートをご参考のうえオリジナルでご制作いただいております横幅は必ず 640px でご制作ください制作例

ターゲティングメール制作マニュアル

ターゲティングメール制作マニュアル日経 ID ターゲティングメール (HTML 版 ) 制作ガイドライン 2018 年 1 月 [0213] 日本経済新聞社デジタル事業広告 ID ユニット - 1 - 目次基本編 1. レスポンシブデザイン対応 HTMLメールについて- p3 2. HTMLメールの基本ルールについて p4 3. 制作見本 -1 p5 4. 制作見本 -2 p6 5. 制作見本 -3 p7 6. 入稿時の注意 p8

ターゲティングメール 制作マニュアル

ターゲティングメール制作マニュアル