ユニクロのメルマガのカウントダウンの仕組みが面白い(が、ちょっと危うい)

こんにちは、つたちこです。
面白い仕組みを見かけました。

 

ユニクロのメルマガ(HTMLメール)を受信しています。
毎日のように、セールや、新商品のお知らせなどが届きます。

 

キャプチャ:ユニクロ HTMLメール

ユニクロからDMが届きました

 

そんなユニクロのHTMLメールを開いたところ、「特別価格」が終了するまでのカウントダウンが掲載されていました。

1秒ごとに数字がへっていくカウントダウンです。
おお、これは煽り効果がありそう。

最初はそれほど気にせずにそのままスルーしたんですが、「ん? ちょっと待てよ」と戻ってきました。

 

このカウントダウン、どうやって表示してるんだろ?

 

<スポンサーリンク>

HTMLメール、以前仕事で作ったことが何度もあります。
仕組みはWebページの応用です。
HTMLコードで書かれたメールを送信するのです。
その時、メールに画像は添付せず、サーバに置いた画像を読みにいくようになっています。

気になるカウントダウン部分を触ってみると、テキストではなく、GIF画像でした。
HTMLメールではJavaScriptなどは使えないので、当然といえば当然なのですが。

いやでも、GIFアニメーションでカウントダウン!?

ぐるぐる疑問がわいてきます。

送信時から終了時間までのGIFを作る?!
いやでも、ユーザーがメールを開いた時のタイミング次第で残り時間が変わるのに、どうやって判別するんだ!?

 

カウントダウン画像をローカルにダウンロードしてみると、その画像単体でもカウントダウンしながら動いています。
んー? 完全にただのGIFアニメーション。
どうやって現在の残り時間を反映してるんだろう?

 

メールを見ながらぐるぐる考えているうちに1つ気付きました。

あれ、このGIF、さっきから時間が減らない……?

タイムリープ!?
じゃなくて、じっと観察していると、約1分でアニメがループしていることがわかりました。
※例の場合、14時間14分7秒⇒4時間15分6秒に変わってまた減り続ける。

キャプチャ:ユニクロ HTMLメール

つまり、60コマのGIFアニメーションになっています。
ためしに、メールをリロードすると、残り時間が変わりました。画像を読み込みなおしたようです。

なるほど、受信者がメールを開いたタイミングで、その残り時間に合った画像(GIFアニメーション)を取得させる仕組み。

受診側のHTMLソースは変えられないので、アクセスごとに、そのタイミングにあった同じファイル名のGIFアニメ画像(カウントダウン画像)を、書き換える処理をしているのかな?

 

<スポンサーリンク>

一方、リスクもありそうです。

たとえば、1日前に開いたメール画面をそのまま放置しておいて、キャンペーン終了後に見たら、まだ「残り1日」と表示された。
「残り時間がまだあると書いてあるのに、アクセスしたら終わっていた!」
なんていうクレームとか、ありそう。

ちなみに私の場合(Gmailで受信)、いったん閉じたメールをもう一度開いてみましたが、キャッシュで、前と同じ残り時間の画像が表示されました(強制リロードしたら時間が切り変わりました)。
開きっぱなしじゃなくても、見直したときに誤解を生む可能性があります。

「終了期日はメール内に日付で書いてあるので優先される」と思い切ったのだと思いますが、ちょっと危うい気がしました。

 

念のため、メール内をもう一度見てみましたが、カウントダウン表記に関する注記などはありませんでした。
ぐるぐるループするカウントダウン、正確な残り時間ではないわけなので、どこか端っこにでも「※カウントダウンはイメージです」的な文言があったほうがよい気も。

おもしろいし、残り時間を煽る仕組みでつい見ちゃう。でも、もしも私がユニクロの担当だったら、少なくともどこかに注記を絶対入れたい。
石橋をたたいて渡りたい私……。

 

うだうだと懸念事項を書きましたが、たぶん、普通にDMとして見ているだけなら、ループの仕組みに気が付かないと思います。
わたしもしばらくの間、全然気づけませんでした。
1分、ていうのが長すぎず短すぎず、上手い仕組みです。
(1分間、ずっとメルマガのヘッダー近辺だけを見ることも、ほとんどなかろう……)
そして、その残り時間がどこまで正確なのかも、そこまで気にしない気がする。

 

最近はLINEなどでの広告のほうが効果がありそうに思ってましたが、HTMLメールでもまだまだ力を入れているのかな。
感心させられた一件でした。

 

(追記)
そういえば、と調べてみたら、HTMLメールでカウントダウンの仕組み自体は以前からあるみたいでした。
同じシステムかはわかりませんが……。

スポンサーリンク
レクタングル(大)広告




レクタングル(大)広告




この記事をシェアする

フォローする

おすすめコンテンツ