レスポンシブメールデザイン

お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。

素晴らしいメールキャンペーンを作成しても、顧客の画面に正しく表示されなければ、内容を読んでもらう前にキャンペーンは失敗してしまいます。自分では印象的なデザインに見えても、顧客のデバイスでどのように表示されるか確認しましたか？顧客が使用するデバイスや、メールキャンペーンを表示するソフトウェアは多岐にわたります。一般に画面が大きいノートパソコン、画面が小さいモバイル端末、その中間の画面サイズを持つタブレットなどがあります。統計によると、デスクトップやWebメールと比べて、モバイル端末でのメール開封数は大幅に増加しています。すべてのデバイスやメールサービスで意図したとおりにメールを表示するのは手間がかかるように思えますが、レスポンシブデザインを利用すれば解決できます。レスポンシブデザインでは、ユーザーのデバイスを検出し、メールが正しく表示されるように自動で調整します。レスポンシブデザインによって、あらゆるデバイスでメールを魅力的に表示する方法を見てみましょう。

モバイル対応マーケティングの重要性

すべてのデバイスで内容を読みやすくすることが、モバイル対応マーケティングの鍵です。過去10年間で、インターネットに接続できるデバイスの数は急増し、画面のサイズや形式（横向き、縦向き、四角）も多様化しました。読者に最適化された表示を提供し、閲覧体験を向上させましょう。内容をデバイスに合わせて調整できれば、詳細を読むために横スクロールしたり、拡大や縮小を繰り返したりする手間を省けます。読者は、レイアウトが崩れたメールマガジンを読みたいとは思いません。

そのようなメールマガジンは無視または削除され、場合によっては購読を解除されることもあります。よほど重要なメールマガジンでない限り、別のデバイスに切り替えて確認しようとする読者はいません。

インターネット対応のモバイル端末は、日々急速に普及しています。手頃な価格のスマートフォンが増え、多くの人にとって最も一般的な通信手段になっています。そのため、あらゆるサイズと解像度のモバイルデバイスに対応するよう、キャンペーンをデザインする必要があります。

すべてのデバイスに適したメールを作成するには

液体を容器に注ぐと、自然に流れ込み、容器の形に沿って広がります。メールの内容も同じようにデザインする必要があります。そのために役立つのが、レスポンシブメールデザインです。レスポンシブデザインは、あらゆるサイズの画面に適合し、ユーザーに最適な表示と操作性を提供します。どのデバイスにも同じように対応できます。

レスポンシブデザイン = 可変デザイン + アダプティブデザイン

固定デザインとは異なり、可変デザインでは幅をパーセントで指定します。これにより、レイアウト内の列が互いに連動し、デバイスのサイズに応じて拡大または縮小されます。アダプティブデザインでは、メディアクエリーを使用して各デバイスに対応します。デバイスごとに専用のスタイルを定義し、サーバーがデバイスを判別して、それに応じた内容を表示します。つまり、レスポンシブデザインは可変デザインとアダプティブデザインを組み合わせたものです。あらゆる画面解像度に対応できる可変幅と、調整可能な内容を備えています。

レスポンシブデザインを使用する理由

モバイル端末の利用が増えるにつれ、Webデザイナーはデスクトップユーザー向けとモバイルユーザー向けに、それぞれ別のWebサイトをデザインするようになりました。しかし、レスポンシブデザインなら、1つのデザインでいくつものデバイスに対応できます。サイズが固定値ではなく相対値で指定されるため、すべてのデバイスとメールクライアントで、メールキャンペーンを魅力的に表示できます。デバイスに応じて内容を変更し、デスクトップユーザーとモバイルユーザーに表示する内容を個別に決めることもできます。内容や画像のサイズ変更、内容の非表示、列の積み重ねなどにより、デバイスごとにまったく異なる表示を実現できます。

レスポンシブメールのデザイン方法

レスポンシブデザインでは、CSSとメディアクエリーを使用し、サイズに応じて内容のサイズ変更、表示、非表示、積み重ねを行います。レスポンシブメールでは、条件付きルールとして機能する一連のスタイルであるメディアクエリーを使用します。デバイスによって異なる表示領域であるビューポートごとに、スタイルを定義します。モバイル端末のビューポートは、コンピューターより小さくなります。レスポンシブデザインの基本ルールは次のとおりです。

画面サイズが「x」の場合、定義済みのスタイルは「a」です。

画面サイズが「y」の場合、定義済みのスタイルは「b」です。

Zoho Marketing Automationでできること

Zoho Marketing Automationでレスポンシブメールをデザインするために、特別なコーディングスキルは必要ありません。Zoho Marketing Automationにあらかじめ用意されているメールテンプレートは、すべてのデバイスとメールクライアントに対応しています。優れた内容を作成し、ブランドに合うようテンプレートを少し調整するだけです。

Zoho Marketing Automationの受信トレイプレビューを使用すると、メールが適切に表示されるかテストできます。受信者の視点でメールを確認し、書式設定の問題が見落とされていないかを把握できます。また、異なるメールクライアントやデバイスを使用するすべての受信者に、メールが美しく適切に表示されることを確認できます。

レスポンシブデザインの作成ガイド

近年、インターネット対応デバイスは急増しています。デバイスの画面サイズと解像度も多様化しています。そのため、デザインしたメールが、すべてのデバイスやメールクライアントで同じように表示されるとは限りません。魅力的なメールをデザインするのと同様に、すべてのデバイスとメールクライアントで適切に表示することも重要です。レスポンシブデザインを利用すれば、簡単に実現できます。固定デザインとは異なり、レスポンシブデザインでは、列の可変幅、ビューポートごとのスタイル、複数のブレークポイントを使用します。

レスポンシブデザインの実装方法

レスポンシブデザインでは、CSSとメディアクエリーを使用して、デバイスごとのスタイルを定義します。内容や画像のサイズ変更、内容の非表示、列の積み重ねなどにより、デバイスごとにまったく異なる表示を実現できます。

CSS - HTML要素の表示方法を定義するスタイル言語です。

メディアクエリー - さまざまな画面サイズと解像度で内容を表示できるようにするモジュールです。

複数のビューポートで可変幅を定義すると、ウィンドウに合わせてレイアウトのサイズが変更されます。これは、単純なif-else文のように機能します。

画面サイズが「x」の場合、定義済みのスタイルは「a」です。

画面サイズが「y」から「z」の範囲の場合、定義済みのスタイルは「b」です。

それ以外の場合、定義済みのスタイルは「c」です。

一般的なコード（CSSとメディアクエリー）

@media only screen and (max-device-width: 480px) { /* モバイル

専用CSS */

}

/* 通常のCSS*/

</style>

メディアクエリー：

@media only screen and (max-device-width: 480px) {

table[class=container] {

width: 100% !important;

}

table[class=container] table{ width: 100% !important;

}

table[class=container] table p{ text-align: center;

}

td[class=logo]{ text-align: center;

}

td[class=logo] img { width:195px;

}

table.container { width: 640px;

}

</style>

@media - if条件のように機能します。

* !important - インラインスタイルを上書きします。

* meta name = viewport

metaタグ - ページ情報をブラウザーに提供します。

viewport - Webページ内でユーザーに表示される領域です。

* content width = device - width

デバイスの幅をページの幅として設定します。

* initial-scale =1.0

ページの初期ズームレベルを設定します。内容の表示方法をブラウザーに指示します。

HTMLコード。

<table width=”640” border=”0” cellpadding=”0” cellspacing=”0”

class=”container”>

<tr>

<td>

<table width=”320” border=”0” cellspacing=”0”

cellpadding=”10” align=”left”>

<tr>

<img src=”https://img.zohostatic.com/

campaigns/Oct_04_2016_campaignsplus/images/zohocampaigns.png”

width=”150”/>

</td>

</tr></table>

<table width=”320” border=”0” cellspacing=”0”

cellpadding=”10” align=”left”>

<tr>

<td>

<p><font size=”4”>ここに見出しを入力</font></p>

</td>

</tr></table>

</td>

</tr>

<tr>

<td>

<table width=”320” border=”0” cellspacing=”0”

cellpadding=”20” align=”left”>

<tr>

左列 </p></td>

</tr>

</table>

<table width=”320” border=”0” cellspacing=”0”

cellpadding=”20” align=”left”>

<tr>

右列 </p></td>

</tr>

</table>

</td>

</tr>

</table>

完全なコード。

<html>

<head>

<title> SUGUMAR </title>

@media only screen and (max-device-width: 480px) {

/* モバイル専用のCSSスタイルをここに入力 */

table[class=container] {

width: 100% !important;

}

table[class=container] table{width: 100% !important;

}

table[class=container] table p{text-align: center;

}

td[class=logo]{text-align: center;

}

td[class=logo] img{width:195px;

}

/* 通常のCSSスタイルをここに入力 */

table.container {width: 640px;

}

</style>

</head>

<body bgcolor=”#ffffff” style=”margin:0; padding:0;fontfamily:Arial, Helvetica, sans-serif; font-size:12px;

color:#000000;”><center>

<table width=”640” border=”0” cellpadding=”0” cellspacing=”0”

class=”container”>

<tr>

<td>

<table width=”320” border=”0” cellspacing=”0”

cellpadding=”10” align=”left”>

<tr>

<img src=”https://img.zohostatic.com/

campaigns/Oct_04_2016_campaignsplus/images/zohocampaigns.png”

width=”150”/>

</td>

</tr></table>

<table width=”320” border=”0” cellspacing=”0”

cellpadding=”10” align=”left”>

<tr>

<td>

<p><font size=”4”>ここに見出しを入力</font></p>

</td>

</tr></table>

</td>

レスポンシブメールデザインパート2

</tr>

<tr>

<td>

<table width=”320” border=”0” cellspacing=”0”

cellpadding=”20” align=”left”>

<tr>

<td bgcolor=”red”><p style=”text-align:

center;”> 左列 </p></td>

</tr>

</table>

<table width=”320” border=”0” cellspacing=”0”

cellpadding=”20” align=”left”>

<tr>

<td bgcolor=”blue”><p style=”text-align:

center;”> 右列 </p></td>

</tr>

</table>

</td>

</tr>

</table>

</body>

</html>

デザイン手法

利用できるデザイン手法は次のとおりです。

1. 内容、画像、動画の積み重ね

ビューポートごとに列の向きを変更できます。小さい画面では、画像の周囲にテキストを回り込ませることができます。

@media only screen and (max-width: 480px){

table[class=contentInner]{

width:100% !important;

}

table[class=zpcolumns]{display:block !important;

width:100% !important;

}

td[class=zpcolumns]{

display:block !important;

width:100% !important;

}

img[class=zpImage]{

height:auto !important;

max-width:480px !important;

width:100% !important;

}

td[class=txtsize]{

width:100% !important;

font-size:16px !important;

line-height:125% !important;

}

</style>

</head>

<body>

<table border=”0” cellpadding=”0” cellspacing=”0” width=”600”

class=”contentInner” align=”center”><tbody><tr><td>

<table border=”0” cellpadding=”0” cellspacing=”0” width=”600”

class=”contentInner”>

<img src=”http://zohopublic.com/zohocampaigns/zc-noimage.png”

width=”600” style=”max-width: 600px;” class=”zpImage”>

</td>

</tr></tbody>

</table>

</td></tr><tr><td>

<table border=”0” cellpadding=”0” cellspacing=”0” width=”600”

class=”contentInner”>

<td align=”center” valign=”top” width=”50%”

class=”zpcolumns”>

<table border=”0” cellpadding=”10” cellspacing=”0”

width=”300” align=”left” class=”zpcolumns”>

<p style=”

font-size: 12pt;

line-height: 22pt;

“>私たちを取り巻く世界は、慌ただしく複雑です。そうした世界を作ったのは私たち自身です。

それなら、もう一度シンプルにしてみませんか？オフィスやワークスペースを自動化して、

単調な作業から解放されましょう。未来はすぐそこまで来ています。そして、

デスクがあなたに代わって応えてくれます。</p>

</td>

</tr>

</tbody></table>

<table border=”0” cellpadding=”10” cellspacing=”0” width=”300”

align=”left” class=”zpcolumns”>

<td valign=”top” class=”txtsize”><p style=”

font-size: 12pt;

line-height: 22pt;

“>私たちを取り巻く世界は、慌ただしく複雑です。そうした世界を作ったのは私たち自身です。

それなら、もう一度シンプルにしてみませんか？オフィスやワークスペースを自動化して、

単調な作業から解放されましょう。未来はすぐそこまで来ています。そして、

デスクがあなたに代わって応えてくれます。

</p></td>

</tr>

</tbody>

</table>

</td>

</tr></tbody>

</table>

</td></tr></tbody></table>

</body></html>

2. 段階的な情報表示

小さい画面でより魅力的かつ簡潔に表示するには、主要な情報のみを表示し、補足情報をクリック可能なリンクにまとめます。リンクをクリックすると、追加の詳細が表示されます。これにより、情報が詰め込まれた読みにくいメールになるのを防げます。

@media only screen and (max-width: 480px){

table[class=contentInner]{

width:100% !important;

}

table[class=zpcolumns]{

display:block !important;

width:100% !important;

}

td[class=zpcolumns]{

display:block !important;

width:100% !important;

}

img[class=zpImage]{

height:auto !important;

max-width:480px !important;

width:100% !important;

}

td[class=zpdesktop_txt]

{

display:none !important;

width:100% !important;

}

td[class=zcmobile_txt]

{

display:block !important;

width:100% !important;

}

td[class=zpmb_read]

{

display:block !important;

width:120px !important;

}

a[class=”zpmb_read”], a[class=”zpmb_less”]

{

display: block !important;

color: #fff !important;

background-color: #aaa;

border-radius: 20px;

padding: 0 8px;

text-decoration: none;

font-weight: bold;

font-size: 11px;

position: absolute;

top: 500px;

text-align: center;

width: 120px;

}

div[class=”zpdesktop_txt”]

{

display:none;

}

.zpmb_read:hover

{

visibility:hidden;

}

.zpmb_read:hover + .zpdesktop_txt,

.zpdesktop_txt:hover

{

display: block !important;

}

</style>

</head>

<body>

<table border=”0” cellpadding=”0” cellspacing=”0” width=”600”

class=”contentInner” align=”center”><tbody><tr><td>

<table border=”0” cellpadding=”0” cellspacing=”0” width=”600”

class=”contentInner”>

</td>

</tr></tbody>

</table>

</td></tr><tr><td>

<table border=”0” cellpadding=”0” cellspacing=”0” width=”600”

class=”contentInner”>

<td align=”center” valign=”top” width=”100%”

class=”zpcolumns”>

<table border=”0” cellpadding=”10” cellspacing=”0”

width=”600” align=”left” class=”zpcolumns”>

<p style=”

font-size: 12pt;

line-height: 22pt;

“>私たちを取り巻く世界は忙しく複雑です。そうしたのは私たち自身です。

もう一度シンプルにしてみませんか？オフィスやワークスペースを自動化し、

単調な作業から解放されましょう。未来からの呼びかけには、

デスクがあなたに代わって応えてくれます。私たちを取り巻く世界は忙しく複雑です。

そうしたのは私たち自身です。もう一度シンプルにしてみませんか？オフィスや

ワークスペースを自動化して、単調な作業から解放されましょう。未来からの

呼びかけには、デスクがあなたに代わって応えてくれます。私たちを取り巻く世界は

忙しく複雑です。そうしたのは私たち自身です。もう一度シンプルに

してみませんか？オフィスやワークスペースを自動化して、単調な

作業から解放されましょう。未来からの呼びかけには、デスクがあなたに代わって応えてくれます。

私たちを取り巻く世界は忙しく複雑です。そうしたのは私たち自身です。

もう一度シンプルにしてみませんか？オフィスやワークスペースを自動化して、

単調な作業から解放されましょう。未来からの呼びかけには、デスクが

あなたに代わって応えてくれます。私たちを取り巻く世界は忙しく複雑です。

そうしたのは私たち自身です。もう一度シンプルにしてみませんか？オフィス

やワークスペースを自動化して、単調な作業から解放されましょう。未来からの

呼びかけには、デスクがあなたに代わって応えてくれます。</p>

</td>

</tr>

<tr>

<td valign=”top” class=”zcmobile_txt” style=”

display: none;

“>

<p style=”

font-size: 12pt;

line-height: 22pt;

“>私たちを取り巻く世界は忙しく複雑です。そうしたのは私たち自身です。

もう一度シンプルにしてみませんか？オフィスやワークスペースを自動化し、

単調な作業から解放されましょう。未来からの呼びかけには、

デスクがあなたに代わって応えてくれます。私たちを取り巻く世界は忙しく

複雑です。</p>

</td>

</tr>

<tr>

<td valign=”top” class=”zpcolumns” style=”

display: none;

“>

<a href=”#” class=”zpmb_less” style=”

font-size: 12pt;

line-height: 22pt;

“>折りたたむ...</a><a href=”#” class=”zpmb_read” style=”

font-size: 12pt;

line-height: 22pt;

“>続きを読む</a><div class=”zpdesktop_txt” style=”lineheight:22pt;padding:7px 15px;”>私たちを取り巻く世界は忙しく

複雑です。そうしたのは私たち自身です。もう一度シンプルに

してみませんか？オフィスやワークスペースを自動化して、単調な

作業から解放されましょう。未来からの呼びかけには、デスクがあなたに代わって応えてくれます。

私たちを取り巻く世界は忙しく複雑です。そうしたのは私たち自身です。

もう一度シンプルにしてみませんか？オフィスやワークスペースを自動化し、

単調な作業から解放されましょう。未来からの呼びかけには、

デスクがあなたに代わって応えてくれます。私たちを取り巻く世界は忙しく複雑です。

そうしたのは私たち自身です。もう一度シンプルにしてみませんか？オフィスや

ワークスペースを自動化して、単調な作業から解放されましょう。未来からの

呼びかけには、デスクがあなたに代わって応えてくれます。私たちを取り巻く世界は

忙しく複雑です。そうしたのは私たち自身です。もう一度シンプルに

してみませんか？オフィスやワークスペースを自動化して、単調な

作業から解放されましょう。未来からの呼びかけには、デスクがあなたに代わって応えてくれます。

私たちを取り巻く世界は忙しく複雑です。そうしたのは私たち自身です。

もう一度シンプルにしてみませんか？オフィスやワークスペースを自動化して、

単調な作業から解放されましょう。未来からの呼びかけには、デスクが

あなたに代わって応えてくれます。</div>

</td>

</tr>

</tbody></table>

</td>

</tr></tbody>

</table>

</td></tr></tbody></table>

</body>

</html>

3. デバイスごとの内容の変更

デバイスごとに表示する内容と行動喚起に優先順位を付けます。特にモバイルでは、最も重要な行動喚起を画面の表示領域に配置します。モバイルユーザーとデスクトップユーザーに異なる内容を表示することもできます。

<!--[if gte mso 9]>

<xml>

<o:OfficeDocumentSettings>

<o:AllowPNG/>

<o:PixelsPerInch>96</o:PixelsPerInch>

</o:OfficeDocumentSettings>

</xml>

<![endif]-->

@media only screen and (max-width: 480px){

table[class=contentInner]{

width:100% !important;

}

table[class=zpcolumns]{

display:block !important;

width:100% !important;

}

td[class=zpcolumns]{

display:block !important;

width:100% !important;

}

img[class=zpImage]{

height:auto !important;

max-width:480px !important;

width:100% !important;

}

td[class=txtsize]{

width:100% !important;

font-size:16px !important;

line-height:125% !important;

}

</style>

</head>

<body>

<table border=”0” cellpadding=”0” cellspacing=”0”

class=”contentInner” style=”width:600px;” width=”600”>

<table border=”0” cellpadding=”0” cellspacing=”0” width=”100%”

class=”contentInner”>

<p style=”

margin: 0px;

font-size: 19pt;

line-height: 31pt;

font-family: Arial;

padding: 0px;

“>見出しをここに入力.......!!!!!!</p>

</td>

</tr></tbody>

</table></td></tr><tr><td>

<table border=”0” cellpadding=”0” cellspacing=”0” width=”100%”

class=”contentInner”>

<td align=”center” valign=”top” class=”zpcolumns txtsize”

style=”

padding: 10px;

“>

<p style=”

margin: 0px;

font-size: 11pt;

line-height: 21pt;

font-family: Arial;

padding: 0px;

text-align: left;

“>吾輩は猫である。名前はまだ無い。

どこで生れたかとんと見当がつかぬ。最小限必要な成果を得るため、

誰もが労働や運動に取り組みますが、

そこから得られる利益を享受する場合を除き、

苦痛を避けたいという理由で非難されることはありません。

</p>

</td>

</tr></tbody>

</table></td></tr>

<table border=”0” cellpadding=”0” cellspacing=”0” width=”100%”

class=”contentInner”>

<table align=”center” cellpadding=”0”

cellspacing=”0” style=”font-size:12px;border:0px;”>

<td align=”center” bgcolor=”#dddddd”

class=”txtsize” style=”border-collapse:collapse;paddingtop:12px;padding-bottom:12px;padding-right:25px;paddingleft:25px;color:#000000;font-family:Arial;background-color:#dddddd;font-size:11pt;border-radius:

0px;border:0px;text-align:center;cursor:pointer;”>

<a align=”center” href=”http://www.

zoho.com” style=”display:block;background-color:#dddddd;borderradius:0px;color:#000000;font-family:Arial;font-size:11pt;textalign:center;text-decoration:none;” target=”_blank”>

こちらをクリック

</span>

</a>

</td>

</tr>

</tbody></table>

</td>

</tr></tbody>

</table></td></tr><tr><td>

<table border=”0” cellpadding=”0” cellspacing=”0” width=”100%”

class=”contentInner”>

<td align=”center” valign=”top” class=”zpcolumns” style=”

height: 20px;

“>

</td></tr></tbody>

</table></td></tr></tbody></table>

</body>

</html>

4. 拡大縮小可能な画像、GIF、動画

画像、背景画像、GIF、動画のサイズをビューポートに合わせて変更し、デバイスを問わず滑らかに拡大縮小されるようにします。

@media only screen and (max-width: 480px){

table[class=contentInner]{

width:100% !important;

}

table[class=zpcolumns]{

display:block !important;

width:100% !important;

}

td[class=zpcolumns]{

display:block !important;

width:100% !important;

}

img[class=zpImage]{

width:100% !important;

height:auto !important;

max-width:480px !important;

}

</style>

</head>

<body>

<table border=”0” cellpadding=”0” cellspacing=”0” width=”600”

class=”contentInner” align=”center”><tbody><tr><td>

<table border=”0” cellpadding=”0” cellspacing=”0” width=”600”

class=”contentInner”>

</td>

</tr></tbody>

</table>

</td></tr><tr><td>

<table border=”0” cellpadding=”0” cellspacing=”0” width=”600”

class=”contentInner”>

<td align=”center” valign=”top” width=”50%”

class=”zpcolumns”>

<table border=”0” cellpadding=”10” cellspacing=”0”

width=”300” align=”left” class=”zpcolumns”>

<td valign=”top” class=”txtsize”><img

src=”http://zohopublic.com/zohocampaigns/zc-noimage.png”

class=”zpImage” style=”

width: 270px;

“></td>

</tr>

</tbody></table>

<table border=”0” cellpadding=”10” cellspacing=”0”

width=”300” align=”left” class=”zpcolumns”>

<td valign=”top” class=”txtsize”

align=”center”><img src=”http://zohopublic.com/zohocampaigns/zcnoimage.png” class=”zpImage” style=”

width: 270px;

“ align=”center”></td>

</tr>

</tbody>

</table>

</td>

</tr></tbody>

</table>

</td></tr></tbody></table>

</body>

</html>

最適なレスポンシブメールを作成するためのベストプラクティス

モバイルユーザー向けには、親指で操作しやすい行動喚起ボタンとリンクを用意します。すべての要素を指で簡単に操作できるようにしてください。
読みやすいフォントサイズ、スタイル、色を使用します。
デバイスごとに列や内容へ優先順位を付け、階層を変更します。
重要な行動喚起ボタンは、読者の目に留まりやすい場所に配置します。明確で操作しやすいボタンにしてください。
小さい画面では不要な要素を非表示にし、ページをシンプルにします。
固定幅の大きな要素は使用しないでください。
最適化されたビューポートを使用します。
横スクロールは使用しないでください。