カウントダウンブロック
ローンチ、セール、締切のための、ライブでカウントを続ける締切タイマーです — サーバー側でアニメーションGIFとしてレンダリングされます。これは、Outlookを含む主要なすべてのメールクライアントで実際にカウントを続けられる唯一の手法です。
仕組み
どのメールクライアントも、ゼロから時計をアニメーションさせるほど確実にCSSアニメーションやJavaScriptを実行できないため、カウントダウンブロックはそれを試みません。代わりに、サーバー側でレンダリングされたアニメーションGIFを指す単純な<img>を埋め込みます。フェッチが行われるたびに、MailInAppは設定された締切までの残り時間を計算し、「DD:HH:MM:SS」形式のデジタル時計画像を新たにゼロから符号化します(ラップされたライブラリではなく、ゼロから作られたGIF89aエンコーダーです)。1秒ごとに1フレームを60フレーム分描き、最後のフレームで停止するため、開いた瞬間から丸1分間は目に見えてカウントし、その後は静止します。画像は送信時点で一度だけ事前レンダリングされるのではなく、フェッチされた時点で実際の締切から再生成されるため、受信者がいつ、何回メールを開いても正確です。エンドポイントはno-cacheヘッダーも送信するため、Gmailのような画像プロキシは、古いキャッシュ済みフレームを再利用するのではなく、開封ごとに再取得します。
画像URL自体はHMAC署名付きです(締切のタイムスタンプと色が署名に埋め込まれています)。そのため、MailInApp以外の誰かがこれを単独のGIFカウントダウン・レンダラーとして使うことはできません。エンドポイントはインタラクションや開封トラッキングのエンドポイントと同様に公開されていますが、署名を依頼されたものしか提供しません。
カルーセルやアコーディオンにあるような、メールとライブビューの分岐はここにはありません — どちらのコンテキストも同一の画像エンドポイントを埋め込みます。メールでは絶対URLを使い(メールにはパスを解決するためのページオリジンがありません)、ライブビューではオリジン相対のURLを使います。
画像そのものを超える、別の「フォールバックティア」もありません。GIFをアニメーションできないクライアントでも、最初のフレーム — プレースホルダーではなく、意味のある正確な残り時間のスナップショット — が表示されます。ブロックのalt属性とメールのプレーンテキストパートは、どちらも同じ残り時間を言葉で伝えます(例:「Offer ends in 2d 4h」)。そのため、画像が完全にオフの状態でも締切は読み取れます。
締切が過ぎると、ブロックはGIFのレンダリングを停止し、代わりに単純な終了状態のテキストに切り替わります — それ以上の画像リクエストは発生せず、古い「00:00:00:00」が残り続けることもありません。
設定可能なフィールド:
- ラベル — カウントしていく画像の上に表示されるテキストです。例:「Offer ends in」。
- 終了日時 — 日付と時刻として選ぶ締切です。
- 色 — 数字/テキストの色で、レンダリングされるGIFと終了状態のテキストの両方で使われます。
- フォントサイズ(px) — カウントダウン中のラベルのフォントサイズです。
- 終了後のフォントサイズ(px) — 締切を過ぎた後に表示される「このオファーは終了しました」というメッセージのフォントサイズです。
カウントダウンは画像やテキストブロックと同様の純粋なコンテンツです — タップしたり送信したりするものが何もないため、インタラクションイベントを一切生成せず、回答ダッシュボード、CSVエクスポート、プロジェクトのWebhookのいずれにも表示されません。
例
Subject
Our biggest sale of the year starts now
24時間の締切を設定したフラッシュセールのメールが典型的な使い方です: カウントダウンが目に見えて減っていくことで、緊急性が一目で伝わります。受信者がメールを開いたのが到着直後でも、セールがすでに終わった2日後でも、正確さは保たれます — 後者の場合は固まった偽の表示ではなく、正しく終了状態を示します。在庫が限られた商品ドロップでは、カウントダウンを商品ブロックと組み合わせることで、時計と在庫数が一緒に緊急性を伝えられます。パターン全体についてはEコマースと商品ドロップを参照してください。イベント登録のリマインダーでは、(イベント自体ではなく)登録の締切までをカウントダウンできます — イベント自体のカウントダウンにはカレンダーに追加を使ってください — これにより、様子見をしている人たちに、期限が閉まる前の行動を促せます。
静的フォールバックの見え方
<div style="margin:12px 0">
<p style="margin:0 0 6px;font-size:16px;font-weight:700;color:#111827">Offer ends in</p>
<img
src="https://mailinapp.com/api/countdown?t=1753401600000&c=111827&s=9f2a...&"
width="207" height="34"
alt="Offer ends in 2d 4h"
style="display:block;max-width:100%;height:auto"
>
</div>
これを超える別の「フォールバックマークアップ」はありません: すべてのクライアントが同じ<img>タグをレンダリングします。違いがあるのは、そのクライアントがGIFをアニメーションできるか(ほとんどのクライアントはできます)、最初のフレームで停止するか(一部のレガシークライアント)だけであり、どちらの場合でも正確な残り時間が表示されます。