もしも素晴らしいメールキャンペーンを作成したのに、お客様の画面に正しく表示されない場合、コンテンツが誰かを引きつける前にキャンペーンは失敗してしまいます。キャンペーンのデザインがあなたにとって本当に印象的に見えるかもしれませんが、お客様のデバイスでどのように表示されるかをテストしましたか？さまざまなデバイスとサポートソフトウェアを使用してメールキャンペーンを表示するため、幅広い顧客が存在します。それには、通常より大きな画面を持つノートパソコン、小さな画面を持つ携帯電話、そしてその中間に位置するタブレットが含まれるかもしれません。統計によれば、デスクトップやWebメールと比較して、モバイル電話でのメール開封数が非常に増加していることが示されています。したがって、すべてのデバイスとメールサービスで意図した通りにメールを表示することは手間のかかる作業のように思えますが、その解決策があります。それは、レスポンシブデザインと呼ばれるものです。要するに、ユーザーのデバイスを検出し、自動的にメールを適切に表示するアプローチを使用するということです。どのデバイスでもメールが素晴らしく見えるようにするために、レスポンシブデザインがどのように役立つのか見てみましょう。

すべてのデバイスで読みやすいコンテンツを作ることが、モバイルフレンドリーなマーケティングの鍵です。過去10年間で、インターネットにアクセスするために使用できるデバイスの数が急速に増加しました。これらのデバイスは、さまざまな画面サイズとフォーマット（横画面、縦画面、正方形）を持っています。読者に最適化された表示を提供することで、彼らの体験を向上させることができます。コンテンツが適応型であれば、読者は水平スクロールや拡大・縮小などの手間をかけずに詳細を読むことができます。読者は、乱雑なニュースレターを読むことを好みません。

彼らはそれを無視したり、削除したり、ニュースレターの購読を解除するかもしれません。ニュースレターが彼らにとって極めて重要でない限り、読者は別のデバイスに移動してニュースレターを確認する忍耐力を持ちません。

インターネット対応の携帯電話の普及率は、日々驚異的に増加しています。手頃な価格のスマートフォンの台頭により、大衆にとって最も好まれるコミュニケーション手段となりました。ですから、あらゆるサイズと解像度のモバイルデバイスに適したキャンペーンを設計する時期です。

容器に注がれる液体は、容易に中に流れ込み、その形になります。メールの内容も同様に設計されるべきです。レスポンシブなメールデザインは、この目的を解決することができます。レスポンシブデザインは、最適な表示とユーザーの操作性を備え、どんなディスプレイサイズにも適応します。すべてのデバイスに対して同じくらい優れた反応を示します。

レスポンシブデザイン = フルード + アダプティブ

フルードデザインは、静的なデザインとは異なり、幅にパーセンテージを使用するため、レイアウト内の列は相対的に配置され、デバイスのサイズに応じてスケーリングされます。アダプティブデザインは、メディアクエリを使用してすべてのデバイスに適応します。各デバイスに特定のスタイルが定義されます。サーバーはデバイスを照合し、コンテンツを適切にレンダリングします。レスポンシブデザインは、フルードデザインとアダプティブデザインの組み合わせです。フルードな幅と、可能なすべての画面解像度に対応したアダプティブなコンテンツを持っています。

モバイル電話の使用が増えるにつれて、ウェブデザイナーはデスクトップユーザー向けとモバイルユーザー向けにウェブサイトを設計し始めました。しかし、レスポンシブデザインでは、1つのデザインが様々なデバイスに適合することができます。メールキャンペーンは、サイズが相対的で固定されていないため、すべてのデバイスとメールクライアントで魅力的な外観を持つことができます。また、デバイスごとにコンテンツを変更することもできます。デスクトップユーザーやモバイルユーザーに表示するコンテンツを決定することができます。コンテンツや画像のサイズを変更したり、コンテンツを非表示にしたり、列を積み重ねたりすることもできます。これにより、さまざまなデバイスに完全に異なるビューを提供することができます。

レスポンシブデザインは、サイズに基づいてコンテンツのリサイズ、表示、非表示、またはスタックを行うために、CSSとメディアクエリを使用します。レスポンシブメールはメディアクエリを使用し、条件付きルールで動作するスタイルのセットです。スタイルは、デバイスによって異なる表示領域である各ビューポートに対して定義されます。モバイル電話のビューポートはコンピュータよりも小さくなります。レスポンシブデザインの基本ルールは次のとおりです：

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

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

Zoho Campaignsを使用してレスポンシブなメールをデザインするには、特別なコーディングスキルは必要ありません。Zoho Campaignsの事前に設計されたメールテンプレートは、すべてのデバイスとメールクライアントに対応しています。重要なのは、素晴らしいコンテンツを作成し、これらのテンプレートを少し調整してブランドに合わせることです。

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

近年、インターネットに接続できるデバイスの数が急増しています。デバイスの画面サイズや解像度の範囲も広がっています。そのため、私たちがデザインしたメールは、すべてのデバイスやメールクライアントで同じように表示されるわけではありません。ですが、クリエイティブなデザインをするだけでなく、すべてのデバイスやメールクライアントでメールを同じくらい良い状態で表示することも重要です。これは、レスポンシブデザインを使うことで簡単に実現できます。静的なデザインとは異なり、レスポンシブデザインでは、カラムの幅に流動性を持たせ、さまざまなビューポートや複数のブレークポイントに対して明確なスタイルを使用します。

レスポンシブデザインは、CSSとメディアクエリを使用して、デバイスごとにスタイルを定義します。コンテンツや画像のサイズを変更したり、コンテンツを非表示にしたり、カラムを積み重ねたりすることができ、さまざまなデバイスに対して完全に異なるビューをレンダリングすることができます。

HTML要素の表示方法を定義するCSS（スタイルシート）言語です。

メディアクエリ - さまざまな画面サイズや解像度でコンテンツをレンダリングするためのモジュールです。

ウィンドウに合わせてレイアウトがリサイズされるため、フルード幅は複数のビューポートで定義されます。シンプルなif-else文のように機能します。

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

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

他に定義されたスタイルは 'c' です。

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

<style type=”text/css”>

<style type=”text/css”>

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

特定のCSS */

  }

  }

/* 通常のCSS */

</style>

 

メディアクエリ:

<style type='text/css'>

<style type='text/css'>

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

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

  table[class=container] {

  table[class=container] {

幅: 100% !important;

}

}

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

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

}

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

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

}

}

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

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

}

  }

  }

  table.container { width: 640px;

  table.container { width: 640px;

  }

  }

</style>

</style>

 

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

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

* meta name = viewport

* meta name = ビューポート

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

ビューポート - ユーザーがウェブページで見える領域です。

* コンテンツの幅 = デバイスの幅

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

* initial-scale =1.0

* 初期スケール = 1.0

ページの初期ズームレベルを設定します。ブラウザにコンテンツのレンダリング方法を指示します。

HTMLコード：

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

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

class='container'>

<tr>

<tr>

  <td>

  <td>

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

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

cellpadding=”10” align=”left”>

cellpadding='10' align='left'>

<tr>

<td class='logo'>

<td class='ロゴ'>

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

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

キャンペーン/2016年10月04日_キャンペーンプラス/画像/zohocampaigns.png”

幅='150'/>

</td>

</td>

</tr></table>

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

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

cellpadding=”10” align=”left”>

セルパディング='10' align='left'>

<tr>

<tr>

    <td>

    <td>

<p><font size=”4”>ここに見出しが入ります</font></p>

    </td>

    </td>

</tr></table>

     </td>

     </td>

</tr>

<tr>

<td>

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

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

cellpadding=”20” align=”left”>

cellpadding=”20” align=”left”>

    <tr>

    <tr>

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

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

左の列 </p></td>

     </tr>

     </tr>

</table>

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

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

cellpadding='20' align='left'>

    <tr>

    <tr>

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

右カラム </p></td>

</tr>

</tr>

</table>

</table>

    </td>

    </td>

</tr>

</table>

フルコード：

<html>

<html>

<head>

<head>

<meta content='width=device-width' name='viewport'>

<meta content='width=device-width' name='viewport'>

<meta content='text/html;charset=UTF-8' http-equiv='ContentType'>

<meta content='text/html;charset=UTF-8' http-equiv='ContentType'>

<title>スグマール</title>

<style type=”text/css”>

/* モバイル専用のCSSスタイルはここに記述します */

table[class=container] {

table[class=container] {

幅: 100% !important;

}

}

}

テキストを中央揃えにする

}

}

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

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

}

}

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

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

}

}

}

/* 通常のCSSスタイルはここに記述します */

table.container {width: 640px;

table.container {width: 640px;

}

</style>

</style>

</head>

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

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

color:#000000;”><center>

color:#000000;”><center>

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

class='container'>

<tr>

<tr>

<td>

<td>

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

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

cellpadding='10' align='left'>

<tr>

<tr>

<td class='logo'>

<td class='ロゴ'>

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

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

キャンペーン/2016年10月04日_キャンペーンプラス/画像/zohocampaigns.png”

width=”150”/>

幅='150' />

</td>

</tr></table>

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

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

cellpadding=”10” align=”left”>

cellpadding=”10” align=”left”>

<tr>

<tr>

<td>

<td>

<p><font size=”4”>ここに見出しが入ります</font></p>

</td>

</tr></table>

</td>

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

5

５

</tr>

</tr>

<tr>

<tr>

<td>

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

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

cellpadding=”20” align=”left”>

20のセルパディングを持つ、左揃えのテーブルです。

<tr>

<tr>

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

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

左のカラム

</tr>

</table>

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

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

cellpadding=”20” align=”left”>

cellpadding='20' align='left'>

<tr>

<tr>

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

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

右のカラム

</tr>

</table>

</td>

</tr>

</table>

</body>

</body>

</html>

採用できるさまざまなデザイン技術は、

さまざまなビューポートに対して、列の表示方法を変更することができます。小さな画面では、テキストを画像に折り返すことができます。

 <html><head>

 <html><head>

<style type=”text/css”>

<style type='text/css'>

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

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

table[class=contentInner]{

table[class=contentInner]{

幅：100％ !important;

}

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

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

幅：100％ !important;

}

}

td[class=zpcolumns]{

td[class=zpcolumns]{

表示：ブロック !important;

width:100% !important;

幅：100％！重要；

}

img[class=zpImage]{

img[class=zpImage]{

高さ：自動 !important;

max-width:480px !important;

max-width:480px !important;

width:100% !important;

width:100% !important;

}

}

td[class=txtsize]{

td[class=txtsize]{

width:100% !important;

width:100% !important;

フォントサイズ：16px !important;

line-height:125% !important;

line-height:125% !important;

}

}

</style>

</head>

<body>

<body>

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

<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”>

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

class='contentInner'>

<tbody><tr>

<tbody><tr>

<td align=”center” valign=”top” width=”50%” class=”zpcolumns”>

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

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

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

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

</td>

</tr></tbody>

</table>

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

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

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

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

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

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

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

class='contentInner'>

<tbody><tr>

<tbody><tr>

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

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

class='zpcolumns'>

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

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

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

<tbody><tr>

<tbody><tr>

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

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

<p style=”

<p style=”

フォントサイズ：12pt;

line-height: 22pt;

line-height: 22pt;

「私たちの周りの世界は忙しく、複雑です。私たちはそれをそうしました。

だから、再び簡単にしませんか？オフィスやワークスペースを自動化してください。

退屈な作業から解放されましょう。未来が呼んでいます、そしてあなたの

デスクがそれについてお答えできます。

</td>

</tr>

</tbody></table>

</tbody></table>

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

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

align=”left” class=”zpcolumns”>

align='left' class='zpcolumns'>

<tbody><tr>

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

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

フォントサイズ：12pt;

行の高さ：22pt;

私たちの周りの世界は忙しく、複雑です。私たちはそれをそうするようにしてきました。

だからなぜもう一度簡単にしないのですか？オフィスやワークスペースを自動化しましょう。

退屈な作業から自由になりましょう。未来が呼んでいます。

机がそれについて答えることができます。

</p></td>

</p></td>

</tr>

</tbody>

</tbody>

</table>

</td>

</tr></tbody>

</table>

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

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

</body></html>

スマートフォンなどの小さな画面では、魅力的でシンプルな外観を実現するために、主要な情報を表示し、セカンダリ情報をクリック可能なリンクにまとめて、クリックすると追加の詳細が表示されるようにします。これにより、読者は混雑したメールから解放されます。

<html><head>

<html><head>

<style type='text/css'>

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

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

table[class=contentInner]{

table[class=contentInner]{

幅：100％ !important;

}

}

table[class=zpcolumns]{

table[class=zpcolumns]{

表示：ブロック !important;

width:100% !important;

}

td[class=zpcolumns]{

td[class=zpcolumns]{

表示：ブロック !important;

width:100% !important;

width:100% !important;

}

}

img[class=zpImage]{

img[class=zpImage]{

高さ：自動 !important;

max-width:480px !important;

最大幅：480px !important;

幅：100％！重要；

}

td[class=zpdesktop_txt]

{

{

表示しない !important;

幅：100％ !important;

}

td[class=zcmobile_txt]

{

{

表示：ブロック !important;

幅：100％！重要；

}

}

td[class=zpmb_read]

td[class=zpmb_read]

{

{

表示：ブロック !important;

幅:120px !important;

}

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

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

{

{

表示：ブロック !important;

color: #fff !important;

color: #fff !important;

背景色: #aaa;

border-radius: 20px;

border-radius: 20px;

パディング: 0 8px;

text-decoration: none;

テキストの装飾: なし;

フォントの太さ: 太字;

フォントサイズ：11px;

位置: 絶対;

トップ：500px;

テキストの配置: 中央;

幅: 120px;

}

}

{

{

表示しない;

}

.zpmb_read:hover

.zpmb_read:hover

{

{

可視性:非表示;

}

}

.zpmb_read:hover + .zpdesktop_txt,

.zpmb_read:hover + .zpdesktop_txt,

.zpdesktop_txt:hover

.zpdesktop_txt:hover

{

{

表示: ブロック !important;

}

}

}

</style>

</head>

<body>

<body>

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

<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”>

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

class='contentInner'>

<tbody><tr>

<td align=”center” valign=”top” width=”50%” class=”zpcolumns”>

<img src=”http://zohopublic.com/zohocampaigns/zcnoimage.png” width=”600” style=”max-width: 600px;” class=”zpImage”>

<img src=”http://zohopublic.com/zohocampaigns/zcnoimage.png” width=”600” style=”max-width: 600px;” class=”zpImage”>

</td>

</tr></tbody>

</table>

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

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

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

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

class='contentInner'>

<tbody><tr>

<tbody><tr>

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

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

class='zpcolumns'>

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

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

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

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

<tbody><tr>

<tbody><tr>

<td valign=”top” class=”zpdesktop_txt”>

<p style=”

<p style=”

フォントサイズ: 12pt;

行の高さ：22pt;

「私たちの周りの世界は忙しくて複雑です。私たちはそれをそうするようにしています。

だから、再び簡単にしませんか？オフィスやワークスペースを自動化しましょう

退屈な作業から自由になりましょう。未来が呼んでいます。

机がそれについて答えることができます。私たちの周りの世界は忙しく、複雑です。

それを簡単にするために、私たちはそれを作りましたので、なぜ再び簡単にしないのですか？自動化してください

オフィスやワークスペースから日常的なタスクを解放するために。未来

あなたのデスクが呼んでいます、そしてそれに答えることができます。私たちの周りの世界

忙しくて複雑なものです。私たちはそれをそうするようにしていますので、なぜ簡単にしないのでしょうか。

再び？オフィスやワークスペースを自動化して、退屈な作業から解放されましょう

タスク。未来が呼んでいます。そして、あなたのデスクがそれに応えることができます。

私たちの周りの世界は忙しく、複雑です。私たちはそれをそうするようにしてきました、だから

なぜもう一度簡単にしないのですか？オフィスやワークスペースを自動化して解放しましょう

単調な作業から自分自身を解放してください。未来が呼んでいます、そしてあなたのデスク

私たちはあなたの質問に答えることができます。私たちの周りの世界は忙しく複雑です。私たちは

なぜ再び簡単にしないのですか？オフィスを自動化しましょう

またはワークスペースにアクセスして、退屈な作業から解放されましょう。未来は

あなたのデスクにかかってきた電話に応答することができます。

</td>

</tr>

<tr>

<tr>

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

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

表示: 非表示;

'>

<p style=”

<p style=”

フォントサイズ：12pt;

line-height: 22pt;

行の高さ：22pt;

「私たちの周りの世界は忙しく、複雑です。私たちはそれをそうしました」

なぜもう一度簡単にしないのですか？オフィスやワークスペースを自動化しましょう

退屈な仕事から自由になるために。未来が呼んでいる、そして

あなたのデスクがそれに答えることができます。私たちの周りの世界は忙しくて

複雑です。

</td>

</tr>

<tr>

<tr>

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

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

表示: 非表示;

「>

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

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

font-size: 12pt;

フォントサイズ：12pt;

line-height: 22pt;

行の高さ：22pt;

もっと少なく表示... もっと読む

フォントサイズ：12pt;

行の高さ：22pt;

「続きを読む」

3. デバイス間でのコンテンツの変更

以下のHTMLコンテンツを日本語に翻訳し、翻訳されたHTMLコンテンツのみを表示します。 Translated HTML Content:

4. スケーラブルな画像、GIF、およびビデオ

以下のHTMLコンテンツを翻訳したものを表示します。HTMLタグや属性（id、alt、styleなど）には変更を加えないでください。 Japanese HTML Content:

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

1. モバイル電話のユーザーには、親指で操作可能なコールトゥアクションボタンやリンクを提供してください。すべての要素が指で操作しやすいことを確認してください。
   
2. 読みやすいフォントサイズ、スタイル、色を使用してください。
   
3. デバイスごとにカラムやコンテンツの優先順位や階層を変更してください。
   
4. 読者の注意を引く領域に重要なコールトゥアクションボタンを配置してください。それらを明確で使いやすいものにしてください。
   
5. 小さい画面のために非必要な要素を非表示にし、最小限のページを提供してください。
   
6. 大きな固定幅の要素は使用しないでください。
   
7. 最適化されたビューポートを使用してください。
   
8. 常に水平スクロールを避けてください。