Email Pixel Artを使ってメール画像の表示失敗に備える

Litmusのブログを見てたら「Email Pixel Art: The Rarest and Coolest Defensive Design Tactic」という記事があって面白かったので自分でも少し試してみました。

Email Pixel Art

画像を埋め込んだメールは受信環境などによって上手く表示されないことがありますが、Email Pixel Artはそれを逆手に取った発想で、imgのaltタグを工夫して画像の代わりとなる絵を描くものです。

百聞は一見に如かず、なのでLitmusの他、Email Monksの「Top Pixel-Art in Email Design Inspirations of all time」にあった例をお借りします。

LEGO

https://emailmonks.com/blog/email-inspirations/pixel-art-in-email-design-inspirations/ より

McDonalds

https://emailmonks.com/blog/email-inspirations/pixel-art-in-email-design-inspirations/ より

PlayStation New Zealand

https://litmus.com/blog/email-pixel-art-the-rarest-and-coolest-defensive-design-tactic より

どれもすごいけど、コンボイすごっ！

作成方法

Litmusの記事にも書いてありますが、こちらの記事が具体例もあってわかりやすかったです。

主な流れは
1. ピクセルで表示する絵をスケッチする
2. 画像を細かくスライスする
3. <table>タグをたくさん使って実装する

ということで実際にちょっと試してみました。

以下弊社ロゴにある青い部分のマークで試してみました。

簡単なデザインなので1は飛ばし、画像をスライスして<table>タグで並べました。
画像は3つに分割して

画像1 (左)

画像2 (右上)

画像3 (右下)

メールのbodyはシンプルでポイントはimgタグのstyleを指定して、画像表示に失敗してaltが表示されたときの描画を制御することです。実際にはborder=0にしたりと他に色々細かいstyle設定が必要そうです。

<table>
  <tbody>
    <tr>
      <td width="62" height="180">
        <img src="" style="width: 100%; height: 100%; background-color: #0D248A;" alt="">
      </td>
      <td>
        <table>
          <tbody>
            <tr>
              <td width="113" height="110">
                <img src="" style="width: 100%; height: 100%; background-color: #0D248A;" alt="">
              </td>
            </tr>
            <tr>
              <td width="113" height="68">
                <img src="" style="width: 100%; height: 100%; background-color: #0D248A;" alt="">
              </td>
            </tr>
          </tbodY>
        </table>
      </td>
    </tr>
  </tbody>
</table>

SendGridのマーケティングキャンペーン機能使って実装し、画像表示有無を並べてみた結果は以下です。

ロゴがシンプルすぎてあまりインパクトにですが(^^;画像表示に失敗してもそのままロゴ出せそうですｗ