SaleTimer - ECセール残り時間カウントダウンサービス

楽天市場・Amazon・Yahoo!ショッピング・PayPayなど、主要ECサイトのセール終了時刻を秒単位でカウントダウン表示するWebサービスを開発しました。開催中のセール一覧、月次カレンダー、過去実績にもとづく次回開催予測をまとめて提供します。

プロジェクト概要

• 主要ECサイトのセール残り時間をリアルタイムにカウントダウン
• 開催中セールの一覧と月次カレンダー
• 過去の開催実績にもとづく次回開催予測
• セール別・プラットフォーム別の解説コンテンツによる検索流入獲得

依頼者の目指した目標と解決したい課題

ECサイトのセールは、プラットフォームごとに開催時期も終了時刻もばらばらです。買い物をする側は「楽天スーパーSALEはいつまでか」「Amazonのタイムセール祭りは次いつ開催されるのか」を調べるために、その都度それぞれの公式ページを見て回る必要がありました。

さらに、セールの終了時刻は日付だけが告知されていることが多く、「残り何時間か」は自分で計算するしかありません。締切間際の駆け込み購入を逃す、あるいは終わったセールを狙って無駄足を踏む、といったことが起きていました。

主要ECサイトのセール情報を1か所に集約し、終了までの残り時間をひと目で把握できるサービスが求められていました。

開発したシステムの特徴

• リアルタイムカウントダウン:
  • 開催中セールの終了時刻までを秒単位で表示
  • Stimulusコントローラによるクライアントサイド更新で、ページを開いたまま残り時間が減り続ける
  • 複数セールの同時開催に対応
• セールカレンダー:
  • 月次でその月の主要キャンペーンを一覧表示
  • 開催中・終了済み・開催予定を区別して表示
• 次回開催予測:
  • 過去の開催実績を蓄積し、開催間隔から次回時期を予測
  • 十分な履歴が貯まっていないセールは、予測を出さず直近の開催実績を提示する設計
• 解説コンテンツ:
  • セール別・プラットフォーム別のガイド記事
  • 「次はいつ開催されるか」「終了時間をどう確認するか」といった検索意図に対応

技術的背景

Ruby on Rails をベースに、Hotwire（Turbo / Stimulus）で構築しています。カウントダウンのように「同じページ上で表示だけが動き続ける」UIは、専用のStimulusコントローラを1つ置くだけで済み、SPAフレームワークを導入せずに実現しています。JavaScriptの配信にはimportmapを使い、ビルド工程を持たない構成にしました。

スタイリングはTailwind CSSを使用しています。

このサービスは検索流入が中心となるため、SEOを設計段階から考慮しています。セール別・プラットフォーム別にページを分け、それぞれが個別の検索クエリに対応する構成としました。カウントダウンはクライアントサイドで動きますが、ページ自体はサーバーサイドでレンダリングされるため、クローラが内容を取得できます。

ホスティングにはfly.ioを使用しています。

解決された問題

利用者は、複数のECサイトを個別に確認しなくても、開催中のセールと残り時間を1ページで把握できるようになりました。「いつ終わるか」が秒単位で表示されるため、締切間際の判断がしやすくなっています。

また、次回開催予測とカレンダーにより、「今買うべきか、次のセールを待つべきか」という判断材料も提供できるようになりました。

チーム構成

• (KW) プロジェクトマネージャー
• (KW) バックエンドエンジニア
• (KW) フロントエンドエンジニア

(KW) はKaito Wingsが担当

プロジェクト期間

• 要件定義・情報設計 - 1ヶ月
• 開発・テスト - 3ヶ月
• コンテンツ拡充・SEO改善 - 継続

システム構成

• Ruby on Rails
• Hotwire (Turbo, Stimulus)
• importmap
• Tailwind CSS
• fly.io (ホスティング)