Scalable, Fluid or Responsive: Understanding Mobile Email Approachesより抜粋と要約。
日本でもいよいよマーケティングメールにHTML形式が使われるようになってきました。受け手の興味を引くためにはきれいにレイアウトされたHTMLメールは効果的ですよね。また、モバイルでのメール閲覧がより重要になってきています。アメリカでは2011年と比較して、モバイルでメール閲覧が400%に上がっており、また2013年のデータとして、モバイルでのメール開封率は50%を超えたというニュースが上がってきています。
そのため、これからのメールはモバイル・PCなど様々なデバイスでちゃんと表示ができることがとても大切になってきています。このためのメールのデザイン手法には、主に以下の3つの手法があります。
- スケーラブルデザイン
- フルードデザイン
- レスポンシブデザイン
スケーラブルデザインは比較的導入がしやすいデザインと言えます。これはずばり、HTMLでレイアウトする際に、テーブルや画像のサイズを指定せずに記述するということです。サイズを指定しないので、画面サイズがPCの様に大きくてもモバイル環境の小さい画面でもレイアウトの崩れなく表示することができるようになります。
スケーラブルデザインでは、レイアウト作成の際に下記に気をつけましょう。
- （できれば表はシングルカラムにするなど）シンプルなレイアウト構成
- スマホでも見やすいくらいに大きなテキスト
- リンクなどは大きく、タッチしやすいサイズに
フルードデザインはスケーラブルデザインとレスポンシブデザインの中間に位置するデザインと言えます。HTMLレイアウトの際、サイズをピクセル数による絶対値ではなく、パーセントによる相対値で指定します。これはWebでのリキッドレイアウトに似た手法となります。
ただそれだけに、ワイドPCモニタにて全画面でメールが表示された場合など、文章が端から端まで長く表示されてしまうというデメリットもあります。それを避けるために下記のようにHTMLコードを書くのが良いでしょう。
<table border="0" cellpadding="0" cellspacing="0" width="500" class="wrapper"> <tr> <td> <table border="0" cellpadding="0" cellspacing="0" width="100%"> ...Content... </table> </td> </tr> </table>
そしてこのメディアクエリを指定することで、固定長のフルードを利用します。
@media screen and (max-width: 525px) { table[class="wrapper"]{ width:100% !important; } }
レスポンシブデザインは、PC・モバイルすべての環境においてベストな表示手法です。フルードデザインをより進化させて、画面サイズによってレイアウトを変更するようにCSSを記述します。
たとえば下記のように記述することで、画面幅525ピクセルまでのデバイスでのレイアウトを指定します。
@media screen and (max-width: 525px) { img[class="hide"]{ display:none !important; } }
それだけに、レスポンシブデザインですべてレイアウトをするには手間がかかりますしHTML/CSSの知識もそれなりに必要になります。うまく3つの手法の特徴を掴んで使い分けるとよいと思います。