フルイドデザイン（流動型）では、スタティックデザイン（固定型）と異なり、表示幅をパーセントで指定します。そのため、レイアウト内のカラム同士が相対関係となり、デバイスの画面サイズに合わせて変化します。アダプティブデザイン（適応型）では、メディアクエリーを使用して、さまざまなデバイスに適合した固定デザインを選択して表示します。スタイルはデバイスごとに定義します。サーバーはデバイスを照合して、最適なコンテンツを表示します。つまり、レスポンシブデザインは、フルイドデザインとアダプティブデザインの組み合わせなのです。あらゆる画面解像度に対して、フルイドの幅調整とアダプティブの適合コンテンツを使用して、最適に表示できます。
レスポンシブデザインのメリット
携帯電話（スマートフォン）が普及した結果、Webサイトを作成する際に、PC用のデザインとモバイル用のデザインがそれぞれ用意されるようになりました。一方、レスポンシブデザインを活用すると、1つのデザインを作成するだけで、複数のデバイスに応じて表示を最適化できます。キャンペーンメールについてもレスポンシブデザインを活用することで、表示サイズを固定せずに相対的に変化して、デバイスを問わず美しく表示できます。また、PC用とモバイル用のメールのコンテンツを決めておき、デバイスごとにコンテンツを変えることもできます。コンテンツや画像のサイズ変更、コンテンツの非表示、カラムの整列など、デバイスごとに外観を一変することが可能です。
レスポンシブデザインのメールの作成方法
レスポンシブデザインでは、CSSとメディアクエリーを使用し、サイズに基づいてコンテンツのサイズ変更、表示、非表示、整列などを実行できます。レスポンシブデザインのメール作成には、メディアクエリーを使用します。メディアクエリーとは、条件に基づいて動作するスタイルのセットです。スタイルはビューポートごとに定義します。ビューポートとは、デバイス内の表示領域のことで、デバイスによって異なります。携帯電話（スマートフォン）の場合、ビューポートはPCより小さくなります。レスポンシブデザインの基本的なルールは、以下のとおりです。
- 画面サイズが「x」の場合、スタイルに「a」を定義する。
- 画面サイズが「y」の場合、スタイルに「b」を定義する。
Zoho Campaignsのメリット
Zoho Campaignsでレスポンシブデザインのメールを作成する場合、特別なコーディングスキルは必要ありません。事前に用意されたメールテンプレートがレスポンシブデザインに対応しているため、あらゆるデバイスやメールクライアントでメール表示が自動調整されます。必要な作業は、効果的な配信内容を検討することと、組織のブランドに合わせてテンプレートを微修正することだけです。
また、受信トレイのプレビュー機能を使用すると、メールの表示をテストして万全を期すことができます。受信側の目線でメールを確認することで、表示崩れなどの見落としを防ぎ、すべての顧客のデバイスに完璧な美しいメールを表示できます。
レスポンシブデザインの手引き
近年、インターネット対応のデバイスが急速に浸透しています。画面のサイズや解像度は、デバイスによって千差万別です。そのため、作成したメールについても、デバイスやメールクライアントが変われば見え方はまったく変わってしまいます。このような状況では、独創的なデザインはもとより、すべてのデバイスで最適な表示を実現することも重要になります。レスポンシブデザインを活用することで、デバイスに応じた最適な表示をかんたんに実現できます。レスポンシブデザインでは、カラムには流動的な幅を使用し、各ビューポートと各ブレイクポイントには固定的なスタイルを使用します。
レスポンシブデザインの実践
レスポンシブデザインでは、CSSとメディアクエリーを使用して、さまざまなデバイスに適用するスタイルを定義します。コンテンツや画像のサイズ変更、コンテンツの非表示、カラムの整列など、デバイスごとに外観を一変することが可能です。
- CSS：HTML要素の表示スタイルを定義するための言語です。
- メディアクエリー：画面サイズや解像度に応じてコンテンツの表示スタイルを変える機能です。
複数のビューポートに流動幅を定義すると、ウィンドウのサイズに応じてレイアウトを自動調整できます。以下のとおり、単純な条件文として機能します。
- 画面サイズが「x」の場合、スタイルに「a」を定義する。
- 画面サイズが「y」から「z」までの範囲の場合、スタイルに「b」を定義する。
- 上記以外の場合、スタイルに「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”>
<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>
<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”>
<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>
<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>
レスポンシブデザインのメールの効果を最大化するには
- モバイル向けのメールでは、CTAのボタンやリンクがタッチ操作に対応している必要があります。それ以外の要素もすべてタッチ操作への対応が必要です。
- 文字には読みやすいサイズ、スタイル、色を設定します。
- デバイスごとにカラムやコンテンツの優先順位を設定し、表示順を切り替えます。
- 重要なCTAボタンは、目立つ領域に配置します。分かりやすさと使いやすさを考慮します。
- 小さな画面では、重要でない要素を隠して、ページのサイズを最小限に抑えます。
- 大きな固定幅の要素は使用しません。
- 最適なビューポートを使用します。
- 横スクロールは使用しません。