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

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

どれほど魅力的なキャンペーンメールを作成しても、顧客の画面上で正しく表示されなければ、キャンペーンは失敗したも同然でしょう。メールの内容に顧客を引き込む以前の問題です。自分では完璧なデザインに見えているかもしれませんが、顧客のデバイス上ではどうでしょう。見え方を確認してみたことはあるでしょうか。幅広い層の顧客にメールを送信する場合、メールの表示に使用されるデバイスやソフトウェアの種類もさまざまです。画面のサイズはPCなら大きめ、携帯電話（スマートフォン）なら小さめ、タブレットならその中間になります。統計によれば、メールの表示に使用されるデバイスは、携帯電話（スマートフォン）の割合が、PCなどのデスクトップの割合に比べて急増しているそうです。意図したとおりのメール内容をすべてのデバイスやメールサービスで表示するとなると、面倒な作業に思えるかもしれません。そこで、「レスポンシブデザイン」という解決策があります。レスポンシブデザインとは、受信者のデバイスを検出し、デバイスの画面サイズに応じてメールのレイアウトやデザインを自動調整して、適切に表示する手法です。デバイスに応じて最適化されるレスポンシブデザインのメールの作成方法を見てみましょう。


モバイルフレンドリーなマーケティングの重要性

モバイルフレンドリーなマーケティングにおいては、デバイスを問わず見やすいコンテンツを用意できるかどうかが鍵になります。この10年で、インターネットにつながるデバイス数は急増し、画面サイズや表示形式（横長、縦長、正方形）も多種多様になっています。顧客体験の向上のためには、メール表示の最適化が不可欠です。メールの表示内容が自動調整されれば、顧客が画面を横にスクロールしたり、文字を拡大縮小したりする手間がなくなります。表示の崩れたニュースレターを読みたい顧客がいるでしょうか。無視するか削除するだけでなく、登録解除してしまう恐れがあります。よほど重要な内容でない限りは、デバイスを変えてまで読もうとする顧客はいないでしょう。インターネットの普及に伴い、携帯電話（スマートフォン）の普及率は日増しに高くなっています。低価格のスマートフォンも増えており、一般消費者に最も好まれる通信手段となりました。モバイルデバイスのサイズや解像度に左右されず、最適に表示されるキャンペーンメールを作成したいなら、今こそ始めどきです。

あらゆるデバイスに対応するメールのデザイン

たとえば、液体を容器に注ぎ入れると、その中ですばやく広がり、その形に収まります。メールのコンテンツにおいても、望ましいデザインといえるでしょう。レスポンシブデザインのメールを作成することで、これを実現できます。レスポンシブデザインは、あらゆる画面サイズに適合し、受信者のデバイスに応じてメールの表示や操作が最適化されます。これにより、デバイスに左右されずに、メールのコンテンツを最適に表示できます。
レスポンシブデザイン＝フルイドデザイン＋アダプティブデザイン
フルイドデザイン（流動型）では、スタティックデザイン（固定型）と異なり、表示幅をパーセントで指定します。そのため、レイアウト内のカラム同士が相対関係となり、デバイスの画面サイズに合わせて変化します。アダプティブデザイン（適応型）では、メディアクエリーを使用して、さまざまなデバイスに適合した固定デザインを選択して表示します。スタイルはデバイスごとに定義します。サーバーはデバイスを照合して、最適なコンテンツを表示します。つまり、レスポンシブデザインは、フルイドデザインとアダプティブデザインの組み合わせなのです。あらゆる画面解像度に対して、フルイドの幅調整とアダプティブの適合コンテンツを使用して、最適に表示できます。

レスポンシブデザインのメリット

携帯電話（スマートフォン）が普及した結果、Webサイトを作成する際に、PC用のデザインとモバイル用のデザインがそれぞれ用意されるようになりました。一方、レスポンシブデザインを活用すると、1つのデザインを作成するだけで、複数のデバイスに応じて表示を最適化できます。キャンペーンメールについてもレスポンシブデザインを活用することで、表示サイズを固定せずに相対的に変化して、デバイスを問わず美しく表示できます。また、PC用とモバイル用のメールのコンテンツを決めておき、デバイスごとにコンテンツを変えることもできます。コンテンツや画像のサイズ変更、コンテンツの非表示、カラムの整列など、デバイスごとに外観を一変することが可能です。

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

レスポンシブデザインでは、CSSとメディアクエリーを使用し、サイズに基づいてコンテンツのサイズ変更、表示、非表示、整列などを実行できます。レスポンシブデザインのメール作成には、メディアクエリーを使用します。メディアクエリーとは、条件に基づいて動作するスタイルのセットです。スタイルはビューポートごとに定義します。ビューポートとは、デバイス内の表示領域のことで、デバイスによって異なります。携帯電話（スマートフォン）の場合、ビューポートはPCより小さくなります。レスポンシブデザインの基本的なルールは、以下のとおりです。
  1. 画面サイズが「x」の場合、スタイルに「a」を定義する。
  2. 画面サイズが「y」の場合、スタイルに「b」を定義する。

Zoho Campaignsのメリット

Zoho Campaignsでレスポンシブデザインのメールを作成する場合、特別なコーディングスキルは必要ありません。事前に用意されたメールテンプレートがレスポンシブデザインに対応しているため、あらゆるデバイスやメールクライアントでメール表示が自動調整されます。必要な作業は、効果的な配信内容を検討することと、組織のブランドに合わせてテンプレートを微修正することだけです。
また、受信トレイのプレビュー機能を使用すると、メールの表示をテストして万全を期すことができます。受信側の目線でメールを確認することで、表示崩れなどの見落としを防ぎ、すべての顧客のデバイスに完璧な美しいメールを表示できます。

レスポンシブデザインの手引き

近年、インターネット対応のデバイスが急速に浸透しています。画面のサイズや解像度は、デバイスによって千差万別です。そのため、作成したメールについても、デバイスやメールクライアントが変われば見え方はまったく変わってしまいます。このような状況では、独創的なデザインはもとより、すべてのデバイスで最適な表示を実現することも重要になります。レスポンシブデザインを活用することで、デバイスに応じた最適な表示をかんたんに実現できます。レスポンシブデザインでは、カラムには流動的な幅を使用し、各ビューポートと各ブレイクポイントには固定的なスタイルを使用します。

レスポンシブデザインの実践

レスポンシブデザインでは、CSSとメディアクエリーを使用して、さまざまなデバイスに適用するスタイルを定義します。コンテンツや画像のサイズ変更、コンテンツの非表示、カラムの整列など、デバイスごとに外観を一変することが可能です。
  1. CSS：HTML要素の表示スタイルを定義するための言語です。
  2. メディアクエリー：画面サイズや解像度に応じてコンテンツの表示スタイルを変える機能です。
複数のビューポートに流動幅を定義すると、ウィンドウのサイズに応じてレイアウトを自動調整できます。以下のとおり、単純な条件文として機能します。
  1. 画面サイズが「x」の場合、スタイルに「a」を定義する。
  2. 画面サイズが「y」から「z」までの範囲の場合、スタイルに「b」を定義する。
  3. 上記以外の場合、スタイルに「c」を定義する。

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

引用
<style type=”text/css”>
  @media only screen and (max-device-width: 480px) { /* モバイル
専用のCSS */
  }
/* 通常のCSS */
</style>

メディアクエリー：

引用
<style type=”text/css”>
@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：条件文として機能します。
* !important：インラインスタイルを上書きします。
* meta name = viewport
メタタグ：ブラウザーにページ情報を伝えます。
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>
<td class=”logo”>
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>
<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>

コード全文：

引用
<html>
<head>
<meta content=”width=device-width” name=”viewport”>
<meta content=”text/html;charset=UTF-8” http-equiv=”ContentType”>
<title>メールマガジン</title>
<style type=”text/css”>
@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>
<td class=”logo”>
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>
<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. コンテンツ、画像、動画の整列

ビューポートごとにカラムの向きを変更できます。小さな画面の場合、画像に対してテキストが回り込むように設定することも可能です。
 
引用
<html><head>
<style type=”text/css”>
@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”>
<tbody><tr>
<td align=”center” valign=”top” width=”50%” class=”zpcolumns”>
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”>
<tbody><tr>
<td align=”center” valign=”top” width=”50%”
class=”zpcolumns”>
<table border=”0” cellpadding=”10” cellspacing=”0”
width=”300” align=”left” class=”zpcolumns”>
<tbody><tr>
<td valign=”top” class=”txtsize”>
<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”>
<tbody><tr>
<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. 段階的開示

小さな画面でも見やすいように、最小限の内容を表示します。主要な情報のみを表示し、補助的な情報をリンク先に隠しておくことで、受信者によってリンクがクリックされたときにはじめて詳細を表示できます。これにより、メールの内容を整理して、効果的に伝えることができます。

引用
<html><head>
<style type=”text/css”>
@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”>
<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”>
</td>
</tr></tbody>
</table>
</td></tr><tr><td>
<table border=”0” cellpadding=”0” cellspacing=”0” width=”600”
class=”contentInner”>
<tbody><tr>
<td align=”center” valign=”top” width=”100%”
class=”zpcolumns”>
<table border=”0” cellpadding=”10” cellspacing=”0”
width=”600” align=”left” class=”zpcolumns”>
<tbody><tr>
<td valign=”top” class=”zpdesktop_txt”>
<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;
“>less...</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. デバイスごとのコンテンツの切り替え

コンテンツやCTA（Call to Action：受信者にとってもらいたい行動）に対して、デバイスごとに表示の優先順位を設定します。特に、携帯電話（スマートフォン）の場合、最も重要なCTAは表示領域内に配置する必要があります。PCとモバイルでコンテンツを切り替えることもできます。

引用
<html xmlns=”http://www.w3.org/1999/xhtml” xmlns:o=”urn:schemasmicrosoft-com:office:office” xmlns:v=”urn:schemas-microsoftcom:vml”><head>
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<style type=”text/css”>
@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”>
<tbody><tr><td>
<table border=”0” cellpadding=”0” cellspacing=”0” width=”100%”
class=”contentInner”>
<tbody><tr>
<td align=”center” valign=”top” class=”zpcolumns”>
<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”>
<tbody><tr>
<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>
<tr><td>
<table border=”0” cellpadding=”0” cellspacing=”0” width=”100%”
class=”contentInner”>
<tbody><tr>
<td align=”center” valign=”top” class=”zpcolumns”>
<table align=”center” cellpadding=”0”
cellspacing=”0” style=”font-size:12px;border:0px;”>
<tbody><tr>
<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 style=”color:#000000;”>
こちらをクリックしてください
</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”>
<tbody><tr>
<td align=”center” valign=”top” class=”zpcolumns” style=”
height: 20px;
“>
</td></tr></tbody>
</table></td></tr></tbody></table>
</body>
</html>

4. 画像、GIF、動画の拡大縮小

画像、背景画像、GIF、動画のサイズをビューポートごとに変更することで、デバイスに応じたスムーズな拡大縮小が可能になります。

引用
<html><head>
<style type=”text/css”>
@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”>
<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”>
</td>
</tr></tbody>
</table>
</td></tr><tr><td>
<table border=”0” cellpadding=”0” cellspacing=”0” width=”600”
class=”contentInner”>
<tbody><tr>
<td align=”center” valign=”top” width=”50%”
class=”zpcolumns”>
<table border=”0” cellpadding=”10” cellspacing=”0”
width=”300” align=”left” class=”zpcolumns”>
<tbody><tr>
<td valign=”top” class=”txtsize”><img
class=”zpImage” style=”
width: 270px;
“></td>
</tr>
</tbody></table>
<table border=”0” cellpadding=”10” cellspacing=”0”
width=”300” align=”left” class=”zpcolumns”>
<tbody><tr>
<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>

レスポンシブデザインのメールの効果を最大化するには

  1. モバイル向けのメールでは、CTAのボタンやリンクがタッチ操作に対応している必要があります。それ以外の要素もすべてタッチ操作への対応が必要です。
  2. 文字には読みやすいサイズ、スタイル、色を設定します。
  3. デバイスごとにカラムやコンテンツの優先順位を設定し、表示順を切り替えます。
  4. 重要なCTAボタンは、目立つ領域に配置します。分かりやすさと使いやすさを考慮します。
  5. 小さな画面では、重要でない要素を隠して、ページのサイズを最小限に抑えます。
  6. 大きな固定幅の要素は使用しません。
  7. 最適なビューポートを使用します。
  8. 横スクロールは使用しません。






              Zoho Campaigns Resources

                Zoho WorkDrive Resources




                  • Desk Community Learning Series


                  • Digest


                  • Functions


                  • Meetups


                  • Kbase


                  • Resources


                  • Glossary


                  • Desk Marketplace


                  • MVP Corner


                  • Word of the Day


                  • Ask the Experts






                          Latest Feature Updates



                                  Resources

                                  Videos

                                  Watch comprehensive videos on features and other important topics that will help you master Zoho CRM.



                                  eBooks

                                  Download free eBooks and access a range of topics to get deeper insight on successfully using Zoho CRM.



                                  Webinars

                                  Sign up for our webinars and learn the Zoho CRM basics, from customization to sales force automation and more.



                                  CRM Tips

                                  Make the most of Zoho CRM with these useful tips.